Applications and Tools

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

Related Posts
  • Design & Illustration
    Create a Seamless, Circular, Geometric Background Pattern in Photoshop0967 circle pattern preview400x277
    Seamless backgrounds can be used in just about any type of project. You will commonly see them used in fashion design, print design, web design, and even architectural design. I've always enjoyed creating seamless backgrounds, and in this tutorial, I will show you how to create a really interesting circular, geometric background pattern using Photoshop's vector tools. Let's get started!Read More…
  • Design & Illustration
    Create a Mobile Checkers Game Interface in Photoshop0959 checkers preview400
    In this tutorial, I will show you how to create an interface for a mobile checkers game in Photoshop. I will begin by showing you how to set up a simple grid. Then, I will explain how to create the main components of the interface using vector shapes and Photoshop's snap to grid functionality. Finally, I will show you how to add shading, highlights, and texture using Layer Styles. Let's get started!Read More…
  • Design & Illustration
    How to Design an iOS 7 Email App in PhotoshopEmail app interface preview400
    In this tutorial, I will show you how to create a flat and modern, Gmail-inspired, iOS7 email app in Photoshop. We will begin by showing you how to sketch out your ideas, then we will see how to create your design in Photoshop, and finally, how to incorporate your design into an iPhone mockup. Let's get started!Read More…
  • Design & Illustration
    Create a Mobile Weather App Interface in PhotoshopWeatherappinterfacepreview400x400
    Mobile app design is one of the fastest growing fields in the design industry. In this tutorial, we will show you how to design a mobile app design interface using many of the tools in Adobe Photoshop. We will begin by showing you how to set up a grid and create a simple background. We will then show you how to take advantage of the Snap to Grid feature and use basic masking and vector shapes to create a set of flat icons. Finally, we will use the Rectangle Tool, some text, and basic blending and aligning techniques to create the additional components of a weather app interface. Let’s get started!Read More…
  • Design & Illustration
    Create a Set of "Almost Flat" Modern Icons in Adobe IllustratorSorta flat 400
    With this tutorial I would like to show you a few tricks on creating clean lines and edges when working with the flat design trend, in Adobe Illustrator. Simple layered styles and reusing Graphic Styles to help your workflow are most efficient, so you should be able to create a set of matching icons in no time.Read More…
  • Design & Illustration
    Create a Summer Inspired Stroke Art Typography Piece using SketchChris summer 400
    In this tutorial I will show you how to create a trendy typography piece using only strokes and flat colors. We will be using an Adobe Illustrator alternative called Sketch available as a free trial (or paid) by the good folks at Bohemian Coding. With the announcement that Adobe will be discontinuing Fireworks, this is a very vector capable piece of software with a unique set of features and tools that would make an excellent alternative. Read More…