Every designer uses Photoshop. Even if you've been using it for over 10 years, you'll still find new tricks and different ways to do things.
As with all good software packages, there are lots of ways to accomplish your goals and many ways to speed up repetitive tasks. Photoshop has many different areas to master.
There are a lot of tools specifically for photographers that a designer will barely touch. Similarly, there are many web editing functions that photographers won't need. The following tips are intended for interactive designers.
The right etiquette
When working in Photoshop, there are a number of things you can do to keep your file organised, both for yourself and for others you share it with. A lot of projects involve designers picking up another's work at various times in a project cycle.
Sometimes the designer who created the PSD is no longer with the company, or on vacation, so if there are missing elements in a file or it has been flattened then this can cause time-wasting issues. I've just finished a project where we were tasked with the design only, no technical build. This meant the final deliverable was a set of PSDs that the client would build from. I had to make sure the files I delivered were top-notch and not missing anything.
As a general rule, you should try to name your PSD in relation to the site map or the order it appears in the flow of a site. I usually name the homepage – 00_projectname_home.psd and then following on from that 01, 02, 03 etc.
If you need to have multiple states in one page then this works too: 01.1, 01.2, 01.3 and so on. Naming the files correctly keeps everything in order and will also help when exporting as flat JPGs for presentations.
Another file naming trick we use on my team is to add your initials to the end of a filename. This will help you to quickly identify who worked on the file without looking at the file information or opening up the document.
Organise your layers
It's good practice to organise the elements on your page into layer groups (I call them folders because that's what they look like). As a general rule, try to split pieces of the design up into logical, standalone bits, and organise the layer groups so they match the hierarchy in which they appear on the canvas.
So, an example homepage might have GLOBAL HEADER at the top, then GLOBAL NAV, MAIN PROMOTION, CONTENT BOX ONE, NEWSFEED and GLOBAL FOOTER at the bottom. It's so much easier to move your page elements around if they're all neatly structured in groups.
Remember to name your layers properly. This can be time-consuming, but if you get into the habit of doing this it makes a big difference later on when you have hundreds of layers. I name layer groups with capital letters and layers in lower case. Always delete any unused layers to save file size and lessen confusion for others who pick up the file.
What we want to avoid is a layer palette with meaningless redundant layers called layer 23, layer 47, shape 12 and so on. Messy and pointless!
I keep all the images for a project in an assets folder on my hard drive. When I drag them into Photoshop, I try to keep the image in its original form as one layer, and then for any edits I do to it I'll use a duplicate layer. This helps if you need to go back to the original, and it's also very handy if you pass on the file to someone two months later and they need the image but can't find the original. You should always be thinking: 'What if I need to go back to this?'
If you want to crop, feather or fade an image, do this with a mask. I prefer to either apply a mask directly to the image layer or put the image and any applicable layers in a layer group that has a mask applied to it. I just find this quicker and less fiddly.
Smart objects
Smart objects are useful for elements on a page that you want to be able to scale, edit and reuse numerous times. Just like a Flash movieclip, you can edit your smart object and it will update all instances of itself in your design, saving a lot of time.
This is also extremely useful for collaborative work, as you can ensure a PSD you pass to a fellow designer has every detail editable. I've been frustrated when a PSD has been passed on to me containing flattened buttons and logos. I couldn't modify or scale them, and had to spend time looking for the logo or recreating the button from scratch. Pointless.
Just now I talked about arranging your page elements into groups. You can take this a step further with smart objects. For global elements in designs such as the main navigation, it's useful to create every rollover state etc, and then convert the whole layer group into a smart object. This speeds up Photoshop's performance by reducing the amount of layers it has to have in memory.
If you're working with a team of designers on the same project, chances are you may all be taking different pages to comp up, and those pages will have shared elements. Say I'm working on the global navigation and I make some changes to it: I can save my navigation smart object as a separate file.
So, double-click on the smart object layer. When the smart object opens up as a separate document, do File > Save as and save the PSB file as global_nav.psb. You can then put this on your shared working folder for the team to update their files. Updating is a breeze: on the navigation smart object layer, Ctrl+click and choose Replace contents, then choose the file that's saved on the server. The old navigation will be swapped out with the new one, in exactly the same position.
