Create professional avatars with Adobe Illustrator

In this tutorial, let's create a flat style portrait, depicting people from different industries. These images can be used as an avatar for you or used to design websites. You can even create your own portraits for business cards.

Basic shapes and tools of Adobe Illustrator are the minimum requirements for drawing vector illustrations, you need to follow the previous articles of the ThuThuyMet Software.vn to know how to use them. In the process of drawing this professional avatar, we will discover new tips and tricks such as using Pathfinder, Clipping Masks or some other features. Get started now!

Create professional avatars with Adobe Illustrator Picture 1

Create professional avatars with Adobe Illustrator

Step 1

Start by creating the character's head, take the Rectangle Tool and draw a 65 x 80 px rectangle with a light pink Fill color.

Create professional avatars with Adobe Illustrator Picture 2

Select the shape with the Direct Selection Tool , then go to Object >> Path >> Add Anchor Points .

Create professional avatars with Adobe Illustrator Picture 3

You will see that the image will be added with some anchor points to make it easier to customize. Repeat the operation again to get the following points:

Create professional avatars with Adobe Illustrator Picture 4

Step 2

In fact, we do not need to use all the Anchor Points, to delete redundant points, use the Direct Selection Tool (A) , hold Shift and select 6 points on either side.

Create professional avatars with Adobe Illustrator Picture 5

Select Object >> Path >> Remove Anchor Points .

Create professional avatars with Adobe Illustrator Picture 6

Now create the chin shape for the face, use the Direct Selection Tool to select 2 points in the bottom corner.

Create professional avatars with Adobe Illustrator Picture 7

Press Enter to open the position adjustment window (Move) >> Set Horizontal = 0 px, Vertical = -25 px >> OK .

Create professional avatars with Adobe Illustrator Picture 8

Step 3

If you want your chin to be wider or narrower, use the same way to move its anchor points. For example, to make the character's chin smaller, select the left anchor point, press Enter and set Horizontal = 5, Vertical = 0 >> OK ; for the right point Honrizontal = -5 . Here is the result:

Create professional avatars with Adobe Illustrator Picture 9

Make the corners more rounded by using the Direct Selection Tool >> Select 1 Corner point >> drag it closer to the center , the closer it is, the more rounded your corner will be, choose a moderate angle.

Create professional avatars with Adobe Illustrator Picture 10

If you use an earlier version of Adobe Illustrator, there will be no Live Corners feature, but you can still do the same thing with Effect >> Stylize >> Round Corners .

Step 4

Open the Rounded Rectangle Tool by clicking the 3-dot icon in the toolbar >> Drag the Rounded Rectangle Tool to the toolbar.

Create professional avatars with Adobe Illustrator Picture 11

To draw the nose, use the Rounded Rectangle Tool , draw a 9 x 20 px pink rectangle.

Create professional avatars with Adobe Illustrator Picture 12

Hold down Shift and use the Selection Tool (V) to select both the nose and the face. Then hold Alt and click the face again to select it as the main object (with thick borders around it), meaning all other objects will be aligned to it.

Now open Windows >> Align >> select Horizontal Align Center . And the nose is well balanced in the middle of the face.

Create professional avatars with Adobe Illustrator Picture 13

Step 5

Add a mustache to the fun of the design! You create a 30 x 10 px brown rectangle . Put it in the right position, then right click >> Arrange >> Send Backward and it will be placed under the nose.

Create professional avatars with Adobe Illustrator Picture 14

Step 6

Select the top left anchor point for the mustache, press Enter and set Horizontal = 10px , Vertical = 0px so it is moved closer to the nose, the opposite of the other point.

Create professional avatars with Adobe Illustrator Picture 15

Make the lower mustache rounder with Live Corners .

Create professional avatars with Adobe Illustrator Picture 16

Step 7

