There’s a good chance you, frequent Photoshop user, don’t help yourself to a very neat little organizational feature called Layer Comps. How may I be so bold as to venture such a guess? Well, I have yet to meet a designer who, in fact, uses Layer Comps. Q.E.D. etc. It’s a handy thingy, however, and I like it!
The example project I’ll be using here is an iPhone app, but the process is equally applicable to other UI designs, website layouts, posters, retouched photos, and anything else you might spend more than half a clicking hour on.
What it’s for
Layer comps is a panel—found in the Window menu—which helps you organize different versions of a designs or different views of it in the same file. If you are a responsible digital citizen at all, you probably have some sort of system for keeping around alternate elements and various “views” of your app. Layer Comps will make this easier and more robust.
An iPhone app will typically have several views: a dashboard, a new-entry form, Settings, About. You could save each as a separate file, but what about all the elements these views share? If they have the same background or nav bar and you decide to change those, why go changing them in every file?
You could make groups within one document, or maybe you prefer just showing and hiding layers as you go; this is the solution employed by most designers I know. It’s a little nuts, though! Pretty soon you’re showing and hiding dozens of layers all the time. That’s no fun.
Do this instead
Show and hide your layers, as per usual, to compose one view of your app—for instance, the layers needed to build the application startup image (AKA default.png). Now reach for that Layer Comps panel and hit the New icon. Name the comp “Startup”. What happens is, Photoshop now remember the visibility, position, and style of all the layers in your document. (Double-click the Layer Comp name to set what all it remembers.) No matter what changes you make to those properties, you can always high-five the little layout icon next to “Startup” in the Layer Comps panel to quickly switch to the document the way it was when you saved the comp.
You might think this is like History—it’s not. Layer Comps is a totally nondestructive, undo-agnostic thing. It’s just a shortcut for hiding layers, moving them around, and turning layer styles on and off. It takes the often frustrating fact that visibility settings aren’t undoable in Photoshop and turns it into a strength.
(Update: Matt Quintanilla points out you can undo visibility. Boy is that option undiscoverable!)
The plot thickens
So what happens if you, for example, delete a layer used in one of the saved comps? Photoshop knows better than to pretend it never happened—it’ll badge your comp with a little wtf.
This means the document state has changed and the comp doesn’t “make sense” fully. You can still switch to this comp; nothing is really “broken”. But, you’ll see that warning icon until you select the comp in the list and hit the Refresh icon. You can do that at any point when the current visible state is what you want to update the selected comp to.
One more little thing: there’s a difference between selecting a comp by clicking its row and switching to it by clicking its icon. Selecting just selects the row in the list. This lets you delete, update, or duplicate that comp. To actually change your canvas view, you’ll want want to click the icon on the left.
Two more littler things: hey, you did know you can duplicate a layer—or pretty much any row in any list in Photoshop—by dragging it to the New icon in the panel, right? Just checking! And you know that holding Option/Alt as you drag almost always duplicates whatever you’re dragging, right? Cool.
Good day, and good comps to you.