09/10/2008

Vector illustration tutorial

Getting started
This tutorial is for those who already have basic/intermediate knowledge with Adobe

Example of a vectored image

Example of a vectored image

Illustrator. This can also be done in Photoshop, but I recommend Illustrator just because you have more canvas space to work with. Keep in mind that I myself am an amateur at doing this, so don’t be too hard on me.

What is a vector-based image?
Vector graphics use geometrical elements such as points, lines, curves, and shapes. As opposed to raster graphics, vector-based images retain their resolution at any size because it’s all based on mathematical proportions.

This type of digital art has kind of a cartoon-like feel to it. Many people wrongly assume that this effect is created using some type of pre-made Photoshop filter. In actuality, it takes hours –if not days — of precise hand work to create a vector graphic like this.

Why should I learn it?
It’s good to know how to create vector graphics if you’re a Web designer or a student journalist. That way, you won’t have to rely on stock images to spice up your site icons or your Flash multimedia story. Plus, they’re just really fun. I’ve made a few and printed them out at 8x10s for my new apartment.

Step No. 1: Get a photo
Start with a decent sized photo that has good quality/lighting. The higher the resolution, the better– you’ll want to be able to zoom in on it (pushing CTRL + and CTRL – to zoom in and out, either in Photoshop or Illustrator) to see the details.

Step No. 2: Base outlines
First you’ll vector the basic shapes and colors. Use the pen tool in either Adobe Illustrator or Photoshop to trace along the outlines. It doesn’t have to be perfect, keep it simple. As you can see, I traced the body, with pretty rough skin tones and the hair and shirt. To connect your shapes with the pen tool, just click back where you started. Use the eyedropper to get the colors you want.

Step No. 3: Start the face
Next you’ll want to do basic facial features. Eyebrows, nose and mouth. For the nose, rather than tracing the outline, just get the nostrils and any defining shadows. You don’t have to worry about the eyes yet. We’ll get to that in the next step.

*TIP: Change the opacity regularly to see beneath back to the original image you’re tracing. It’s also helpful to group together similar parts that you want linked by right clicking and choosing “group.” You can go within these group to edit by double clicking.

Step No. 4: Eyes
Now we’re going to do the eyes. They can be a little bit tricky. Just take your time with them. Start off just tracing the whites. Try to be as exact as possible. You’ll also have to be patient because you’ll be changing the transperancy a lot to be able to see back to the original eye.

After you trace the white, use the main color (in this case brown) to trace around the interiors. Add a lot of detail to the color of the eye. Do variations of shapes and colors (I used green on mine) and take down the opacity to make them really pop.

Step No. 5: Shadows, lips
Now we add the shadows. You may want to add a slight gradient over your original face shape. On other deep shadows, just use a shade a little darker than the color below. This is where you’ll really define your style of vectoring. Use your own judgment to get it just right. Just trace over the main shades you see.  You’ll also want to do a few of the finer details like adding creases to the lips.

Step No. 6: Hair
The hair in my example isn’t too complicated. But with hair that has different shades and highlights and shapes, you’ll need to get really creative. For vectors like that, the hair will probably be what you spend half of your time on. Pay close attention to where the light falls. You can even add more highlights when none exist, just to really give it that “vectored” touch. For women, focus on the shape of the hair and the it’s parted. Focus your shapes toward the direction of that part. For men, pay close attention to the actual hairline and sideburns.

*Tip: add a subtle gradient with the darker color away from the light souce.

Step No. 7: You’re done!
When you’re done, you’ll probably have more than 200 layers. This piece was obviously very rushed (completed in about 3 hours) for the purposes of this tutorial, but to get a really good quality vector illustration, you’ll probably find yourself spending days or weeks on a single piece. But don’t worry– time flies when you’re vectoring.

You’ll really need to get comfortable with the pen tool. The more often you vector, the better you’ll get. As for the purpose… hell if I know. It looks cool and its fun to do. It’s digital art. And if you’re not really an artist and you suck with a pencil and canvas– don’t worry. It takes no real talent to be able to do this. It takes taste and patience.

Have fun!

Additional Tips:

  • Save your vector as an Illustrator file, an EPS, or (in photoshop) a PSD. That way, your image isn’t flattened and you can close it to come back later to work on it.
  • Save OFTEN.You seriously want to be saving your work every few minutes, or else you’ll be one grumpy person when you recieve that much-hated “error” message.
  • Don’t get frustrated. If this if your first time vectoring, it’ll be difficult. You’re probably not best friends with the pen tool yet and you’re not going to be able to know how to do things. In fact, your first vector is going to look pretty horrible. No worries. You’ll laugh at it in a month after you’ve perfected this art.
  • Make sure you have a lot of time. Don’t start doing this is you’re going to go to work/class soon. You’ll get addicted. You’ll be up for hours.

Remember:

  • It will look ridiculous the first time. Until you get comfortable with the pen tool, you will not be happy with the initial result. I’ll dig through old folders to try to find my first vector ever, and you will likely laugh your ass off. It takes time. Be patient. Good luck.
UPDATE: I found the original files for the first two vectors I ever attempted (this was around May 2007). I’m risking a lot of dignity by posting this, but I’m optimistic that it will give you hope. A little practice is all it takes. Laugh all you want, really.

This is an updated version of a tutorial I wrote on Hubpages in May.