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:

Photoshop 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:

Layer Comps Palette Window

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.

Tabs, home

Tabs, services

Tabs, 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?


Written by Travis Isaacs on July 2, 2008, posted in Design.

SUBSCRIBE

Comments


1

Hamish M said:

Great article! I just used it on a website mockup I’m working on (multiple pages/states, one PSD), and it works perfectly.

Posted on July 02, 2008 at 4:49 PM

2

Aaron said:

I’m a PSD nazi. All my layers are named and organized in folders. Layer comps makes multiple file states so much easier than seventeen different PSDs.

Posted on July 02, 2008 at 5:17 PM

3

Wade Winningham said:

Was this for Stephen Anderson’s benefit? Just curious.

Posted on July 02, 2008 at 5:22 PM

4

Ian said:

Nice article, and something I’ll be using from now on I think. I’ve previously been using the former method of creating a set for each state and then manually swapping between the two. I wasn’t aware of layer comps so this is quite a handy time saving tip. Thanks!

Posted on July 02, 2008 at 5:44 PM

5

Travis Isaacs said:

Ouch, Wade just called Stephen out for his use of a million unnamed layers in Photoshop wink

Wade, Stephen is an “embrace the chaos” personality, I’ve given up on fighting it!

Posted on July 02, 2008 at 5:48 PM

6

Liam McKay said:

Ahhhh! Thats sweet, nice one/

Posted on July 02, 2008 at 6:26 PM

7

Wade Winningham said:

Another thing is that if you used some funky fonts, don’t forget to tell me about them. If they can be provided in case I need to update copy great, if not, at least list what I need to purchase.

Posted on July 02, 2008 at 8:33 PM

8

Craig said:

Fw Pages and States would make your life even easier. Not only do they not require “updating”, but you can also share layers/pages across multiple states.

If you are designing for the web, Fw will make you very, very happy.

Posted on July 02, 2008 at 9:34 PM

9

Travis Isaacs said:

I was waiting on the Fw crowd to weigh in. Different strokes for different folks Craig!

Viewzi is non-denominational when it comes to which graphic package you use. We’ve got designers on Photoshop, Fireworks, Illustrator, heck, even InDesign gets love here at Viewzi.

Posted on July 03, 2008 at 7:59 AM

10

Aaron said:

I don’t want to get started on the Fireworks vs. Photoshop debate. It’s not even worth it. That, and there isn’t much of a debate.

Posted on July 03, 2008 at 11:40 AM

11

Daniel Marino said:

It’s funny because I just started do that about a month ago… it’s so practical it makes me wonder why I never did it so much sooner.

Posted on July 03, 2008 at 1:05 PM

12

Noel Hurtley said:

Thanks for the great tip!

Posted on July 15, 2008 at 3:47 AM

13