Henduluin's tracing tutorial (lotsa pics warning)

Henduluin (aka Unmei)'s Tracing Tutorial
Updated: October 23, 2007

Welcome to the third update to this wannabe tracing tutorial for Photoshop.
For more info on what has changed since the last update, check the updates section at the very end.

A couple of notes up front:

If you’re a Photoshop veteran, some explanations in this tutorial might seem a bit unnecessary. I added these to make sure even people who have never used Photoshop before should be able to make a trace. (I hope)

I realize Photoshop isn’t a true vector-based program. That’s why this is called a tracing tutorial and not a vector trace tutorial. Photoshop DOES have vector tools though, contrary to what some people might say. For more info, check this link: http://www.deviantart.com/view/8818843/
In short, you can in fact make proper vector traces and as a matter of fact you ARE making true vectors, it’s just that Photoshop discards the vectors when you save the trace in one of the image formats that are generally used (jpg or png). At least to my (very) limited knowledge. Someone please tell me if I’m wrong.

I apologize up front for any grammar and/or spelling mistakes I might make. I’m not a native English speaker, but I’ll do my best to make as little mistakes as possible.

Also, sorry for the immense size of the screenshots. But I think it’s better to show you everything, so it’s easier to find what I’m talking about and what exactly I’m doing. If I would only show a small part of the window, some people might not be able to find the stuff I’m talking about, or only after hours of searching (like myself). Sorry about the winamp and other crap running in the background. The screenshots are 2 years old and I’m simply too lazy to redo them. Maybe I’ll edit that stuff out one day, but I’m not making any promises.

Lastly, if you’re new to tracing, or the pen tool in general, it’s best to read this tutorial from begin to end, since I will explain most of the important stuff in the beginning but I will leave them out in the later parts because I’m going to assume that you’ve already read it or know about it. (And I’m lazy.)

Now, let’s get started…

For this tutorial I chose a pretty simple image to trace. It’s Coco from The Melody of Oblivion. The image is unfortunately a bit dark; I suggest you start with something brighter or up the brightness/contrast to make things easier.


Click for full size image.

Note that I resized the image. The original was much smaller, and thus harder to trace. Also, making images huge (2000+ pixels) will also eliminate the need of a true vector trace. After all, who is going to resize already huge images?

Now, there are two ways to trace an image:
1)The lazy people’s way (using “paths” for the outlines), and
2)The not-so-lazy people’s way. (Everyone’s lazy after all, some just a bit more than others.) This method uses “shape layers” for the outlines instead.
What’s the difference?
I’ll explain in detail in just a sec. But basically, method 1 is faster and easier, but the end result will look much worse than method 2. Also, it’s a lot more time consuming to correct mistakes. Method 2 will take a bit more skill, time and patience but it’s worth it.
For your first time you might want to try to use method 1 first to get a general feel of how the pen tool works, but I suggest you use a simple image to try it out on. I mostly included method 1 for completeness sake, as it is what I started out with and some people aren’t as much of a perfectionist as I am when it comes to things like this, but if you want to trace a big, complex, image, I seriously suggest you use method #2 as it will cause a lot less headaches.
Still, I recommend you give the first section a read anyway, as there a lot of notes written there. These notes are written in italics and are also underlined.. I suggest that at the very least you look for these and read them.

This tutorial consists of 7 sections: (press ctrl+f to look for a specific section)
Section zero – Introduction (You’re here.)
Section one - Method number one: Paths.
Section two - Method number two: Shapes.
Section three - The easy part: Coloring.
Section four - The not-so-easy part: The face and “advanced” options.
Section five – Final notes and hints.
Section six - Updates

A last note before we begin: You yourself might not want to start with an image that has a lot of really dark colors, since it’s really hard to tell where the outlines begin and end, thus making it REALLY hard to trace. Using an image with bright colors is usually the best way to begin. If you really want to use a somewhat darker image, I suggest raising the brightness or contrast a bit to make it easier.

Section one - Method number one: Paths.

With that out of the way, let’s begin with the outlines.

Press p to select the pen tool (or you could use the drop-down button in the tool window, but this is easier.) and then in the upper left corner, select the “paths” option.


