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 48x48 PNG file. The next tutorial will be slightly more advanced, and hopefully show the usefulness of the Box Method.