#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.


  1. User Avatar

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

  2. User Avatar

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

  3. User Avatar
    Kartlos Tchavelachvili

    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. User Avatar

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

    • User Avatar
      Chris Coyier

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

    • User Avatar
      Noah Hendrix

      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.

    • User Avatar
      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. User Avatar

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

  6. User Avatar

    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. User Avatar
    Jack Nycz

    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. User Avatar

    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!

    • User Avatar

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

      thank Chris these tips help me .

    • User Avatar
      Permalink to comment#

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


  9. User Avatar
    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. User Avatar
    Warren Jerzyszek

    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. User Avatar

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

  12. User Avatar

    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. User Avatar

    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. User Avatar
    Thomas Offinga
    Permalink to comment#

    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)

    • User Avatar
      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. User Avatar
    Dasota Hai
    Permalink to comment#

    Chill Tutorial nice naming conventions, separator lines -LOL.

  16. User Avatar
    Ivy K.
    Permalink to comment#

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

  17. User Avatar
    Permalink to comment#

    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. User Avatar
    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. User Avatar
    Rob Hanson
    Permalink to comment#

    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!


  20. User Avatar
    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


    thanks in advance

  21. User Avatar
    Permalink to comment#

    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. User Avatar
    Permalink to comment#

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

  23. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Chris Lorenz
    Permalink to comment#

    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. User Avatar
    Permalink to comment#

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

  28. User Avatar
    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.


  29. User Avatar
    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. User Avatar
    Ioan Popa
    Permalink to comment#

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

  31. User Avatar
    Permalink to comment#

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

  32. User Avatar
    Piyush Agarwal
    Permalink to comment#

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

  33. User Avatar
    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. User Avatar
    Permalink to comment#

    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. User Avatar
    Permalink to comment#

    great tips for getting to the bottom of things….

  36. User Avatar
    Permalink to comment#

    This never gets old…

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.