Creating icons with Inkscape

Recently I was having a look at the wiki site for my favorite audio player Deadbeef and I noticed that they were asking for artist contributors for a new logo/icon. In case you are unaware the name 0xDEADBEEF is just a reference to a filler for debug memory and has nothing to do with death or cows, so it is a bit of a strange name but it is a great audio player nonetheless. Deadbeef is free and Open Source and is notable for being able to be run from both a gui and also the command line. The gui is GTK2 based but without any dependencies on either Gnome or KDE so it is quite light and fast.

I spoke with Alexey Yakovenko, the lead deadbeef developer, about the choice of the name and he told me that they mostly just chose that name as a joke one night while taking a break in a smoking room, and that because of the name it has been understandably quite difficult to come up with a suitable icon.

Anyway I decided to take a shot at making them an icon. Eventually the thought came to me that since the name reflects a low level programming concept, it might be cool to mirror that with an icon of a low technology device, and since the program is an audio player maybe a low tech music box would be a perfect fit.

So after bouncing a few ideas off Alexey I eventually came up with something he seemed happy with and so I went to work. I made the icon in Inkscape and here it is rendered in png format at 256x256 px resolution.

I'm fairly happy with how it turned out, but I'm not an icon artist so obviously this is not nearly as good as the standard Gnome icons, but I did use the Tango color palate and I also tried to follow the "on shelf" look of the standard Gnome icon set.

In case you've never seen anything like this before and you're wondering what the heck it represents just do a Google search for "mechanical music" and you will likely find a number of  steampunk style devices of brass and steel with cogs and cranks which may eventually remind you of this thing that I've made.

The key components are the copper cylinder with the musical notes embossed on it's surface and the metal comb which is plucked as the cylinder is turned. Most music boxes have a wind-up motor, but I decided that a hand crank would look more interesting.

The trouble though is that this icon is very busy, and sure it looks alright at 256 but when it gets down to 32x32 most of the detail is lost and it becomes quite difficult to see what the icon represents.

As you can see at 32x32 the icon has some trouble expressing itself.

So now I have a couple choices, I could make a custom set of png icons at varying resolutions (16x16, 22x22, 32x32, 48x48). By hand crafting them at various resolutions I can ensure that each resolution will be somewhat clear and understandable, but that would be a tone of work. Ideally it is always best simply to come up with a solid icon design in svg format that can then just be scaled to the multiple formats without needing to be handcrafted, although in reality most icons do need touching up at various resolutions.

Here is what the unmodified svg icon looks like on my desktop at 24x24 resolution when it is placed beside some other well known icons.








I quickly touched up a 22x22 px version in Gimp, it is not nearly finished yet but as you can see it already appears a lot crisper.



As I said, I'm not a professional icon designer by any means, but writing this post has already given me a few ideas about how I can fix the icon, and so if you have any critiques or ideas about how to improve it further or where I should go from here I would be glad to hear from you.