Photoshop Basics: Layer Naming, Ordering, and Nesting

Of all my Photoshop pet peeves, a PSD packed with poorly named layers may be the biggest one.

Designers make lots of layers and lots of layer copies during the course of a design, and they often “forget” to name the layers appropriately. We understand though, they’re busy people, right? In the coding world we deal with similar issues. When programmers don’t effectively comment their code, anyone coming in after them has no way of knowing why certain choices were made, or perhaps even what a particular block of code should be doing. Likewise, a single designer may know—as the creator of the file—that Layer 12 copy is the little red left-pointing arrow after the link text in the second-row third-column of the page layout, but if anyone else picks up this file, they won’t know what that layer is without taking several annoyingly time-consuming steps to figure it out.

It is crucial that designers name their layers appropriately, so they are understandable at a glance.

If you have two layers with elements that appear in row two column four of your design separated by five layers with elements that appear in row two column two of your design, it is terribly hard and incredibly annoying to find the elements that belong together. When you’re building your layout, you should always make sure that “physically” adjacent layers are also adjacent to one another in the layer stack, not separated by irrelevant layers.

Orderly and Well-Named LayersPhotoshop 6’s introduction of layer “sets” (now called “groups”) partially alleviated these two major issues, especially the layer adjacency issue. With layer groups, especially nested groups, its easy to logically subdivide the layers based on content. A single PSD can accommodate layouts for every page of a site, separated into groups, which can be subdivided again representing specific areas on the pages themselves. You might create groups for the common sections of your layout, such as “Header” and “Footer” groups, as well as grouping layers by site section, or by page templates, if you do common templates rather than specific-page mockups.

The key, though, is in using all these things together to build a file that can easily and efficiently be picked up and added to or modified by a fellow designer, or utilized by your web developer.

You can go too far, however, and a future post will talk about keeping your layout file tidy and keeping the file size down, especially for your poor web developers who typically have lower-powered machines than their designer bretheren.

If you have your own ideas—or horror stories—about how best to manage the layers in the Photoshop document, I hope you’ll jump in and leave a comment.