Create your own vector avatar with Illustrator

I don’t consider myself an “artist” as I’ve never had any formal drawing training (for the record, my background is more in corporate identity and layout – you know, lots of Helvetica and lots of white space). However, I’ve had the opportunity to work and spend time with many talented illustrators over the years. Being I know a thing or two about using Adobe Illustrator, I’ve always been inspired to try to draw things on my own.

My daughter recently had to draw a self-portrait for her art class, and the project inspired me to do one on my own. With all the vector avatars I see people using, I thought it would be a good project. After all, I figured someone like me should have a vector avatar. At first, I thought it was a stupid idea. I didn’t even know where to start. But surprisingly enough, after about 30 minutes, I actually created something that I thought looked pretty good, and the techniques are all pretty basic. It may appear like there are a lot of steps in this tutorial, but I do spend some time explaining as I go.

As you go through this fun tutorial, I’ll remind you that I’m not an artist, which means two things. First, anyone can really do this. Second, it probably isn’t perfect, and I wouldn’t be surprised if I violated any rules of illustration. But then again, this is art – the only thing you can possibly do wrong is not try it at all…

1. START WITH A GOOD PHOTO. It took me a while to find an photo that I was happy with. I cleaned it up a bit in Photoshop and cropped it as I needed.

2. SET UP YOUR ILLUSTRATOR FILE. Create a new Illustrator file. Since this was going to be used as an avatar, I used a web profile. I also set up my artboard at 200x200 pixels. Perhaps one of the more overlooked benefits of using Illustrator for screen graphics (over Photoshop for example) is the ability to work in scale, but still be able to zoom in really close for detail work. As we’ll see later, we can easily export our art at any size we need.

3. PLACE THE PHOTO INTO ILLUSTRATOR. Choose File > Place and position the image on your artboard. I actually realized I was leaning somewhat in the photo, so I rotated the image a bit (I used the eyeglasses for alignment). To make your life easier, create two layers in your document. You’ll have the image on one layer and your drawing on the other. In this way, you can easily hide and lock the photo as needed.

4. PICK A PLACE TO START DRAWING. This was the hardest part for me, and sometimes just getting started can get the creative juices flowing (in my writing classes, my professor used to tell us to write “I’m stuck” over and over when we had writer’s block, as the process of writing something would help things along). I figured the glasses would be the easiest to create, so I started there. You might look for other parts that are easy to draw, such as eyes, etc.

Change the opacity of the photo to something like 50%, lock the photo layer and switch to the draw layer. Use the Pen tool to draw the glasses (I created a compound path to define the hollow part). I actually drew one side first and then flipped a mirrored copy to create perfect symmetry (adjusting the temples somewhat to compensate for the slight angle). Remember this is an illustration, so you can make things perfect even if the photo isn’t. Take some creative license. To make it easier to see what you’re doing, use a fill set to none, and a stroke set to .25 point.

5. ADJUST YOUR EYEDROPPER TOOL SETTINGS. The easiest way to color your artwork will be to sample colors directly from the photo. To do that, you’ll use the Eyedropper tool to both sample and apply color simultaneously. By default, the Eyedropper tool samples the exact pixel you click on. However, you can set the Eyedropper tool to be more forgiving and choose a color from a larger sample. Double-click on the Eyedropper tool and towards the bottom of the dialog where it says Raster Sample Size, choose 5x5 Average. Click OK to accept the setting.

6. APPLY COLOR TO YOUR ART. Unlock the photo and set its opacity back to 100%. Select the Eyedropper tool. Press Command (Ctrl on Windows) to temporarily activate the Selection tool, and click on the glasses path. Then release the Command key. Press and hold the Shift key and then click on the area of the glasses in the photo. This will simultaneously sample the color from the photo and apply the color to the path.

Note that with the Shift key and the mouse button both down, you can move the Eyedropper tool around and watch as the color indicator in the Tools panel changes in real time. When you see a color you like, just release the mouse button. Set the photo back to 50% opacity so that you can start drawing more paths. In truth, you may find it easier to leave a copy of the photo at full strength off to the side so that you can easily sample colors without having to constantly adjust the photo.

Remove the black strokes from the shapes as you apply colors to the fills of the objects.

7. DRAW THE EYES AND MOUTH. Zoom in close to the photo and draw basic shapes for the eyes and mouth. To save time, I drew one eye and one side of the mouth and then simply copied and flipped them. Maybe in real life my left and right eyes are different, but in my vector avatar, they are in perfect symmetry.

