Layers - they’re not just in cakes


The day has finally come for me to outline the layering process we’ve adopted at Focus Lab. This system emerged to help me organize my thoughts and flush hand-drawn wireframes into Photoshop before going in and pushing pixels. It also allows multiple designers or developers to navigate robust PSD files quickly and easily. Further, it is convenient for designers who like to work more freely within a PSD, providing for a certain level of structure without impeding freeform design processes.

Alright, here we go…

After I’ve mocked up a hand-drawn wireframe I then open Photoshop and add 10-15 folders, depending on the number of sections outlined in the initial wireframe. This instantly gives me a structure to start with and, better yet, the freedom to work on different areas of the page in no particular order without worrying about missing important information or sections.

Next, I add in the high level items from the wireframe: headers, body, footer, CTA (call to action) areas, etc. For these higher level areas we use: // HEADER // to denote that section. Initially I added in the “//” before and after the text to help distinguish sections from content, but I ended up liking how it looked in the sidebar as well.

For all subsections of that main category “// HEADER //,” such as navigation, logo, CTA buttons, etc., we place “::” before the subcategory.

For specialty items, like modal windows, colors, fixed navigation, etc., we use “**” before and after the text to delineate it from the rest of the layers pallet.

In the instance of buttons, we use a global folder called “something btn.” Within that folder we include both the ‘static’, ‘hover’ and ‘pressed’ states so that the development team or other designers on the team can easily find all assets.

The purpose of this layering system was to bring a consistent look to our PSD’s. Regardless of the project lead, anyone can jump in mid-way and add/edit without wasting time searching through hundreds of unnamed and ungrouped layers (internally known as the “Kenney Layers”).

Hopefully this helps shed some light the processes at Focus Lab that help keep things organized and consistent for our ever-growing team. What process(es) do you or your team incorporate? It would be great to hear other suggestions of how to maintain an unified structure when dealing with large PSD files.

Join the conversation

Ken Woodworth on September 3, 2013

Great stuff, Charlie. I wish more designers were this organized with their files. It’s easy to forget that you might not be the only one editing a file later down the road. Even if you are, being able to quickly find and edit layers is key to updating a design.

At Aten, we use a similar structure for our files. For major groups, we use “- GROUP NAME”. For regions within a major group, we use “• Region Name”. This helps organize without adding too much noise to layer names.

Another thing we add is a “- UTILITY” group at the top of the list that includes a “COLORS” layer with a block of each color used in the design and a locked “BASELINE” layer set to 3% that includes a repeating baseline grid pattern.

Daniel Golden on September 3, 2013

Why all caps on main categories. They’re already differentiated with four slashes. Really curious.

Daniel Golden on September 3, 2013

Also, excuse me for not mentioning how helpful and insightful this article is.

Bill Kenney on September 3, 2013

Group 5
- Shape 5 copy copy
- Group 19
  - Shape 5 alt
  - Call now
  - shape 24
Group 19 copy
- thing here
- thing here copy 2

...

Boris Valusek on September 3, 2013

Nice.

I go as simple as only two levels deep with Layer Groups. I found that third level is unnecessary even in big PSDs. Level one is ‘ALL CAPS’, level two is all ‘lower case’. And that’s it. This way it’s super easy to eye-scan your layer palette. Also, color labeling (lvl1) groups with just two colors. i.e. purple, blue, purple, blue, purple… this helps a TON when you have a lot of stuff and it’s all expanded. You can easily see where your group ends and where new one begins.

Chris Meyers on September 3, 2013

Any thoughts on “Layer Comps”?

I feel like I see this a lot, when working with other designers.

Craig Stubblefield on September 3, 2013

Awesome post, Charlie.

Dude——- Kenney Layerrrrrrrrrs. I do the same thing and I need to be stopped.

Vector Smart Object 104

nick fratter on September 3, 2013

Kenney layers made my day.

Tom Durkin on September 4, 2013

Liking these ideas! Will definitely be incorporating some of this in to my next PSD! Thanks :)

Rory on September 4, 2013

Seems like a tremendous amount of setup for each project. Being able to work between designers is important, but naming everything and putting it in L to R, T to B seems to be enough with control/option + click. I recommend checking out photoshopetiquette.com.

Charlie Waite on September 4, 2013

Thanks Ken - thats a great call with the utilities folder. Might need to add that one.

Charlie Waite on September 4, 2013

I use to do the colors as well Markiz but since switching over to the dark UI in PhotoShop the colors don’t really stand out enough anymore, so I scrapped it. Definitely will check out that link. Thanks for reading.

Charlie Waite on September 4, 2013

Daniel, no real reason that they are all caps other then I liked the visual when all the groups are open. Helped bring one extra level of hierarchy to it - since I no longer use colors.

Steven Langbroek on September 5, 2013

Love it! I’m starting at a semi-large company in a couple weeks as lead front-end developer, and part of my job will be to introduce coding conventions (BEM’ing up the place). I will also have a good chat about your ideas with our Creative Director, think it would serve us well! Thanks alot!

Steve Silvas on September 5, 2013

Refreshing to see others care about layer organization. I agree with the others in the comments about the layer colors not being so effective anymore in the dark UI of Photoshop. Organizing them with simple text rules like this is a great idea. Thanks for sharing!

David Poninski on October 10, 2013

This is awesome! I think I’m going to look at incorporating a layering notation system like this into my team. We have a guy here that has a major crush on smart objects and likes to put the header, footer, and every section into smart objects then when someone else opens it up, lost.

anthony on October 25, 2013

Thanks for sharing your process.
I’m sure we can all relate to Kenney Layers.

Very insightful.
Impressive site btw.

Oliver on October 30, 2013

Very cool!

Just wondering if you guys have played around with sketch before?

Benny on February 1, 2014

Bill Kenney wins.

Brace on April 12, 2014

Thank’s for this cool insight. I’m also really thoughtful of my layer organization, but I really like how you put in an effort to really standardize yours. Of course, I had a good chuckle at “Kenney Layers”. :)

One great thing that came with CS6 if I remember well, is the option to turn off automatically adding “copy”, “copy 2” etc. to the duplicated layers. That thing was messing with my need for organization. :) Now even when duplicating layers to iterate few different ideas I wish to try, layers still look organized. Come to think of it, I think I really hated that “copy” stuff. :)

Share your thoughts