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.

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.

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.

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

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.