Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Icon Design: Anti-Aliasing

July 11, 2007

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.


July 11, 18h

Is there some way to get the lines to be rendered as pixels instead of vectors in Illustrator, while still preserving the edibility of the path?

July 11, 19h

Yes, View > Pixel Preview

July 11, 19h

I had always silently wondered about how tiny icons look so good. I had no idea that there was so much manual tweaking involved.

July 11, 20h

I’ve found that having multiple views open in Illustrator is invaluable for doing this kind of manipulation. You can open a new view (at least in OS X) by selecting Window->New Window. Each window has its own View menu settings, so you can leave one window in Vector mode and another in Pixel Preview mode. I also find it helpful to have Hide Edges turned on and Bounding Boxes turned off in this window, so I can see exactly how I’m changing things.

If I’m feeling very anal-retentive, I’ll have three windows open, a Vector window that I’m doing work in, a zoomed Pixel Preview window that shows what pixels I’m changing, and a third window that shows the icon at 100%.


Also, as a personal preference, I would have stopped at the third 16x16 icon.

July 11, 20h

It’s funny that you wrote a new article on this, because a friend of mine, who is starting to work with icons, e-mailed me today and asked me how to make his icons scale down nicely, and then as an example I pointed him to your previous post on the same subject. He’ll be glad to hear that there is this new article now.

And replying to the comments above, To me the best way to work with small icons like this is in Photoshop, using vector masks and shapes. It’s a shame that Photoshop’s stroke control isn’t as good as Illustrator’s, though.

elv says:
July 12, 02h

I wish Illustrator would give more control for pixel work. You would think it’s just a matter of setting a 1px grid and snapping to it… But then if you give a 1px width to the a stroke it will render as 0.5 pixel on each side. In other words, the stroke will fall between pixels.

I found two workarounds but none is perfect :

- set a magnetic grid with 10px steps and 20 subdivisions, so you can snap your points to the middle of the pixels (but it’s a pain to check if you’re on an even or odd row).

- set the grid to 10px with 10 subdivisions. In the Appearance palette you can drag the stroke *under* the fill, so basically when you set the width of the stroke to 2px, only 1px is visible AND you can snap to whole pixels (but for 1px strokes with a transparent fill you still have to use half-pixels).

July 12, 06h

Another way to do it is to set your keyboard move increments to something lower than a pixel (I think it defaults to 1px). That way, when it gets down to playing with individual anchor points, you’re only moving them around by a fraction of a pixel. I set mine to 0.1px, so when I shift-arrow it moves a whole pixel.

Still, it’s not a perfect solution.

July 12, 06h

@elv: If I’m understanding you correctly, it sounds as if you just need to align the stroke to the inside or outside of the path, as opposed to the center. The “align stroke” setting consists of three buttons on the stroke palette. I think that “center” is chosen by default.

However, I did a little test using this method along with snapping to a grid set to 1px. Strangely, strokes along the top and left sides of a path don’t seem to render as they should. You can check out a screen shot here:
http://puchlerz.com/misc/illustrator_pixel_text.png

If anyone has experienced this before and knows how to fix it, or if I’m doing something dumb, please let me know.

Alberto says:
July 12, 10h

For me these are very useful tips, having just began to create images with vectors.

The new header picture and the colors around are very good mixed!

July 12, 16h

Andrew, Illustrator CS and above has a thing called Pixel Preview (under the View menu) you could also set-up Illustrator to a 1 pixel grid for icon and web work. Not sure if you’d want to snap to that grid though. Hope that helps.

11
Chris Seelus says:
July 12, 20h

Great Article.
This and the last one really point out that good icons need a lot of tweaking.

July 13, 23h

Curious as to whether anyone is using Fireworks for icon design? - it snaps to pixels for vector shapes, which makes it quite good for these kinds of things compared with illustrator and photoshop…

Dave S. says:
July 15, 21h

@Jonathan Hardie - “Curious as to whether anyone is using Fireworks for icon design? - it snaps to pixels for vector shapes, which makes it quite good for these kinds of things compared with illustrator and photoshop…”

Fireworks’ default settings are better than Illustrator, I seem to recall. Getting shapes to snap to solid pixels was a given when first placing them. But I found after using it for a while that I still had to manually tweak anti-aliasing quite a bit, and given the focus of this post (resizing existing artwork) I don’t imagine Fireworks would do any better or worse than Illustrator.

Maybe things are different now though, it’s been a few years.

July 17, 02h

@Jonathan: I did a comprehensive iconset for a desktop app a couple of months back, and Fireworks’ pixel snapping comes in real handy. Although, you still have the option to fine-tune the position of the control points of shapes by zooming into the canvas, which I ended up doing a lot, in order to get the right balance of sharpness and anti-aliasing.

July 18, 08h

As my work with images or icons is reduced to photoshop I had my hard times with icons and I finally gave up. Next time I will try to use Illustrator, thank’s for this illustration.

July 19, 01h

I had never realized how much work is required for “icon optimization”… All of a sudden, these (high-quality) icon collections seem *ridiculously* inexpensive!

July 19, 20h

Having created many icons over the last couple of years as a small part of my job, I have to say that it is an absolute artform and it is not to be under estimated. This article provides clear and concise instructions and it works a treat!

Excellent article and thanks Nick for the workspace suggestions.

If you are required to use transparent gif’s without a matte, you may find the below information handy.

