Organising a Photoshop File for Web Design
Here are a few tips for keeping your Photoshop files nice and tidy for web designs.
Usually when designing I’m not overly tidy in keeping my layers nice and organised, and it’s probably not a good thing to be too anal whilst in the haze of a creative explosion, ordering layers when you might end up deleting them later.
But certainly when a design is signed off or you’re just tweaking it, it saves time to keep layers organised so that you can easily move things around, try out different sections etc.
Folders
Folders are the best way of keeping things tidy. You can really have every layer in a folder, things like “header”, “footer”, “top nav”, “left nav”, “background”.
Inside your main folders you can create sub folders. Say for example you have a top nav folder with individual buttons inside. Each button could have its own folding which makes duplicating elements and moving them around easy.
Naming
Again I would probably only name layers once a design has been signed off and more than one designer is working on the file. But as designing I will still name folders. I think it goes without saying - make them easy to understand.
Colour Coding
You can colour code folders by right clicking on the folder and clicking ‘Group Properties’. I don’t use this that often but sometimes comes in handy with particularly complex documents.
Deleting Excess Layers
This can be particularly useful when tidying documents up. When you get to the point when you know you won’t be using all the hidden layers you’ve disregarded as crap, Layers > Delete > Hidden Layers. The resulting cleanliness is beautiful.
PSD Templates
If you are creating graphics following the same format each time, creating a clean, organised PSD template is really helpful in speeding up the process.
For example, you may create images for a HTML email that need cutting up each time.
All you have to do is ensure that all the things you won’t be editing such as the header, footer are either locked or flattened. Always keep a fully editable version somewhere but flattening all the layers you’re not going to be changing makes the document simpler and saves file size.
Use guides to form the areas you’re going to be slicing up each time.
Don’t save over the template file. Keep this as the original template and each time you create a new version (such as a new email following the same layout), save it as a new document.
Easily Selecting Layers
One of my favourite shortcuts is using the arrow tool (V) and then CTRL+ALT+Left click the layer you want to select. In complex documents this is an absolute life saver.
