Photoshop tip: Layer Comps make your life easier

I freakin’ love Layer Comps in Photoshop. I frequently create complicated, multi-state mockups that would otherwise be multiple layer sets and files without layer comps.

What are Layer Comps? Simply put, Layer Comps are a ‘snapshot’ of your Photoshop document (PSD) that you can easily flip between. Here is a quick example: Let’s pretend you are making a set of navigation tabs and want to show the active and inactive states:

travis_tab_example

Normally you would need to create two sets of each tab, one showing the active and one showing the inactive and manually flip between the two:

travis_tab_layers

By using layer comps in this example, we eliminate all of the duplicate sets of layer and simplify down to the text layers for the tabs, and the tab itself.

travis_layerset_home

travis_layerset_services

travis_layerset_contact

In this example I’m storing the position of the “active” tab background, and the Layer Effect that sets the color of the active and inactive text.

Creating a Layer Comp is easy. First, make sure you have the Layer Comp pallet visible by clicking Window > Layer Comp.

Once you have the pallet visible, click the “new” icon at the bottom of the window. Give your Layer Comp a name (and description if you like). You also need to decide what information you want to store in the Layer Comp. Your options are Visibility (is the layer on or off), Position (the x/y position of a layer), and Appearance (the Layer Effects of each layer).

While fewer layers and being able to store multiple states in layer comps is a huge advantage of Layer Comps, there are a few quirks that you’ll need to look out for. First, Layer Comps are useless unless you remember to update them (you click the refresh icon). I can’t count how many times I’ve made a new state, then clicked to another state without updating the set. Undo will generally get you back on the right track, but it can be annoying.

Second, you might have to make changes multiple times to update your Layer Comps. For example, if in one Layer Comp you tweak the position of the element and save it, it only applies to that Layer Comp. That means all your other Layer Comps have the old position and will need to be updated. There is no way around this other than to make as few changes to “global” elements as possible.

Finally, if you have one Layer Comp that stores Visibility, Position, and Appearance, and another just stores two of the options, the lesser will get overridden when you switch layer comps.

What about you? Do you use Layer Comps? Why or why not? If so, any tips or tricks to add?

Comments