Oct 10 2012

25 Best Practices for Collaborative Work in Photoshop

feature-image

Whether you’re working as a freelancer or in an agency, you’ll often collaborate with other designers and developers on a project. Although we all try our best to keep our Photoshop etiquette intact, time crunches, old habits, intense focus, and sometimes sheer laziness prevent our PSDs from being in tip top condition for others to work with. Even when our PSDs are properly organized, they’re not necessarily optimized for a collaborative workflow. So here are some practices to keep in mind when preparing and sharing PSDs between multiple collaborators.

Easily Navigating through a PSD

1. A web of guides

Make sure the guides you have are absolutely relevant and useful for others. For example, if you’re doing a web layout, it is essential to create guides that indicate cutoffs for headers, sections, and margins. But having too many guides will make your collaboration partners feel overwhelmed, causing them to disregard your guides entirely.

2. Hidden layers

Ever scratch your head trying to determine if the hidden layer you’ve found is actually there for a reason? Often times hidden layers are just leftovers that didn’t end up making the cut in the design. Other times they’re hidden because they represent active, hover, or other states (see practice #3 regarding this point) in a design. Determine if the hidden layers you need are really necessary in your PSD; if they’re simply excess, trim them down to reduce unnecessary file size and RAM usage for your fellow collaborators.

3. Establish simple naming and color conventions for changed states in a PSD

If you have multiple states in a PSD (such as an active or hover state of a button), indicate this through an easy-to-understand convention that a new collaborator can quickly acknowledge. For example, if your button’s group name is “Blue button,” caps the changed state of a button and add it to the beginning or end of the original button’s name, such as “Blue button – ACTIVE.” Also, consider using a color code system to designate all hidden or designated layers and groups for certain things, i.e., red labels for active states and yellow labels for hover states.

4. Name everything

If you’ve tuned into some of the CS6 Photoshop improvements,  you’ve probably seen that Adobe has implemented a new feature which allows you to use search functionality for your layers. With such a powerful tool finally in place, there’s absolutely no reason why you shouldn’t be naming layers in Photoshop anymore. Get on board with this commonly disregarded best practice and make it a habit to name your layers!

5. Group utilization

Grouping layers is the most effective form of PSD organization available. Group high-level elements (i.e., Header groups, Section groups, and Footer groups) or group related elements (i.e., buttons, banner elements, or graphical treatments) to make navigating through your PSD a breeze. And if organizational benefits alone don’t compel you to use groups, consider the value that groups hold in CS6 where now you can add layer styles and clipping mask abilities to groups as well! 

6. Hierarchical layer and group ordering

Whether you order your layers bottom-to-top or top-to-bottom, it’s important to be mindful that there should be some sort of hierarchical ordering of groups and layers within your PSD file. For example, if you’re working on a web page and it includes a header, three body sections, and a footer, don’t stick the footer group between two of the body sections if you don’t have to. Order your groups and layers in a way that makes sense for first time viewers to navigate through.

7. Proximity of related layers

When you’re in the zone and flying through a design, it can be easy to let a stray layer or two get separated from the rest of its related layers – don’t let it happen though! Finding and salvaging scattered layers can be one of the most frustrating things that a fellow collaborator might have to deal with. You know your PSD’s layers better than anyone else so don’t waste someone else’s time by getting disorganized and sloppy. And when in doubt, link layers together; at least that way when they’re dealing with a graphical element on your PSD, they won’t be leaving a separated layer out accidentally.

8. Be a good note taker

If you have important things you need to call out in your PSD, take advantage of the Note Tool in Photoshop. If the margins between that text block and image have to be 50px, write it down in a note. And remember, collaboration is about helping everyone out; a simple little note on pixel dimensions, hex colors, or special things to look out for can go a long way for the next person who’s going to be opening your PSD file.

Collaboratively working in a PSD

9. Out with raster, in with vector

The most important thing to keep front of mind when collaboratively working with others is that everything is subject to change. Because of this fact, it’s highly beneficial to make everything as editable and scalable as possible. Whether it’s creating a 1px line divider on a web page or a background color for a particular section on a page, try to utilize editable vector shapes as frequently as you can. Oh, and avoid flattening and merging layers whenever possible – you never know when someone needs to change or edit a specific part of a graphical element in your PSD.

10. The one vector mask to rule them all

Applying a vector masks to mask multiple elements at one time is a great practice for maintaining easy editability. Applying one gigantic vector mask over your entire PSD can, however, sometimes get in the way of quick and efficient maneuvering between different shape layers. While you can bypass this obstacle by right clicking a desired area of the canvas to pull up a layer dropdown menu, the whole oversized vector mask ordeal can be prevented with just a bit of carefully thought out planning.

11. Embrace fill layers

Although it may be easy to simply fill an entire layer with a rasterized background color, it’ll be even easier for a fellow collaborator to edit the background color of a fill layer. Fill layers, patterns, and gradients are not limited to the constraints of a canvas so adjusting the size or scale of a PSD is no problem when trying to fill an unknown and ever changing area of pixels.

12. Non-destructive image editing via Adjustments

Take advantage of non-destructive Adjustment techniques when crafting elements within your PSD. If you need to desaturate an element, consider using the Hue/Saturation Adjustment. If you’re working with Levels or Curves on an image, use a Levels or Curves Adjustment. You never know what needs to be worked on in a collaborative PSD so it’s best to provide as much editing flexibility as possible.

13. Smart objects

Sometimes you need to preserve the original EPS of an object. Other times, you may want to clump multiple instances of an element into one easily editable .PSB file. No matter what the reason may be, smart objects will always be a valuable function to use in the collaborative sphere. Identify opportunities where smart objects can benefit the workflows of multiple collaborators and take the extra time to incorporate them into your PSD.

14. Clipping masks

If you’re ever working with placeholder images or graphics that are contained within a certain shape or section, consider the usage of clipping masks. Rather than using editing and transferring layer and vector masks, clipping masks make it easy for collaborators to place any image or graphic they want into any given pixel space. Furthermore, they’re flexible to edit, easy to identify, and always in close proximity their related layer elements.

15. Utilize your Global Light wisely

Global Lighting can be both advantageous as well as frustrating to use in collaborative environments. On one hand, if all of your layer styles in your PSD utilize a single Global Light and a collaborator needs to make new styles, he/she can easily adopt the PSD’s existing Global Light. On the other hand, if he/she needs to pull a layer style with Global Lighting enabled into another PSD with a different Global Light setting, the original PSD’s styles will be overwritten with the Global Light settings of the second PSD. So as a general rule of thumb, take careful consideration of when Global Lighting can be advantageous in a collaborative PSD, and when in doubt, disable Global Light from your layer styles.

16. Quick color and style editing

Probably one of the most common things that a collaborator will do on any given PSD is edit a color or style of a design element. Simplify this task by utilizing shape layers, color overlay layer style effects, and clipping masks (with color blending modes) to allow for quick and convenient editability. Take it one step further and utilize grayscale gradients with blend modes for shape layers that need gradient effects applied to them (rather than picking the actual gradient colors in the layer style itself).

17. Creating a scrap pile

There’s a lot of experimentation and back-and-forth that goes on within a PSD that the world will never see. Sometimes, that experimentation takes a lot of time and effort to create. If you haven’t decided yet what direction you want to go with a certain layer or graphical element in your PSD file, don’t just turn the layer visibility off for the time being. Make a folder that sits at the bottom of your layers panel and name it “Unused” or “Scrap pile” and throw all of your experimental groups and layers in there. Collaborators will know to ignore the folder and you can go back to it at any time if you decide to change your mind about a design.

18. An easy go-to reference pile

A great asset to have in collaborative PSDs is an easy to access reference folder containing color palettes, references, and even some moodboarding/inspiration) within the PSD itself. Put it on the top or bottom of your layers panel and keep it hidden; when a collaborator needs to vibe off the inspiration of the PSD or quickly access the base color palette for the design, they can simply reference that go-to folder!

