Photoshop Double Borders

Filed under Design, Photoshop | 10/03/2010

Double borders can be a great way to add some extra depth to gallery thumbnails or just images in general (see my other post http://bit.ly/8EBjEX). This is simple enough to achieve in a website just using CSS, but it’s a different story when your in the design stage and working purely with Photoshop or some alternative.

Until recently, my method of adding double borders to photos in Photoshop would be to draw a square behind it, and make it about 5 or 10 pixels bigger than the photo itself. I would then add an inside stroke to the background square to give a double border effect.

This was a pain when it came to resizing the photo and it can make your .psd’s a little bloated, so here’s a little trick I discovered for creating double borders.

Grab a Photo

Take any photo to work on, here’s one from my vast collection of iStock’s weekly free photos.

Add an Inner Glow

Make sure you have the blend mode set to normal, opacity at 100%, choke at 100%, and range set to 1%. Set the size and colour to whatever you like, in this case I’m using 5 pixels and a light grey.

Add a Stroke

Now we need to add a stroke for the second border. Make sure that this is set at a smaller size than the glow otherwise you will only see the stroke and not the glow! Also set the position to inside, otherwise you’ll get some unintentional rounded corners (well, so long as you don’t want rounded corners). Then pick any colour, I’m using dark grey for this one.