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.
#89: Organizing a Photoshop Document
Chris Coyier
on
(Updated on )
Never knew about turning off all other groups by command key and clicking, good tip worth the 20 minutes – thanks
sorry i mean option key lol.. im on pc, alt key lol
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. : )
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.
Hit ‘f’ to change your view to full screen then pan your document to put it where you like on screen :)
Thanks. Always learning small neat things, for example handy keyboard shortcuts :-)
Sweet stuff, Chris. I actually never used to handle different pages with the Layer Comps panel so I thank you for showing that too!
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.
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!
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
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!
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.
I like to organize thing like they will be in HTML: left to right, top to down.
Also little known Photoshop feature, Smart Layers. At least I know nobody who use it.
It’s like proxy object in 3ds Max and After Effects.
It has some advantages over folders and regular layers:
— it takes only 1 slot in layers palette and you still can edit it (by double clicking on its icon);
— you can rescale and transform and when you reset, it will have same quality; also it remember transform states like perspective and rotation, unlike normal layers (their transform boxes will reset after each transforming);
— it can save lot of RAM (especially if you work in 32bit/channel mode) You can convert many layers with heavy effects into one Smart Object, now it will be «flatten» image for Photoshop, but you can still edit it (in linked file);
— If you design elements in separate files and then link into master page as smart object, it’s already sliced. Code guy will appreciate this.
— For repeating design elements, you can edit one layer and all copied elements will change automatically.
— You can link vector and text smarties (it will save all styles) from Illustrator.
Disadvantages:
— you have to edit in separate file, so you need to ctrl-tab to see changes;
— Since its flatten image, blending modes does not work on transparent pixels (some effects like glowing will be normal blending mode instead of screen, so you will have to add that effect on master page and not inside Smart Object, which is not always possible to make how you want).
Anyone else not able to get the video to play? Tried it on this laptop and my other one and no luck yet.
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.
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.
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)
Copy text is annoying, I didn’t even know that it possible to get rid of that. I always removed it manually.
Chill Tutorial nice naming conventions, separator lines -LOL.
That was kind of hilariously thorough (in a good way).
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!
Fun and informative, thanks Chris. Gonna share this with my students, hopefully this will motivate them to be more organized in Photoshop :)
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.
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
There’s an App for that :)
http://www.macupdate.com/info.php/id/27841/dock-spaces
I don’t think that’s the right app. Seems to me Dock Spaces only lets you create a different dock for each space. What we’re after is creating groups of apps on the dock and adding space between each group…
Anyone out there know what we’re looking for?
I think all Chris uses is a blank icon to create the space the grouping is just done manually you don’t need an app to do this. A terminal command creates the blank spaces see this post.
http://macs.about.com/od/usingyourmac/qt/dockspacer.htm
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?
Great screencast. Definitely learned a lot from this, especially layer comps and all the shift/command clicking. Thanks.
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.
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.
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.
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.
cool the layer comps are very good, tnks you are good
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
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!
Gotta love grouping :) but Photoshop is the best :) layer comps is good but I would recommend it photoshop advanced users.
Nice one Chris ! Nothing more than messy photoshop file. Cheers for tips!
nothing more annoying than (thats what I wanted to say:)
Simple and nice. Thanks Chris. Though its definitely always a pain to organize the PSD files. :)
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!
Thanks for sharing this, I’ve never even thought of organising and this will help with making me a little less annoyed when working :)
great tips for getting to the bottom of things….
This never gets old…