Tracing a Vector Face From a Reference Photo

8/6/2019 Tracing a Vector Face From a Reference Photo

1/27

Tracing a Vector Face From a Reference

Photo

Final Image Preview

Below is the final image we will be working towards. Want access to the full VectorSource files and downloadable copies of every tutorial, including this one? Join VectorPlus for just 9$ a month.

Tutorial Details

Program: Adobe Illustrator Difficulty: Beginner

Estimated Completion Time: 2 hours
http://tutsplus.com/premium-program/vector-premium/http://tutsplus.com/premium-program/vector-premium/http://vector.tutsplus.com/tutorials/illustration/tracing-a-vector-face-from-a-reference-photo/http://tutsplus.com/premium-program/vector-premium/http://tutsplus.com/premium-program/vector-premium/


2/27
http://vector.tutsplus.com/tutorials/illustration/tracing-a-vector-face-from-a-reference-photo/final_large.jpg


3/27

Step 1A

Open the source photo. In this case Im using an image of myself and its available toPlus members. You can of course substitute your own image.

Step 1B

Lock the photo and make a new layer on top.


4/27

Step 2A

Start by tracing the outline of the glasses.

Step 2B

If you notice there are so many different shapes, shades, and highlights that make up theglasses, specifically within the interior shapes of the lens and frame, so you have to makea decision on how detailed/complex you want to make the image. Since this tutorialspurpose is not an extreme photo-realism look, I will keep it relatively simple.


5/27

Step 2C

Be sure to stay consistent on which shapes/shades you are following. Trace both theinterior and exterior shape of the frames.

Step 2D

Select both the interior and exterior shapes, choose the Subtract From Shape Area optionin the Pathfinder palette, while holding Option to expand to one shape. Now you haveone shape that makes up the base glasses.

Step 2E

Trace the bright (white) highlights on the glasses. Change them from a red stroke to whitefill.


6/27

Step 2F

In addition to the highlights also trace the secondary highlights on the glasses and changethem to a lighter red (#F47471).

Step 2G

Even though they are clear well need to describe the lens and the nose pieces. You mayhave to finesse the shapes a bit, drawing them so they lookrightas opposed to stickingstraight to the photo because the shapes are not well defined. Change them to a light gray(#EFE6E8).


7/27

Step 2H

Thats it for the glasses, switch the stoke to a fill (#EF4136).


8/27

Step 3A

Now trace the white shape of the eye. In order to get the shapes to align perfectly, selectthe top point of the eye shape, copy and paste a duplicate point on top. Add new anchor

points using the Add Anchor Points Tool (+) where the pupil comes down from under theeyelash. Delete the extra end points and continue to draw the pupil using the topduplicated points. This is a very simple, yet useful tip that will help keep the shapesaligned and organized.


9/27


10/27

Step 3B

Simply use the process described above to get the black shape of the pupil as well as thewhite highlight shape. Color them as they are in the photo, black, white and lightblue/gray (#72A8B2).

Step 4A

The eye lashes and shades that describe the upper and lower eyelids are so thin andsubtle, they need to be exaggerateda bit. Trace them, and change them to a dark brown(#603913).


11/27

Step 4B

Do the same to the other eye.


12/27

Step 5

Tracing the eyebrows will be tedious, but if you take the time to really get into the detail,they can look phenomenal. Change them to the dark brown of the other facial features.Here is a peak at how its coming along.


13/27

Step 6

The nose can be a huge pain in the butt to get it to look natural. Do the simple line-work,tracing just the edges of the nose and cheeks. Change it to the same dark brown as theother facial features.


14/27

Step 7

The key to drawing the mouth is to not outline the entire mouth with the dark line-worklike a clown. Draw the shape of thepink-ish part of the lips, and change it to a light pink(#FDE4E3). Then do the thin linework around the mouth, using only small shade shapeswhere needed.


15/27

Step 8

Once the mouth is established, finishing the smile with teeth is fairly easy. You dont

need to draw every tooth, you just put in a few shadows that hint at the teeth. Fill theseteeth shadow shapes with a light cream (#E2D7D3) color. Draw a large white shapebehind all of the shadows.


16/27

Step 9A

Vector hair could be a tutorial all on its own, it could have numerous layers of highlightsand shadows, but I prefer to leave it simply flat with the contour of the shape describingthe form instead of highlights. Now go around the outside of the hair form, tracing someof the big hair spikes. You can get fairly free form and deviate from the photo, as long asthe shapes you are drawing reference hair. Be sure to include inside shapes which youwill exclude using the pathfinder palette (step 2D).


17/27

Step 9B

Once you have one shape, with lots of little pieces nocked out using the pathfinderpalette, change the hair shape to a fill of a dark brown color used previously.


18/27

Step 10A

Put in the dimple and chin shapes and some linework in the ear.


19/27

Step 10B

Were almost there, time to bring it all together. Trace the basic shape of the face and fillit with a skin tone, which is a slightly orange (#F5DFD5) tinged color. Also apply a 1ptstroke with the same dark brown color used throughout, and place this shape under thehair shape layer.


20/27

Step 11A

If you want a floating head you can stop there, but if you want a place for the head to restsimply trace the neck shape and apply the same colors and stroke as the face.


21/27

Step 11B

Add a simple shade shape to the neck and choose a shade of brown that is close to theskin color (#C49A6B), so that it doesnt stick out like a sore thumb. Send this shape tothe back (Shift + Command + Minus key).


22/27

Step 12

Add a few shapes and lines to describe the shoulders and shirts.


23/27

Step 13

After looking at the image, I notice that the coke bottle glasses effect is going on with theeyes. Select all the shapes that form the eyes, and enlarge them just a bit.


24/27

Step 14

Just for composition, add a light blue (#C2E6EA) background to the illustration.


25/27

Final Image

Thats it! Very basic, but learn to do it well and it can be a very useful illustration style.

The final image is below. You can view the larger version here.
http://vector.tutsplus.com/tutorials/illustration/tracing-a-vector-face-from-a-reference-photo/final_large.jpghttp://vector.tutsplus.com/tutorials/illustration/tracing-a-vector-face-from-a-reference-photo/final_large.jpg


26/27


27/27

Documents

Tracing a Vector Face From a Reference Photo