Creating an Icon for Structure Synth

I’ve had a few requests for icons in Structure Synth. And a few people volunteering to make them. In fact I already made a couple of rough icons for Structure Synth v1.0 – but if anyone is able to improve them, please do. Suggestions may be posted to the Structure Synth Flickr pool, where I’ll choose the most suitable ones based on user comments.

Creating good icons is difficult – especially because you need something that looks good even at 16×16 pixels. Drawing an icon from scratch in a pixel based editor is not for the faint of heart. I’ve tried to do so on a couple of occasions, and the result were terrible. It is much easier to create a larger icon (preferably in a vector graphics format) and scale it to the smaller resolutions.

Icons are square bitmaps typically used with the following width and heights in pixels: 16,24,32,48,256 (Windows Vista and Mac OS 10.4 only), and 512 (Mac OS 10.5 only).

An icon file (*.ico on Windows and *.icns on Mac) may contain multiple images at different resolutions and color depths. It is not necessary to provide all possible resolutions for a given icon – the OS will automatically create the icons it need by resizing the existing bitmaps – but resizing something down to 16×16 pixels can cause severe image degradation.

For the icons I created, I started out by a very simple model made in Structure Synth, and rendered in Sunflow:

Next, I imported the image into Paint.NET – a free paint program for Windows that I can highly recommended.

For an icon to look good, it must be transparent – and not only that – any shadows must be created using the alpha-channel. In this particular case it is quite impossible to cut out the shapes without completely destroying the shadows. What I needed was to convert the black shadows (composed of colors ranging from opaque black – #000F – to opaque white – #FFFF) into colors going from opaque black into transparent black (#000F -> #0000). Turns out this was possible using the CodeLab plugin for Paint.NET. The following lines do the job:

CurrentPixel = src[x,y];
CurrentPixel.A = (byte)(255-CurrentPixel.R);
CurrentPixel.R = (byte)0;
CurrentPixel.G = (byte)0;
CurrentPixel.B = (byte)0;
dst[x,y] = CurrentPixel;

This was the most tricky part. Notice that this also makes the interior of the objects transparent – I had to fix this by masking the objects in Paint.NET. A better solution would have been to render the background in a distinct color, so that I could isolate it in the CodeLab plugin.

After that I did some post-processing to create a document icon (for the *.es EisenScript file associations). This is how the icons ended up looking:

The final step involves packaging the images files in the Icon file formats. For this I used IcoFX – a free icon editor, packed with features, and support for both Windows and Mac icons. IcoFX also contains a nice pixel editor, making it possible to clean up the low resolution 16×16 versions of the icons.

3 thoughts on “Creating an Icon for Structure Synth

Leave a Reply

Your email address will not be published. Required fields are marked *