19. Lock elements you want to preserve

Photoshop’s lock capabilities are great for preserving the original states and positions of layers. Aside from the typical locking of background layers, consider locking transparent pixels or image pixels (in addition to locking positions) to prevent important layers from being edited and changed by accident.

20. The mysterious empty layer

Are there actually pixels on that layer or is it just your imagination? Photoshop selections won’t visibly display marching ants for pixels that are less than 50% transparent, but that doesn’t mean there aren’t pixels on that layer. You can always test whether there are pixels on a layer or not by trying to transform (Command+T) the entire layer. If it really is just an empty layer, get rid of it!

21. When in doubt, use quick multi-layer selection

Whether you’re working in someone else’s PSD or your own, if you’re struggling to select and activate a particular layer or group, utilize the multi-layer select function (activate the Move tool and then hold down Shift + Option + Command and drag your cursor) in Photoshop for quick and easy selection of those hard to find elements.

Preparing PSDs for Output

22. Translating blend modes and effects for output

If your PSD is destined for the web, know that many of the beautiful blend modes and layer effects you’ve used might not translate very well with dynamic elements on a web page. Don’t use blending modes (multiply, soft light, overlay, etc…) for the following items on dynamic elements as they cannot be reproduced (and you’ll just be disappointed that your design doesn’t look the same when it’s implemented):

  • Strokes that have a blending mode cannot be reproduced. Strokes can only be specified in solid colors, but can be different colors per side
  • Glows (inner and especially outer). These are done with the CSS box-shadow property and it has no blending modes
  • Noise patterns and textures. These must be converted to a 24-bit PNG which will be on normal blending mode
  • While Multiply may be a quick fix for knocking out those annoying white background on your logo jpgs, it doesn’t translate well when a developer exports it… unless you intend for them to take the background design with them!

