Grow your CSS skills. Land your dream job.

#89: Organizing a Photoshop Document

If you are like me, you are both guilty of seriously unorganized Photoshop documents and appreciate well organized ones. The disorganization isn't intentional, it's just born of (if you'll pardon the likely-inaccurate cliché) being in right-brained creative mode and caring about what you are looking at not the left-brained organizational stuff. Then it compounds itself as you go in and out of the file for days on end. If you are handing this file off to someone else, or are beginning the HTML/CSS conversion process, it's a great idea to revisit the file with the specific intent of organizing it. We'll cover good naming conventions, using folders, layer comps, and various other little tricks.

Comments

  1. Zack

    Never knew about turning off all other groups by command key and clicking, good tip worth the 20 minutes – thanks

  2. Zack

    sorry i mean option key lol.. im on pc, alt key lol

  3. nice, it would be also cool if you often make Photoshop tricks screen casts, for example, new features in new CS versions, some cool tricks etc. : )

  4. Rob

    How do you have your desktop background showing while photoshop is open?

    • Maybe that’s a Mac specific thing, I dunno.

    • It is a Mac thing. It sort of a fundamental difference between the culture of Mac and culture of Windows. Windows is more about containing an application in window (sort of fence like). Apple has traditionally gone toward more free form palettes that you can move around and layer with other applications, like if you were following a tutorial online and had it to the side of your document so you could see it without switching focus.

      I think in Windows version you can go to like window and turn of windowed mode, and vice versa on Mac.

    • Permalink to comment#

      Hit ‘f’ to change your view to full screen then pan your document to put it where you like on screen :)

  5. Thanks. Always learning small neat things, for example handy keyboard shortcuts :-)

  6. Sweet stuff, Chris. I actually never used to handle different pages with the Layer Comps panel so I thank you for showing that too!

  7. If you have all the layers selected that you want in a group, you can click Ctrl+G (Command+G for Mac…?) and it will put those layers in a group – shorter than holding shift and clicking the folder icon, for me at least.

  8. I Use alot of external dynamic layer for complicated part like website-Menu-butons… for ease to export .png of my butons without always switch between masking surrounding area of those website-Menu-butons.

    When I update the design of my external dinamic menue .psd my main design change too !

    By the way first time I heard about Layer Comp ! Thats great!

    • arnold

      yeah me too , layer comp is a time saver, I didnt know that.

      thank Chris these tips help me .

    • In the same position here – layer comps is definitely an unpublicised but extremely useful function of Photoshop!

      @Prydie

  9. Brett Sanders

    Hey Chris — Love your site ! … What other Adobe apps do you use on a regular basis? I see you have Illustrator, Fireworks, and a few others on your dock … Are any of these part of your regular work-flow? If so, how so? Thanks!

  10. Hi Chris, I am like you! Really messy with my Photoshop files… I do however have really good intentions to be a bit neater with file naming and grouping. I find that if I’m being to tidy I am quite slow during the design process and usually find it a bit of an un-necessary distraction. I do like to go back to the files when I have time and give them a bit of a clean up.
    The Layer Comps is insane… I have seen it used a couple of times before but just never bothered with it myself. I have a couple of ideas on how I can use it to really help my work flow, so thanks for refreshing me with some PS-Tricks.

  11. Anyone else not able to get the video to play? Tried it on this laptop and my other one and no luck yet.

  12. Edward

    Hey chris that was a great screen cast.

    I also would like to see more of photoshop stuff from you.

    Maybe put a poll out with some screen cast idea’s for photoshop and maybe if you could do a illustrator screen cast not sure if you use that program or not for coding but it would be neat to see you do a show with that program.

  13. Great tutorial. I have been using Photoshop for a short time and knew about changing names, but didn’t know what the folders and comps did. I do now. Thank you for sharing.

  14. Nice screencast, I’ve got a nice productivity Photoshop CS5 tip for you.

    You know when you duplicate a layer or a group, it puts ‘copy’ in the name of the layer/group ? Well, you can prevent that!

    Open the panel menu (little button on the top right of the layers pane) and click ‘Panel Options..‘. There, at the bottom, you’ll see ‘Add “copy” to Copied Layers and Groups’. Just un-tick that and you’re done!

    (note: This is a CS5-only feature)

    • Ant
      Permalink to comment#

      Copy text is annoying, I didn’t even know that it possible to get rid of that. I always removed it manually.

  15. Chill Tutorial nice naming conventions, separator lines -LOL.

  16. Ivy K.
    Permalink to comment#

    That was kind of hilariously thorough (in a good way).

  17. Great video and I love how you narrate the videos… I was crack’n up and I learned something too, damn it was a good day!

  18. Permalink to comment#

    Fun and informative, thanks Chris. Gonna share this with my students, hopefully this will motivate them to be more organized in Photoshop :)

  19. Great Screencast Chris!

    I use Pixelmator & PSE 6.0 for Mac these days, but the principles transfer across fine.

    Learnt a couple of things I never knew, so definately worth watching if you use PS, PSE or Pixelmator.

    (Digging in to WordPress is loping good too! – just reading the sample chapter – looks like I’m buying the full PDF :0)

    Thanks for all the trick & tips – keep ‘em coming!

    Rob.

  20. Phil
    Permalink to comment#

    Chris(or any other knowlageable reader) I want to ask how do you organize your dock.
    I have recently got my first mac with
    snow leopard so please excuse my ignorance.

    Below is a screenshot example of one
    of your past screen-casts

    http://img687.imageshack.us/img687/6302/osxdockcustomizing.jpg

    thanks in advance
    Phil

  21. The command+click trick wasn’t definitely worth the 20 minutes.

    Does anyone here use Fireworks? I’ve always been a PS guy, but a new client turned me onto Fireworks. For web related mock-ups, I find it’s WAY more powerful than PS. Your thoughts?

  22. Great screencast. Definitely learned a lot from this, especially layer comps and all the shift/command clicking. Thanks.

  23. Larry
    Permalink to comment#

    On top of organizing the main elements in groups I organize them in the order they appear:
    from top to bottom and from left to right. this helps me and the coder a lot to find elemnts quick and easy.
    I always use the Layer Comp feature when I design a complicated navigation to switch on and off mouse over states, onclick etc. In the beginning it seems more work to name all this states but you will be thankful in future cases where you have to alter the menu.

  24. Jay
    Permalink to comment#

    Didn’t know the Shift-Folder shortcut to put selected layers in the group, nor ever took the time to figure out Layer Comps. Didn’t realize how simple it is, and will be greatly helpful. Nice video. Thanks.

  25. Jerad
    Permalink to comment#

    Wow, totally did not know that “copy merged” shortcut. That’s going to be a huge help for me when I am slicing my designs. Thanks for spontaneously being awesome! haha.

  26. Lol… so glad that I am not the only one who creates a nightmare of a PSD first and organizes it later.

    Love the site.

  27. ivange
    Permalink to comment#

    cool the layer comps are very good, tnks you are good

  28. Permalink to comment#

    Hi Chris:
    Nice one here, I liked the little tricks shown, I find it really helpful.
    I usually work this way doing the organization stuff at the end of the project, although I’ve seen some people who do this while they create the design.
    So, they would name each layer right when creating it and do the grouping stuff right from the beginning which makes things easier for them later on when the number of layers increases.

    thanks,
    elmalak

  29. Permalink to comment#

    I agree with the first comment from @Zack. Opt+click to see what’s what in the layers panel is a great shortcut to know. Only drawback is if you opt+click a layer and then turn another layer on before opt+click everything back on you’re screwed. You will have to turn each layer back on 1 by 1!

  30. Permalink to comment#

    Gotta love grouping :) but Photoshop is the best :) layer comps is good but I would recommend it photoshop advanced users.

  31. Nice one Chris ! Nothing more than messy photoshop file. Cheers for tips!

  32. Simple and nice. Thanks Chris. Though its definitely always a pain to organize the PSD files. :)

  33. Geo
    Permalink to comment#

    Thank you so much Chris! Can you believe that no one else has this tutorial?? As a designer, I can’t have coders yell at me to have a perfect Photoshop file if no one has shown me how to make one!

    Now, just a little, little bitchy editorial from the proofing department:
    Although “unorganized” is not gramatically incorrect, “disorganized” is the more standard usage.
    Spelling of “seperations” should be “separations.”

    Thanks again!

  34. Thanks for sharing this, I’ve never even thought of organising and this will help with making me a little less annoyed when working :)

  35. pete
    Permalink to comment#

    great tips for getting to the bottom of things….

  36. Permalink to comment#

    This never gets old…

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".