James Pringle

If you use Photoshop for any length of time you quickly realize that there are many different methods and styles to it’s use. You can usually achieve the same effect using a host of methods and usually we find one way to do something and just stick with it. For most objectives this really isn’t about which way is better but rather which is the best solution for you. It’s up to us to seek or develop new, more efficient methods, or if it fancies us, to stick with what we know and to hell with the rest. Long story short: There really is no “wrong” way to use Photoshop.

Having said that, and now having been using Photoshop to design media for the web (usually page layouts) for many years I have become fairly comfortable with a certain method for organizing and naming my layers (and layer groups), which I find fairly efficient and intuitive. When it comes to that beloved layers palette there is more of a “wrong way” and “correct way” to it’s use.

This tutorial (if that is really what it is) is my personal method for using the layers palette when designing web pages. Enjoy!

1. Preparation

Using the same mindset as clean HTML markup and proper HTML structure I start by creating a few basic, “top-level” folder groups that each represent a main area of the page I’m designing. These usually include:

1. bg
2. header
3. main
4. sidebar
5. footer

Of course, this choice depends on the intended layout of the page you’re designing. If the page you are designing has a three column layout it might look something more like this:

1. bg
2. header
3. left-col
4. mid-col
5. right-col
6. footer

2. Naming Conventions

There is obviously no written or discussed “proper” methods for naming layers or layer groups in Photoshop. Again, it’s a personal choice, but here are the rules I have adopted and try to follow.

1. always give your layers a name (don’t leave the default “Group 1″) it’s a small effort that pays off big
2. always use lowercase letters
3. don’t use spaces between words, use a dash (-)
4. attempt as best you can to name layers or layer groups as simply and descriptively as possible
5. don’t use abbreviations that you make up on the fly (using “bg” for background is, I think, a good example of an appropriate abbreviation because most other designers using your file will probably be able to figure out quickly what it means)

These “rules” are in general the same rules one applies when creating HTML or CSS markup. It’s also similar to the methods used to name web pages themselves. Since we are designing for the web I find it best to keep this mentality throughout the design and markup process. It’s easier to stay consistent rather then having one set of rules for Photoshop and one for marking up HTML/CSS. Use the same for both and make it easier on yourself. This also helps when converting your designs into HTML/CSS, but that’s another tutorial.

3. Layer Order (or, “Flipping the World on It’s Head”)

Although in Step 1 I listed the layer groups from top to bottom starting with the bg and header at the top and having the footer at the bottom I find it more appropriate to always work “upside-down” with my Photoshop layers.

It’s easy to see why with the background layer group. If your background is a white shape layer and it’s on top in the layers palette you will obviously hide everything else underneath it. Therefore the stacking order gets “out-of-whack” from the get-go. To resolve this I work upside-down, and from left to right. It’s kind of a hard concept to explain, but basically think about your layers as reading a book upside down. Here is the actual order I tend to work in:

Now, pay particular attention to the main and sidebar layer groups. They are the only ones in which the actual designs will be next to each other and not on top of or beneath. Since the main area is on the left it comes “first” in the layer order, but because we are working upside-down it comes beneath the sidebar layer in the layers palette. So, reading the layers palette from bottom to top you hit the background, then the header, then the main content area, and then the sidebar.

If we were to lay out the three column example I mentioned above it would look like this:

Are you confused enough? Well, it gets even trickier when you start adding elements into those layers. Once you grasp the concept though it becomes quite intuitive.

Let’s add some elements into our header and see what that looks like.

In general your header is going to have certain elements almost surely. There’s the background of the header itself, the logo, and the navigation. We’ll just keep it at that. So, how would that look in the layers palette? Well it depends on where you’re going to place those elements in the header, but I will assume the logo is to the left in the header and the nav is floating to the right, or below. Here’s what we get:

Now, let’s pretend our nav will be using tabs. How would we add that? Easy:

You could also give the tabs their appropriate name:

If I wanted to add an example of what one of the tabs will look like when we are on that page, or when the user hovers over the tab, I would add it as such:

Adding elements to the main content area or the sidebar uses the same method. Let’s add an “About Me” section to the top of the sidebar:

If, below the “About Me” section, we wanted a module that listed “Recent Comments” we would add it as follows:

Notice it goes above the “About Me” layer group and not below it although it appears below it in the actual design. It’s exactly the same, just upside-down.

So, basically, you can just keep going on and on, adding or removing elements but keeping this same structure in place as best you can.

The complexity of the layers palette naturally increases the more complex your design is, but at the same time, as your design becomes more complex, the need to have an organized layers palette becomes even more important. If you work within a design team where you share files often having a method to your madness makes everyone’s job easier.

4. Benefits

The main benefits of using this method (or a similar method) is that, for one, you make it easier to locate elements within the layers palette, but more importantly, you make it easier for someone else to find what they’re looking for should they need to use your design. Nobody likes scrolling through an unorganized, long list of randomly placed layers to hunt down what they are looking for. Granted, Photoshop does offer some other shortcuts to find elements within the layers palette, such as “ctrl (or command) clicking” on an object to jump to that layer, but we should still strive to not make that method a requirement to use our files.

Another benefit to this method is that it makes it significantly easier to reuse elements in another design. For instance, if you are marking up a series of pages that all use the same sidebar you can just drag that sidebar layer group into a new file and you then have that element already completed and organized. If, on the other hand, you need to reuse elements in a different layout, and the layers are a mess, you have to hunt down all the elements individually, which can waste a lot of time.

Simply put, just moving elements around in a design is much easier if the layers are grouped and organized properly. And, being easier means you can work faster and more efficiently.

5. Limitations

No method is perfect and when dealing with the layers palette you have some restrictions. Adobe limits the number of layer groups you are allowed to have. In CS3 this seems to be 5 layer groups nested inside each other.

You can’t go any deeper than that. This, I think, is actually a benefit to some extent. It forces you to be more thoughtful about how you’re layering your files and encourages you to be more intentional with your grouping. Occasionally I have run across this limitation, but it is actually pretty rare that I find I can’t organize my layers within this limitation.

5. Tips

The layers palette does hide a couple tricks up it’s sleeve.

You can collapse or expand all “top-level” layer groups by ctrl (or command) clicking on any of the top-level layer group arrows.

Alternatively, if you right click one of the layer group arrows you can get two of four choices. Either “Open This Group”, “Open All Other Groups”, “Close This Group, or “Close All Other Groups”. The instance of when each choice appears is a little confusing and I have yet to really grasp the logic behind it, but with it you can theoretically close or open large amounts of groups without having to click each one open or closed. With a little practice and experimentation you’ll get the hang of it.

Photoshop remembers your layers palette condition when you close and re-open a file. Hence, if all your layer groups are expanded when you close a file then they will be open the next time you open the file. For your (and anyone’s) sake that might be using that file in the future, try to collapse all open layer groups before you save and close your file. This way the file looks less intimating and it will make a journey into your design for another designer that much easier.

6. Conclusion

For a lot of designers the layers palette can be somewhat of a nuisance, or is to be completely ignored all together. This is a lazy and time-wasting mentality to maintain. With a little effort (less than what you think) you can make sure your files are properly organized and named, which will make your files that much easier to work with. If you work in a team, and you can agree upon some convention for organizing the layers palette (whether it’s mine or one of your own creation) you will see noticeably increased turnaround time with each and every project while experiencing less confusion and frustration.

My method might not be for everybody and is probably not as effective when you’re not designing web pages, but all in all, more thought needs to go into that little dreaded area that we all want to think will organize itself, known as: the layers palette.