23. Backgrounds

Styled backgrounds that are meant to be full bleed on a web page will invariably not be a full bleed on some monitor resolutions. In your PSD somewhere, consider designing your styled background with a fade out to a solid color on the sides of the design to accommodate for wider web resolutions that are larger than your working PSD. If your background is a texture, make sure it is tileable and seamless. Alternatively, if the background is photographic, specify (via a note!) how the background should scale with a browser window. Background images can be specified as full bleed images that just scales up or down with any given screen resolution.

24. Saving out files

Whether or not you’re using great version control plugins to maintain the various iterations made on a single PSD, it’s important to be conscious of using clear and descriptive file naming conventions. If your PSD is a homepage for XYZ store, name it “XYZ-store-homepage” and if it’s the fourth PSD version for that project, put a “v4” or “04” after the name. On that same note, also consider having a prelims folder to dump earlier iterations of your PSD. It helps reduce folder clutter and reduces confusion on which version of a PSD collaborators should be working off of.

25. Fonts, logos, and other assets

If you’re using special fonts within your PSD, it will be beneficial to your fellow collaborators if you include them in an assets folder close to your working PSD. The same applies to logos, original image assets, supporting content and copy, and other assets related to the project.

Additional tips from our commenters

26. Collapsing Layer Effects

Does your PSD’s layer panel height give the Eiffel Tower a run for its money? It might be due to all of those layer effects that you have expanded and as showy as a purebred show horse. If you want to disable this auto-expanded layer effects option then go to your layer panel options, navigate to “Panel Options…” and uncheck the “Expand New Effects” option at the bottom! Thanks Leandro Rafael for this tip!

27. Layer Comps

