Proper layer naming in Photoshop
Now we know there are already numerous blog posts on organizing your Photoshop layers. Most of these tutorial/blog posts talk about the need for using layer groups and how the layer structure should match the visual structure in your Photoshop file. What we like to point out in this post is the future comfort of proper layer naming on a micro level.
When we say ‘future comfort’ we’re talking about that spark of joy you (or a front-end developer that’ll code your design) gets when opening a Photoshop file with properly labeled layers. There are few things more annoying than being confronted with a unorganized Photoshop file that requires hours to understand. It’s a small investment to name your layers properly and you’ll work more efficiently in the long run.
If you haven’t yet read any of the tutorials on graphic design file organization, you should definitely check out: How to Effectively Organize your Photoshop Layers (on Webdesigner Depot), and The Photoshop Etiquette Manifesto for Web Designers.
On a micro level it can be really useful to name layers after both their element type and their specific name. This makes it easy to find elements within a Photoshop file. In the images in this post there are two examples of how we usually name our buttons and form elements. For organization purposes, we think it’s really useful to name an element by both it’s generic name (‘btn’) and it’s specific name (Close). Also, the generic element name should go first as this is taxonomy 101. You’ll see there are a lot of group/generic elements which this principle can be applied to, like: ‘icon’, ‘logo’.
A couple of our favorite labels for layers:
- btn (Buttons)
- bg (Backgrounds)
- — (Dividers)
- input & form (Input fields)
- shadow & glow (Layers that show only that)
- → (Arrows)
Again, naming your layers properly is at first time consuming but will help you be a) more efficient b) a nicer person to work with for others that’ll open your graphic design file.