Click for full size image.

First, select a color for the outlines. Plain black will do in nearly 99,9% of all traces.
Then place a couple of anchor points on one of the outlines. I myself usually start at the bottom and work my way up, but it doesn’t really matter where you begin. It’s just a matter of preference.
Be sure not to put the anchor points too close to each other, since the lines will be much more fluent if you place the points far apart from each other. But don’t overdo it either, because it’s extremely hard (if not impossible) to trace the outlines properly if you place too little anchor points.
Unfortunately, there’s no way I can precisely explain where to put the points as it’s something you have to develop a feeling for. Just experiment a bit, it’s actually far easier than it might look/sound at first. With a bit of practise you’ll quickly get the hang of it.
Don’t worry about the lines being straight just yet, we’ll get to that soon enough.

It should look something like this right now:


Click for full size image.

Now select the “convert point tool” from the pen tool’s drop down menu, located here:
(If anyone knows a hotkey for this guy, please let me know)


Click for full size image.

Now click on one of the anchor points, and try to drag it.
The anchor point itself won’t change position (unless you press and hold ctrl while dragging, which is the only way to move it without deleting and re-placing it) but instead two smaller dots (Bezier points) will appear, and you’ll notice that the two lines attached to the anchor point will bend.
If you click on the anchor point again, the Bezier points and lines will reset.

You can now drag the smaller Bezier points independently from each other, and shape the line the way you want to. Note that every line has two anchor points, and you’ll need both to get some of the shapes needed in a trace. Just repeat the process on the other anchor point to get the shape you want/need (in case this wasn’t obvious already).
If you notice you have either too many or not enough anchor points, you can add new ones by right-clicking on the line and then select “Add new anchor point” and delete unnecessary ones by right-clicking on a anchor point and then select “Delete anchor point”.
It should look something like this now:


Click for full size image.

This whole placing and dragging anchor points stuff might look difficult at first, but once you get used to it, it’ll be really easy to place the anchor points exactly where they need to be and to shape the lines exactly how you want them. It just takes a little practise. Don’t give up! Don’t rush anything and you’ll be fine.

Now you need to select a proper brush size, that matches the width of the original lines. Usually, a size 3 or 4 brush will be just right.
Create a new layer, place it BELOW the original picture and select it.
Then select the convert point tool or the pen tool. Right-click on the line, select “stroke line” and press OK.
If you then make the first layer invisible (by clicking on the small eye to the left of the layer thumbnail) you’ll see the first line of your trace. If you are not satisfied, go back to before you stroked the line (either press ctrl+z or use the history tab), and simply adjust the lines and stroke again.
When you think the line fits the original outline well enough, right-click on the line and select the “delete path” option.

It should now look something like this:


Click for full size image.

All you need to do now is repeat, untill you have traced all the outlines.

Note that you can use the eraser for smaller mistakes, if you happen to need it. You don’t have to redraw the entire line.
Some small notes on this method of tracing:

1 - The paths you make disappear when you save/load so be sure to stroke the lines before you quit Photoshop or you will end up having wasted a lot of time.
2 – You can adjust the type of line you get from the “stroke path” option by selecting the brush tool and right-clicking. A small window will pop up with all kinds of types of brushes.
3 – Make sure to delete paths you have already traced, or you will trace over them again, making the line thicker and thus ruining the outlines.

When you’re done with the outlines, you can start coloring in… but first I’m going to explain the second method of tracing.

Section two - Method number two: Shapes.

This is basically the same as option number one, but you’ll be using the “shape layers” option now, instead of the “paths” option. Shape layers is the button left of the paths button.


Click for full size image.

Select it, and place an anchor point somewhere on one of the outlines. The first thing you should notice is that it’ll automatically create a vector layer. I will explain how it works later.

Now, place dots along the outlines like you would do with the paths option, except that you need to encircle the outline now, instead of just follow it. (zoom in to 200 or 300%, it’ll make things easier) When you placed the last dot, click on the first one again, so it closes. Everything inside of the lines will be colored in the color of the layer, more on this in the coloring section.
And don’t forget to place the new layer under the original image.

