10 Photoshop Tips for Developers

Tweet

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:

  1. Assign a name: double-click a layer’s name to change it.
  2. Assign a color: right-click the eye icon and choose a color.
  3. 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.

Photoshop undo keyboard shortcut

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.

Photoshop layer management

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.

Photoshop snapshots

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.

Photoshop undo keyboard shortcut

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.

Photoshop ruler rotations

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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://131studios.com Robb

    These are great tips thanks. I’m a developer but am really trying to branch out to design also. These tips will save tons of time.

    Thanks

  • John Sanders

    Great article. I learned a few tips here. Thanks!

  • http://blackcardinal.com Tia

    Thank you for the multiple undo tip. This has bugged me for years.

  • Helen Natasha Moore

    Thrilling article, Craig. I’ve been working with Photoshop since 1999 and didn’t know any of these shortcuts. Love no.8. I’ve always taken screen grabs. … Thanks so much :-)

  • http://www.almostdawn.com Almost Dawn

    As a developer these are priceless tips. This is why I continue to come back post after post. Breaking everything down into 10 sections really helps.

  • http://www.sensibleweb.co.uk Web Design

    Did not realise the shortcut to view a single layer – most useful thanks.

  • Khalid

    Nice article, thank you for sharing

  • Helen Natasha Moore

    Would you let us know where you found these tips, Craig? And can we have some more? :-)

    • http://www.optimalworks.net/ Craig Buckler

      I’ve picked them up from various places, trial and lots of error over the years.
      I wouldn’t claim to be a PS expert, though – it’s the sum of all my knowledge!

  • Nelson

    Some very handy tips! Thanks for this article! :D

  • http://na StudioK

    Guides halfway between pixels can be annoying alright, thanks for the tip.
    Also regarding Multiple Undo, you can just hold Ctrl+Alt then hit Z. This will keep undoing, like going back in your History. It saves you having to change shortcuts, and sometimes I find the Undo Redo kind of handy sometimes to see minor changes.

  • TehYoyo

    I’m surprised that you didn’t mention that control+alt+z is the equivalent of step-backward and is the built-in shortcut…that’s what I use instead of using control+z

    • http://www.optimalworks.net/ Craig Buckler

      Yes, but Ctrl+Z is universally supported in most applications.
      Developers use keyboard shortcuts a lot. Why should they need to switch to Ctrl+Alt+Z just for PS?

  • Uchimata

    6. Accurate Guides
    Hold down shift while dragging guideline, no need to create selection. Alignment steps depend on zoom, but always be aligned to pixels this way.

    ;)

    • http://www.optimalworks.net/ Craig Buckler

      Oh wow – you’re right! Thanks.
      I found I needed to zoom in to at least 500% before it permitted positioning at individual pixel levels.

      • http://www.worldwithoutwalls.co.uk Paul Masri

        Yes, this one is a godsend. Actually Shift+Drag makes the guide snap to the ruler ticks, so you need to have the ruler set to pixels (Edit > Preferences > Units and rulers…). To snap to individual pixels you’ll need to zoom in enough for individual pixels to be shown as ticks. So it’s not about 500% specifically.
        Tip 3 (select a single layer) is awesome. That will save me a lot of time. Thanks!

      • http://www.optimalworks.net/ Craig Buckler

        Mmm – I do have mine set to pixels. Perhaps it depends on the size of the image, version of PS or other factors?

  • Loren

    My favorite, Ctrl+j to duplicate current layer

  • Dave

    Been using Photoshop for quite a while, but didn’t know the quick layer select or assigning colours to layers tips. The quick layer select tip is particularly useful for me.

    Cheers!

  • http://aenguillo.wordpress.com alvin

    To be able to pick color values from other apps/images that are hidden under PS, I create a screenshot of the target image and open it on Photoshop. :)

  • themilkman

    I always have a swatch palette handy with all the swatches I need saved. It is especially useful if you work on a website which uses specific colours for different channels, but it is equally useful if you only use a handful of colours. It means that you don’t need to remember a whole list of HEX codes.

    The best way to do so is to double click on the top square of the colour picker at the bottom of the tool palette (which is usually on the left of the screen), enter the HEX code required in the # box, click ADD TO SWATCH on the right hand side, enter a name if you want (I always find that very useful, especially if you have channels that use similar colours – I also always add the HEX code, as a reminder if I need it), and click OK.

    By default, the swatch palette displays as tiny squares, which is not very useful, but it is easy to change to a list view. Click on the little down triangle at the top of the palette and select Small or Large List, and you’re done.

    You can also re-order the swatches or delete the ones you don’t need by clicking the little down triangle again and go to Preset Manager.

    One last thing, this is all good, but if you need to change computer, you don’t want to re-do this every time. You can save your swatches by clicking the little down triangle and do Save Swatches.

    I hope this little tip may be useful to some of you.

  • http://crowdogs.com Peter Schreiner

    5, 7, 8, 9, Oh what the heck, these were all great tips! Thanks for changing the way I use PS!

  • jpanagsagan

    On #1, hold CTRL+ALT then click the element on the screen to directly select it.

  • http://www.cannedsunlight.com Nicki Hastings

    Great tips, I’ve been using Photoshop for years and have been enlightened by a couple of these.

    My favourite shortcut that I use is when I’m trying to move a guide or the edge of a crop selection very close to where it’s snapping (ie near another object or close to the edge of the page). If you hold control and command (mac) while your dragging it stops it from snapping. Love that one.

    :-)

  • Victor |

    thanks for your input. I use photoshop but these tips provide my daily tasks. Thank you.

  • http://www.webdesignoklahomacity.org Web Design Oklahoma City

    This is a very helpful blog. Photoshop is really like our best friend for this generation. You can simply make a lot of things with photoshop. Thanks to the advancement of technology. But, photoshop is sometimes difficult to manipulate and thank you for this blog for making it simpler for me.