
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 palette.

In the instance of buttons, we use a global folder called “something btn
.” Within that folder we include 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 PSDs. 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 a unified structure when dealing with large PSD files.