Icon Sizes

Yikes, we’re now up to 20 unique icon sizes for a full cross-platform universal build! It wouldn’t be so bad if it weren’t for the fact that icons, in particular, tend to go through a lot of redesign. Sooner or later, most indie developers start looking for some automated tool to generate all the various sizes from a single high-resolution master. And there are plenty of options to choose from for that automation.

(You DO have a high-resolution master, right?? 1024×1024, or more.)

I’ll discuss Adobe Illustrator/Photoshop here, but I think the same concepts will apply to other tool combinations (such as Inkscape/GIMP, for example). And let’s assume your source document is in vector format, because it gives us an additional rasterizing step to consider.

First, unless your artwork is very simple (or you’re just not very discriminating), a “save for web” straight from your vector package probably won’t produce optimal results, particularly at the lowest resolutions. Illustrator, for example, will tend to make things “overly bold” at low resolutions, so fine lines and other details may bleed into others nearby. You’ll likely get better results if you drop it into Photoshop at full resolution for the rasterizing, then downsample from there using either Photoshop itself, or some other tool of your choice. (Though much of this is subjective – for certain images you may actually prefer the artifacts from a certain tool path.)

So, let’s assume we’ve rasterized at full-resolution, we next need to consider resampling/downsizing. I’ll use the current working icon of Eggheadz Bounce as my test case:
icon comparison side-by-side
Here’s our example, using a 1024×1024 master, targetting 72×72. The images were produced as follows:

  • a “save for web” straight from Adobe Illustrator
  • fullsize rasterize in Photoshop downsized bicubic
  • fullsize rasterize in Photoshop downsized bicubic sharper
  • fullsize rasterize in Photoshop, downsized with ImageMagick using ‘catrom’ filter, strongly unsharp-ed
  • via makeappicon.com
  • via resizeicon.com

The last two are just to illustrate a couple (of the many) online tools that you might find. Note that some online tools might exhibit problems, like not preserving transparancy, and most (that I’ve found) produce results that are just a bit soft for my tastes.

I suppose to a non-discriminating eye all of the above icons might look about the same — and I’ll admit that they do, to a degree. But there are subtle differences in sharpness that can be critical in improving readability on small devices. (if stacked on top of each other, and toggled A/B, the differences are more apparent than as presented here side-by-side)

(Check the ‘space’ between the eye-outline and the eye-brows, that’s a good place to look for the differences)

For my tastes, it’s still hard to beat Photoshop Bicubic Sharper. Though in fairness to ImageMagick (http://imagemagick.com/) there are a dozen different filters, and endless combinations of other possible effects (notably unsharp, but also windowing functions, linear vs perceptual colorspaces, etc, on and on), so there is a lot of potential there.

This post is just to share some initial comments/experiences, fwiw. Perhaps in a later post, if there’s any interest, I’ll post my Photoshop and/or ImageMagick scripts (no great rush though, as many others have posted similar scripts, easily found if you search for them).

[edit] Also wanted to mention another online tool: http://icon.angrymarmot.org/ as well as a link to the post with the photoshop script.