Like this:


Click for full size image.

Now shape the lines so they follow the outlines of the outlines, by using the method explained in section one. (Convert point tool, click on anchor point, etc)

This is where the advantages of this method of tracing come into play:

First of all, because you now have two lines for one outline, you can make some variations in the width of the outlines. This is a good thing, not only because the outlines aren’t always uniform and normal lines wouldn’t be sufficient to properly trace the image, but variations in the outlines’ width also make the trace look better.

Secondly, this method makes the outlines look many times sharper than the first method would ever be able to, which gives the trace a much cleaner look.

Thirdly… Well, take a look at hint #5 at the bottom of this tutorial. This is impossible to pull off with the first method of tracing.

And finally, since the paths in this method of tracing are permanent, it’s MUCH easier to correct any mistakes later on.

When you’re done, you can hide the original layer and look at your new shiny outline with width variations.
It should look something like this:


Click for full size image.


Now something important…

With the first method, when you were done with a line, you could just keep placing new lines in the same layer till your pc crashed.
This method works a bit different.
Normally, when you try to make the next outline PS will make a new layer. This isn’t too bad, but you’ll eventually end up with hundreds of layers and it’ll be hard to find back layers you need to change later. (Unless you name every single layer, like I used to do. I don’t recommend it though.)

Luckily there’s a way you can keep adding more shapes to the same layer.
With the pen tool selected, either press the + key, or press the “Add to shape area” button on the top of the screen.
If you cannot select it, all you need to do is make sure you are on the correct layer and press the enter key (doesn’t matter which one). The paths you already laid down should be visible. (like in my screenshot)


Click for full size image.

When you add a new piece of outline now, PS will add it to the already existing layer. Just make sure that at all times the already present paths are showing. If they aren’t visible and try to add a new piece of path, PS will automatically create a new layer.

All you need to do now is repeat till you have done all the outlines.
Don’t be afraid to mess with your monitor’s brightness and/or contrast when you are having trouble seeing the lines. (Or alternatively, select your source image, go to Image  Adjustments  Brightness/Contrast and mess around with the image itself in Photoshop)
If you happen to need to change a line you made previously, all you need to do is click on that line and simply reshape it by adjusting the anchor points and/or the Bezier points.. No need for erasing or anything similar.
And most importantly… do not be afraid to guess if you can’t see the lines. Since it’s easy to correct mistakes, you can keep playing around with the outlines until you’re satisfied with the way they are.

When you are done we can start with the coloring, which is actually the easiest part of the tracing process. Except for the face… More on that later.

But before we continue, I want to tell you a bit about an alternative (and IMO, worse) method of tracing the outlines. It partly involves coloring, but it’s important you understand why I dislike this method, so please bear with me here. I call it the “Big Black Blob” (or BBB for short) method, for obvious reasons. In this method, you don’t trace the outlines the way I just showed you. Instead, you only trace the outer edges of the character or object you want to trace, resulting in one giant blob of blackness on your screen. You then immediately start coloring the image by putting the color areas directly on top of the BBB (instead of putting the colors UNDER the lines, as I shall explain in the next section). This might be a bit faster, but it also has several major flaws, which I will explain here:

Allright, take a look at this:


Click for full size

The arrow with “good” next to it is pointing to a small part of outline traced with the method I just explained to you. The arrow with “bad” next to it is, obviously, pointing to the area done with the BBB method. It’s all done a bit crudely, but I think it’s pretty obvious how this is supposed to work.
Now, if I remove the source image, you can see what exactly is going on:


Click for full size

My area shows up as a line with varied width, whereas the other method produces a Big Black Blob. As I said, this can work too, but let’s go back to a screenshot I showed you earlier in this tutorial:


Click for full size

Can you imagine that entire area being one big area of black? Isn't my method much easier? You can exactly see which area is what, and what still needs to be done. It's also much easier on the eyes if you ask me, which is important as you will be staring at the screen for several hours on an end (well, I do anyway) Even if you were to use the BBB method, you'd still need to trace the inner edges of the lines anyway (when you start coloring) so you might as well just trace the outlines as a separate layer, so you can avoid the following problem:



