For the past couple years I’ve been flying solo pretty much exclusively. It’s only been recently that I’ve been collaborating with other designers and developers during my freelance journeys and time at Graphics.net. Now that my work is changing hands, I find myself spending a few extra minutes tidying things up before I pass them on. As I discovered pretty quickly, some of the traits that have become second nature to me, aren’t so obvious to others. This is the first in a series of “best practices” articles to follow that will cover some of these areas.

Disorganized layers leaves people (and yourself, for that matter) digging in frustration to find what they’re looking for which only slows down the entire process. By naming layers, using folders and colours, it’s very easy to keep things in order.

Layers Palette

Name Your Layers

While it’s not imperative that every single layer has a unique name. Anything significant and not rightly obvious should be named. It’s easiest to keep on top of layer naming by immediately setting a name once you’ve finished with the layer you’re working on.

Use Folders for Grouping

In the last couple of versions of Photoshop, we’ve been able to embed folders in the layers palette. This helps to take organization a step further than ever before. Now it’s possible to group layers together in a folder and even group folders inside a parent folder.

A good example of a solid folder structure would be the header of a site. Make a top level folder called “header” and put sub-folders inside for “nav”, “search”, “newsletter”, etc.

Colour Coding

Probably the least common method of organizing the layers palette is assigning colours to folders and individual layers. But used wisely, can be very effective. One could easily establish their own colour scheme that gets carried across each PSD they work on.

For example: Header elements are red. Main content is orange. Sidebar is yellow, etc.

I’m sure for some, this will seem all too obvious and hardly beneficial. To those people, I owe a high-five if we ever meet in the real world.

21 Comments

There was nothing new to me in the article – I’m using this every day.. high five 😉

Though I passed the article around the STUDIO Department in the company I work. Searching for an element in .psd files I get from them is a nightmare… usually it’s something like… shape 24 on grouped layes 34, 67 and 99. Everything in Folder 2 copy 5 😉

A great idea to write an article like this, and also – a great article! Keep up the good work 😉

I’m using folders and I name my layers when the work I’m doing is in a collaborative project or a commission.

All my experimental projects or personal projects look like andrzejk said. Haha.

Great article, I didn’t think of color code my layers. That’s something new. Thanks for the tip ;).

Amen brother Matt!

I work at a company that does a lot of print work and only recently ventured into the intarweb stuff, two years after they started I was hired and for a year and a half now I’ve been trying to get them to understand that an InDesign file or a JPG is not enough for me to work from.. PSD’s, neatly ordered at that, are the only way to go.

Hope to see a lot more of these articles, there’s tons floating around the internet but confirmed sources such as yourself are a sure hit for quality, keep it up!

I’m an organizational freak. My desk may be a little cluttered during the day, but when I’m ready to go home it holds a phone, monitor, keyboard and mouse. The rest is as clean as a whistle (a new whistle, not your old gym coach’s).

I suppose that my organization with folders, and .psd files come from that same nature. I even take it a little further and close all folders before I save when passing it on to co-workers at Blacksuits. So, when the other designer gets the file they open it to find (about) 5 folders containing the entire site.

Others I have worked with in the most part do not follow these same guidelines when it comes to organization… however a few do. Just seems that in the rush of trying to get things done faster to save money, people completely disregard the basics of productivity.

Good article bro.

I’ve never seen colourcoding before in photoshop (and ive been using it since PS6!). Shame on me, I’ll have a look at that.

I’m usually quite messy working on lone wolf projects, so it’s always good to get reminders of how I should be organizing my files for collaborative work.

I don’t use colouring that extensively, however. Usually I just set the folders that contain the grid and division layers I always use to red. I probably should be applying different colours to at least the folders containing the div structure also.

Good write-up. Cheers

I actually completely forgot about them, but I remember how frustrating it was working at a company and trying to make sense of the PSD files. I normally just cycled the visibility on and off until I found the one I needed.

Good article 😀

Nice post. This is one method that really help in the agency world. So many times you are on/off a project only to hand off or received files. We even deal with our other offices with completely new designers whom you will never meet.

Organizing PSDs helps in so many ways. #1 being efficiency. Spending time organizing, renaming layer 72 etc sux!

I’ve been meaning to write more post liek this but time is $$$. 😉

Go sparingly on the colored folders/layers. Color is meant to make something stand out. If everything is colored then nothing stands out. Plus, one man’s "Green for Masthead" might be the next man’s "Green for Content." A former coworker used to color code everything his way, once opened was a visual nightmare for anyone else…

It seems, from reading a few comments here that people don’t utilize the optional auto select feature (apple+click).

I don’t leave the option active because it sucks to try to click exactly on a layer, but if you apple click, or even better, right click you can make sure you get the right layer.

This is of course for larger websites where you have so many layers that naming and color coding are no longer the fastest option.

I do like to keep my layers organised!

And I’ve never used folders – so thanks for the tip Matt.

Cheers

Yeah organizing the layers is really important. I get so sad that I even have ‘backup’ layers before I rasterize things or make to many changes, just in case I need to go back later one and change some things.

Also deleting the crap is important and merging certain aspects.

I always tend to do the first two, however I have never thought of doing colour coding, thanks!

I’ve started using a workflow process of actually naming my photoshop folders inline with the div ids that I use for markup. So a “branding” folder will correspond to a #branding div id.

Obvously, there’s no point getting carried away with empty “container” folders but it helps establish conventions early on.

I’ve still to work out if this is in fact useful or just a complete waste of time, but I like the idea of starting the semantics process when designing the content.

Glad to hear this article is of use to some, especially those that have been using PS for a while. It’s always fun learning new tricks and techniques for software you use on a daily basis.

I’m not surprised that colour coding is new to so many. I actually rarely use colours myself as it’s only been recent that I’ve had to pass around my PSDs.

@Jdjohnson: I personally can’t stand auto select. More often than not, I end up with quite a few effect layers for edges and noise and auto select simply can’t pick the layer I’m after in most cases. I can see how it could be useful for some, but I don’t think it’s a feature that should replace organization.

@Roan: Hey, that’s a good tip! And actually, I’ve been doing that on a basic level all along. While I don’t break it down exactly how it will be laid out in XHTML, I tend to use the same names for folders as IDs in the markup for the main structural elements anyway – header, nav, content, sidebar, footer, etc.

I don’t collaborate with my designs often, but when I receive a PSD that shows no signs of layer naming or uses folders, I cringe and then begin to dig through every layer organizing them before I can even touch the PSD. It could be that I am an overly organized person and I can’t stand things to be unorganized.

I enjoyed the good article, I have never used the coloring, but I may have to give it a shot sometime.

I go mad if I don’t label my layers. Folders are KEY as well. Haven’t gotten to big on the color coding yet. Wish more people would follow these guidelines.

Amen brother. I’ve been doing the naming, grouping and colour coding for quite a while now. Methinks it’s time to forward this post to some of the other designers I work with. 🙂

Great article, I can’t use folders since a lot of the times I bring whole Photoshop files in After Effects. But I use colors for my layers in After Effects, never thought about doing it in Photoshop.

And yet another simple but very useful information I’ve learned today..though i’m very much particular in organizing my work but this color coding thing didn’t come across my mind until now…

Comments are automatically closed on articles over 5 years old.