Be organized and you'll receive good karma
Once every full moon I still receive PSD files from other designers that I waste my time on cleaning up their file because I just can't help myself. Why, you ask? Well, I just can't function in a messy unorganized, unnamed document.
Ever since I work for Fab as their Design Lead I have been delivering Photoshop files for the developers more than ever. The organization of these files is important, as I need to keep in mind that they need to be able to work with them in the most efficient way. Generally speaking, I always try to keep these basic rules in mind:
- Keep Layers, effects, masks… as flexible possible: use Smart Objects, vector-shapes, etc.
- Give each Layer & Layer Group a logical name
- Make sure your Layers & Layer Groups easy to navigate
- Use Layer Comps where needed
Keep flexibility in mind
Keep Layers, effects, masks… as flexible possible. Use Smart Objects, vector-shapes, etc. Think about the fact that an item needs to stay editable, scalable etc. This is very important, especially if you work on designs for iPhone or iPad and you want your design to scale perfectly for Retina. But even in any other situation flexibility is important. If changes need to be made, make sure it's possible, and also in the least possible time.
Easy to navigate
To me it's pure common sense to place the Layer Group named FOOTER that holds all the Layers of the footer, at the bottom of the Layers palette, and the Layer Group named HEADER containing all the header Layers at the top of the Layers palette. Furthermore, before I hand over my Photoshop files, I also make sure to clean out the hidden unnecessary Layers where I have tried out stuff which aren't needed anymore in the final approved version.
You probably noticed by now that one of the Photoshop CS6 improvements brought us a new feature which allows you to use search for your Layers. This feature alone should convince you to name your layers. It's such a powerful tool! Choose a 'Filter Type' by clicking the drop down menu at the top left of the Layers panel and choose from Kind, Name, Effect, Mode, Attribute and/or Color. Then, use the corresponding options that appear to the right of the Filter Type to narrow down the search. The 'light switch' to the right of the Filter options toggles the filtering on and off. Note: when filtering by Kind, you can click on more than one icon at a time in order to narrow down the search. Click an icon again to toggle if off. (source)
Mark specific Layer Groups with a color
In a lot of situations I have to make updates on a file that has already been sent to the developers, and so I have to resent this file with the update in place. This could be something like an icon, button, or some detail that had to be added in a later stage for example. Usually the file contains a lot of Layers and Layer Groups. To help the developers in finding the change or new item I give the Layer Group a color. You can of course use colors for other purposes. You could for example create the habit of coloring the Layer Groups that holds hover states of buttons.
When creating a web layout in Photoshop your document quickly fills up with a lot of guides. It's essential to keep them relevant and useful. Using too many guides will overwhelm others and they probably will turn them off and disregard them. I personally try to stick to gutter, columns and sections when using guides. If I use them for anything else I usually throw those away when handing my files over.
Use Layer Comps
I wrote about Layer Comps ages ago on my old blog. I'm not sure, but I believe Layer Comps are underestimated. I use them all the time to show different states of a design. Especially when I work on iPhone and iPad designs they come in pretty handy. The content is usually longer than the screen, and so I use Layer Comps to show the content further down below when the user scrolls down, or when the user taps and item, to show the different state. You can combine a lot of different screens within one Photoshop file in a more organized way, not only for yourself, but also for the developer as he can zap quickly between the difference screens, and states.
Use the lock
If you really want to preserve an original state or position use the Layer lock. I usually lock the header, background or other elements of the design that can't be changed anymore. By doing so you prevent important Layers from being edited and changed by accident.
There is more…
A Guide to Discernible Web Design in Photoshop
A great site that everybody should know about is Photoshop Etiquette created by Dan Rose. I've already linked to it long time ago but it got totally relaunched about 4 months ago. I must say that this incarnation is fantastic. Everything is clearly organized and you can click the + sign to expand to see a screenshot and often a link to a good resource as well. This should be a must read for all designers. Next time you receive a mess point the owner to this site and hopefully the next time you receive a new PSD he or she understood the message.