Accentuating with Color in Vector Illustration
Quite honestly, this tutorial could have been named several different things. I'm going to cover a complex project covering different techniques, since I don't have one particular style in drawing. For me, personally, drawing doesn't come easy. I try and make every project a learning experience. Including this one!
You can find the Source files in the directory labeled 'source' that came in the files that you downloaded. You may wish to look through them briefly before we begin. You may wish to look through them briefly before we begin.
- Adobe Illustrator & Adobe Photoshop
- Wacom Intuos3 Drawing Tablet & a Scanner.
- Traditional Drawing Tools
Step 1: Drawing and Conceptualizing
I start off with a super tight and clean pencil drawing. Some artists go through several stages before getting to this point: Drawing thumbnails, sketching lightly or with a non photo blue pencil, tightening the sketch, and inking. Working in a fast paced environment has forced me to become confident with my lines. No time for sketch lines, light tables, or inking.
Before I complete the hand drawing I got anxious and scanned my work in progress, at 200 dpi, and fiddle with the colors and composition in Photoshop. Noticing that the girl in the drawing, let's call her Lupita, is looking kind of lonely I add a jelly fish right above her head. Once I have satisfied my curiosity and feel inspired by this color sketch, I put it aside and continue hand drawing, pencil on paper, completing the pencil art. I'm not entirely sure how I'll execute her new buddy, the Jelly Fish, using Illustrator, but we'll figure that out later....
Step 2: Preparing Your Line Art
When I'm done drawing I scan my art at 200 dpi, adjust the levels in Photoshop (Image > Adjustments > Levels) eliminating any gray pixels, and erase any stray/unnecessary lines. As I drag the left and right Input Level sliders, I keep an eye on my line art making sure to keep the detail I need. Both sliders should meet somewhere around the middle. In this case Black at 127 and White at 129. Your image will now look pixelated when you zoom in.
Step 3: Live Trace
In Photoshop select the entire image (Select > All). Open a new document in Illustrator (any size will do) and paste in your scanned art (Edit > Paste).
For this project I'm using Live Trace to capture the somewhat rugged details of my pencil drawing. Some folks would scoff at Live Trace, but in reality it's just a preference, a tool like any other tool and definitely a time saver when working in a fast paced environment. My Live Trace settings (Object > Live Trace Tracing Options) are shown below.
Then I select my image using the Direct Select Tool, Live Trace (Object > Live Trace), and Expand (Object > Expand). This converts your art into black and white vector objects. Now you'll have to delete the white by selecting it with the Magic Wand Tool in your toolbar and hitting the Delete key on your keyboard.
What you have now is a vectorized drawing with too many points. This will only slow you down and increase your file size. To modify and trim down the amount of points, select your art and go to Object > Path > Simplify. Set your Curve Precision to 99%. This will remove a few thousand points and smooth out my lines just a tad. You'll notice, below, that my lines are still wobbly and choppy which is exactly what I want.
Step 4: Color Flats
Using the Direct Select Tool and holding down my Alt and Shift keys, I select Lupita's silhouette and negative space lines. Then copy (Edit > Copy) and paste (Edit > Paste In Front) over the illustration. It should look something like the image below.
From this group of objects I deselect the main silhouette and combine the negative space using Add To Shape and Expand options from the Pathfinder tools. Keeping this selected, I reselect the silhouette and punch out the negative space using the Exclude option from the Pathfinder tools. I then send this shape behind my line art (Object > Arrange > Send To Back) and color it light gray for the time being. This will be a place holder to paste my colors over.
Now I Direct Select all the vector lines from my line art that make up Lupita's skin. Then Copy and Paste In Front of the light gray color object, and fill this with a lightly darker gray to distinguish both colors apart. I'll continue this process until I have filled the entire line art. As I continue doing this I start making color choices where ever I feel it's needed. Eventually, I add a neutral gray ground and add color swatches to the right of my art, just for my reference. Also, notice I have a circle above my pencil drawing. This is an object I'll use as earrings to place on Lupita later.
Step 5: Shading
For this step you will need to have a basic understanding of lighting and shading. Below are examples of how I use lighting to give movement to a color object. I'm using basic shapes here but this concept can be used on the human form and just about anything, as well.
On occasion, I like to use wavy and jagged lines with my shading to add an edge. This is just a preference and I guess you can call it my style.
These jagged lines tend to follow the direction of the light source. You'll notice, below, that both objects are doing just that. The sphere has a teal color as it's reflective lighting simply because I usually choose bright colors to punch out portions of my art.
Using this technique I begin to shade in Lupita's thigh with a slightly darker color than her skin tone. Generally I use the HSB option in Illustrator's color window. To get a darker skin color I heighten the saturation and add more black using the HSB sliders...
Here I use the Pen Tool to start this dark shade, following underneath the line art. Then I choose my Pencil Tool, drawing freely and adding to my Pen lines. Using wavy lines wherever I see fit. Since her leg is supposed to be a smooth long surface I refrain from using jagged lines.
I'll repeat this process over and over. Whether I'm adding highlights, reflective lighting or shadows. It's never an exact science but for the most part you'll get used too moving around your artwork and coloring the objects that need accents of color and shading.
The jagged and wavy lines are actually inspired by classic comic book artist Jack Kirby. They often resemble his bold lines and wavy circular details.
By the time I'm done coloring most of Lupita's body part's, accessories, and clothing my color choices look like this.
Step 6: Layers
So far I haven't mentioned what my layers look like. The last five steps were made using just one simple layer. There hasn't been anything too complicated or any object too difficult to select but now I'll need to organize since I'll be adding color corrections, backgrounds and new elements.
- "Jelly Top:" In this layer I will attempt to draw some of the Jelly Fish tentacles over Lupita.
- "Color Overlay:" This layer is for color refinement. Which I'll explain in Step 8.
- "Add Ons:" I use this layer to redraw and color objects that aren't proportionately correct, or for additional objects like Lupita's earring for instance.
- "Line Art:" As a precaution, I put the Line Art in it's own layer and lock it.
- "Colors:" This contains all the coloring done in the last few steps.
- "Jelly Bottom:" Here I will keep all the elements, underneath Lupita, that make up the Jelly Fish.
- "Ground Color:" This layer is for my background color and future design elements.
Step 7: Covering Up My Mistakes
By the time I'm done coloring I notice a fluke in my hand drawing. One of Lupita's sleeves is shorter than the other. Using a combination of the Pen Tool and Pencil Tool I redraw the sleeve in the layer positioned above the Line art called "Add Ons." Basically, I cover up my existing artwork with new line art, shading, and highlights.
Now I will add Lupita's earring using some of the same tools and techniques from Step 4. This isn't exactly a mistake but it's definitely an after thought. Originally, I didn't want to interfere with my pencil drawing so I drew the earring separately. Knowing full well I could add it after I vectorized it.
I grab my colored earring. Place it over her ear (note example A). Duplicate it and place the second earring over her other ear (note example B). Next I create a shape (also in example B) that I will use to cut out portions of the earring so that it looks as if it's behind her cheeks. I select both the earring and my new shape (note example C). Using the tools from the Pathfinder Window, I click on the Subtract button and then Expand. I repeat these steps for the second earring. Then, I add details and colored highlights (note example E).
Step 8: Color Correction/Refinement
My next correction is going to change the overall color scheme just slightly.
In the layer called "Colors," I select and copy the silhouette that was created in Step 4. The silhouette is located underneath all the base colors and shading. I then paste it into the layer called "Color Overlay." Within the Transparency Window (Window > Transparency) I change my setting from Normal to Multiply and eventually set the Opacity to 37%. Then I fiddle with the color of Lupita's silhouette until I'm satisfied with the overall color scheme.
Making sure the colors don't look too cold and/or on the blue-side, considering the warm tones of her skin. This step is basically a way of combining the overall colors and helping them to compliment each other. You'll notice that the change is subtle, but I find that it helps me control the colors better this way without having to take it into Photoshop.
Step 9: Creating the Jelly Fish Body
Next, I drag my color sketch beside my vector art. With my Pen Tool I begin tracing the Jelly Fish's tentacles and it's body (note examples A & B, below). Then I select these new objects and place it over Lupita (example C), separating the tentacles into the layers called "Jelly Btm" and "Jelly Top." Now I attempt to choose colors (Example D) and add random tentacle/squiggles using a combination of the Pen Tool and Pencil Tool.
Now I add shading under the Jelly fish's body. I've adjusted the object's (that makes up it's top portion) transparency setting from Normal to Screen mode (located in the Transparency Window). Then using the Pen Tool, I draw highlights on top of the Jelly Fish. You'll see that I'm using jagged lines in there, as shown previously in Step 5. By now I'm trying to convert the tentacles, that are located in the "Jelly Top" layer, to appear as if they are transparent.
I realize now that these tentacles are a distraction and decide to select everything in that layer and place it into the "Jelly Btm" layer......combining the entire Jelly Fish behind Lupita.
Step 10: Creating the Angular Background
This is a simple step. I create a few stripes in the Background Layer using the Rectangle Tool varying my colors from neutral white to bright colors. I then use the Direct Select Tool to select all the right vector points from these rectangles and then drag them down until I feel they are in the perfect location.
Step 11: Adding Details To The Jelly Fish
After I have the entire body completed I start adding random circles using the Ellipse Tool. It gives the sense that there are little life forms in the water, transparent objects, lens flares and objects out of focus. In addition to this I continue drawing squiggles and tentacles within this same "Jelly Btm" layer, using a variation of the Pen and Pencil Tools. I create a new brush (see bellow for settings) and use it on occasion, and a basic/default brush, as well.
Below is an example where I labeled my settings for most of the objects I've drawn. This whole process is done through trial and error. Experimenting with color, transparency and opacity options (Tools > Transparency). Along the way I continue to change the colors of the tentacles until I feel none of them overpower each other, visually.
Step 12: Final Color Adjustment
When I feel I'm comfortable with what I've created I make one more color adjustment. I do this for the same reason I adjusted Lupita in Step 8, using almost the same technique, as well. Only here I create a large rectangle, using the Rectangle Tool, covering the entire image. Using the Color Overlay Layer I select my large rectangle and set it's Transparency to Multiply and it's Opacity at 28%. Then I adjust, in the Color Window using the HSB color sliders, until I'm satisfied with the overall color change.
The final image is below. You can view the large version here.
By now I realize the vertical composition of the artwork would look great on a skateboard deck. So I mock it up onto a Longboard template in Photoshop.
Hopefully you've read through this and have learned a few new tricks. Enough to conquer the world.... Enough to help you feel adventurous when it comes to using color!