figure 4: reference vs finished -- aw, ain't she cute!
First, before we start, we are going to need some colours right? Well, being the nice guy that I am, I made a colour chart. Just right click and go to "save as." I suggest these colours as they are "my colours." You can use whatever colour you want. I would, however, advise aganist making the skin too peachy or the colours too dark. Yes, behold the wonder:
reference 2: colour chart
Also, a lot of people get confused on how to change the colour of a vectored shape after it is already done. Let's say I want my facial skin to be green, but on no, it's a perfect peachy-tan. No, the fill tool won't work. Double click the colour of the layer in the layers menu. I circled what you need to double click below and labeled it as number 1. Number 2 is the opacity, aka transparency, control. Simply click the 100% and a slider comes down, which you can easily move to any transparency level you would like. If you are trying to change the colour of a vector WHILE you are currently vectoring and have points already placed, refer to this diagram. Notice the "color" area, which you can change a vector in progress' colour.
reference 3: layers menu
So, how do I get those fine details, tapered lines, and perfect eyes? I zoom in! You may get sea-sick at this point; it's quite hard to get used to at first, but if you work hard at it, you won't even notice. I zoom to roughly 430% on some images -- and images with very small details I zoom up to even 650%! It's not too bad once you get used to it. Since many people seemed to have a HUGE problem with being able to see things at a zoomed in level, I suggest you open the navigator window. You can do this by going to "window" in the menu and then going to "Navigator." It will look something like this and the navigator window is completely resizable.
a3: the navigator window
You can find the zoom option in the lower left hand corner (notice the 100%), or if that's missing you should be able to go the the 'Windows' menu at the top and select it again by clicking "status bar". Ta-da. Go ahead and change it to 430%.
Here's a simple picture of the zoom selection on the bottom left:
reference 4: zoom bar
Also, if you are asking "but but but... where's the shading! THIS IS FLAT! YOU SUXX)RZ!!," then please, leave. I do NOT do shading... ON PURPOSE. Also, another thing that peeves me is when people say to go to some amazing vector artist and look for pointers -- This is a serious "Huh?" I already know my style! So, I'm rambling, just stop reading this and zoom in. But, since so many people WANT shading, I'll explain the basics.
Check out this piece by Voodoo-Prophet (permission granted to be used in this tutorial).
Notice that each shading layer is gently layered on top of each other. As the darker areas are shown, he overlays darker colours over the top. This can be acheived by using transparent layers that layer over each other to create a darker effect or by layering non-transparent layers of different colours over each other. Shading takes some practice, but basic shading can just be simple effects like facial shadows. These you can usually just overlay a slightly darker colour over the original colour and set its transparency to the desired level.
shading: full view of Turp's "Free Spirit".
This transparency shading style MUST not have been made clear as many Deviants commonly ask about how to do it. While I can't explain how to do it well (that's what you do, not me), I can explain the basics of the concept. The following is an image from Turp, a fellow artist on DeviantART that learned the basic idea from my tutorial and has since developed her own unique style. With her permission, I have shown three levels of zoom which focus on using opacities for shading and details. See below:
shading: close up and extreme close up of an eye.
As you can see, this shading is made with TONS of little, tiny piece all set at different opacities. The best way to get good with this style is to have experience and to have a good eye for what looks right. No person can properly explain just HOW to make everything look perfect, but this is a good example to base things off of.
Now, back to the vector:
figure 5: step one
This is, duh, step one. Make a new layer above the background. Get the pen tool and have the "skin" colour as your selected colour. Do what I did and trace around Ali's beautiful face. Notice how I have the skin of the face OVERLAP some of the hair and even some of the shirt's red neck? This is because those other layers, i.e. the shirt's neck and hair, will go directly on top of it. Anywho, at 430% you should be able to contour your skin outline to the shape of the actual shirt. I left this transparent just so I can show you. I usually keep the layers at 0% opacity so I can clearly see the fine details, but you're welcome to have it set at any range you want. Many people find it good to see some of the colour while they are vectoring.
figure 6: step two
And for step two, you need to make a new layer above your face layer. Simply trace around the dark shape the best you can and make sure to MAKE IT FLUID. Do NOT, repeat, NOT get lazy and make her hair cubic and pointy. Make sure to fully round off the hair as best as you can. If you haven't mastered how to use the arc in the pen tool, then you're going to be doing a lot clicking. A lot. But, usually, I do it the hard way and click manually several times each curve because I am not overly fond of Photoshop's curving abilities. Anywho, back to the tracing, it should be pretty easy. Make sure that you make the hair overlap over the skin or you're going to be having some trouble down the road. If you don't overlap it, there will be loose pixels between the two shapes making it look horrible.
figure 7: step three
This is three new shapes. First makes a new layer with the shirt colour BEHIND the face layer.. Trace along the shoulders and the part that touches her arm. It's okay to overlap the other details of her shirt -- in fact it's best to because we want to avoid "loose pixels." Then, make a new layer above the shirt layer with a solid white colour and trace around that tiny white line. After that, make a new layer above the skin and use the "shirt neck" colour. Make sure to round off the skin at the bottom of the neck -- I did a poor job in my honest opinion, but hey, it's just an example. Also, do not go too far overlapping the skin as you don't want to loose a good part of the neck.
<-
430% figure 8: step four
I turned the opacity down to zero for the shirt (alternatively, you could click the little eye on the far left hand of the selected layer on the layers menu) and made a few new layers. First, I made a layer on each side above the shirt layer and used the "shirt neck" colour and traced around. I then ran two more layers on each side below the layer we just created (the red arms) in solid white and traced around the general shape of that thin white line. Below all four of the layers we just created, I put the arms -- pretty straight forward. I would like to however direct you to the zoomed in picture above. There is a part where the shading of that is absolutely needed to look correct. I just created a layer above all other and carefully cut out a little section. Of course, go ahead and turn the shirt layer back on now.
<- 430%figure 9: step 5 - 430%
Here's where it gets really tricky and tons of errors get made. With the skin layer off, make a new layer right above it and trace around the eyebrows with the eyebrow colour. Make another new layer and do the same for the nose. Look below for what NOT to do before attempting the above. Also make another layer and do that to lips. It may look odd now, but following the pattern, I can show you a simple way to make it look like you've spent a lot of time on the lips.
figure 10: what not to do
Ok folks, my friend Nick tried to do a vector. Let me explain why this is bad. First off, look at those teeth, horrible black lines! Look at the lips: horrible unrealistic colouring. Look at the skin -- it's like a peach. Look at how bumpy and rough it looks! Also, check out those eyes, ugh. I can't blame him for trying, and after all, Bill Clinton doesn't have any eyebrows really, but there is TOO MUCH wrong here. Let's go into detail first about the nose -- DO NOT, repeat, DO NOT, trace all the way around the nose; instead, go down one side and do a slight curve where the end of the nose is like in figure 9. There aren't any teeth in the Ali vector, but I feel that a lot of girls smile more than Ali does, so I owe you an example from another vector I have done. I'd like to thank Johana for the lovely smile. :)
<-
100% figure 11: how to do teeth - 430%
Teeth are in a lot of pictures and a lot of people just cannot do them because they try to add black lines like in figure 10. Notice how the teeth are separated by lighter pink on the top and a darker pink on the bottom. Also, take the time to notice I threw a little bit of the skin detail colour on each side of the lip. It gives it a more natural look. Also, girls lips are usually shinny -- notice that little white detailing? Good! Now, back on course with some new know-how on detailing, we should be ready to tackle the rest of the lips on Ali and her eyes!
figure 12: fine details being added. from left to right: eyes, chin line, ear detail, lip detail.
Okay, so now we have to do the eyes and finish off a few more details. First, get the "eye white" colour and trace around the whites of the eyes (with the skin layer off obviously). Then, let's stop for a second and finish off the rest of the fine details. Make a chin line with the detail colour or something slightly darker. Then add some light ear detailing. Make sure to get the lip detail in place. Notice how simple the lip is. I briefly mentioned a trick to make lips a lot less headache. For small pictures like this one, you can just add a half line through the lips like the picture above. Pretty simple and it's effective. Alternatively, you could go all out and do lips like in figure 11. Now, with all of the basics but one covered, which I'll save for last since it's so simple, we are ready to finish the eyes.
figure 13: eye backgrounds
Looks pretty weird eh? Well, yea, you're right. But I do not do eye-lashes. I hate eyelashes. However, this works pretty good. Some tutorials say not to do this, but eh, this is my tutorial and me = better than them. (How's that for some simple math?) Erm, by doing this you get a nice looking feature without all of the white on tan confusion. This won't work for guys because well, I'm not sure what kind of guy you may be vectoring, but guys don't wear makeup. Instead, use the skin detail colour around them. This is a pretty simple step.
figure 14: eye colouring
Lots of people tend to make the colour of the eyes WAY to bright and it looks cartoony and fake. This is a pretty simple step too. Just hide all of the layers, i.e. skin, eye background, eye whites and make two eye colours just like in the background image we're tracing from. In this case, Ali has some loverly green eyes :) Do this and turn all the layers back on and you should see something like the above.
figure 15: finishing the eyes
Notice a big change? Me either. Technically, all you did is add a bit of white in the eye to make it seem lively and a black area to give it depth (i.e., like a real eye). I've included an example of a finished eye from the same picture I got those fantastic teeth from below.
This is a close up, so I was allowed to get a lot more detailed with the eyes. Notice the pink in the corners and this time not all of the eye background was black. Also, notice those curvy light brown lines on the eyes and the eyebrows to give both of them a "gleam", so-to-speak. There's even a second set of white eye highlights below the main ones. On a side note, although using the circle vector tool to make eyes will make them perfectly round and a lot easier to do, I'd strongly suggest that you vector the shape of the eye by hand to give things a more natural feel to them. Otherwise, eyeballs look moderately creepy and cheap.
Also, making glasses is really easy but the idea is very tricky for many to grasp. So, here is a simple guide on how to do this:
Basically, you simply vector the shape of the glasses, then subtract the insides of the glasses, and then make a new shape behind it with the colour of the lense that you want. Then, you reduce the opacity. If you want to get fancy like I did, you can apply a gradient overlay.
figure 16: finishing!
Whoa, that was sure a lot of fun. We aren't done yet though! Notice the hair detailing; it adds a nice subtle touch at 100%. If you look closely there's also some right above the skin around her hair line.
In the end guys, you get this with a bit of creative background and text fun:
For the sake of seeing the details in a non-pixelated, high-resolution format, I have included the 300 DPI version of a sample image here.
Continue to "Vectoring a Drawing"
Return to top of section