Why Photoshop Layer comps are a good thing

Jul 2nd, 2012 by Max Tokman

The bane of every front end developer's day is receiving a hastily put together Photoshop file, with unused exploration layers, layers with default names (Layer 157, anyone?) and general lack of organization.  As the developer tries to identify which layers correspond to a particular webpage, the simple process of turning over creative files to developers can turn into a painful endeavor, delaying production and impacting timelines.

From a creative's perspective, organizing art files in a production-ready format is always a challenge.  Client-driven demands put pressure on proper organization and cleanup of the files, resulting in an overall state only the original creator can love and understand.  While some creatives manage to keep a tight control over organization of the file with layer sets and proper naming, there are shortcut solutions for times when this ideal approach is not feasible.

Proper use of Layer comps palette, introduced back in Photoshop CS, is one such solution. While it will not clean up your artwork and give every layer a meaningful name, it will make a programmer's job a whole lot easier. Located in "Window / Layer comps" palette, it is a snapshot of all layers and effects that need to be turned on to generate a particular web page.  As you finalize each web page in Photoshop, create a new comp in "Layer comps" palette and save it, with a name matching that of a web page.

Once the file is complete, and all screens are assigned to individual comps, review each page in Photoshop by turning on one comp at a time.  If everything looks good, your file is ready for production!


wordpressSEOADAWeb Developmentweb designDrupalproductionHTML5responsive designcompliancesecurityCSSdesignTestingPhotoshopproduction tipsFlashtechnologiestoolsgoogletypographyGoogle Analyticsmarketingautomationharness-bbeta testingbrowserSSLE-commercethemesweb standardsplug-inQAwebsite buildingapp developmentweb preflightfirefoxJavaScriptquality controlintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsiOSMicrosoftmodulesOpenSSLserver securityIE8Androidtabletsmobile devicesclientcommunicationimage compressionimage size cloudPDFresponsive statebreakpointInternet Explorer 8Windows XP FacebooktechnologyWebOSLong TailInteraction MetricsLinkedInhostsoftwareAdvertisingJSONapp lifespanabletmobile app challengeRGBgammacodecvideo sizeinstant video playback solutionBacklinksweb colorsvideo playbackintegration3rd partyParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Csony playstationnintendo wiiaugmented realityVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingCVE-2014-0224dudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityawardupdatevulnerabilityCKEditorAdobe Edge Reflowprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommercemicrosoft’s project natal

Sep 12th, 2012 by Max Tokman

We are very excited about being recognized for our programming work on the Sidney Garber website by the Outstanding Achievement in Web Development. The WebAward Competition is the premier award recognition program for Web developers and marketers worldwide. Since 1997, the Web Marketing Association’s annual WebAw...

Apr 12th, 2012 by Max Tokman

“There’s an app for that,” has perhaps become as common a catchphrase as the age-old “The check is in the mail.” Apps are not the only mobile technology available for businesses, either. Mobile-optimized websites have become increasingly common as a way to reach out to the rapidly increasing mobile market. Gartner, ...