Use the Rounded Rectangle Tool to create a small shape as the lips, place it under the mustache with Ctrl + [ and align with Align .

Create professional avatars with Adobe Illustrator Picture 17

Step 8

Using Ellipse create an 8 x 8 px white circle as the eye, placing on it a 6 x 6 px brown circle .

Create professional avatars with Adobe Illustrator Picture 18

Continue drawing a small circle to create a highlight for the eyes.

Create professional avatars with Adobe Illustrator Picture 19

Select all three parts of the eye with the Selection Tool , then press Ctrl + C and Ctrl + V to make a copy of it and place the balance on the opposite side.

Create professional avatars with Adobe Illustrator Picture 20

Step 9

Create a worker helmet that is a 65 x 39 px orange rectangle on the top of the head and rounded the top of the hat.

Create professional avatars with Adobe Illustrator Picture 21

Step 10

Now it's time to add hair, draw a long rectangle on the corner of the face, and round it to an inner corner like this:

Create professional avatars with Adobe Illustrator Picture 22

Make a copy of the hair, set on the opposite side. To flip the image, right click >> Transform >> Reflect . , check the box Vertical and then OK .

Create professional avatars with Adobe Illustrator Picture 23

Step 11

Or slightly modified the hat. Select the hat, right click >> Arrange >> Bring To Front to bring it to the top.

Create professional avatars with Adobe Illustrator Picture 24

Using the Scrissor Tool (C) , a point of intersection between the hair and a hat is the point below, this time your line has been cut at the point.

Create professional avatars with Adobe Illustrator Picture 25

Select the outermost anchor point and press Enter , enter H = 0, V = 5 and then OK . The anchor point will be pulled down as follows:

Create professional avatars with Adobe Illustrator Picture 26

Do the same with the other side:

Create professional avatars with Adobe Illustrator Picture 27

Step 12

As the cap for the hat, you create a longer, lighter orange rectangle attached to the hat.

Create professional avatars with Adobe Illustrator Picture 28

Using the Direct Selection Tool , select the Anchor point and drag it inside 10 px, creating a trapezoid like this:

Create professional avatars with Adobe Illustrator Picture 29

Round the 2 corners below a little bit.

Create professional avatars with Adobe Illustrator Picture 30

Step 13

Use the Rounded Rectangle Tool and create a 7 x 30 px rectangle on top of the helmet. Align in the center of the hat.

Create professional avatars with Adobe Illustrator Picture 31

Continue to create 2 shorter images and place it flush with the middle one. Use Align to align distances correctly.

Create professional avatars with Adobe Illustrator Picture 32

Step 14

Use the Rounded Rectangle Tool to draw the ears. Draw a pink 11 x 23 px side on the left and place it below with Shift + Ctrl + [ . Create a copy on the opposite side.

Create professional avatars with Adobe Illustrator Picture 33

Step 15

Create a 35 x 40 px rectangle for the neck with slightly darker skin than the face, making sure to circle the bottom.

Create professional avatars with Adobe Illustrator Picture 34

The worker shirt design is a dark blue rectangle measuring 90 x 70 px .

Create professional avatars with Adobe Illustrator Picture 35

Take the Scrissors Tool and cut at two intersections between the neck and the shirt:

Create professional avatars with Adobe Illustrator Picture 36

Then, using the Direct Selection Tool, drag the top two corners down about 17 px .

Create professional avatars with Adobe Illustrator Picture 37

Step 16

Create a worker uniform with 2 orange stripes on the shoulder and 1 rectangle on the chest.

Create professional avatars with Adobe Illustrator Picture 38

Open Windows >> Pathfinder and use the Unite feature to combine all three shapes into one.

Create professional avatars with Adobe Illustrator Picture 39

Using the Selection Tool , hold Shift and select both the inner shirt and the uniform. Switch to Shape Builder tool (Shift + M) >> Hold Alt and click on the excess to delete it.

Create professional avatars with Adobe Illustrator Picture 40

Do the same for the 2 smaller strips.

Create professional avatars with Adobe Illustrator Picture 41

Step 18

To make the design more accentuated by darkening one side of it.

1. Select all elements of the character (Control + A)
2. Copy (Ctrl + C) and Paste (Ctrl + V) it to the front
3. Use the Unite function in Pathfinder to combine details.

Create professional avatars with Adobe Illustrator Picture 42

Step 19

Using the Line Segment Tool () , hold Shift and create a vertical line on the silhouette, aligning with Align for the line in the middle.

Select the line and the silhouette using the Selection Tool , the silhouette is the Main Object , then use the Divide feature of Pathfinder to cut the image in half.

Create professional avatars with Adobe Illustrator Picture 43

Step 20

Delete the left half and put the right part back to fit the picture.

Create professional avatars with Adobe Illustrator Picture 44

Choose black Fill and set the Opacity down to create a light shadow effect.

Create professional avatars with Adobe Illustrator Picture 45

Step 21

Looks like we've forgotten the eyebrow part. Create a circle around the eyes and set the Stroke color to the same as the other parts. Use the Scrissors Tool to cut half of the lower part.

Create professional avatars with Adobe Illustrator Picture 46

Open Windows >> Stroke >> select the thickness of 2pt and Cap round .

Create professional avatars with Adobe Illustrator Picture 47

Step 22

Select the eyebrows with the Selection Tool , then take the Eraser Tool , hold Alt and draw a rectangle across the eyebrows. Then release the mouse, the eyebrows have been shortened.

Create professional avatars with Adobe Illustrator Picture 48

Create a copy on the other side.

Create professional avatars with Adobe Illustrator Picture 49

Step 23

Round the shoulders to softer.

Create professional avatars with Adobe Illustrator Picture 50

Step 24

The main element of the avatar is complete, the next we will create the background to make the object more prominent. Use Ellipse (L) to draw a 180 x 180 px circle . Fill it with bright blue

Create professional avatars with Adobe Illustrator Picture 51

Make a copy and bring it to the front.

Create professional avatars with Adobe Illustrator Picture 52

Press Ctrl + A to select all objects, then right click, select Make Clipping Mask .

Create professional avatars with Adobe Illustrator Picture 53

And we have a neat round avatar:

Create professional avatars with Adobe Illustrator Picture 54

Step 25

In the last detail we will create a long shadow. Select the Rectangle Tool and create a large rectangle and lower the Opacity to see the images below. Hold down Shif t and rotate the image 45 degrees.

Create professional avatars with Adobe Illustrator Picture 55

Use the Pen Tool to mark new anchor points and drag the points so that only the left side is left.

Create professional avatars with Adobe Illustrator Picture 56

Drag the shadow layer into the Clip Mask and place it below the parts of the character, just above the background part.

Create professional avatars with Adobe Illustrator Picture 57

Change the ball to black and you have the result:

Create professional avatars with Adobe Illustrator Picture 58

Thus, the process of creating professional avatars with Adobe Illustrator is completed. With these basic models, you can freely change and personalize the character by changing costumes, hairstyles, skin colors, . to make it your own.

Let's get started and create your own unique avatar!