If you’re a die-hard coder who needs nothing more than coffee and Vim, perhaps web development isn’t for you. It’s varied. While you certainly need top-notch coding skills, you can’t avoid handling media and graphics. Yes, graphics. Probably in Photoshop.
Photoshop seems a little odd when you first use it. The interface isn’t quite standard on any OS platform and some features will confuse you initially. Persevere with it, though, and you’ll never want to use another graphics package again. Fortunately, there are several ways to make your life a little easier…
1. Quickly Select a Layer
If you’ve received a PSD from a designer, you’ll either find they’ve flattened it (yeah, thanks) or it contains thousands of layers. To locate the layer you need, switch to the Move tool (V), hold down Ctrl and click the element you want. Alternatively, right-click it to view a menu of all layers under the cursor.
2. Easier Layer Management
Navigating multiple layers can be painful. Photoshop offers several options to help you manage long lists:
- Assign a name: double-click a layer’s name to change it.
- Assign a color: right-click the eye icon and choose a color.
- Group layers: click the folder icon (circled) and drag layers into it. Folders can have sub-folders and be re-arranged, renamed, colored, collapsed or hidden.
3. View a Single Layer
It’s often necessary to isolate a single layer. You can do that by switching off every unnecessary ‘eye’ icon but that can take a while if you have many layers. A quicker solution is to hold down Alt and click the ‘eye’ icon on the layer you want. Repeat the action to re-enable the other layers.
4. Apply the Same Style to Another Layer
You can move styles from one layer to another by dragging the “fx” icon on the right-hand edge of the layer block. Hold down Alt at the same time and it’ll duplicate the styles.
5. Create Snapshots
I often find myself undoing several actions to return to a previous state, e.g. when creating graphics in multiple sizes. Clicking undo or finding the correct historical state isn’t always practical. Snapshots are a great option; click the snapshot icon in the History palette and Photoshop will create a copy of the current state which you can return to at any time.
6. Accurate Guides
Guides are useful when you’re lining up elements and slicing images. To quickly add a horizontal or vertical guide, view the rulers (View > Rulers or Ctrl+R), click the ruler and drag the guide to your image.
You should be aware that Photoshop allows guides anywhere — even half way through a pixel. This can lead to inaccurate slicing or unwanted anti-aliasing effects. To prevent the problem, create a rectangular selection first then drag the guide to the selection’s edge where it will snap accurately into place.
7. Multiple Undo
Ctrl+Z performs a standard undo. However, pressing it again undoes the undo — it becomes a redo! If that’s causing you grief, select Edit > Keyboard Shortcuts then expand the Edit in Application Menus. Remove “Ctrl+Z” in Undo/Redo and add it to the “Step Backward” setting.
8. Pick Colors from Anywhere on Your Screen
For years, I used a color picking tool to grab a hex code, opened the color palette and copied it in. There’s no need. When using any of Photoshop’s color-picker tools, click anywhere on an image then drag the cursor off the Photoshop window to any part of the screen.
The only drawback with this method is that you can’t switch to a hidden application — you may need to make the Photoshop window smaller so more of your screen is visible.
9. Easy Ruler Rotations
You’ll often receive images taken by the photographer after they’d had a few drinks. Fortunately, it’s easy to rotate pictures to their natural orientation using the ruler tool (under the same toolbar icon as the eye-dropper).
Draw a line along the horizon in the direction you want to rotate, i.e. if it needs to be rotated clock-wise, draw from left to right. Now select Image > Image Rotation > Arbitrary from the menu — the dialog will show the ruler angle so you can simply click OK.
10. Personalize Your Workspace
Developers are a pedantic bunch. We spend hours organizing our desktops and IDEs so we can save a few seconds on repetitive tasks! Photoshop is a complicated beast and it can take time to open and position palettes and windows how you want them. To ensure it can’t be messed with, click the chevron icon at the top-right and save a new workspace.
Do you have any great Photoshop power tips?
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja