Pixel Perfect: Sharpening Up Those Soft Edges

When can half a pixel ruin a design? When the design calls for pixel level accuracy, of course. You might think that designing down to this level of detail is overkill and perhaps you feel your designs don't call for it, but if you are in the business of creating beautiful user interfaces having the ability to create crisp, sharp UI elements is a must. Crisp UI elements create more contrast with their surroundings, are easier to read/view, can decrease file size, and add precision to your design.

So, what's the big deal about half a pixel? Well let's take a look.

If you are a Designer I'm sure you've seen examples such as this before, but it always surprises me how often I see designs with unintentionally soft edges "in the wild". It is something most visitors won't necessarily notice right away, but ignoring these can leave your comp feeling sloppy and rushed. It's easy to overlook seemingly small details such as the edges of your elements when working in Photoshop and focusing on the overall layout of your composition, but small mistakes add up and can have a largely negative impact on your overall design. While they won't necessarily break a design, ignoring details such as these will cost you a level of polish that many clients expect from professional design firms.

Let's look at another example. This time we'll see how adding strokes can clean up a design element and set it apart from its surroundings:

This is a very basic button that is greatly enhanced by just a couple finishing touches. It is a good idea after you are satisfied with your initial design to go back and inspect individual elements to make sure they are crisp and clean, as you intended.

Yeah, yeah, you already know to check the edges of your elements, right? Well, are you giving the same level of attention to all parts of your design? Let's take a look at an example to see how a trendy UI element can benefit from a little extra attention to detail:

Here is a technique that has become rather common of late; creating a "pocket" for content to extend out of. We can enhance this effect by adding a 1px highlight to the bottom edge of the shadow. This small detail adds a level of sophistication that is lacking in the first example. Will this make or break a design? Probably not, but like I said, details such as this add up quickly.

Avoiding Soft Edges in Photoshop

Ok, so now that you're going to be paying extra attention to your design elements, let's go over a couple tips to make it easier on yourself. Before we do anything, let's go in and set the vector tool to snap to pixels which will solve most of our problems.

With the vector shape tool selected, click on the shape dropdown in the toolbar and check the box for "Snap to Pixels." Now when you create a new shape it will always snap to the nearest full pixel value. This is very helpful, but we will still need to deal with blurring when resizing the shape, so let's continue.

Tip 1: Ditch freehand in favor of cold, hard, numerical values

Once you have created a shape you almost certainly will have to resize it at some point. Your first instinct may be to grab and drag a handle and eyeball the size of the object. The problem with this approach is that Photoshop will resize objects to fractions of pixels which will result in soft edges.

One way to avoid this is to transform the object (cmd-T or ctrl-T on Win) and set your anchor point to the top left to avoid resizing from the center. Then you can enter a numeric value for width and height and your shape will maintain sharp edges with the added benefit of being sized precisely to fit your layout.

Another option is to set up guides and have your shapes snap to them. This requires a bit of forethought and extra time, but will payoff once you start creating multiple shapes. I suggest the 960 grid system's PSD template that has guides already laid out.

Tip 2: Watch out for the transform tool!

When positioning your shapes with the move tool (cmd/ctrl-v) your shapes will move no less than one pixel at a time, so you don't have to worry about losing your sharp edges. However, when positioning with the Transform tool (cmd/ctrl-t) your shape will move in sub-pixel increments, which can easily lead to soft edged shapes. The same holds true of the Direct Selection tool when editing vector shapes.

Stay Sharp!

Remember, details that are easily overlooked are often the difference between a good looking design and a great one. Paying close attention to your pixels will ensure your UI elements are clean, crisp, and sharp leading to a better user experience.