The power of Photoshop Layer Comps

Introduction

Layer Comps is a very simple but powerful Photoshop feature that can come in hand in the design of the interface of a web site. It’s a panel that allows to store some layer compositions saving the current state of layers and recall them at any time.

It can be very useful when we design different page templates inside the same PSD document: with Layer Comps we can store the layer compositions for each page recalling it when needed.

Once we need to make some modifications to our layout we simply work on the layers as we usually do. When we need to export or view the final results for each page is when the Layer Comps comes in hand taking care of all the layers moving and hiding, since this information is stored in each comp.

In this tutorial I’ll focus on a specific use case but I’ll also give you an overview of all the features which some users could exploit in other ways.

A practical example

Let’s start with a very common example we face every day: we’re designing the graphic interface for a web site in Photoshop and we need to send to our client three layouts.

1. Homepage
2. Article page
3. Gallery page

In Photoshop we organize the layers in groups that will help in managing the layers and in composing the different pages.

The Photoshop Layers palette

Here’s an example of the Layers panel with the groups. We have some basic page parts (background, header, footer), some groups for the content of different pages (homepage, article, gallery) and some groups for the widgets of the right sidebar.

These are the page we have designed:

The homepage mockup

The Homepage of the web site with some main content and the widgets on the right: About Us, Gallery, Tweets.

The article page mockup

The Article page with its main content and the widgets; About Us, Gallery, Related articles.

The gallery mockup

The Gallery page: this page has no sidebar.

As you can see all the features that distinguish the three layouts are attributable to the positioning and display of layers: let’s see how to store this information in layer comps.

Compose the homepage

Let’s start by composing the homepage.

Click on Windows > Layer Comps to show the panel.

In the Layers panel set up the correct visibility for each layers group to display the homepage correctly. You can even move layers and layers groups in positions that are specific for the homepage. Usually the position of the footer might change depending on the height of the main content.

Here we have the Layers panel for the homepage.

Now it’s the moment to store this layer composition!

In the Layer Comps panel click on the “Create New Layer Comp” button at the bottom.

A dialog box will popup.

First write the Layer Comp name (e.g. “Homepage”).

Then you can choose which features of the layers you want to store in the Comp:

1. Visibility: choose the store if the layers are visible or hidden.
2. Position: stores the position of the layers. This come in hand when we want to change the position of layers from one Comp to another.
3. Appearance: stores the layer style and the layer’s blending mode. We are not using this in our use case. Be aware the Layer Comps will not store Smart Filter settings!

All these features apply to Layers as well to Layer Group.

You can also add a Comment and then click “OK” to save the Comp.

As we can see the Layer Comps panel is now showing the new composition.

We can think at compositions as snapshots of the current state of the Layers panel (for what concern Visibility, Position, Appearance).

Compose the article and gallery pages

The composition of the Layer Comps for the article and gallery pages follow the same flow we’ve seen above for the Homepage:

1. Set layers and groups visibility in the Layers panel;
2. Set layers and groups position in the Layers panel;
3. Click “Create New Layer Comp” in the Layer Comps panel;
4. Give the Layer Comp a Name and set the features we want to store: Visibility and Position is our case. Add a Comment.
5. Click OK to save the Layer Comp.

The Layer Comps panel will look like this, with the three newly created compositions.

Let the magic come!

If we click on the “Apply Layer Comp icon” on the left of each compositions the layers (and groups) visibility and position will magically change recalling the required composition.

Let’s assume you need to make some modifications to your layout: you can work on your layers as you usually do and when you want to see or export the pages templates you simply click on the “Apply Layer Comp icon” of each composition.

Super-fast export

There’s one last trick that allows you to export all the composition in single files with a single action. Choose:

Files > Scripts > Layer Comps to Files

In the Layer Comps to Files dialog box you can choose:

1. Destination: That’s where you want to save the files
2. File Name Prefix: A text that will be used as prefix for name of the file. After the prefix Photoshop will name the files adding a counter + the name of the comp + the comment of the comp.
3. Selected Layer Comps Only: choose if you want to export only selected comps in the Layers Comps panel
4. File Type: You can choose to export the comps in many formats (PSD, JPG, PNG and many more). For each File Type there are some options

The click “Run” and let the script do its job: there’s no other way to export your graphic layouts faster than this!

Additional features

We’ll cover some other features of the Layer Comps panel to provide an overall knowledge of its possibilities.

Last Document State (1): This is the current composition you’re working on. If you have a comp selected and you modify the layers state, the panel will automatically switch to the Last Document State. Also if you need to restore the document to its state before you chose a layer comp, simply click on the “Apply Layer Comp icon” next to Last Document State.

Previous and Next buttons (2): These buttons allow to cycle through all available comps in the panel.

Update Layer Comp (3): This allows you to update the configuration of a layer comp: if you make some modifications to the layers and click this icon it will update the selected layer comp.

Create New Layer Comp button (4): Allows to create a new comp o duplicate an existing comp by dragging it to this button

Delete Layer Comp button (5): deletes the selected comp.

Warnings

There are some modifications you can do to layers or groups that might prevent layer comps to be fully restored: as an example, if you delete a layer the layer comps will not work correctly anymore.

In this case you’ll see a warning icon appearing next to each comp telling you that there will problems to restore that comp.

In this case you have different solutions fix the warning:

1. select a comp and click on the “Update Layer Comp” icon
2. right-click on the icon and select Clear Layer Comp Warning to fix the warning for the selected comp
3. right-click on the icon and select Clear All Layer Comp Warnings to fix the warning for all the comps

Conclusions

Layer Comps is an easy to use but yet powerful feature that allows to speed up your work when creating some layouts, allowing to store layer compositions and export them very quickly. Once you know how it work it can become useful also in different use cases.

Thanks to Lorenzo Pinna for the inspiration.

Originally published at www.webdevtuts.net.