Taking Photos to Create Vector Illustrations


I’m currently in the process of redesigning my site and came to the point of needing some illustrations to convey a message. These illustrations were different parts of the body, such as a hand and ears. I started drawing them on paper but found they weren’t turning out how I imagined them to be. I wasn’t getting proportions quite right, especially for the hands. So, what I decided to do was turn on my webcam and pose for the pictures I wanted and then used those photographs to trace in Adobe Illustrator.

As silly as I felt doing these various poses infront of my webcam, it made the process really easy and quick. The final results still have the feeling of being illustrated but the proportions are perfect, better than what I could have ever drawn.

In this tutorial, we will take a look at setting up your shots and then how to turn those photos into vector illustrations using Adobe Illustrator.

Taking the Photographs

For this tutorial, we’ll create an illustration that represents “listening” — a hand held to an ear.

Photograph to be used for tracing

Photograph to be used for tracing

As the photograph won’t be a part of the final result — just a guide to help make it — it’s quality really doesn’t matter. Providing you can see the photograph well enough to trace around the outlines you’re good to go. I used my webcam and saved a snap in Skype.

If you don’t have a webcam, you could use a camera or find a photograph on the web. This technique would be ideal for objects too.

Tracing and Converting to a Vector Illustration

Place in Illustrator

Place the photo in Illustrator and name the layer

Open Adobe Illustrator, then click ‘File’ and ‘Place…’. Find the photograph you want to trace and click ‘Place’ to add it to your Artboard. Name this layer ‘Photo’.

Creating layers

Create an 'Ear' and 'Hand' layer

Click the ‘Create New Layer’ button and create two new layers above the ‘Photo’ layer and call them ‘Hand’ and ‘Ear’ by double clicking each layer. The ‘Ear’ layer should be above ‘Hand’ as the tip of the hand will be behind the ear in the final vector illustration.

Tracing the Ear

To begin with, we’ll trace just the outline of the ear so we can give it a base colour. After that, we can then start adding more detailed outlines to the ear.

400% zoom

400% zoom

Zoom in to the ear to a level that feels comfortable to work with. You’ll need to be able to see the detailed lines of the ear to be able to trace it. I find 400% works well. Now select the Pen Tool.

First vector line

First vector line

With the ‘Ear’ layer selected, click on the outer edge of the ear — where you start is up to you but I usually start on a straight line — then click again further along the ear.

Vector Curve

Creating the first vector curve

To create a curve, click and hold where the curve will end, then drag the cursor to create a curve until it matches the outline of the ear.

Ear outline

Completed base layer of the ear

Now continue drawing the outline of the ear until your vector shape is complete. This will serve as the base of our ear (just so we could give it a colour).

Detailing the Ear

To give the illustration a particular, ‘clean sketch’ style, rather than just outline each line of the ear, I’m going to break up the outlines into several lines. We’ll also use Illustrators ‘Variable Width Profile’ to make those lines different widths.

Ear Detail

Applying ear detail

Select the base layer you created and give it an opacity of around 20%, this way, we can see the original ear behind the vector again. Select the Pen Tool and start drawing the inner lines of the ear.

It looks cartoony which you may like, but I’m aiming for a slightly more sophisticated look so let’s apply ‘Variable Width Profiles’ to each path we just drew. Select the ‘Selection Tool’ and holding Shift on your keyboard, click each of the paths to select them all. Be careful not to select the base layer as we don’t want to apply a stroke to that.

Applying a Stroke

Applying a Stroke

Open the ‘Stroke’ palette by clicking ‘Window’ > ‘Stroke’ (or Ctrl + F10). Choose a weight of 2 and set the ‘Profile’ to ‘Width Profile 1’.

Finished Ear Vector

The finished ear vector

Change the opacity of the base layer back to 100% to see how the ear looks. You may notice I’ve given a few of the strokes a width of 1 as they are smaller areas. I like the fact the base layer doesn’t quite match up perfectly with the outer strokes so I decided to keep that in. If you don’t like that, select the ‘Direct Selection Tool’ and move the nodes of that vector shape in slightly to match the outlines path.

Drawing the Hand

Drawing the Hand Vector

Drawing the hand vector

For the hand, we simply do exactly what we did for the ear. Draw a vector shape that becomes the base layer that we apply the colour to, and then start drawing broken outlines around that vector.

Finishing Off

So now we’ve got the bulk of the illustration done, we can start to finish it off. You may want to draw the head, I’ve just chosen to do the back of it as well as adding some extra detail to the hand and putting a texture over the top.

Final Image

The completed vector image

Written by Ian Lunn

is a WordPress & Front-end Developer producing high quality responsive websites and exceptional user experience. Author of CSS3 Foundations and creator of Hover.css & Sequence.js.

Hire Ian to work on your project