The Latent Power of Photoshop’s Layer Comps

Window in the Belfry of Ghent, Ryan Godfrey, Flickr.Way back in 2003 Adobe released its eighth version of Photoshop. Buried within was a little known gem called Layer Comps.

As a youthful, self-proclaimed grandmaster of Photoshop, I casually dismissed this quiet addition as gimmickry and carried on with my negligent ways. Eight years later, I’m just now discovering this time-saving feature that many a designer, quite possibly even you, have been missing out on.

Life Before Layer Comps…

Prior to my making this ‘discovery’, I’d tend to create individual files for each version of a client concept. This was far easier than trying to manually manage the visibility of my layers. But this turns out to be incredibly inefficient, since many times the concepts shared common elements (e.g. a website’s header and footer). Should these elements change, I’d have to update each and every file. Thankfully, Layer Comps were introduced to bear the weight of this cognitive load while keeping everything nice and tidy within a single file. In addition to easily capturing layer visibility states, they’re also intelligent enough to remember layer position and styles.

Layer Comps: An Example

Let’s dive into a simple example. Please keep in mind that the usefulness of Layer Comps is directly proportional to the complexity of your file. While I probably wouldn’t use Layer Comps in such a simplistic file, it should serve well for the sake of demonstrating its potential.

First, we’ll need to turn on our Layer Comps palette. This can be activated from Photoshop’s Window Menu (Window > Layer Comps). This palette is where you’ll control your document’s various states, or comps.

The Layer Comps palette

 

Now, for the first concept toggle the visibility on for all the layers you’d like to use. Likewise, position the layers as necessary. While you’re at it, make tweaks to your layer styles (e.g. drop shadows, glow, pattern, etc). Once everything is in place you can capture this state by clicking on the ‘New Layer Comp’ icon from the Layer Comps palette (see illustration below). Give it a memorable name and click the ‘OK’ button. That’s it. Now this state can be conjured at any time by clicking on the space to the left of its name in the Layer Comps palette. Repeat this process for each idea that you’d like to save.

 

New Layer Comp Instructions

 

Below are the two layer comps I created. A quick look at the Layers palette illustrates some of their unique differences, though you’ll notice that they share many of the same elements.

Layer Comp #1

 

Layer Comp #2
Layer Comp #2

 

One last thing that makes this feature remarkable is the ability to export all of these layer comps to individual files. This option can be found under Photoshop’s File menu (File > Scripts > Layer Comps to Files…). This will bring up a dialog box for manipulating the output settings. Pretty sweet, huh? Again, while this is a very simplified implementation, hopefully this will get you thinking about how useful this feature can be, especially as your files grow in complexity.


Window in the Belfry of Ghent, Ryan Godfrey, Flickr.

About the Author

 Avatar

Jeffrey Stevens

Jeff Stevens is the Assistant Web Manager for UF Health Web Services. He focuses on user experience, information architecture, content strategy, and usability.

Read all articles by Jeffrey Stevens