They say the Devil is in the details — whatever one does should be done thoroughly. In that sense I’m convinced that attention to precise details make average things good, and good things great.

I’m looking in particular at vector logo marks that are dropped in a design without meticulous care. It never used to bother me, but now I seem to see it everywhere. I’ve come down with a classic case of perceptual vigilance.

I have two examples to share. The first can be seen on Cisco’s website.

I do like Cisco’s logo. It maintains more than a vestige of the old mark with those vertical suspension bridge bars.  However, it’s these types of logos with straight, hard edges that are almost impossible to scale down while maintaining perfect detail and crispness. Look at it at 500% scale and you’ll see what I mean.

My assumption is someone scaled down the vector art, added a layer effect, and called it a day. You can see the anti-aliasing around the bars are all over the place. Some are crisp edges, others are varying degrees of fuzziness. A detail-minded designer shouldn’t accept this. You might be able to get away with this on a Retina display, but not at 72 ppi (or even the iPad’s 132 ppi). It’s not much of an issue when the vector art is curvy (Apple, Nike, GE). But any vector art containing horizontal and/or vertical edges (FedEx, Digg, REI) almost always suffers from this annoyance.

The Transform & Nudge Trick

The first remedy to try is to zoom, transform and nudge. This trial-and-error technique is very simple, and it’s astonishing how many designers either don’t know about it or are too lazy to spend the time to achieve the best results. It’s quick and in many cases can solve the soft edge problem outright. I tried this with a Cisco EPS logo I was able to source.

I scaled it to closely match the size of the logo currently on the site, then started nudging at 500% scale (each nudge being 1/5th of a pixel).

I have (from left to right) bar #1 and #6 pretty crisp, but all the others are fuzzy. More nudging.

Now bars #3, #7 and #8 are close, but everything else is bad. I’ll try scaling everything slightly to get closer to the desired result.

This just isn’t working. There are too many edges — they can’t all lie perfectly on whole pixels. The transform & nudge trick failed us. Here’s where you get to decide if what you do is work, or if what you do is a craft. If it’s the former, you can stop here. You’re done for the day. Otherwise you have to stay a while longer.

Redrawing at scale

In Cisco’s case, the solution is to illustrate the problem areas at the intended scale. The bars look to me like they really want to be three pixels wide. But the math just doesn’t work out for them, so they’re drawn at fractions of a pixel. We’ll need to draw new bars at whole pixels.

Zoom back out to 100%. Duplicate the imperfect logo at the intended size, position it next to the original and take its opacity down to about 15%. This will serve as a guide for the reproduced art. Open the Info palette and choose white as the foreground color. Select the Rounded Rectangle tool. In the option bar select the Shape layers option and set the radius to 10. Draw a rounded rectangle 3 pixels wide by 19 pixels high and position it over the tallest bar on the guide layer.

Duplicate the shape layer you’ve just drawn and nudge it over the next bar to the left. Use the direct selection tool to adjust the height of this shape layer so it’s 10 pixels high (or draw a new one 3×10).

Do this again for the next bar to the left. It’s 3×6. Repeat this process until you have all nine bars perfectly spaced five pixels apart from one another.

Bring the guide layer back up to 100% opacity. Delete the bars from this layer, leaving just the “CISCO” word mark beneath. The original logo has some depth, so let’s add an outer bevel to all the new bars (and “CISCO” word mark) with the following settings.

Now that’s nice! But is it too nice? The bars look sharper than the the “CISCO” under it. Is that a bad thing? If you think it is, we can soften the bars up just a touch.

Move the bar shape layers together in a layer group and label it “Bars.” Duplicate the “Bars” group and remove all the layer styles from the bar shape layers. Merge this new “Bars copy” group (Command+E) and move the resulting layer just beneath the “Bars” group. Take its fill opacity to 0% and add an outer glow:

This is just enough glow to soften the edges, but doesn’t come close to undoing everything we just did. We have perfect spacing, crisp shapes with a comfortable degree of sharpness.

Detail vs. Perfection

So was this detail work worth the extra time?

I chose the word detail carefully. Detail and perfection have some things in common, but I view them as two very different types of goals. Detail means being thorough to the point of precision (as in not accepting fuzzy, imprecise straight edges on a logo). It means giving attention and care to the things that raise the quality of your work.

Perfection, I’ve learned, is something to be compromised with in general. Constant pursuit of it isn’t a reasonable endeavor and it’s best to make intelligent concessions to keep things moving forward. Perfection is also subjective. What’s perfect for me may not be perfect for you. But we are more likely to agree if something is detailed or if it isn’t.

This side-by-side comparison shows a delicate but notable difference. It’s up to the designer to decide when and where to focus on detail work, but I think a brand’s mark is always near the top of that list.

Pixel Cosmetics

I’ll use Diesel as the second example. Here’s the logo from the site:

Not bad, but can you see the fuzz?

Let’s start with zoom, transform and nudge at 500%.

I matched the size to the close to the original, then scaled and nudged the art so the top, left, and bottom edges of the text fell onto whole pixels. The stem of the D, I and L are either exactly or very close to 6 pixels wide. We’ll do some precise raster editing to the shape layer to sharpen the logo.

Place the logo shape layer (Diesel Wordmark) inside a new layer group, then add a layer mask on it. Add another layer in the group named “white pixels.”

First shave off the dull edges. Using the a 1 pixel pencil tool, paint with black along the edges indicated by the circles on the layer group’s mask. On the “white pixels” layer, use the same 1 pixel pencil tool and paint with white along those edges marked by the arrow. Now you should have a nice cleanly shaved word mark with consistent stem widths:

Balancing sharpness and softness

The unavoidable fuzz on the D and the S makes I, E’s and L appear overly chiseled. Similar to what we did for Cisco, let’s add some intentional, controlled fuzz back in for consistency.

Merge the “Diesel logo, edited layer” group to a new layer (Option+Command+E), and apply its layer mask. Duplicate this new layer. Sandwich the original layer group between these two new merged layers.  On the bottom layer, mask out the D and S, apply a 0.3 pixel Gaussian blur and label it “Merged (IEL).” On the top layer, mask out the I, E’s and L and name it “Merged (D&S).” Finally, take down the opacity of Diesel logo, edited layer group to 40% to take some of the harshness away.

The last improvement is to sharpen up the tagline text, “FOR SUCCESSFUL LIVING.” This text is sized to a mere four pixels high. How do you maximize legibility of anti-aliased text at such a teensy size?

Start with scaling the tagline shape layer so it’s about 500 pixels wide. Duplicate this layer and rasterize the new dup. Use the transform tool to scale the rasterized layer to the size you need. Then dup the sized layer and set its opacity to about 50%. This lessens the blurring effect from the anti-aliasing. Finally, add a subtle drop shadow (1 pixel radius, 15% opacity) to the first rasterized tagline layer to give it some contrast.

Lastly I merged the wordmark layers and added an outer bevel (90°, 0 pixel size, 32% highlight, 23% shadow) to give a touch more contrast. Here’s the final product compared to the original.

No, it’s not a tremendous difference — but that’s why they’re called details. I’m not saying those that don’t go to this level haven’t, or can’t, hone their craft in any one of a number of ways. But an extra 20 minutes could transform (literally) your detailed work into something outside the average.