2010 May

Android Launcher Icons using “The Box”

While working on EveRated I found it necessary to create icons for my application. From this necessity The Box Method was born. The Box Method uses the cube as illustrated in the official Android Icon Guidelines, and provides a number of layers as guides for either transferring existing icons to 3D space, or creating new 3D icons. You will need to use Inkscape as mentioned in the previous tutorial. The illustration below shows the box along with the various layers containing the guides we will be using.

The first tutorial in this method will show how to convert an existing icon to a simple 3D Icon using The Box method. The example for this tutorial uses the Android icon, but you can use any image you want. It helps if the image has a plain background, or a transparent background like the image below.

You will need The Box template to complete this tutorial, and you can download it here. With the template open in Inkscape, we can now start by importing our base image. To import an image into Inkscape, use the File->Import option as shown below, making sure to have the Objects layer highlighted:

To interact with this image using Inkscape, we need to convert it to a path. This functionality is in the path menu (Path->Trace Bitmap…). Remember to have the image selected when doing this.

Tracing a bitmap in Inkscape is not an exact science, and different settings will work for different images. Because this is a fairly simple image, I chose to use the “Colours” option with Scans set to 2. When working on your own image, experiment with different settings and use the Update button to see a preview of the results of the current settings. Choosing the “Remove Background” option will remove the bottom layer and should only leave you with the necessary parts of the image, although this does depend on the amount of complexity in the background.

When you are happy with the preview, you can apply the final result by hitting OK. The trace of the Bitmap will now be located over the original image. Move it into its own location. Make a copy of the trace and move that to its own location as well. Draw a square with a black outline, but no fill, around this last copy. To draw a square as opposed to a rectangle use the ctrl key. These steps are shown below:

Next we have to combine the square with the trace. Select the square and then select the trace inside it and hit CTRL+K to combine these to objects:

Make a copy of the combined square and trace, then put it aside. We are going to need it later. Now we can start using the Box. Unlock and select layer “vertical 9”.

Select the combined square-trace and then the front of the two vertical guides. Remember to unlock the guide layers you are using for this step.

Making sure you have selected the trace first and the guide second, choose Extensions->Modify Path->Envelope to align the trace to the guide.

Now we repeat this process with the copy we made earlier and using the “horizontal 9″ layer.

Proceed by hiding all layers, except for the object layer where our vertical and horizontal objects now exist. Then delete the corners of the bounding squares.

Now we are going to add some colour to this android. Select the original green image (2) and copy it using ctrl+c. Then select the vertical android and bring it to the front (using the home button or Object->Raise to Top). Hit ctrl+shift+v to paste the colour from the green droid to the outline:

To finish up we remove the border from both the horizontal and the vertical androids. Set the colour of the shadow to r=g=b=100 and blur to 3 (or an appropriate value).

And that’s it for the basic tutorial. Very simplistic, but this is just laying the groundwork. Export the image as a 48×48 PNG file. The next tutorial will be slightly more advanced, and hopefully show the usefulness of the Box Method.

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 48×48:

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