Quick Tip: Creating Crisp, Pixel Perfect Circles in Photoshop

Achieving pixel perfection when designing UI elements can be simple thanks to Photoshop’s “snap to pixels” feature. Unfortunately, this feature is not available for the ellipse tool – creating crisp, pixel-perfect circles can therefore require additional attention to detail. I’m going to let you in on a little secret which will make “snap to pixels” available when creating circles..

Shape Layers and “Snap To Pixels”

With the increasing need for designs that scale, designing with shape layers in photoshop is becoming more and more important. Shape layers are based on vector paths, which makes changing their size, color, and shape quite simple. However, if you’re not careful, when you create shape layers they can easily fall off the pixel-grid, which makes for blurry, unprofessional design.

Achieving pixel-perfection with shape layers is quite easy, thanks to Photoshop’s “Snap to Pixels” feature for shape layers.

Unfortunately, as you may already know, the “snap to pixels” feature is not available for the ellipse tool.

If you plan on creating a shape layer for those beautiful circle avatars in your interface, you’ll have to examine the precision of your circle and whether it’s falling onto the pixel-grid correctly (requiring repetitive zooming and minuscule adjustments, which can become tiresome).

If only there were “snap to pixels” for circles, right? Well, there is a neat little workaround! You can use the “rounded rectangle tool” to draw circles by simply providing a radius that’s at least half the size of the circle you’re creating.

Step 1: Grab the Rounded Rectangle Tool

I know what you might be thinking, “A rectangle tool to create a circle?” I know it might sound strange, but trust me here.

Step 2: Check “Snap to Pixels”

Now ensure that the “snap to pixels” checkbox is highlighted (in CS6 this is the “Align Edges” checkbox, or “Snap Vector Tools and Transforms to Pixel Grid” via the preferences). This will make sure our rounded rectangle sticks to the pixel grid.

Step 3: Specify a (Large) Border Radius

Now enter a value for the border radius that is at least half the dimensions of the circle you want to draw. Or, instead of doing the math just enter “1000px”, as that’s the largest value Photoshop will accept (this means you can’t initially draw a circle larger than 2000 pixels, but you can always scale the result up if need be).

Step 4: Draw Your Crisp, Pixel-Perfect Circle

Hold down SHIFT and draw your circle! (Holding SHIFT will retain the rounded rectangle’s proportions).

If you create a border radius that’s too small, as your rounded rectangle grows its dimensions will eventually bypass the border radius, at which point you’ll have a rectangle with rounded edges.

That’s It!

See how easy that was? As mentioned before, the simple trick is to give the rounded rectangle a border radius at least half the size of its dimensions. Now you can easily create pixel-perfect, crisp, scalable circles in Photoshop!

Further Reading

• Quick Tip: Rounded Corners Done Right
• Design a Beautifully Detailed Web Button