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 met a pixel-pusher 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 an hour of clicking 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; in fact 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 (a.k.a. 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. No matter what changes to those properties you make, 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 ever discoverable!)
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 wtfdude.
This means the document state has changed and the comp doesn’t “make sense” fully. You can still switch to this comp, but you’ll get the warning until you select the comp in the list and hit the ugly Refresh icon. You can use that one 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 lets you delete, update, or duplicate the comp. To actually change your view, you’ll want want to click the icon.
Two more littler thing: hey, you did know you can duplicate a layer - or pretty much any row in a list in Photoshop - by dragging it to the New icon in the panel, right? Just checking!
Good day and good comps to you, fellow designer.
