Inside Photoshop

Naming and organizing your Photoshop layers and using Layer comps.

Layer naming and Structure

1. Group connected items in folders and give them a name
   This will help Developers and other designers to locate item quickly and provide context.

Dos & donts

2. Group layers logically
Arrange your layer groups according to the flow of the document with the header group at the top, footer group at the bottom, and everything else in the middle.

Dos and donts

3. Delete unnecessary layers when ready to pass off file to dev
Once you’re finished working on your Photoshop file remove all unused layers from the Layer Palette.

Dos & donts

A great tool to use to help remove unused layers is this Photoshop script:Download script*

How to Install:
1. Save script somewhere you keep all your photoshop resources
2. Save your PSD to a new file
3. In Photoshop, load script
4. Wait until script is complete (can take sometime is the file is large)

Using Layer Comps in Photoshop

A layer comp is a snapshot of a state of the Layers panel. They help to create multiple compositions or comps of a page. Layer Comps record three types of layer options:

• Layer visibility — whether a layer is showing or hidden.
• Layer position in the document.
• Layer appearance — whether a layer style is applied to the layer and the layer’s blending mode.

Do’s

• Clear and Meaningful Naming
• Visibility and Appearance are applied
• Don’t forget to Update each comps once you make updates!
• Use Layer Comps for hover & pressed states of buttons/navigation

Dont’s

• Don’t provide broken layer comps in your PSD

Further reading

How to use Photoshop Layer Comps by twosixcode