Let’s talk about organization. I know I know… not the most entertaining subject to talk about but it’s imperative we do. If you do not get into the habit of organizing your PSD files, you’re setting yourself up for a slower work flow, an embarrassing presentation, and one or two really annoyed developers.
You may think taking the time to organize, name, and group your layers is nonsense. Sure. I used to think so too. But there are several benefits to this sudden, new, habit you should be doing in every single project from this day forward.
- You will be able to locate anything you’ve designed in a PSD, without confusion, in only a few seconds.
- Developers will literally shake your hand and tell your clients that you are the best designer they have ever worked with. Seriously – I’ve had over 10+ developers do this.
- Your workflow will be insanely faster.
- Naming, grouping, and organizing layers will allow you to hide/make visible several layers at a time.
- Instead of selecting several layers at a time to move an entire area, you can select an individual group and move all the layers within. (This is key for web design and wireframing)
- You’re a designer. Your job is to be detail oriented, effective, and know where know every layer and where it is at all times.
- It’s more than common practice. All professional designers organize their PSDs. Well most of them at least. I find it really hard to believe if someone is serious about their design, they don’t organize their files.
- Organization is always better in general. A PSD is not supposed to be some kind of abstract painting. Get real and organize your shit.
So let’s talk about general organizing etiquette and ways you can start and should organize your PSDs.
1. Name your layers
Every layer and group should be named. If you’ve got a shape layer that is a circle, name it ‘circle’. If it’s a blue circle and there is a green circle next to it. Name blue, blue circle – and green, green circle. It’s not that hard and it will only take you seconds to do it. In case you have no idea how to name/rename your layers or groups…
Double-click the layer name or group name in the Layers panel and enter a new name. Press Enter (Windows) or Return (Mac OS) to save the new layer name or group name.
Pro-tip: Developers will love you forever. If you’ve got a complex PSD with a ton of different variations and elements, your developer is going to have to sort through it. Naming your layers will make this easier for them to find certain elements. They will also know what the hell is going on in the magical genius that is your PSD. And I assure you their email correspondence will be ever so cheerful as well.
2. Put your layers in groups
Laying grouping is one of the most important things I will stress. Your design is a masterpiece. Let your file be one too. You should not have header elements riddled footer elements throughout a design file. It’s sloppy and it will take you 25 minutes to find what the hell as a shadow on it that shouldn’t.
Create a header group. Put ANYTHING that you see in the header of your design, in the header group. Create a footer group, do the same thing. It’s not that hard.
There is no reason why you shouldn’t be grouping your layers. I don’t care if you’re making an individual ‘add to cart’ button or ‘50% off badge’. The layers should be grouped.
What you need to understand is that the further you progress down into this wonderful world we call design, the more you’ll remember you’ve designed something already that you can use again. For example, a ‘50% off badge’ or an ‘add to cart’ button. Plain and simple. When you bring those elements into another PSD, you don’t want random layers floating around without having any remote idea what they are. Group them, name them, then bring them into another document. As soon as you drag the group in, you’ll know what it is, where it is, and the correct group to place it in. It’s not that hard. Just do it.
Pro-tip: Developers will love you even more forever. Grouping your layers allow them to quickly find things as well. It will help the slicing process and making things less confusing when it comes to completing a project and/or design that you have poured your heart into. Long story short, they will appreciate it – so just do it.
3. Delete Unnecessary layers
Don’t be a layer hoarder. Just delete them. Unnecessary layers are like clothes in your closet that belong to your ex girlfriend/boyfriend. They’re not good for you to have around and do nothing but take up space. Toss that shit. It’s ok, I promise.
4. Globalize Common Elements
This might be a little hard to understand if you’re new to layers, photoshop, and design – but I’ll try to explain. If you’ve got three different variations of a logo, that all have the same background… don’t have the background included in every single variation. Put the background layer under the ‘variations’ group and label it ‘logo background’… save yourself some space. See image below for example.
5. Use layer Comps
Have a difficult time finding which layers need to be visible for which layout? Need to know which layers work together? The solution: Layer Comps.
Layer comps are a great way of showing different variations without having to build multiple groups and PSDs. Using layer comps allow you to see different variations of an elements you have created without having to change the visibility of each and every grouping or layer you’re comparing it to. A little confusing but I’ll explain. A good example of where you might use layer comps is when you’re designing a navigation menu. Say you design a navigation. It looks nice but you need to also design a dropdown menu too, right? Instead of duplicating the navigation menu, naming the group ‘dropdown’, putting that group above the original, and changing the visibility of the the original menu group to invisible… sounds like a lot, right?
You can use Layer comps to organize and quickly activate different variations within a click of a button. Say you want to show someone the dropdown menu you designed.. go to layer comps, select dropdown and boom. The static navigation is no longer visible and now the dropdown menu is. Simple and clean. Voila.
To find Layer Comps, go to Window > Layer Comps.
Click here to learn more about layer comps.
6. Use Smart Objects
Have a ton of repeated elements in your design? Use Smart objects. Smart objects are literally, smart objects. But I’ll explain. Smart objects function similar to groups. They can contain a ton of layers which you can move all at one time, you can duplicate them and still have all the same layers, and you can apply layer styles to them. But the magical thing about smart objects is that once you apply changes to one, the rest are updated as well.
For example. Say you’re designing a sales page and designed a product graphic for a clients ebook to use on the page. You use this product graphic all throughout your design several times. So obviously instead of dragging it in over and over again, you duplicate it to use throughout the entire design. You show your final page design to a client and he doesn’t like the product graphic you made. It’s okay – sometimes this happens.
Instead of having to change the product graphic, duplicate/move, duplicate/move, duplicate/move… you can simply change one, and the rest change as well. Sounds magical huh? Well it exists and it’s called smart objects.
I can go on and on about smart objects and different ways you can use them but I’ll save that for it’s own article. Click here to learn more about smart objects.
7. Color your layers and groups
This one might sound time consuming but trust me, it will help your workflow in the long-run. It’s all about efficiency. Do you want to be a slow designer or a fast designer? Fast, ok well start coloring your layers and groups. When working in very complex designs, grouping and naming layers help. Sure. But what if you’re looking for a background layer and you’re able to find this background layer in a split second because you know your background layers are always colored, blue. So you quickly open up a group and select the blue layer. Without looking at names, searching through the layers. Nope. Boom. Selected. It’s that easy. Save yourself some time. There’s no reason why you shouldn’t be coloring your layers or groups.
8. Keep your text clean and editable
Text needs to be clean. Sizes should be in whole numbers. Sure, you may use the transform tool to quickly re-size text from something like 16px to 300px. But after you resize it, make sure to round it to whole. Your developer will greatly appreciate it.
And please… please… do NOT flatten or rasterize your text layers. There is absolutely no reason why you should ever need to flatten your rasterize your text layers. Unless you’re making some sort of abstract background element using text, but seriously. You get what I mean.
9. Use Guides and Grids
This is a must. When it comes to uniform and pixel perfect design, you’ve got to use guides and grids. Composition is key. Don’t jeopardize an entire design because you’ve got several elements that are misaligned and 1-5px off. It’s sloppy and inefficient.
Keep things uniform by using guides so all of your elements are lined up correctly. Developers will also shake your hand for making their job easier as well.
10. Use Vector Shape when possible
Photoshop works with pixels. I know. But something you might run into when figuring out and adjusting things for the right composition and alignment is that you will need to constantly re-size things. And I’ll emphasize the word CONSTANTLY. The main advantage of working with vectors is that you can re-size them to whatever height/width you want, over and over again, without loss of quality. Nothing will become ‘pixelated’ because they are not pixels. They are vectors. Do yourself a favor and try to use vector shapes as much as possible.