Photoshop Tips for Developers

Published 30th July 2012

As a web developer you might be surprised how much time I spend in Photoshop. Not that I’m coming up with wonderful designs or anything, but taking wonderful designs and making them come alive, that’s my job. As I’ve spent time learning Photoshop I’ve now got a few tips and shortcuts that I think are worth sharing for those who, like me, spend time in Photoshop but aren’t masters in the art.

Note: All of these tips apply to Photoshop CS5.

Turn on the Info Panel

In the Window menu turn on the Info panel. This useful (and customisable) panel shows you an array of useful information at a glance. I find the most useful bit of info it displays is the selection size when using the Marquee tool. But it can also show document sizes, colours, opacity etc.

Quick Toggle Guides

This one is quick and simple but very useful. A basic tool in Photoshop is guides (which you can access via the View menu). A lot of the PSD’s I deal with have loads of guides, which is great but can get pretty distracting when you don’t need to see them. So to quickly toggle guides on and off simply hit Cmd + ; (in OS X) or Ctrl + ; (in Windows).

Copy Color’s Hex Code

Another quick one that has saved me lots of time. When using the Eyedropper tool, instead of clicking on the document, opening up the Color Picker then copying the HEX colour from the text input, you can simply right-click on the document and select Copy Color’s Hex Code from the context menu. Easy.