Professional Icons. Quality Design.

Step 1. Preparation

To draw our icon, we’re going to use IconLover, a tiny icon editing tool. It’s very simple, and can be used by total beginners while offering a bunch of handy tools for experienced designers.

Download IconLover from the manufacturer’s Web site (www.aha-soft.com), install and launch IconLover. You’ll see a welcome window as shown in Fig. 1

Fig. 1

Select “Create a new icon”. A window from Fig. 2 will appear asking to select the size of our new icon. As we’re making an iPhone icon, we’ll pick 40×40. Press OK to continue.

Fig. 2

You’ll be transferred to the program’s main window as shown in Fig. 3

Fig. 3

The figure shows all the elements you’ll need. That includes:

• Working space – that’s the space where you’ll be drawing your icon;
• Toolbox bar –your toolbox for drawing the icon;
• Color palette – pick color swatches from there;
• Cursor coordinates – displays your mouse cursor position relative to the top-left corner of the icon;
• Coordinate shift – displays how far you drawn with the currently selected tool;
• Preview panel – displays how our icon looks when viewed in real, non-magnified size.

While drawing your icon, you can use any two colors at the same time. You can assign one color to the left mouse button, and another color to the right button. You’ll need just two default colors. Use black color for the left mouse button and white for the right one.

Decide on what you’ll be drawing (this time we decided on the image of a police officer), and go to the next step.

Step 2. Drawing the Face

To draw a face, you’ll need a tool called “Filled ellipse”. Select this tool by clicking on the  button from the toolbox. We’ll start drawing with the left mouse button (LB).

Move your mouse to the points with coordinates [6,0]. Press and hold left mouse button, then drag the ellipse towards bottom-right until you reach the coordinate shift of [28,40]. At that point, let the button go. You’ll see a picture shown in Fig.4.

Fig. 4

Summary:

LB (left mouse button): [6,0] → d(28,40)

Step 3. Drawing the Hat

Draw the first element of the hat with the “Filled rectangle” tool. Click  on the toolbox to activate. Draw with left mouse button.

Move the mouse cursor to [11,0]. Press and hold left mouse button. Move the mouse towards the bottom-right corner until you reach [18,6] in the coordinate shift. Release the mouse button. You’ll see an image shown in Fig.5.

LB:  [11,0] → d(18,6)

Next, we’re going to draw the edges of the hat. The lines will be aligned at 45°. In order to get sharper edges, switch the “Smooth lines” mode off by depressing the  on the toolbox. Select “Line” by clicking on the  , then draw the following lines:

LB:  [11,0] → [3,8]

LB: [28,0] → [36,8]

LB: [3,8] → [7,12]

LB: [36,8] → [32,12]

You can see the result in Fig.6. Note that, when you’re using the “Line” tool, coordinate shift will display coordinates of the finish point of the line.

Fig. 5

Fig. 6

Now, let’s draw the visor. Enable the “Smooth lines” mode by pressing the button  on the toolbox.

We’ll be using the right mouse button (RB) to draw. Select “Filled ellipse” tool and do the following action:

RB (right mouse button): [8,9] → d(24,8)

You’ll see a picture shown in Fig.7.

Fig. 7

Visors are usually not exactly oval, so we’ll cut half of the oval by performing the following action:

LB: [7,12] → d(26,8)

You should see an image shown in Fig. 8

Fig. 8

To finish the hat, fill the contoured shape with black.

To fill, use “Flood Fill” by pressing the  button on the toolbox. Draw with the left mouse button.

Place mouse cursor anywhere within the zone you’re about to fill, and click left mouse button:

LB: [5,8]

LB: [10,3]

LB: [29,3]

LB: [34,8]

You should get an image similar to what’s shown in Fig.9.

Fig. 9

Step 4. Drawing Facial Features

Let’s start with the ears. We’ll use the “Filled rectangle” tool and left mouse button for that:

LB: [6,17] → d(1,9)

LB: [33,17] → d(1,9)

Police officer with ears shown in Fig.10.

Fig. 10.

Draw the nose and mouth. Perform the following actions with the right mouse button:

RB: [18,27] → d(4,1)

RB: [17,33] → d(6,1)

The current stage should look similar to Fig.11.

Fig. 11

Step 5. Drawing the Sunglasses

First, let’s draw the glass. Perform the following actions with the right mouse button:

RB: [10,19] → d(9,4)

RB: [11,23] → d(7,1)

RB: [21,19] → d(9,4)

RB: [22,23] → d(7,1)

Our current design is shown in Fig. 12.

Fig. 12

Drawing the bridge:

RB: [19,20] → d(2,1)

Earpiece:

RB: [7,19] → d(2,1)

RB: [31,19] → d(2,1)

Our police officer wearing glasses in Fig. 13.

Fig. 13

Step 6. Drawing the Badge

This part is only limited by your fantasy. You can use a round, oval, or shield-type badge. Let’s draw one in the shape of a shield.

Draw with right mouse button:

RB: [17,5] → d(5,5)

RB: [18,10] → d(3,1)

RB: [16,5]

RB: [22,5]

RB: [16,8]

RB: [22,8]

RB: [19,11]

Draw with left mouse button:

LB: [18,6] → d(1,2)

LB: [20,6] → d(1,2)

LB: [19,8] → d(1,2)

The police officer is almost complete (Fig. 14)

Fig. 14

Step 7. Finishing Your Work

In order to be able to use the icon in an iPhone, you’ll have to replace all shades of black to white shades. That’s a very simple task. Just select “Effects” – “Negative…” from the top menu (Fig. 15)



Fig. 15

You’ll see a window shown in Fig.16.

Fig. 16

Click “OK” to get the white image. The final result is shown in Fig. 17.

Fig. 17

Don’t forget saving your work. To save, click the button  on the toolbar at the top of the window. Specify “PNG Image (*.png)” as file type and pick a name for your icon.