Whether you’re using a complex multipage PSD or a simple contact form PSD, there are probably multiple states, versions, and visual interactions that you’ll want to call out. Consider using Layer Comps to help viewers out when trying to figure out which layers and groups to show versus the ones that need to be hidden. You can designate Visibility, Position, and Appearance (Layer Styles) for each layer comp you create; plus, you can write some additional commentary for each layer comp to give your collaborators even more context into your elaborate PSD! One more bonus to layer comps is that you can easily save out jpgs (or any other file type, including PSDs) of all your layer comps via File > Scripts > Layer Comps to Files Thanks Jon Bishop for this tip!

So there you have it: the secret techniques the getting your fellow collaborators falling madly in love… with your PSDs. And whether you’re collaborating with others or not, these best practices will be tremendously beneficial to improving the efficiency, pace, and usage of your PSDs. Have any other tips that you’ve learned when doing some collaborative PSD work with others? Share them in the comments below!

About the Author:

Jessica Moon is an Art Director at digital-telepathy, a user experience design studio that specializes in creating products like SlideDeck, Impress, and Filament. She has a passion for illustration and design, and enjoys blogging and tweeting about what she’s learned. You can also find her on Google+.

Leave a Response

30 Responses

  1. Oct 10 2012
    Jamie Hamel-Smith

    This is an epic post! I love the empty layer tip.

  2. Oct 10 2012
    dev

    I think you should add in that Multiply is not a valid way to deep etch an image on a solid background; it just means someone has to go in after you and fix it up properly.

  3. Oct 10 2012
    Chris Bracco

    Is it freaky or reassuring that I am already doing all of these things in my .psds …? I prefer reassuring. It felt like I was the only one who cared about .psd organization for a long while now. Thanks for laying it all out in a beautifully detailed list!

    • Oct 11 2012
      Jamie Hamel-Smith

      File organization in general is key to any shared workflow. It’s a great habit to be already doing. It shows discipline if anything :-)

  4. Oct 10 2012
    Brad

    Bravo! Love this, looking forward to sharing with co-workers tomorrow.

  5. Oct 11 2012
    Mark Buskbjerg

    This post is surely a great checklist! Most def a keeper!

  6. Oct 11 2012
    Nathan Walasek

    Great post! I always struggle with getting others to properly organize their files. Another site that I recommend checking out is http://photoshopetiquette.com/

  7. Oct 11 2012
    Leandro Rafael

    I would include “Disable ‘Expand new effects’” from the Layer Style options. God, why do some people keep this enabled? It just mess the layer dialog!

  8. Oct 11 2012
    Mike

    Jessica, some really great tips! I’m going to share this around the office today.

  9. Oct 11 2012
    Chris

    Absolutely brilliant post. Should be printed and posted, and walked through in a mandatory meeting.

  10. Oct 11 2012
    Jon Bishop

    Awesome list. Would add using layer compositions.

  11. Oct 11 2012
    Marc

    This. As a web developer I’ve got a lot to fiddle and guess with designer’s psds. My realm is HTML/CSS/JavaScript and over the time I had to learn a lot about PhotoShop to “translate” the wishes of my designers… I will make this post mandantory to read and sign for all my upcoming projects! Thank you very much!

  12. Oct 15 2012
    melanie

    It would be best if there is a pdf version of your guidelines so that we designer can use it everytime as a checklist to follow.

  13. Oct 18 2012
    Baytech Web Design

    Awesome post…superlike !! I’ll also share this post with my friends..and sure they’ll also like…

  14. Oct 31 2012
    dweb3d

    Good directives for easy going on photohop, this practices could help to achieve goals in less time

  15. Pingback: Photoshopで共同デザイン作業するときのポイント、注意点25個まとめ - Photoshop VIP

  16. Jan 04 2013
    Mike Reed

    Layer comps are definitely the way to go for ANY interactive projects that requires multiple states (ie 99% of them). The batch JPG export combined with InDesign is the easiest way to make / update a presentation in minutes instead of hours.

    Not just that but they cut down on file size drastically, which can slow your work flow down. Any common layers between folders can be deleted and used / moved / adjusted using Layer Comps.