Photoshop Etiquette

07 Feb 2013

I like a tidy desk, desktop and environment to function at my best and others like it messy to feel comfortable. If there is one place where everybody should be organized it would be Photoshop. Even if you work alone it is good practice to follow some basic rules to make life a little easier.

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.

Search Layers

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.

screenshot of Photoshop file with Layers and Layer Comps palette

Guides

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.

guides in photoshop

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.

screenshot of Photoshop file with Layers and Layer Comps palette

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.

Comments

  1. 1 Tim 08 Feb 2013

    Layer Comps are cool, but the problem with them is you have to be EXTREMELY careful when using them. Particularly if you use the Positioning and Layer Style checkboxes. And even more particularly if you work in an environment where several people need to edit the file.
    If you have layer positioning turned on and then move a layer in one layer comp, but forget to update other layer comps, it can quickly turn into a nightmare within your file. It can also become quite tedious to constantly have to update layer comps every time you need to save your file.
    It would be nice if Adobe added a checkbox for Global change or something like that, so that it cascades through all your layer comps.

  2. 2 Lenny Terenzi 09 Feb 2013

    I cannot seem to get the grasp of Layer Comps. Everytime I try to use them it never saves my states. Sigh…

  3. 3 Sjoerd Dijkstra 14 Feb 2013

    I agree with Tim. Be careful with layer comps. They are great when creating a file, but sometimes annoying when you just have to work with a file someone else created. I use groups and locks to keep organized.

The Deck

Ads via The Deck