[Please note: this tutorial is for Illustrator’s absolute beginners]
In this tutorial series, you will learn how to draw basic UI icons, each must take no more than 2 minutes to accomplish. Following this series will make you familiar with the basic Adobe Illustrator tools as well as useful shortcuts to speed up your workflow.
We’ll use a consistent outline style for all icons, with a 4px weight black round stroke, no fill and an artboard size of 64x64px.
Let’s get started!
1. Create a new Illustrator document and change default fill and stroke settings
Open Adobe Illustrator and hit Ctrl+N to create a new document, choose the same settings as the following:
Turn Fill to none by clicking /, and change Stroke weight to 4px:
Set the stroke align to inside and cap and corner to round as follows:
2.Draw the head
Now that our document is correctly setup, let’s dive into designing the avatar icon. We’ll start by drawing the head which will be a simple circle.
Press L key on your keyboard to pick the ellipse tool and click anywhere in your document, a popup will show up to set the width and high of the ellipse, enter 18px for both width and high:
3.Draw the body
Turn on Fill by clicking X then <, and turn off stroke by clicking again X then /, you should obtain fill and stroke settings as follows:
Now, pick the ellipse tool and choose 45x45px as dimensions.
Select the circle and grab the scissors tool by pressing C, and then select the left and the right anchors respectively:
The circle is now divided into two half circles, we should remove the bottom one, all you need to do is to pick the select tool by pressing V, then select the bottom of the circle and hit delete, you should obtain this:
Now, grab the rectangle tool by hitting M, click anywhere in your document and choose 26x26px as dimensions.
Drag the rectangle and place it in the middle of the half circle, this can be done by selecting the two elements, then select the half circle and select horizontal align centre as the following:
Now, our icon looks like this:
Before transforming the fill into stroke, we need to unite the two objects (half circle+rectangle), to achieve this, select them and go to Pathfinder and click unite:
Now the two layers are blended in a single one, all you need to do is to select this newly created path and swap fill and stroke by hitting Shift+X, or the swap arrow:
Select the path and repeat the same stroke settings we used at the beginning of this tutorial (4px weight, round cap and corner).
4.Wrap it up
The icon’s two main components (head+core) are ready; all we need to do is to align them to the artboard. Firstly, arrange the head on top of the core if this is not your case then select the two elements and align them to the horizontal centre of the artboard:
To align the icon vertically in the middle of the artboard, we should group the two objects by selecting them and click Ctrl+G, then align the group to the vertical centre of the artboard:
The final design should look like the following: