Creating a hollow box with rounded corners for web backgrounds using Photoshop CS5
Posted in Web Design on Tuesday, 10th January 2012 at 9:05AM
I have always been convinced that creating these graphics should be very simple to do in Photoshop and as it turns out they are, but for years my half-hearted Google searches came up with nothing satisfactory and I was left using rounded marquee fills or importing vectors from illustrator, neither of which were particularly quick or satisfactory to look at.
My New Years resolution was to find out how to do this properly in Photoshop and to write it up in case anyone else is struggling with the same problem. The answer is embarrassingly simple.
1. Create a new document and draw a rounded rectangle (a) setting the corners to the desired radius (b).
2. Double click the new shape's layer (a) to open the layer style dialog box. Reduce the fill opacity to 0 (b) and open the stroke panel (c).
3. Alter the stroke colour (a) and size (b) to your requirements and click 'OK'.
4. Rasterize the layer containing your shape and you're done! A hollow rounded rectangle to be sliced up and used for your backgrounds.