Skip to: Navigation | Content | Sidebar | Footer

Full Archives

Icon Design: Anti-Aliasing

July 11

The last time I wrote about icon design, I explained why it's necessary to produce variations of an icon at different sizes. At small sizes in particular it's important for icons to respect the pixel grid, enough so that extra work modifying the basic icon outline is usually required.

Now I'm going to walk through the actual process of re-sizing an icon to explain how I handle anti-aliasing tweaks using a vector editor like Illustrator.

In order to get an icon to fit nicely within the pixel grid, I've had to get used to the idea of distorting my basic shapes to influence the way anti-aliasing is rendered. This is particularly noticeable when resizing down to smaller sizes that offer less pixels to play with. Carefully set solid lines of pixels I've created at larger sizes might end up on a half- or third-pixel line at smaller sizes, and split the difference between two pixels instead of one. Adjusting to correct that requires moving the lines around, which quickly distorts the outlines for the sake of pixel precision.

As an example, this is an icon for Groups I created at 32×32, then scaled down to 50% as a starting point for the 16×16 pixel version. (I've blown up the size of the latter for better viewing, though it's obviously going to be a lot smaller.)

Vector and pixel previews of Groups icon

Figure: Groups icon shown as vector outline and 32×32 pixel preview (left two), with the scaled 16×16 versions of the same (right two).

If you followed along with the previous article, you know that I'm not going to be content leaving the smaller version as-is; it reads a little too blurry and not as well-defined as the 32×32 version, so I need to tweak it for sharpness. The initial step is getting all the strokes to render as a full pixel, if needed. Depending on my settings for the scale tool they may already do so (as in the above example), but it is possible that when I initially scaled it down my stroke widths also scaled down by 50%. In which case, I just need to select the objects with a stroke (the outline in this case) and set the stroke width back to 1px in the Stroke palette.

Next I want to make sure that the dominant lines within the icon fall on whole pixels. Any time I have a point straddling the line, I grab it and pull it back in to rest in the center of that pixel (or push it out to the next pixel, whichever I feel more closely respects the original outline). The stroke then renders as a solid pixel line instead of dithering between two pixel columns. Here's an animated GIF showing this step:

Animation showing vector point being moved into place

Figure: Animation showing vector point being moved into place, reducing stroke to one solid pixel.

I repeat this for the rest of the lines where I think an adjustment would make a difference; obviously straight lines are perfect candidates, but it can get a little tricky with angled lines and curves. In those cases I end up adjusting the handles on the points and try to force the pixels into as solid a configuration as possible, while minimizing the number of stray fringe pixels. If you go back up and check the first image, you might notice that the 16×16 pixellated version of the icon has a lot of lighter pixels around the outside. Eliminating as many of those as I can without warping the stroke makes the final icon a lot sharper. (I end up spending a lot of time doing this kind of tweaking in my attempts to get it just right.)

Finally, my interior shapes — the shine on the user head and collarbone — also need a bit of adjustment. In this case, they ought to be offset from the stroke by a one pixel gap. By dragging the points around to make room for the gap, and possibly adjusting the handles to keep the curves from distorting too badly, I can get the shapes closer to the effect I intended. If not, that's potentially a detail I could sacrifice by eliminating the gap entirely, but in this case it seems to work alright.

Here's a progression of the smaller icon, from initial resizing through to final icon, shown as pixels:

Progression of work on smaller icon, pixel preview

Figure: Progression of work on smaller icon, shown in pixel preview. First, original icon and strokes scaled down 50%. Second, same icon with strokes resized to 1px. Third, outline tweaked to place strokes back on the pixel grid. Last, interior details adjusted to better match original icon.

And here's what the final vector outlines ended up looking like:

Progression of work on smaller icon, vector

Figure: Progression of work on smaller icon, shown as vector outlines.

You can see there's a big difference between my starting point and where I ended up. The outlines end up squashed and compressed as a trade-off for having the strokes fit the pixel grid, the fine details inside the icon look silly and out of scale compared to the original icon, and some shapes even overlap where they shouldn't.

That's the way it works. You need to sacrifice clarity in vector preview for the sake of the pixels. If/when I decide to create a larger version (resolution independence is pretty much a reality now, after all), I'm obviously going to start with the original 32×32 icon since it's much closer to my intended vector outline.

Though, I suppose it's worth mentioning that I don't reserve this kind of tweaking exclusively for resizing; I do it with most icons, including the 32×32 size. So those original outlines aren't exactly pristine either. Just so you know.

Permalink › | 31 comments