Striving For Pixel Perfection
Imagine if your MacBook’s trackpad wasn’t centered, but “good enough”? Or if Ferrari just made their lug nuts from steel instead of titanium. These are products that have been honed and crafted by someone with a clear passion for what they do. Attention to detail can separate a good product from something truly great. You might not be an industrial designer in Cupertino or a mechanical engineer in Modena, but web designers should strive to achieve the same level of attention to detail and greatness in their work. Below are some common things I see on the web accompanied by some solutions I use often to get that crispy perfection I’m looking for. Luckily, some of this stuff can now be avoided when coding by using CSS3, but these are guidelines that can apply to anything. Besides, mockups should look great too!
Aliasing & Half Pixels
Something I notice a lot on shapes and graphics on the web are the dreaded “half pixels”. Also known as anti aliasing, this occurs when the edge of a shape ends in between one pixel and another instead of right on edge of one filling the whole pixel. To fill the gap, Photoshop will fill the pixel with a color in between the two which results in a blurry looking edge instead of a nice sharp one.
To get nice clean edges, you need to first zoom in just about as much as Photoshop allows you to be able to clearly see where one pixel ends and the other begins. Then using the Free Transform tool (cmd+T or ctrl+T) and move the edge over until the color fills the whole pixel.
If you are using vector shapes (and you should be whenever possible), another way to achieve this is to select the path on your shape layer and then use the Direct Selection tool (A) to select the points and then nudge the points over to fill the edge. This second technique is especially useful when working with rounded rectangles as you can easily adjust the width or height of the shape without distorting the corner radius.
Have you ever tried to create text using the Underline option in Photoshop, and wondered why the heck it wouldn’t just make the underline an even 1px? An easy solution that will usually give you the result you’re looking for is to use the Free Transform tool (cmd+T or ctrl+T) on the text field, and zoom way in on it. Then nudge it up or down a couple times with the arrow keys and most of the time this will get you a straight 1px line. Overall, doing your best to minimize unwanted anti aliasing and half pixels will greatly increase the sharpness and cleanliness of your designs.
Alignment & Centering
Maybe its just because I have a “designer’s eye”, but it drives me nuts to see things that are slightly off center or not aligned correctly. This is one of those things that seems like its not a big deal and can easily be looked over, but all this stuff adds up and makes a difference.
For aligning whole layouts, using a grid or at least guides help a lot. I use a Photoshop plugin called GuideGuide that helps to create grids and find midpoints.
Another tool you can use is the often overlooked “align” functionality that is part of the Move (V) tool. To use this tool, select the layer you want to align, and then either create a selection or cmd+click the layer you want the object to be aligned in to create a selection of it. Then select the Move tool, and you will see the Align panel on the top tool bar. Your selected layer will be aligned relative to the selection you made, and there are various alignment options there to choose from.
Finally, with any effects and details you add to your design, subtlety is key. A general rule of thumb I use often is to make the effect/object completely invisible, and then incrementally increase the visibility until its just right. Be gentle and finesse Photoshop into submission. Don’t be heavy handed and clumsy! A design has succeeded at this when it looks nice at first glance, but makes you say “WOW” when you take a second look.
Below Ive included an example of how much of an impact paying attention to all these small details can have together in a design. It’s worth it!