Once i’m happy in Illustrator, i optimize in photoshop.

two methods help;
the first
In photoshop, set up a grid via the Photoshop > preferences > transparency and Gamut menu.

set up the grid as ‘small’ and work at 400%. This help identify any jaggys by displaying a 1px grid.

Secondly
If i’m being really pedantic, I’ll draw a high contrast 1px x 1px grid and set it as the background layer in photoshop. Drop in my smart object and set its layer blending mode to difference. Any jaggys will display vividly for easy optimization

August 08, 10h

Very well written, Dave. I work my icons in Corel Draw, and what I have always been doing is I save a very large version of the icon (around 1000 x 1000) and then downsize the image to the necessary resolutions. Aliasing at the smallest resolutions have always been a problem that was resolved by manually editing the image pixel by pixel (gasp!) … just like back in the day when we actually had to draw stuff pixel by pixel :)

Michael says:
August 23, 04h

As you can see in this article, creating good icons is by far more complex than you would expect if you design a small icon. There are many icon softwares which try to suggest that you can do this easily, but in my opinion the best software to create good icons are still the Adobe products like Illustrator or Photoshop. Several years ago I was also using Corel Draw but was so disappointed with it, so that I’ve never come in touch with it so far. May be it’s now more user friendly.

August 27, 20h

Thanks for this! Very helpful.

August 28, 10h

With this article inspiring me I made my recent icon in Illustrator, adapting each each icon size from 16x16 to 256x256 to fit the pixelgrid.

Then I realise that Vista will only use the 16x16, 32x32, 64x64 icons. For any larger it’ll use the 256x256 icon and sample it down. And that causes real pain as 256x256 requires much more detail than 48x48.

What’s worse is that sampling down from 256x256 to 96x96 which is the Vista default icons size makes all the pixels fall off the grid and become blurred.

Is there absolutely no way of making Vista use the closest available icon?

22
Emibap says:
September 14, 10h

Well, finnaly I understand how many people make so perfect looking icons. I ´ve been using icon editors wich make automatic resizing and always wondered how could I do to avoid the blury effect.

Dave, thanks a lot for this post :)

October 02, 07h

Thanks for that fantastic article. Unfortunately I have just invested $300 in a set of webicons. With your help I am going to build my next icons myself (and if I fail, I will buy one of your sets :-) )

October 15, 08h

I’ve been applying these methods for web and presentation graphics for a while now and yet there seems no fixed or automatic way of achieving perfect results, some fine tuning on the end product is often necessary but I tend to leave the adjustments til the end.
I’m in favour of the pixel grid and often change my keyboard increments to 1 pixel (for precision) and 10 or 100 pixels (for moving). Rather than using rules I tend to use boxes and if possible anything with a stroke I set to inner stroke. However the shape has to be complete in order to do this eg. a 3 sided box will default to a central stroke and therefore cause these anomalies.
Remember, its easy to change your strokes to shapes via the outline stroke cmd but in my experience making things into boxes doesn’t eradicate the spill of colour into new pixels so again, some editing of the graphics is required. However, too much and you’ll experience jagged lines which is why the anti-aliasing is there in the first place!
I find the best method is to create in illustrator and then import into PS, I also import the vector paths into PS to help with selections for editing.

25
ADAC says:
November 03, 19h

Good tips, this should help my graphics guy clean up his icons.

From your post and the comments, it looks like it’s a good idea to start with Illustrator and then finish up with photoshop.

I’ll be passing this article on to my graphics guy.

Marc Levy says:
November 24, 23h

After purchasing so many icon sets (and now that I have a little time on my hands) I am about to design my own set - thanks for the tips above, I will be trying them out. I just hope I can pull it off!

January 06, 16h

My methods are similar to yours, but there is some difference.
Usually I start from relatively big vector image that contains the basic shapes of future icon. Then I resize it down to 48x48 and add all details I need. When the icon is finished, I resize it down to 32x32 and/or 24x24, delete all tiny details that spoil legibility, and increase stroke widths. I prefer to use Xara Xtreme for this (love it for its perfect Curve tool) so I have to suffer a little - there is no simple ways to control pixel rendering in Xara.
As of 16x16 size, I prefer either to completely redraw icon for this size (some times pixel-by-pixel in Photoshop) or to refine its rasterization(Photoshop again).
To illustrate the words above, here is a sample of how it looks like when finished:
http://www.logodiver.com/icosample.png

Nick Toye says:
April 21, 02h

I am just getting started in icon work, and I am using Illustrator to create the initial designs. As I am utilising the 512px x 512px capabilities that Leopard offers, I am creating my icons with detail and at that size.

However, I do resize down to all the usual suspects using Icon Builder plugin.

From this article though I am noticing that you are starting small and building up.

I just wondered if you felt your approach was a silver bullet or not.

Nick Toye says:
April 21, 02h

I think I may have misread your article, so please disregard my previous comment.

tom says:
May 15, 16h

No seems to be mentioning Photoshop’s Sharpen filter, or Pixelate Filter, or bicubic resampling options in Image > Resize?

Come on, surely these are of some use to iconographers!

If I have a passport photo and want to turn it in to an icon (sized between 16px and 512px) then all this vector-craft isn’t much use is it?

May 18, 03h

I use Grids and Snap to grid always while trying to Design my icons. They have always been helpful, and I believe such minor tools in Photoshop has always gone un-noticed, but they have the ultimate potential.