eCommerce Development

Pixel Perfect: Sharpening Up Those Soft Edges

Oct 04, 2010   •   3 Min Read

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.Soft edged box vs. hard edged box

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:

Soft Button vs. Sharp Button

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:

shadow with and without highlight

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

Snap to Pixels

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.

Explore more tags: eCommerce Development Blog
Related Content

You Also May Like


Your Guide to eTail West 2024 in Palm Springs, CA: Event Tips & Tricks

What Do I Need To Know About Etail West 2024? Are you in the eCommerce industry? If...
Learn More

The 5 Best AI and SEO Tools for eCommerce Website Strategy

In the vast digital landscape, where visibility is paramount, the science and art of...
Learn More

3 Tools To Use AI in Email Marketing For eCommerce Online Stores

In the realm of digital marketing, email continues to be a potent and influential...
Learn More

5 Awesome AI Copywriting Tools For Making Money Online In 2024+

In the realm of persuasive communication and digital marketing, the art of crafting...
Learn More

The 5 Best Video Enhancing AI Tools for Selling Online [2024 Update]

In the realm of digital content creation, video has emerged as a dominant force,...
Learn More

Our Agency's Top 5 AI Social Media Content Marketing Tools For Online Sales

In today's interconnected world, social media has transformed into an indispensable...
Learn More
BigCommerce vs Shopify_ Everything You Need to Know - 524x352

BigCommerce vs Shopify:
Everything You Need to Know

Download e-Book

Let's Grow Your eCommerce Business, Together.