It's a bit exaggerated and simplified, but I think you get the idea. The black area between the 3 red areas is part of the outlines. Now, I used the Big Black Blob method and then started to drop the colors over it. First I did a huge bit to the right (red area 1), then I filled in a small area to the top left (area 2) and finally started working on area 3. But what is this? My outline that runs between areas 1 and 2+3 suddenly gets thinner while it shouldn't.

With my method, you don't have this problem as the outlines are actual outlines, lying on top of everything. You can't accidentally change the width like this; you can only do that by changing the anchor / Bezier points. With the BBB method, you would need to fiddle around with the edges of both area 2 and 3 for a while so that they no longer mess up the outline that runs next to them. Still, even if you were to line up the right side of areas 2 and 3 perfectly, there's still a huge change the curvature of the outline isn't what it's supposed to be since it's really hard to make two separate curves that look like they're actually part of one big curve.
Also, when you start coloring with my method all you need from the source layer is the color of the area you’re working on. You can then switch to the outlines and work there, without having to check with the source (as the outlines are already laid out for you). With the BBB method, you have to keep switching back and forth between the source image and the coloring layer to make sure you’re not messing anything up.

Again, it IS a viable method of doing things, but it can (and most likely will) cause a lot of frustration.

Section three - The easy part: Coloring

When you are done with the outlines, they should look something like this:


Click for full size image.

Note that I didn’t trace the eyes yet. I prefer to do those after I’m done coloring in everything else. But it’s not needed to wait or anything; it’s just a matter of preference/habit.

Don’t worry if your trace doesn’t look flawless. With a little practise you’ll be pumping out great traces in no time. Besides, you can always do a little tweaking on the outlines when you feel like it.
As you can see, I used method number two. If you are using method one: Don’t worry. Coloring will be exactly the same for both methods.

Save your work, and make sure you only see your outlines. (Click on the small eye left of the thumbnail of the source image.)
Select the pen tool again, but this time select the “create new shape layer” option instead.
Now place a single anchor point on one of your outlines. You then need to go back to the original image for a sec. Double-click on the layer thumbnail. You should be seeing a color picker now. Then click on the area you are about to color in, the eyedropper tool should take over the area’s color. If you’re not satisfied with the color, you can always manually change it a bit, or just click on another point of the area.


Click for full size image.

First make sure the outlines layer is at the top (under the original image of course). Then you can switch back to the outlines layer and continue tracing around the area you’re coloring. You can hide the edges of the color areas under the outlines, so you don’t have to be precise; nobody will notice it Zooming in to 200-300% will make this a lot easier.

This is how it should look like:


Click for full size image.

Notice how the edges of the colored-in area are hidden under the outlines.

If there is more than one area with the same color, you can use the “add to shape layer” option again. If you need a new color, just make a new layer.
Easy isn’t it? Now all you need to do is repeat this for the rest of the trace.

As for shadows and similar things, create a new layer, trace the shadow and select its color via the earlier explained method. Be sure it is above the “original color” layer though.

Like this:


Click for full size image.

The upper layer is the source image. Shape 1 is my outlines, Shape 2 is the “true” color of the book cover and Shape 3 (The one highlighted) is the shadow.

That should be enough explanation for the coloring. Just play around a bit and find out for yourself what works, and what doesn’t.

After you’re done coloring, there’s one thing left to do… The face.

Section four - The not-so-easy part: The face and “advanced” options.

At this point, your trace should look somewhat like this:


Click for full size image.

(Notice how the colors I used aren’t exactly the same as the original image. I didn’t really like the darkness of the original, so I used a second image as a reference for what the colors would look like in daylight.)

We’re almost done, but the most important part still needs work: The face.
Almost every part of the face is tricky. Even the smallest change can completely change the character’s facial expression. Patience is the key here.
The mouth and eyebrows aren’t that hard to trace, the eyes… are a different story.

