Jonny Monkhouse

Creative Director

Like it or loath it, Photoshop is still very much a part of our tool kit. There are some great new apps available for digital design such as Sketch and the brand new inVision Studio but nothing quite has the sure power or features available in Photoshop.

With great power comes great responsibility however. The features can be overwhelming but here is a little list of quick tips to help speed up your process a little when designing for the web…

1. Convert Images to Smart Objects

When importing images to use in your design, import high quality versions and then before you scale them down, convert them to a smart object. To do this simply right click on the image in the layers panel and select ‘Convert to Smart Object’. This means that if you decide to make them larger later after scaling them down initially, you won’t lose any quality unlike usually when they would become pixelated. Once you’ve done this a few times, you will start doing it automatically! Just make sure you have a little more space on your hard drive for the PSD as they can get a little large!

2. Use Clipping Mask

Ever want to quickly crop a part of an image so only some of it shows through in a design? There are a few ways to do this but if you change your mind later, you will usually have to re-import the image again and start over. Using a clipping mask could be the answer. It allows you to clip an object to a particular shape whilst keeping the object intact (non-destructive). To do this simply position the object you want to clip above the layer you want to use as a mask (such as a star shape) and then right click in the layers panel and select ‘Create Clipping Mask’. Now the object will be clipped to that shape below but don’t forget you can still move the object around and scale etc. And if you want to remove the mask, simply right click again and ‘Remove Clipping Mask’. Easy as that.

3. Learn the Shortcut keys

Shortcut keys are a web designers best friend when it comes to Photoshop. There are literally hundreds but if you learn the main ones, you’ll speed up your process a lot. From transforming an object (CMD+T) to hiding the rulers (CMD+;) it will save you a lot of time.

4. Saving for retina screens

Recently, Photoshop added some new export features which allows you to save out your designs for retina screens. As you might know, retina typically displays pixels at around twice the size of normal screens so usually designing for them would require you to double your image size within Photoshop. Now you can simply design as you usually would but then when it comes to outputting the visual as a PNG or JPG, you can save this out at twice the resolution by going to File > Export > Export As and then using the dialog box to change the ‘Size’ to  2x.

5. Install GuideGuide

The default guides aren’t that easy to use in Photoshop and as all of our designs follow at least a very simple grid, being able to create these quickly and easily is important. Step forward GuideGuide. This lovely little plugin adds a new panel to Photoshop where you can select columns, rows, margin, padding etc. in seconds. So easy to use, we wouldn’t know what to do without this now. To download it, visit their website.

More from the blog

Top tips to make your website more user friendly

2 years ago

The best and worst football badge redesigns

2 years ago

Some of the best architecture websites for 2018

2 years ago