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!


wordpressSEOweb designWeb DevelopmentHTML5productionresponsive designDrupalADAcompliancesecurityPhotoshopCSSTestingdesigngooglebeta testingquality controltoolsharness-bautomationtypographyGoogle AnalyticsmarketingFlashproduction tipsfontsweb imagesite speedweb preflightthemeswebsite buildingmodulestechnologiesJavaScriptfirefoxbrowserintegrationsMicrosoftAdobe MuseSSLIE8Applemobile websiteapp developmentplug-inAPIQAserver securityweb standardsE-commerceiOSInDesignWordpress pluginsOpenSSLAdvertisingJSONmobile devicestabletsAdobe AirRIAsBacklinksInteraction MetricsLong TailExporting from InDesign to PhotoshopInDesign to Photoshop conversionresponsive buildhorizontal layoutAdobeICANNcustom domain suffixesdevelopmentwireframeaugmented realityweb development awardprogramming awardPhotoshop Layer compsdesign best practicesmobile app challengeapp lifespannon-Flash animationHTML5 animationAdobe EdgeiPad screen templategTLDsweb awardvertical layoutvideo playbackfaildudrevolutionary softwareInDesign to HTMLcommunicationclienthtmlimage sizesoftwareimage compressionweb compatibilitybreakpointresponsive statePDFAdobe Edge ReflowconvertingEdge ReflowParfaitweb design softwareogvcloudawardhostseleniumFoundationBootstrapCKEditor3rd partyAppleScriptecommercetechnologycollaborateupdatevulnerabilityCMSwebsiteiPhoneCSS3Ps. and CSS HatProject Parfaithigh fidelityconceptcodecwebmformatweb developerssidney garberVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunescustom fontsHTML4web-fontsRGBweb colorsrelationship marketingOSSW3Cfragmented technology landscapeAndroidvideo sizegammamp4microsoft’s project natalUDIDvideoCVE-2014-0224integrationLinkedInFacebookWindows XPInternet Explorer 8interactive banner adsbrochurewaresony playstationinstant video playback solutionHeartbeatonline subscriptionWebOSabletCMS for Flashoptimizednintendo wiioutsourcing
Using mobile technologies for your online initiatives

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,

New iOS app currently available in iTunes store

Sep 16th, 2012 by Max Tokman

We have a new app Daimler in North America available in the iTunes store. The app offers an interactive tour of Daimler's production facilities, including Mercedes-Benz U.S. International, Daimler Vans Manufacturing and Detroit Diesel Corporation. It offers information about the history of each division, a summary of r