I’ve done quite a number of traces so far, and the face has always been the point where I want to pick up the monitor and throw it out of the window. (Unless the characters had their eyes shut <.<)
The reason why eyes are (almost) always the most difficult part, is because the eyes are (almost) always extremely detailed and the tiniest alteration can change the character’s facial expression immensely. This is why I usually do the eyes last. If you have finished everything except the eyes, it’s harder to give up and throw away everything you’ve done than when you only did the outlines.

Actually, the eyes are traced just like any other part of the image, but you really have to make sure you trace as closely as possible. Don’t rush anything and you should be fine.
Also, the ellipse tool is your friend (“U” or the button right next to the pen tool) since almost all eyes are oval-shaped.

Now, for some “advanced” options. This is basically some stuff I find pretty useful to use during tracing.

First of all there is the “subtract from shape area” option.
It works exactly the same as the add option, but as the name implies, it removes stuff instead of adding it to the already existing paths.
It’s really simple: select the pen tool and the subtract option (again, be sure the already laid down paths are visible) and then select an area within an already existing shape layer.

Behold the power of subtraction:


Click for full size image.

Another vital tool you need to “master”, is ctrl+t (or “free transform path” in the edit drop-down button at the top of the screen).
This allows you to do all kinds of really nice manipulating of a shape without touching the anchor points (like rotating and resizing); I mainly use this for the eyes.

Take an oval for example. Use the ellipse tool to make one, then select it and press ctrl+t.
You’ll now see a box around it. Try messing around with it for a bit. This is the best way to learn its abilities.
One thing you might want to know though: To exit the free transform mode, you need to press enter.


Click for full size image.

Note: If you get a box around all your shapes in your current layer if you press ctrl+t, you need to use the convert point tool to select a single shape first.

Lastly, you can also add certain effects to layers. You do this by double-clicking on the layer in the layers window, and then mess around with the options. You can make stuff glow, give it fancy outlines and stuff like that. I’ll leave it up to you to discover what everything does.
Keep in mind that effects increase the file size quite a bit.


Click for full size image.

That’s about it for “advanced” options.

(I should really think of a better word than advanced, it sounds so… elitist)

Section five - Final notes and hints.

Well, now you should be done with tracing your first image, mine ended up like this:


Click for full size image.

As I told you before, I didn’t really like the dark colors (this screenshot was taken in a dark scene) so I made another screenshot with Coco in normal daylight, and used the colors from that image as a reference for my trace.
I made some minor adjustments here and there, especially to the nose/mouth/chin. And I’m still not satisfied with the eyes, but I never am, especially now I look back several years later. It’s probably the perfectionist in me, so just ignore it.

Anyway, once you’re done it’s time to save your image. Make sure your original image doesn’t show and then save it as a .png file. Why .png and not .jpg? First of all, png are lossless and it’s generally better for images with large areas of the same color (such as traces).
Then also save it as a .psd (Photoshop) file somewhere, in case you need/want to change a couple of minor things later.

Congratulations on your first trace. Now go upload it somewhere and show it off to your friends.

Here are a couple of the more important things summed up:

1 – Don’t rush anything. Tracing takes time and patience if you want to do it properly. No matter how good you are, you will always be busy for at least an hour or two. (Many more if it’s a big, complex, image. For example, my most complex trace took me nearly a week of work with 4-5 hours a day.)

2 – Resize your images to something like 2000+ pixels. This’ll make tracing a lot easier. Don’t overdo it though, because it will make the image too blurry. (Not to mention the file size will be huge). Keep in mind that since the pen tool is a vector tool, you can always resize the trace to whatever size you want when it’s done. Just make sure to use the .psd file with the paths in it, and not the .jpg or .png. Go to Image  Image Size… and then set it to whatever size you like. (or press ctrl + alt + i) Don’t overdo it as it WILL kill your pc if you set it too big (I accidentally did that once and crashed my pc.)

3 – Don’t be afraid to mess around with your monitor’s brightness and contrast settings if you cannot see the outlines properly. (Or alternatively, select your source image, go to Image  Adjustments  Brightness/Contrast and mess around with the image itself in Photoshop)

4 – Don’t be afraid to guess and try stuff out. If you can’t see the outlines, be creative; it won’t hurt you. Also, trying out something new once in a while isn’t a bad thing either, you never know what might happen.

