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


BigCommerce Feedonomics: A Framework for Omnichannel Growth

When selling products across multiple eCommerce platforms, strategic visibility and...
Learn More

15 Shopify Website Examples To Inspire eCommerce Site Design in 2024

At Groove, we work with several eCommerce platforms, and Shopify is one of the most...
Learn More

Use The HubSpot Shopify Integration To Sync Customer Data

Introduction Running an online store is full of day-to-day excitement, but the data...
Learn More

Klaviyo Abandoned Cart: 5 Strategies to Increase Conversion

It takes a lot of work to get customers to your eCommerce store. Whether you use SEO...
Learn More

Omnisend vs Klaviyo: A Marketer's Perspective on the Best Choice

One of the main factors to consider when growing your brand is choosing an email...
Learn More

Klaviyo Email Marketing: 5 Reasons They Stand Out in 2024

In 2024, email marketing is far from dead. Contrary to popular belief, it continues...
Learn More
20 Best Shopify Apps LP Background Small

20 Best Shopify Apps For Your eCommerce Store

Download e-Book

Let's Grow Your eCommerce Business, Together.