Android Menu Icon Tutorial – Using Inkscape

Introduction

This week I started work on some icons for EveRated. To do this I have been using Inkscape, which is an awesome tool. I highly recommend that you give it a try if you're creating icons or other graphical components for Android or any other project for that matter.

The end result can be seen below and is used in EveRated (available in the Android Market). And the subsequent steps will explain how to create an icon of your own. This tutorial assumes some basic Inkscape skills, but don't worry, you can find what you need here.

Download SVG File

Getting Started

I used an image supplied with the icon template pack as a guide for the shape of the icon. To start with I created a new file, using File->New->icon_48x48:

I then created the basic shape of the icon, a quick breakdown of the steps are below:

Colour

As the effects are being applied to the entire icon, I combined all the parts of the house icon (roof, chimney and building) by selecting the parts and pressing ctrl+shift+= (or ctrl++). You can also do this from the Path menu by selecting the union option.

To set the correct colour for the icon, you can open the Fill Panel by pressing ctrl+shift+f:

The colour of the icon is defined as a gradient from r=163, g=163, b=163 to r=120, g=120, b=120 with alpha=100. This is per the [Icon Design Guidelines|http://developer.android.com/guide/practices/ui_guidelines/icon_design.html].

Glow Effect

Next I created a new layer called glow. You can create layers from the layers menu (Layer->Add Layer) or by using the Layer Panel which can be activated by pressing ctrl+shift+l or from using the menus: Layer->Layers.

The next step was to create a duplicate of the icon, you can duplicate your object by selecting it and hitting ctrl+c. To paste it into the glow layer, highlight the glow layer on the Layer Panel. Then use ctrl+alt+v to paste. This key combination pastes the object in the same location where it was copied from.

To make sure that I was working on the glow layer, I locked the original icon layer. Layers are locked by clicking the padlock next to the layer:

Then, after selecting the copied Icon on the glow layer, I turned off the fill and set the stroke paint colour to white. I chose a stroke width of 2.0:

Because we now have a white frame on a white background, the effect is not visible. So to see what is going on, you can add a background layer with a grey square, but remember to get rid of this before the export. Remember to lock the background layer to stop from selecting it by accident. Finally, I set the blur (which can be found below the fill/stroke setting on the fill panel) to 10.0:

Sunken effect

For the sunken effect I created a new layer called sunken and pasted the icon to this layer using ctrl+alt+v as before. Note that at this stage the glow layer is below the original layer (called Layer 1 if you haven't renamed it) and the sunken layer is above it.

Then I removed the fill and set the Stroke Paint to black with width 1.0. I also set the blur to 2.0. You can experiment with these values to get the best results for your icon.

After that I pasted another copy of the icon onto the sunken layer. To clip the blurred outline and create the final sunken effect, we select both versions of the icon on the sunken layer and choose Object->Clip->Set.

Export

To get the icon in a usable format I exported it to a PNG file. You can reach the export dialog by pressing ctrl+shift+e or using the File menu and choosing the Export Bitmap option. Use the page option to export the entire icon and make sure the size is set to 48x48:

There is not much to it, but to see how it all fits together grab the SVG file below: