Thursday, July 12, 2012

Design Android application icon using Inkscape

We programmers suck at graphic design, which is why in Google Play you can find lots of icons drawn with MS Paint or something like that :)

While we will never be good at this thing, it doesn't mean we have to settle with sub-par icons. In this post I will show you how I made this icon in Inkscape using only a few basic drawing tools, all in about 15 minutes.  It's not that good compared to the professionally-made ones, but I think it looks better that a lots of icons on Google Play.

Why using Inkscape, and not, say, Gimp?  Because Inkscape is a vector graphic drawing program, which allow us to resize the images without loosing quality.  This is important because Android needs different sizes of the icon to support different screen resolution.

Step 1:  Create basic shape
node-editing tool
I draw a glass using 3 basic shape.  One is a round rectangle cut in half, other two are also originally rectangle that got modified: first converted Path (menu Path->Object to Path) and, second, modify the path by dragging the nodes inside the path using  node editing tool.  Then I using a Union tool (menu Path->Union) to combine them into one object (Fig. 1).

Fig. 1. create basic glass shape

 Step 2: Add border
Next I add the the border around the glass by
  1. Make a clone of the glass (Ctrl-C, Ctrl-V works fine)
  2. Select the clone object and go to menu Path->Dynamic offset.  You will see a single drag handle (see picture below, the second one from the left)
  3. Drag that handle outward a bit
  4. Change the color to light gray (we will change it to white later, but we use light gray here so we can see it against white background)
  5. Put the original glass on top of it.
The whole process in this step can be summed up in Fig. 2.

Fig. 2. add border

Step 3: Add highlight
Fill and Stroke Dialog
So far the glass looks flat.  Some highlight would add depth to the image.  First I draw the round, white rectangles on the glass and select them.  Then I open up the Fill and Stroke dialog and adjust their blur and opacity levels there until they look nice.  The result is shown in Fig. 3.

So far we are only using basic drawing tool and adjusting opacity and blurriness of the image.  Guess what,  these are all we need to know for the rest of the tutorial!
Fig. 3. add highlight

Step 4:  The background
Now we will create the lime background.  See fig. 4 along these steps:
  1. Create the rounded rectangle.  The color doesn't matter now, but the border should be black.
  2. Clone it, then use Fill and Stroke dialog to blur it.
  3. Put the blurred one under the original one.  You should see the drop-down shadow effect. Adjust it to your liking.
  4. Change the color of the original one to lime-green and adjust its opacity to about 70%, then change the border color to white.

Fig. 4. icon background

Step 5: Background texture
Well, it's not really a texture, just some washed-out color, but it makes the background less boring.  I drawn a white circle and squeeze it down, then blur and adjust its opacity.  You should get the result similar to what is in Fig. 5.
Fig 5. background washout

Step 6: Put things together
Now that the background is ready, I put my glass on top of it.  Again, I used Fill and Stroke dialog to adjust the glass opacity so that it blends nicely with the background.  Don't forget to change to color of the glass border to white first.
Fig 6. put things together

Step 7: Add some liquid
I think it looks good already, but someone might mistake our glass for a microphone or something.  Lets add some liquid in it.  First I draw a circle and cut it in half, then place it on top of the glass, but under the highlight (and, can you guess, adjust its opacity).  See fig. 7.

Fig 7. add liquid

Here it is. We are done.  Now you can export it into a PNG of any size as required by your apps.  By the way you can download the finished icon in svg format here.   See, even if all you know about  Inkscape is to draw basic shapes, to change the colors, to drag some nodes, and to adjust blurriness and opacity, you can still get a pretty good result :)

1 comment:

  1. The blog was absolutely fantastic! Lot of great information which can be helpful in some or the other way. it consulting outsourcing