Blogless

We left off last time with a high-resolution high-contrast rendering of our model. Now it’s time to explain why.

Here at DLB, we prefer to make most of our assets as vectors. Vectors are mathematical representations of lines (rather than pixels which have a fixed scale) so they are always crisp and perfect at any scale. That’s why we like them so much. We’re absolute neat-freaks, whether it’s geometry or CSS and we don’t like building things more than once.

Let’s get Cartesian

The reason I went through so much trouble creating a Technicolor version of my model is because I am going to trace it into a vector application. The high-contrast colors should make it easier for me (or the software) to create the vectors I need. If you have a rendering from the last tutorial, you can follow along:

To get started, fire up your favorite vector drawing application (I’m using Illustrator in this example). There are many ways to go about tracing an image, but this is a process that I’ve developed over the years that works well for me:

1. Rather than constructing the whole drawing with perfect corners and edges, I prefer to focus on the individual lines, creating each one separately and making them as smooth as possible. Use the minimum number of points; let the curvature do the work.

   

   Overlapping lines is faster and cleaner method of tracing than trying to connect everything as you draw.
2. Once I’ve finished, I select the group and fill the interiors with the Live Paint tool. This creates nice clean polygons with consistent contours.
   
3. You’ll probably have a lot of shapes from the overlapping lines, so group them back together into coherent planes/polygons.
   

   Once this is done, go ahead and delete the original lines. Use the new shapes to generate a new set of outlines.

4. Next, we add line weights. It’s good to start with the heaviest lines for the outline of the object. An easy way to do this is make a copy of all of your objects and Boolean them together. Take the new object, use a “none” fill, and your stroke becomes your outline.
   
5. The next heaviest weights should be the elements in the foreground—the ones that “stick-out” to the viewer. You may need to redraw lines at this point, but if you use snaps, it won’t take long. As you move to secondary and tertiary lines, the weights should get progressively smaller. This builds a visual hierarchy into your composition.
   

   It’s easier here to illustrate the process going from fine lines to heavy.
   However, I tend to work the opposite way: from the outlines inward.
6. At this point, your drawing should be vectorized. Check the size of your composition. Is it big enough to style effectively? Your rendering may have been large, but once you eliminate the background, your 1600 x 1200 piece could leave you with a much smaller shape.
   

   If this is the case, group your objects and scale them to a larger size, making sure to preserve the original line weights.

7. Separate the parts of the drawing into layers. Ungroup or explode your shapes, as needed. This will make it much easier to shade and apply effects in the final section of the tutorial.
   

   Layers make for happy styling later.

   As a rule of thumb: lines go on top, then foreground elements, all the way to the background. As you go, you may also wish to separate out color groupings, again to make things easier on yourself later.

8. Export the drawing to Photoshop .PSD. Be sure to preserve your layer structure. Do not flatten the image.
   

   Layers make for happy styling later.

This is where we’ll pick up next time.

Alternate Strategies

If this seems like a lot of work, you can also try an auto-trace program to create shapes from your rendering. They don’t work as well as doing it yourself, but for some jobs, they might save some time. Illustrator has this feature, as does CorelDraw. There’s also a website you can try that will do it for free.

Tracing the drawing in Flash is another option. Some people prefer the more fluid drawing-like interface as opposed to noodling with Bezier handles. If you’re interested in that sort of thing, there’s a nice little tutorial here.

Finally, you could use a plugin like Illustrate! for 3ds Max which automagically renders your scene straight to vectors. In my experience, these plugins are not perfect: you might still need to do some clean up to make it look right.

Whew. That post was longer than I’d thought it would be.

Let’s pick this up again on Friday…