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.
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.
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.|
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!