Turn Any Photo Into A Detailed Vector Image

This tutorial teaches how to make a picture of anyone into a very detailed vector image, with as much details as you feel. Using classic rhotoscoping techniques you can make a cartoon version of you’re own photographs with as much or as little detail as you feel patient enough to put in.

Difficulty: Easy-Moderate
Time: 1-2 hours

Before You Start

For this tutorial I am using an image from stock.xchng which I have cropped and resized for the purpose of the tutorial.

Step 1: Making The Image Into A Template

First of all open your source image in Illustrator. Once you have opened the image double click its layer in the layer window to open the ‘Layer Options’ pane and set the layer to ‘Template’.

Step 2: Base Color And Rough Outline

Now create a new layer above the first and switch to the Pen Tool (P). Make sure your outline color is null and for the Fill color choose a nice skin tone, I am using #F7D5AD. What we want to do here is trace the entire face, placing the points fairly far apart so we can get nice smooth curves in the next step. Place points roughly where you think the angle or curve changes. This stage is made easier if you show only outline to avoid covering the image, this is done through View > Outline (Command + Y). Don’t worry about being neat where there is hair, as long as it covers any showing skin, the hair will remove any unseen edges.

Step 3: Smooth The Outline

Now swap to the Convert Anchor Point Tool (Shift + C) and go through the points which aren’t hidden by hair and bend them out so they smooth and follow the outline of the face. This step may take a bit of practice and getting used to. Again, don’t wory about anything that goes through the hair.

Step 4: First Light Shadows

Now create another new layer above the last and lock the previous, this just helps us prevent accidently catching its points or moving it. Select a darker shade of skin color and go back to the Pen tool. I will be using #E9BF7E. Now repeat the same technique as in Step 2, except this time we want to trace any and all shadows we can see, to do this it helps to have a keen eye and a good sense of judgement as to where the shadows stop and start. Ignore patches of very light skin where the light is hitting the face quite strongly, we will get to that later. When working along the edge of the face feel free to go outside and be as messy as you like, that will be cleaned up afterward. You can also be messy over features such as eyes and lips because they will be covered by those features then we put them in. If you realize later that you have missed a spot or a spot needs a touch up it is no problem, you can always come back and add, remove or modify parts.

Step 5: Smooth The Shadows

Just like in Step 3, we now need to smooth the edges of these outlines, try to avoid hard edges and corners unless its in the image. Just use your best judgement as to where the shadows begin and end. Again, the parts outside the face outline and behind features won’t need to be cleaned up.

Step 6: Clean Up the Outsides Of The Shadow

OK, this sequence of actions in this step will be repeated many many times through this tutorial, so get used to being able to do it and get familiar with it. Its not difficult but extremely useful. If we view both layers of work we can see that the shadow spikes out beyond the outline of the face. To fix this we go through a simple sequence. First, unlock the layer with the face outline (Layer 2; assuming you haven’t named them). Now select the face outline shape (the base color shape) and copy it, Edit > Copy (Command + C), then go to Edit > Paste in Front (Command + F), this will paste that shape exactly on top of itself so you will have two of it (although you will only be able to see one). Essentially the same as duplicating the shape within its own layer. Now, with that shape still selected, hold Shift and click the shadow shape so that you have both the shadow and the face outline selected. Then in the Pathfinder window (Window > Pathfinder) click ‘Intersect shape areas’ (see image) and it should remove any over hanging shadow from the face outline. Now click ‘expand’.

Step 7: More shadows

Now what we want to do is essentially repeat steps 4-6 a few times, making a new layer for each and using a slightly darker shade so we build up a few levels of shading. But rather then using the face outline to clean up the edges (Step 6) we want to use the previous layer of shading to clean it up (eg, layer 4 would be cut out to fit layer 3). Try to avoid having too many levels of shadow, usually 3 is fine, otherwise it can become a little too convoluted. I did 2 more layers above the first layer of shadow, using the colors #CEA772 and #A5845D respectively. You should now have a bizarre looking image that looks something like this.

Step 8: Highlights

Now that we have the shadows for her face in place, create another layer above all the others. For this layer we will be doing almost the same thing as we did for the first layer of shadows, but rather then focusing on the darker, we will be focusing on the lighter parts, like her forehead for example. For this choose a color that’s lighter then the base color, I am using #F8E0CB. I didn’t need to go outside the face outline at any point, but as I have said, its all about your judgement. If you feel you need to go outside the outline then, simply clean it up after in the same way as the shadows (Step 6).

Step 9: Features

Now that we have the skin complete, its time to start putting in some facial features. Create another new layer. The features are done exactly the same way as the skin. Lets start with the lips for example. First layer is a nice juicy pink for the outline (#E29886), then on top of that we will have a darker shade for some shadowing, then another on top of that for things like the creases in the lips, then another layer on that for the highlights where the light is shinning on the lips. Again, we use the same method for cleaning up the edges as used in Step 6. You wont need as much depth of shadow in the features as you did for the skin in most cases, but again, its all up to you’re judgement.

Step 10: The Eyes

To make the eyes we repeat step 9, except we use our colors slightly differently. For the outline we want to use a very slightly off white (like the whites of her eyes #F4F4F4), when from there rather then doing shadows we will put in details such as her iris which will be trimmed in the same way shown in Step 6 should it require it. Then above that we will use a solid black to put the eyelashes in around the edges. As a slight touch, before you start working on the inside of the eye you might want to put the pink of the eyelids on the edges of the white, this isn’t a necessary difference, but depending how big the final image is viewed, it can make a world of difference. It may also be important to keep in mind that the eyes on many pictures are the most important part of the face because they are what bring a face to life and can mean the difference between something that looks weird and something that’s human.

In the image I have put the individual layers that make up the right eye down the left of the image. They are in order from bottom to top layer.

Once you have done the eyes, put on some eyebrows. This is not difficult as you only need one shade, just trace around the eyebrows and fill it with an appropriate shade of brown. I used #332B20.

Note: When working with the eyelashes in this picture, you’re own artists judgement will be vital. Some of the details in the picture are missing, like a lot of the top eyelashes (where they appear to blend into shadow), here you will have to guesstimate where to put your points. Also on the bottom eyelashes, when I vectored them the first time they looked far too big and looked odd, so I made them smaller to look realistic, despite that it went against the photo.

Step 11: The Hair

For the hair, surprise surprise, we use the exact same method as before. However, since hair has a lot of small detail, it really is up to you how much detail you want to put in. Doing not a lot of detail will work fine, but you can really blow people out of the water by doing extreme detail. I won’t be doing much detail for this tutorial. Create a new layer for the hair, above all the others.

As before, we want to get a nice base color (#332B20), but for this hair its unlikely that we will need a darker shading. Instead we will need a lighter color, closer to white color (#EEDECA) for where the light reflects, and a blonde color (#847042) for the streaks in her hair.

Final Image

OK, so now we have made all the individual pieces all that’s left to do is put them together. Heres the final result.

This technique can be used on any photo and depending on how much detail you want to put in, you can do it in varying levels of cartoon style. If your a very patient person you could even work to details such as doing individual hairs, but this is amazingly tedious.

More...

Join our RSS feed

Digg

Del.icio.us

Reddit

Furl

5 Replies...

RSS feed for comments on this post. TrackBack URL

Leave a comment