Xojo Articles - Table of Contents

Simple Icon Magick

Let me start, I am absolutely no artist.  That is my brother, that's my mother-in-law. He uses a pencil or pen & she uses watercolors.  I use rulers.  I use math to draw things, that is the limit of my artistic ability.  So when I need icons for an app, I look to others to make them, or to online sources to provide them.  

Things have only gotten more difficult since Dark Mode now requires icons & images to be generated for both modes. High resolution screens now require icons be generated at 3 sizes, or more.  I used to generate at 512x512 or so, and then scale down to the multiple sizes that were needed.  But testing shows that it actually provides considerably better quality to draw at each size you need.

The icons that I choose draw for myself are only geometric, using lines and curves that can be mathematically modeled and scaled.  

ImageMagick is a powerhouse of graphic manipulation tools.  It has APIs for most common languages and can be used directly from the shell's command-line.  Due to its popularity and capability there are tremendous online sources for instruction in the proper and effective use of imageMagick.

I normally write simple scripts in Perl.  I write imageMagick commands as shell command-lines.  It's just easier to test and refine than using APIs, for simple tasks.  If it is not pretty simple, I don't do it myself.

Using a higher-level scripting language, like Perl, makes it easier to do sophisticated math and generate complex command-lines and then execute them in an automated style to draw parametrized images for use as icons.

What sizes do you need?

I always draw a version at 1024x1024 or 512x512 for clear and precise visual review.

For menu icons you will need 16x16, 32x32 and 48x48 for 1x, 2x & 3x.

For control icons I find that 20 pixels tall/wide is the correct size, so 20x20, 40x40 & 60x60 for the 1x, 2x & 3x.

Application Icons should be generated at 1024x1024 (or at the very least 256x256) and each size going down to 16x16.

I always generate PNG files (lossless and supports transparency!)

How About an Example?

The narrow diamond (DiamondN) that I use in my 'window' menu

Drawn at 512x512 in black over a transparent background:

The smaller sizes look like this: [60x60, 40x40 and 20x20]

It is a simple matter to change the draw color from black to white, to make Dark-Mode versions of the images.  If black & white are not your colors, the script approach makes it easy to generate in multiple sizes and multiple colors as needed while maintaining mathematical precision.

I'm not trying to gloss over the task because if you want/need multi-color images, or complex images, drawing this way may not be the right thing.  There are countless drawing/painting programs, both commercial and free, that approach drawing in a wide variety of ways.  Search and you will be able to find what you want.

ImageMagick Has Alot to Offer

ImageMagick is very capable, there are entire books and countless websites devoted to exploring and exercising the capabilities of this free and open-source software package.  For basic drawing it can be a very fine assistant.