Vector Android logo
In this tutorial I’ll show how to take a bitmap Android logo as template to make a vector version. To do this I’ll be using Inkscape and it’s basic path editing tools. There are better options to vectorize a bitmap but the goal of this article is to demonstrate some basics of Inkscape, especially the path combination and shape alignment tools.
This article is destined to developers who need to make graphic resources for their apps.
First we need to find an image and check that you are authorized to use it. Google provies one here: http://www.android.com/branding.html
We are lucky with the android logo! Only thing we have to do is say something like this:
Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.
Portions of this page are reproduced from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.
Create a new Inkscape document, and paste the image into it. Resolution does not matter, since we’re going to make a vector image.
Draw a rectangle around the first armDrag the small round dot down to make rounded corners.
Note : If the round dots (and other anchors) are not visible, select the rectangle and edit it by pressing F2 or using the edit button:
Now that we have an arm, select it and Copy/Paste (CTRL+C then CTRL+V) this first arm to make a second one. You can also duplicate it using CTRL+D.
Note that copy/paste will create a copy at mouse cursor position, while duplicate will make a copy at the same position as the original. Both options are useful depending on what you are doing.
Now we want to make sure that the arms are vertically aligned. We could use the numeric input boxes, but Inkscape provides very convenient tools to align things. Open the alignment tools using the button on the right bar: .
Select both arms and align them using one of these tools: . they will align both shapes vertically according to the top of the highest object, the center of objects, or the bottom of the lowest object. Mastering these tools can represent a massive gain of time.
Make a rounded corner rectangle starting from the bottom of the body, and a little higher than the shoulders. Now we want to have rounded corners at the bottom, but not on top. We could use path editing tools, but there’s a faster way to do it. Make a second rectangle that will be used to cut off the extra part as shown below. We will use path difference to cut off the top rectangle from the rounded corner rectangle.
Select the body rectangle and the cut-off rectangle (in this order) using SHIFT+click. Use the menu Path>Difference or CTRL+-. Done :
We’re going to do something similar for the legs: make two copies of the arms and place them on the legs (use the alignment tools if needed). Select the body and the two legs using SHIFT+click. We will use path union to join the legs with the body.
Now use the menu path>union, or CTRL++. Done :
Select the body, in the numeric input fields at the top, select and copy the width. Now make a circle using the ellipse tool and holding CTRL while dragging the mouse (CTRL makes sure that your ellipse is a circle). Now select the circle, and in the numeric input fields, lock the width/height ratio using the lock sign, and paste the width of the body in the width field. Press enter. We now have a circle that has the correct dimension to match the body.
Align the head and body horizontally using
You can make sure that the body won’t move during this alignment operation by selecting it first and choosing “relative to: First selected” before using align tool.
At this point, I suggest that you select body and arms, group them using the menu Object>group or CTRL+G, and move them aside so that they don’t disturb while making the head.
We’re going to use the same trick as before to cut off half of the circle. Draw a rectangle to do so and use the CTRL+- shortcut.
Make one circle for the first eye, duplicate it and align the two using what we’ve seen before for the arms:
That’s three objects. We want one. Select the head and one eye (in this order) and use CTRL+-. Do it again with the second eye.
You can check that your head object is as you want it by setting a fill style.
Make a rounded rectangle high and thin, longer than the antenna, so it will intersect with the head. Rotate it and place it over the image. To rotate it, click on the object, if you see the sizing anchors, click again on the object, you will see the rotation anchors:
Duplicate this object, and to get a mirror copy, use the menu Object>flip horizontally, or the shortcut H. Place it over the image and align it with the other one using the alignment tools.
Now select head and antennas, and use the CTRL++ shortcut to join them. Done!
Place back the body, using help of the original image and alignment tools:
To make it a single object, ungroup the body and arms if still grouped, select all four objects and use the menu Path>Combine (or CTRL+K).
Now the colors: select your vector android logo:
- Open the Fill & Stroke settings using the button on the right:
- In the Stroke paint tab, select No paint:
- In the Fill tab, select Flat color: . Now using the picker: , get the green from the original image. You could also copy/paste the hex code given by Google in the numeric input box.
You can now remove the original image.
Using path manipulation and shape alignment tools, we built a nice vector Android logo to play with… With a little practice this can be done in a couple of minutes, especially if you remember the shortcuts.
I used my vector Android logo to build the examples below and some of the versus icons in YaMeMo