Rounded Rectangles in Photoshop

Ah, the rounded rectangle. Beloved by designers loathed by developers. This is not a post to delve into that age old debate, but an informational guide to understanding the how and why.

The rounded rectangle tool in photoshop is one of the most heavily used tools in a digital designers toolbox. Many designs require this tool to produce call-to-action buttons, content buckets, navigation elements, the list goes on. True that rounded rectangles may soon be replaced by CSS3 to achieve this effect in the browser and eliminate the need for images to construct them, but designers will always need the tool for visual comps and final pixel perfect designs.



Before I go into how these are constructed, I want to answer the why first (skip this if you know the answer). In many cases, rounded elements in digital design represent buttons. Designers create buttons with rounded corners to mirror the real life physical objects that we have come to know: buttons on vending machines, dashboards in cars, kitchen appliances, remote controls, etc. This is also the reason designers often use gradients, highlights, and reflections to show dimension. If industrial designers created most of those physical buttons with hard corners, you'd see that correlation in visual design. Rounded corners also allow users to differentiate elements on the page. Content blocks can be treated with hard corners and buttons with rounded corners to clearly communicate to the user "look, this element is a button, it looks like a real button, and it has an action, click it!"

So how does Photoshop construct these manipulatable miniature marvels of bitmapped beauty? Photoshop's Rounded Rectangle Tool uses the Radius setting to determine how "rounded" your rectangle will be. The amount can be defined by pixels, inches, centimeters, millimeters, points, or picas. If you're a digital designer you'd be using pixels mostly likely. Adobe uses their proprietary software to calculate the proper anti-aliasing (extra pixels with varying levels of transparency to show soft edges) for each corner radius setting.

Below is an example of the differences between a 1 pixel to a 6 pixel corner radius zoomed in at 1200% and at actual size (72ppi). You can see how photoshop uses anti-aliasing to create the rounded corner. The radius setting (distance from the center of an imaginary circle in this case) is the amount of anti-aliased pixels it takes for the corner to get to the first solid pixel (including that solid pixel). Of course, you can enter in any radius number you choose, but if the number is larger than half the height of your rectangle, the ends will become circular. If the radius is equal to the half the height of your rectangle it will be a pill shaped element (often, a desired effect).



A Note About Pixel Perfect Design & Aligning to the Pixel Grid
In each of these examples, the rounded rectangle was created while aligning to the pixel grid. More specifically, snapping to a 1px x 1px grid with the grid visible. This will guarantee that each of the rectangles will have straight hard edges on the top, bottom, left, and right. This is a technique used in Pixel Perfect Design, a topic that I'll cover in detail in a later post. It ensures that the artwork being created eliminates "loose pixels", basically unwanted anti-aliasing that Photoshop often includes when designers don't align to the pixel grid.

In addition, here is an example showing the rectangle with a stroke layer style in the various corner radius sizes. There are 3 options for positioning the stroke; inside, center, and outside. Photoshop uses the outside position and at a size of 3px as the default. In this example I'm showing the stroke size at 1px. The inside position places the stroke on the inside of the rectangle, obviously, and doesn't change the original dimensions of the rectangle (ideal in many cases). As you can see, the center position causes the stroke to not align to the grid, there is unwanted anti-aliasing, and the dimensions have increased by a visual half pixel. The outside stroke position adds 1px all around and changes the final dimensions to be 2 pixels wider and taller, in this case, 27px x 27px. Keeping this in mind is helpful when designing to a pixel perfect wireframe, e.g. if a button needs to be exactly 40px x 20px, then adding a stroke to the outside (default) would make the button 42px x 22px thus breaking the bounds of the design.



I hope this helps anyone in their quest for pixel perfect rounded rectangle creation. If you have corrections or additions to my post, please feel free to comment below.