5 – Something which I should’ve thought of years ago… While coloring it might be a good idea to change the color of the outlines you’ve already drawn to white. Why? Simple, just look at the following image:

It’s so much easier to see the lines… Why in the world didn’t I think of this when I just started tracing? I could’ve avoided so many headaches…

6 – Another thing I should’ve thought of a long time ago: It might be smart to add a layer way at the bottom filled with a single color. Doesn’t really matter which one, as long as it isn’t too bright.
The reason I’m suggesting this is because the checkered background of Photoshop can really hurt your eyes after a while and even though a single color will eventually tire out your eyes as well, it’ll slow down the process considerably.

An example can be found in the above image; I used a dark-yellow background.

7 – And most importantly… STAY AWAY FROM SUNFLOWERS AT ALL COSTS!

Here’s a bit of background for those very few people interested in me:

I started tracing early 2004. I had never used Photoshop before and had absolutely no idea what the hell I was doing. I had read a simple tutorial, but it didn’t really contain a lot of information, so I had to figure out a lot of stuff on my own.
I think I probably tried nearly a dozen different ways of tracing before I wrote this tutorial, and I will probably keep trying new methods for as long as I trace.

You can view some of my older stuff here:
http://www.ferricorp.com/misc/vector/index.php
In case it wasn’t obvious, the images under “by Unmei” are mine. And while you’re there, hug Sako for me.
(23-10-2007 Link dead for the time being, sorry. Try checking out my webspace, it often has one or two of my recent traces on it.)

I hope this tutorial isn’t too vague (I suck at explaining stuff) and that it’ll make people enjoy tracing as much as I do.
Lastly, please don’t use this tutorial anywhere except Virtual Infusion without giving me credit for it as it was quite some work. Thank you and have fun

Section six - Updates.

November 21st, 2006:

Well, what do you know? It’s been nearly 2 years since I touched this baby.
The original was made roughly 2 years ago at the time of this edit and I thought it was time for an overhaul. There were way too many smilies and other such crap in the original version and it was flooded with typos and other random silly dutchtopianess (Yeah, I just made that word up. See what I mean? The original was flooded with useless comments such as these).
My English can be very awkward at times too, so I made some improvements in that area as well, even though I’m sure it’s still far from perfect.
Other than that, I re-worded some parts, added stuff here and there and removed parts I thought were no longer necessary.
No really major changes were made, except for one bit I added to the shape layer section on the Big Black Blob method.
Comments and Questions are always welcome, just leave a message in the topic (or PM me if you’re really shy). I wonder when the next update will be…

October 23rd, 2007:

Whoo, update 2!
Nothing major this time: Added 2 hints and finally cut out my desktop from the images… only took me 3 years to find the motivation to do that. >.>;
Too lazy to re-read the entire thing to improve my English again, although I doubt it’s really necessary.

*just went straight to the bottom and saw one line, will probably look back up again later on*

Um... sunflowers?

Good stuff. But I'm still waaaay too lazy to use shape layers for outlines.
I may want to link this tutorial in FC gallery, do you mind?

And yes, sunflowers are ebil, indeed.

Sure, go ahead.

this post is no longer relevant as we removed the original image restrictions

Click to read the original post

Spoiler:

Quote: Sako

Good stuff. But I'm still waaaay too lazy to use shape layers for outlines.
I may want to link this tutorial in FC gallery, do you mind?

And yes, sunflowers are ebil, indeed.

Actually, Sako, I'm going to ask you NOT to do that. (And please remove the link if you have set it up there already.) UnC once linked this tutorial somewhere else, and we've had nothing but leeches "joining" our forums only for the purpose of looking at his tutorials, with no intention to becoming a part of the community or contributing to it. While I don't have a problem with (and actually am in favor of) our members and regular visitors having access to this kind of information, I'd rather not see our "members list" artificially inflated by an influx of leeches.

And while I'm at it, let this be a warning to leeches. We know who you are, and we'll begin purging those accounts very shortly. So if you don't want your account purged, I would highly encourage you to start posting in an effort to become part of the community. (And token posts just won't cut it, as it's very obvious.)