Photoshop roundrect roundup

Rounded rectangles, or roundrects as QuickDraw so fondly calls them,

are standard fare on a web and interface designer’s utility belt. So common that the footer on this page itself contains 12 roundrects. So common that it’s rare for web pages or apps to not contain a roundrect or two.

Unfortunately, pixel-locked rounded rectangles can actually be fairly difficult to draw in Photoshop. (Pixel-locked, meaning all edges fall on an exact pixel boundary, creating the sharpest object possible.)

Experienced Photoshop users will probably already know one or two ways to draw a roundrect. Hopefully after reading this article, they’ll also know a couple more, and which methods produce pixel perfect results.

1 — Rounded rectangle vector tool

Photoshop’s Rounded Rectangle vector tool appears like the ideal candidate for the task, until you realise that the edges it creates are blurry and inconsistent.

Fortunately, there’s a fairly well hidden option that locks the Rounded Rectangle vector tool’s output to the pixel grid. Excellent. (Huge thanks to Louie Mantia for the tip.)

To enable pixel-locked drawing for the Rounded Rectangle vector tool, check the Snap to Pixels option in the Options bar. If you have Snap to Pixels turned off, drawing at 100% zoom achieves the same result (thanks to Mark Jardine for that one).

The result is perfect roundrects, every time. The only downside is that the corner radius can’t be altered during or after drawing the shape. If you need a different radius, you’re forced to draw it again. It’s a shame the roundrect tool isn’t like Illustrator in this regard, where the up and down arrow keys can increase and decrease the corner radius while drawing.

On the positive side, keeping your objects as vectors means that you’ll be able to resize your document and corners will take full advantage of any extra resolution. There is one small caveat though: If you resize, you’ll have to do it as an exact multiple, or risk fuzzy, non-pixel locked edges.

If you’re being pedantic about the results, you may notice that the antialiasing on the first half of each corner doesn’t match the second half—you’ll have to look carefully to notice though. For example, looking at the zoomed corner below, the start of the corner to the apex isn’t an identical to the apex to the end of the corner (starting from either side). In practice, that probably won’t cause you any issues.

2 — Blur

The blur method is a bit of a hack that involves creating a selection, blurring it, then increasing the contrast so you’re left with a sharp mask that’s antialiased nicely.

It’s 7 steps in total, is prone to being inaccurate, plus the radius of the corners can’t be changed on the fly. Applying Levels can also be a bit fiddly. One advantage is that different levels settings can be used to obtain different amounts of antialiasing, from incredibly soft to completely aliased.

• Create a new layer.
• Draw a rectangular selection.
• Enter quick mask (Q).
• Gaussian blur by half the radius you’d like for the rounded corners.For example, a 10px radius would need a 5px blur.
• Apply Levels (Command-L) and use about 118 for the black point and 137 for the white point on the input levels.
• Exit quick mask (Q).
• Fill selection.

On the plus side, the blur method can be used to quickly create some interesting and organic shapes that would be difficult to draw by hand.

3 — Circles

The circles method very accurate, easily reproducible, but has a whopping 13 steps. That’s a lot of clicking, just for a single roundrect.

• Create a new layer.
• Make a circular selection that’s twice as large as the radius you’d like. A 10px radius would require a 20px x 20px circle.
• Fill the selection.
• Move the selection right. This can be done quickly by holding down shiftand pressing the right arrow key a few times.
• Fill the selection.
• Move the selection down.
• Fill the selection.
• Move the selection left.
• Fill the selection.
• Make a rectangular selection that covers the entire vertical span of the roundrect, but starts and ends half way through the circles at the ends.
• Fill the selection.
• Make a rectangular selection that covers the entire horizontal span of the roundrect, butt starts and ends half way through the circles at the ends.
• Fill the selection.

4 — Stroke

The stroke method is very accurate, easily reproducible, and only has about four steps, depending on the result you’re after. The corners are a bit sharper than the circle method, though. That may be a good thing or a bad thing, depending on your personal preference.

• Create a new layer.
• Draw a rectangular selection that’s smaller than the area you require (smaller by double the radius, if you want to be exact).
• Fill the selection.
• Add a stroke as a layer style that’s as thick as the corner radius you’d like.

If you’d like to flatten the object to remove the stroke, keep following the steps below.

• Create a new layer.
• In the layers palette, select the new layer and the previous layer.
• Merge layers (Command-E).

It’s possible to automate the flattening with a Photoshop Action. This can also be set up on function key to speed things up further. I’ve prepared an action that does just that.

Download: FlattenStroke.zip

A huge positive for the stroke method is that it’s dynamic, so the radius can be edited in realtime. It can also be used to easily create other rounded shapes, as seen below.

Which method is best?

In most cases, using the Rounded Rectangle tool with Snap to Pixel turned on will give great results and be the quickest. If you’d like the ability to change the corner radius without redrawing, then the stroke method is the one to use.

However, as can be seen below, each method yields different results. So depending on what you’re after, you may need to use a combination of methods in different situations.

Before writing the article, I actually didn’t know about the Rounded Rectangle tool’s Snap to Pixel option, so it’s definitely been a worthwhile endeavour—my workflow is now noticeably quicker. All tests were completed using Photoshop CS4 & CS5 on a Mac. Behaviour for both versions was consistent.

And yes, I probably am a little too obsessive about these things.