8. ADD COLOR TO THE EYES AND MOUTH. My eyes are blue, but they weren’t lit very well in the photo. Rather than sample a color from the photo, I chose a nice blue color for the eyes. I then used the same technique with the Eyedropper tool to apply color to the other areas. Don’t worry if the colors seem bold or harsh at this point – things will end up blending in just fine later.

9. DRAW THE BASIC SHAPES OF THE FACE. When I first tried this, I failed miserably. Then I started working backwards and got much better results. I started by drawing a base shape with the Pen tool that would eventually become the main skintone of the face. I then drew main areas of shadow that would eventually define the parts of the face.

For example, instead of trying to draw a nose and chin, I drew the shadows that were cast from those facial features, which resulted in clearly defined features. It will help if you can visualize how you will eventually color in the shapes when you're done -- I've included a screenshot below to better understand the progression. I drew the ears separate from the face so that I could layer the hair between the face and the hair in the stacking order.

Defining the nose and chin using a shadow shape.

10. DRAW SHAPES FOR THE HIGHLIGHTS AND SHADOWS. Take a good look at the photo to see where the large shadow and highlight areas are. Don’t worry about small detail – just look for main areas of distinction. Use the Pen tool to draw paths to define these areas. Don’t worry about trying to get paths that are perfect. Once you’ve drawn the paths, use the Smooth tool to get any kinks out of the paths, and to generally get a smoother appearance on the paths. You'll find that this will define more organic areas, and this will also reduce the number of anchor points.

11. START BLOCKING IN THE MAIN COLORS. Using the Eyedropper tool, sample and apply color to the main face shape, the ears, and the hair.

12. DEFINE THE SHADOWS AND HIGHLIGHTS. To make things easier, you can use blend modes to define the highlights and shadows. That means we’ll be using shades of gray to fill the objects we created for those areas. By default, Illustrator includes a color group called Grays in your Swatches panel, which you can use to easily apply color. You can also use regular white-to-black gradients. The thing is, we have to work in reverse. Use darker grays for the highlight areas, and lighter grays for the shadow areas.

It looks funny at first, but that will change once we apply the blend modes. Select all highlight shapes (filled with dark grays) and use the Transparency panel to change the blend mode to Screen. Then select all the shadow shapes (filled with light grays) and use the Transparency panel to change the blend mode to Multiply. At this point, you can adjust the gray value of each individual shape to your liking, if necessary.

13. SOFTEN THE SHADOWS AND HIGHLIGHTS. Right now, the art features clean sharp lines, which may actually give you the vector look you’re going for. However, I was looking for more of a realistic tone to my avatar. I wanted it to look clean and sharp, but also real enough to make you take a second-look and wonder if it’s really a drawing or not. Select all of the shadow and highlight shapes and choose Effect > Stylize > Feather. I used a value of 3 pixels, but you can experiment to your liking. You may even find that Effect > Blur > Gaussian Blur gives better results, but I stayed with Feather because it’s doesn’t suffer from some of the technical issues that Gaussian Blur does.

14. ADD JUST A TEENY BIT OF REALISM. The avatar looks pretty good as it is, but I really wanted to add a bit of texture to really give it depth. This step is optional, but I moved the layer with the photo to the top of my stacking order. I then set the image to have an opacity value of 30%. I then used a mask to hide the background of the photo (creating the mask was as easy as making a copy of all the art and using Pathfinder Unite to define a single shape of the entire head). With the transparent image as a nice overlay on the vector drawing, I get some texture in the hair and more subtle shadows and highlights across the face. Drop in a gradient for the background and you’re done.

15. EXPORT THE ART AS NEEDED. Perhaps the greatest benefit of using Illustrator is the ability to export your art at virtually any size (you can always remove the overlay from step 14 for really large uses). I created this artboard at 200x200 pixels because that’s a size I use often when uploading avatars, but here’s how you can quickly export your avatar for any size you need.

Don’t resize the art on the artboard – resize it in Save for Web. Choose File > Save for Web & Devices. Choose the file format of your choice (I used PNG), and then in the Image Size tab, make sure Constrain Proportions and Clip To Artboard is checked. You can then enter a Percentage or the exact Width and Height value you need. Then click Apply (if you don’t, the settings won’t take), and then click Save.

Of course, you can follow many of these steps to create all kinds of art. Be it an avatar, icons, or anything else. I hope you find this tutorial useful, and if you’d like to see more things like this, let me know!