I’ve been thinking a lot about icon design lately. As a way to get the hang of writing on this site again after the post-WDN lull, I figure it might be interesting to share some of the things I’ve been discovering. All going well, I’ve got two or three more similar posts in mind.
One of the more deceptively time-consuming things you’ll do when creating an icon is producing out size variations. If you require a single icon in more than one size, the time you spend designing the first size is only about two thirds of the work you’ll end up doing; the other third lies in tweaking it for different dimensions.
Aha, you might say — that’s what vector graphics are good for. Why not just produce the icon in Illustrator or Fireworks and resize it the quick and painless way? Because vector graphics work best with sufficiently large resolutions; scaling between 20cm and 1m at 300dpi doesn’t really require much thought. When designing for the low-res pixel grid, it’s a whole different ball game. Vector doesn’t scale down to lower resolutions as gracefully as one might wish.
To help illustrate the problem, consider this example image. On the left is a large icon that needs to be scaled down. On the right are two possibilities, depending on whether the ‘Scale Strokes & Effects’ box is checked in Illustrator. The middle icon is clearly not an accurate version of the large icon, because the strokes have remained their large size while the rest of the proportions of the icon have been reduced. The right-hand icon is more true to the original, at a smaller size, so it would be a better choice.
But take a look at the strokes; they’re quite a bit thinner now at the small size. Because they’ve been scaled proportionately, their thickness decreases along with the size of the icon. With this particular example, this isn’t a problem. With a more detailed icon scaling to a smaller size, it is. The pixel is the smallest fundamental unit in an icon, and details that end up being smaller than a pixel cause a lot of problems.
In the above example, I’ve got a calendar icon with some fine detail. Each box within the calendar has a 1 pixel wide grey border. When this icon is scaled from its starting size of 32x32 pixels to 24x24 and then 16x16 pixels, those 1 pixel wide borders end up as half-pixel wide borders, and Illustrator has to figure out how to anti-alias them. There’s more explanation for why exactly this is so muddy, but I’ll leave that for a follow-up post. For now, you can directly observe the effect: if you scale detailed icons so that their smallest details are less than whole pixel values, you end up with a messy result.
The solution is to start with the reduced version, and tweak it at the individual pixel level. Make the details fit within the pixel grid, remove extra detail that’s causing blur, or even add extra detail if it helps you get to your end goal. Whatever it takes, the solution is to provide a critical eye to the problem and tweak until you get a result you’re happy with, which is why the size variations are so much extra work.
In the calendar above, you’ll notice what I’ve tweaked the two different sizes so the inner boxes end up with whole pixel values on either side. To do this I’ve had to reduce the size of the boxes at 24x24, and actually create more boxes at 16x16. I couldn’t come up with a combination of 4 columns with a 1 pixel wide border that would fit within the space allotted at that smaller size, the only workable combination I found involved adding an extra column and dropping a row. The icon is a bit different than the 32x32 equivalent, but it’s clearly derived from the larger one and works as an acceptable size variation.
Next time I write about this topic, I’ll explain in a bit more detail the specific steps needed to produce variations and the challenges that go along with that. I wanted to set the stage first of all and describe why producing size variations was a necessity before I got into the mechanics of how you go about actually doing it. More soon.
This article has been followed up with Icon Design: Anti-Aliasing.