My bag of Photoshop tricks

Edit: Sorry for the image quality in this post. I made the images for my old blog that had a narrower column.

I work in Photoshop every day. I design for the web and I’ve been doing it for a very long time. Photoshop is my home application. It’s big and bloated, inconsistent and is currently going through a rough spot with the webdesign community but, still, I love it.

Over the last few years I’ve started being more aware of my workflow and the quality of my deliverables. Sometimes, other people have to work with my PSD files, be it other designer or developers. On top of handing off a rad design I have to make sure my PSD files are organized and understandable, layers are accessible and elements are easily exported to an appropriate website format.

Below are a few tips, tricks and guidelines I’ve learned for using Photoshop in webdesign. Most of these won’t affect your design or layout. Some could. They will, however, probably make your workflow a little better and make things a little easier on you and the people who have to work with your PSD files.

Make Photoshop faster
Some supposedly handsome and clever dude named Dan Rubin found out that changing a few settings in the Preference panel makes Photoshop purr like a well fed kitten. Follow the excellent guide on Make Photoshop Faster to give your old shop a bit of a boost!

Keep as few PSDs files as you can
Don’t overload on the PSDs. Throw away old versions if you are sure you won’t use them again. Keep related designs as layer groups in your PSDs if it doesn’t slow down your computer. Consolidate as much as you can and keep things simple.

Make a master PSD file for your frame
If you are designing a large website with multiple pages be sure to make a master PSD file with header, footer, background and other similar element. From this template you can then create new pages without having to copy and/or delete layers.

Love your layer palette
Your layer palette is not a junkyard for discarded elements or hidden “treasures”. Love it like a garden where you grow your delicious layers. The layer palette is your second workspace.

Name your layers
Everyone will love you if you name your layers. You will also love yourself. Enough said! Tip: You can create a new layer with Shift+Command+N. A dialogue pops up that lets you name it immediately.

Combine layers into groups
This is vital for files containing many layers. The more organized you are, the better. Combining layers to groups is great when you need to quickly move, remove or even mask entire sections of a website mockup. If you think it’s hard to add new layers into a document with many folders practice positioning yourself in the layers palette before pasting layers or creating new elements.

Name and organize folders with HTML in mind
Naming and organizing your groups with the HTML in mind will make your front-end developer love you. (If you are your own front-end developer you may love yourself!)

Delete unecessary layer styles and layers
This goes back to your layer palette being a garden. Keep it clean and well tended. Old layers, unused layer styles and masks should be deleted to reduce clutter in your palette.

Disable Expand New Effects
Click the little arrow in the top right corner of your layer palette. Under Panel Options is a nice little feature that lets you disable expanding effects in the layer palette. So whenever you apply a new layer style to a layer it keeps the effect drop-down hidden. So much better on the eyes and reduced clutter in your workflow.

Disable Add copy to Copied Layers and Groups
When I discovered this option in Photoshop it was almost the best day of my life. I’m not kidding! It always made me quite insane that Photoshop added “Copy #” to any duplicated layer in the palette. Now, in the Panel Options you can choose not to add this silly text to your duplicated layers. Rejoice!

Design hovers and interactions
You’ve probably seen websites where nothing changes on hover? They make me a sad panda. You should always design hovers and interactions for your websites. How does this button look when hovered? Does this text change color when I click this checkbox? Design it. Keep it as a group you can turn on and off in your layer palette when presenting the mockups. Extra tip: Place a cursor on the top in your Hover group to show clients and developers that this is indeed a hover state.

Use grids
Müller-Brockmann said you should use grids. I agree with him. When you are designing websites, grids are essential! It doesn’t matter if your site is fixed-width, fluid or responsive. Use the built in Photoshop guides to make your own grids or download a premade system such as 960gs or the Golden Grid System. Also, select Snap to Grid in your View menu when appropriate.

Be consistent in spacing
I tend to make myself a simple spacing system. Usually, since I’m a fan of 960gs, I go for increments of 5px space between elements. Spaces are therefore 5px, 10px, 15px, 20px… you get the drift. This way I’m almost always consistent across files and mockups and my front-end developer never has to ask me or guess how much margin-bottom: he should put on those sidebar boxes.

Use vector when possible
Try to keep most things vector even though you are working in screen resolution. Buttons, panels, backgrounds, sections, inputs, icons, logos and stuff like that. The more you can have in vector, the better. This means you can easily scale, transform or combine elements later. I would advice to almost never draw a rectangle without it being a vector shape.

Convert bitmaps to Smart Objects
When you import a bitmap such as logos or images to your mockups it can be rather nice to convert it to a Smart Object before your resize or alter it in any way. This means that you can resize the image later without losing quality (provided that you don’t go bigger than the original). You can edit the original by double-clicking the layer icon and you can also apply non-destructive Smart Filters to your layers such as Gaussan Blur. It’s neat!

Use Levels to see defects
This is a great trick. Especially if you are working with backgrounds that need to fade to black or be seamless or just simply Clone Stamping the shi** out of your lolcat image. Make a Levels adjustment layer on top of your layer palette and drag the white point slider almost all the way to the black point. This will make your document super bright and you’ll see all those Clone Stamp defects… if there are any, that is.

Keep stuff pixel crisp
When Free Transforming or stretching elements try to avoid blurry edges. Snap to grid helps if you use grids. Also Snap to Pixel (found under the little arrow right to the silly custom shape star in the toolbar) helps when drawing vector shapes. Extra tip: Your zoom level affects the increments when stretching or resizing layers when you use the Direct Selection Tool on vector shapes. 100% zoom is 1px. Extra extra tip: When working with vector shapes and the Direct Selection Tool create a new window for your document under the Window/Arrange menu and keep one at 100% and the other at whatever zoom detail level you like. By having the focus on the 100% zoom level window you always move your vector shapes by 1px and avoid blurry edges. By keeping edges crisp you or your developer never has to guess the size of an element and things look a lot nicer too.


Use clipping masks for images
People have many ways of containing images within a box in Photoshop. The best way, I’ve found, is to use clipping masks. Try this: Draw a box using the Vector Shape tool. Plase an image into the document that’s bigger than the vector box and on top of it. Hit Alt+Command+G and admire the wonders of technology. Now you can resize or replace the image without affecting the vector box and resize the vector box without altering the image. The best thing about this is that layer styles such as inside stroke on the vector box will appear through the image. Magic!

More
These are just a few tips I wanted to share. I hope they are of help to someone. There is of course a lot more to keep in mind when finishing up or delivering a Photoshop file. Check out the lovely Photoshop Etiquette site for more guidelines.

August 18th 2011