Photoshop
Layers
Layer Comps
In the latter stages of a design project, a graphic designer or web designer will create what's known as a design comp. Depending on who you ask, 'comp' stands for composition, composite, or comprehensive. At any rate, it's an advanced mockup of the final product. In the case of web design, multiple versions of a proposed design are often prepared to show to a client. They can vary in colours, layout, fonts, imagery, etc.
If multiple comps are stored in a single PSD file, the layers list can get very long and it takes time to hide and show layers so you can see the different versions you've designed. Photoshop's Layer Comps panel can help make the process more efficient. It records the status of all the layers in the Layers panel for each composition. With a click of a button, you can switch from one comp to another. You can also edit and update comps and save each comp as a separate Photoshop file.
The Layer Comps panel is somewhat similar in function and appearance to the History panel. It takes snapshots of states that can be returned to later. The ability to choose the information that is recorded in a comp and the elimination of in-between editing steps is what sets it apart.
Layer Comps Panel
To open the Layer Comps panel, go to Window > Layer Comps.
The panel is quite simple. Shown here is the panel before any layer comps have been created. The Last Document State is the current version of the file.
The Layer Comps panel records the following layer information:
- Layer visibility
- Position of layer content
-
Layer appearance including styles, Opacity, Fill, and blending modes.
To illustrate how it works, we created a thumbnail web site design comp for a business called Endora's. Shown here is the first design along with the Layers panel. Some of the layers are hidden as those were set up for the second comp, although you don't need to do that in advance.
Creating a Layer Comp
To create a layer comp, do the following:
- Click on the Create New Layer Comp button
at the bottom of the panel. -
The New Layer Comp dialog will open as shown to the right. Fill in the following information:
- Name: Assign a name to the comp.
- Apply to Layers: Enable the check boxes beside the information you want to have recorded in the comp:
- Visibility: This is the only option enabled by default. It records whether layers (including style layers) have their visibility set to on or off.
- Position: This records the position of elements on layers. If you move any content to a different position than it was on a previous comp, enable this option.
- Appearance (Layer Style): This records all layer styles in the image. It also records layer blending modes and the Opacity and Fill settings.
- Comment: Type any notes about the comp in this text field.
- Click OK.
Our dialog looked like this for the first comp. All the Apply to Layers options were enabled. Once you select options other than the default Visibility option, the Layer Comps panel will 'remember' the settings and enable them for you the next time the dialog opens.
This is what the Layer Comps panel looked like after the first layer comp was created. The new layer comp was inserted below the Last Document State and the Apply Layer Comp icon 
now appears beside it to show that it's the active comp.
In the panel shown above, there is a triangle pointing to the right. Clicking on it will reveal the beginning of the comment you entered in the New Layer Comp dialog, as shown here.
A second design comp was created by toggling the visibility of several layer styles and moving the sidebar shape to the right side of image.
The Layer Comps panel looked like this after the second layer comp was created.
View a side-by-side comparison of the Layers panels for each comp.
Viewing Layer Comps
Now that there are two layer comps, we'll look at how to toggle back and forth between them. There are two ways:
-
You can simply click in the Apply Layer Comp column beside the comp you want to see. The example at the right shows where you would click to see (apply) the "Endora's - subtle" layer comp. The Apply Layer Comp icon will move into the space you click on. To view the Last Document State click beside it in the same way.
- Or, you can use the Apply Previous Layer Comp
or Apply Next Layer Comp 
buttons to cycle through all the layer comps. If you have a large number of layer comps and only want to cycle through a subset of them, select the ones you want to view before using the navigation buttons. This will confine the views to only the selected ones.
Updating a Layer Comp
A layer comp can be modified and then updated to include the changes. Here are the steps:
- Click on the layer in the Layer Comps panel.
- Apply changes to the visibility, position or style of any of the layers in your image.
- If you change any layer properties in the second step that weren't enabled in the New Layer Comp dialog when you created the layer comp, you will need to enable those options before proceeding. Click on the Layer Comps panel menu button and select Layer Comp Options. The New Layer Comp dialog will open and you can enable the layer properties you've modified.
- Click the Update Layer Comp button
at the bottom of the Layer Comp panel.
Layer Comp Warnings
There are some changes you can't make to a layer comp without compromising it: delete a layer, merge layers, or convert a layer into a background layer. If you do one of these things, a warning icon 
will immediately appear in the Layer Comps panel beside the layer comps affected. Do any one of the following:
- If the change wasn't necessary, you can use the Undo command to restore your image and clear the warnings.
- Ignore the warnings but some of the layers may be lost.
- Update the layer comp anyway to get rid of the warning icon(s). You will still lose some layer data.
- Click on the warning icon which will open a dialog that explains the problem and gives you an option to clear the warning icons by clicking the Clear button. This doesn't undo the change you made, though.
- You can also right-click on the warning icon and choose between Clear Layer Comp Warning or Clear All Layer Comp Warnings in the context menu.
Duplicating a Layer Comp
To duplicate a layer comp, you can drag the layer comp layer and drop it on the Create New Layer Comp button .
A new layer comp will appear in the panel with the word "copy" appended to the original layer comp's name.
Deleting a Layer Comp
A layer comp can be deleted by dragging the layer down to the Delete Layer Comp button 
and releasing the mouse button.
Layer Comps Panel Menu
We've already covered these commands but they're worded a little differently in some cases so the equivalents will be listed below.
- New Layer Comp
- Same as clicking the Create New Layer Comp button .
- Duplicate Layer Comp
- Same as dragging and dropping a layer onto the Create New Layer Comp button .
- Delete Layer Comp
- Same as dragging and dropping a layer onto the Delete Layer Comp button .
- Update Layer Comp
- Same as clicking the Update Layer Comp button .
- Apply Layer Comp
- Same as clicking in the Apply Layer Comp column to activate the Apply Layer Comp icon . This works on the layer comp that is currently selected.
- Next Layer Comp
- Same as clicking the Apply Next Layer Comp button .
- Previous Layer Comp
- Same as clicking the Apply Previous Layer Comp button. .
- Restore Last Document State
- Same as clicking in the Apply Layer Comp column beside the Last Document State.
- Layer Comp Options
- Opens the New Layer Comp dialog so you can rename the selected comp, change the Apply to Layers options, or modify the Comment section. A shortcut is to double-click on the layer comp layer to the right of the name.
Layer Comps to Files
A file containing layer comps can be saved so that each comp is in its own file. They can be saved in a number of image formats as well as PDFs. The PDF option is a great way to provide design comps to a client.
To begin, go to File > Scripts. The command we're interested in is Layer Comps to Files. There is another command Layer Comps to WPG. WPG stands for Web Photo Gallery which has been replaced by the Adobe Output Module in Bridge. At the time of this writing, the module was only available by downloading it so we won't cover it here.
After choosing the command Layer Comps to Files, the Layer Comps to Files dialog will open. Here's a rundown of its options.
- Destination
- This sets the location of the files that will be generated. By default, the files will be saved in the same folder as the original PSD file. Click the Browse button to select a different folder.
- File Name Prefix
- This will display the current file name without its .psd file extension. You can change the prefix if you like. The appropriate extension will be assigned based on the File Type selected.
- Selected Layer Comps Only
- If the check box is left disabled, files will be generated for every layer comp in the original file. To create files for only a subset of the layer comps, select them in the Layer Comps panel before opening this dialog and then enable the Selected Layer Comps Only check box.
- File Type
-
Select the destination file type from this drop-down menu.
- Include ICC Profile
- This option is for users of colour management.
- File Type Options
-
This section will display various file-saving options based on the file type that's selected. The previous image of the dialog showed the PSD option. The example to the right shows the PDF options.
After setting all the options, just click on the Run button to create the files. A script will run in the background and a pop-up message will appear when the job is completed.
Layer Comps Summary
- The Layer Comps panel records the status of all layers in a Photoshop file to create snapshots of design comps.
- The layer properties that can be recorded are layer visibility (including style layers), position, and appearance.
- The Last Document State is the current version of the file.
- The New Layer Comp dialog is used to name the layer comp, set the layer properties you want recorded, and includes a space for typing in comments.
- To view/apply a layer comp, click in the Apply Layer Comp column beside the comp you want to see. To scroll through all layer comps or a selected subset of them, use the Apply Previous Layer Comp or Apply Next Layer Comp buttons.
- An existing layer comp can be modified and then updated.
- There are various ways to handle layer comp warnings. Some of these may result in the loss of layer information.
- The Layer Comps to Files command can be used to generate individual files for all layer comps or a selected number of them. The resulting files can be in PDF or PSD format as well as in several common image formats.
Photoshop - TOC - Introduction - Books -
Layers - Links - Questions -
1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - A - B - [ C ] - D -
