How to make natural icons

Part 1

This article is aimed at programmers and WEB page authors who need to make colorful and recognisable icons and buttons.

Maybe you have seen those icons and buttons which seem to pack in a huge amount of visual data in a single 32 by 32 pixel square. And you wonder how on earth the artist did it. How did he or she know to use that color on that pixel to get that shading effect?

The trick is to draw the image much larger than your final icon size, and don't be too worried about your artistic skills! This site is about getting the computer to do the hard work, and it is going to be the computer which hides any inadequacies!

So, here is a very poor drawing of a sun shining on a tree in a hilly green landscape:

This is the actual size at which it was created in Paint Shop Pro (350 by 350 pixels). You can see that I did not waste much time on accuracy! This was drawn using 24 bits per pixel (i.e. 16 million colors).

Now the second step is to reduce the size of the image, letting the paint program calculate how best to represent a 350 by 350 image in 32 by 32 pixels. In PSP (though other paint programs will have similar functions) you use the Resize function and the Image menu:

Notice that I have clicked on "Pixel Size" at the top of the dialog box, and that (in PSP at least) "Bilinear resample" is the resizing method which gives the best results. And here is the result:

Quite a decent little icon (or button), which would have been almost impossible to create at 32 by 32 pixels.

Finally, just before saving the image, reduce the number of colors used to 256. Do this after the size reduction, since then the computer will have less compromises to make between the real color and the final 1 in 256 palette color.

Just one last image to show you how difficult it would have been to create the icon at 32 by 32 pixels:

This is the 32 by 32 icon magnified, and I am sure that no human would be able to guess these pixel colors, that's why we let the computer do the work!

The second part of this article illustrates when you can use photographs directly as small icons...