Posted under Web Design on April 15th, 2005 by Paul Barnes / No Comments

(Editors Note: Article first written in 2005)

Tracing paper was always the favourite cheat back at school but somehow it doubted the integrity of the honest amateur artist.

Nowadays we have layers and Macromedia’s Flash and all digital shortcuts are welcome when striving for quality, optimisiation and professionalism all in an acceptable time frame. When I first introduced myself to Flash 3, vectors immediately struck me as a fairly ambivilent form of creating graphics – almost like a geomotry set in pixels.

The simplest of tools with, heavens forbid, no filters, no plug-ins and no real reason for them at all other than elaborating simple line tables and round-edged, square buttons! Around a year or so ago, I wondered how far this form of drawing could be taken with pleasantly surrprising results.

Even with Flash’s basic toolset, there is a high level of control available when using the line tool. Clicking and dragging out a line couldn’t be simpler but turning that into a high quality illustration was another matter. Having dabbled with this for some time, it soon became apparent I needed a more complex subject to work from.

This tutorial is based on a recent illustration produced by myself as a Digital Agency senior designer. It is the result of a year or two’s practice with a multitude of vector drawings but anyone can create something similar in a matter of hours.

Preparation

I start by finding a high resolution jpeg of the subject I wish to illustrate. In this case it is the Team Atomic Kitten Racing Car – from the the British Touring Car Championship 2002. Since it is a presentation picture, it’s shines and angles are almost ideal and will help the vectors create a more rounded look at the end of the process.

To a certain extent, preparation is the key to the final illustration since the drawing will only be as good as the picture your tracing from.

Why Vector

Why not use the picture in the first place – you might ask. A vector illustration will have distinct advantages over its jpeg predecessor. After practice you may well be able to create a high-quality illustration which is only 30k! Remember that this 30k is the same more or less whether it is a thumbnail or full-screen sized and beyond.

A full-screen jpeg would be considerably more and even if you could compress it to the equivelent file size, it would invariably look degraded and fuzzy. The vector illustration is uncompromised in quality since it is vector and resolution independent.

This also opens the doors to exporting purposes for follow-up print work and branding needs for a particular company. The single illustration can feed the graphical needs of both web and print jobs with ease and puts an end to multiple folders seperated for high-res print pictures and web optimised gifs/jpegs.

Tracing

Getting back to the illustration, I create a new file in Flash and import the high-res subject jpeg. I center the jpeg on a layer within it’s own symbol and lock the layer off.

I then create a new layer above it much like the tracing paper above a picture. We are now ready to start creating the outline image. I always start by selecting the hairline tool and choosing a bright colour so the line can be seen over the jpeg.

Select the line tool from the main toolbar and start by tracing an outline of the jpeg’s subject – in this case the outline of the car. For speed, I usually set the ‘snap to objects’ on and create a basic straight line polygon of the car’s outline.

I then set the ‘snap’ off and carefully bend each line to the exact shape of the car beneath. Ensure all ends of lines are properly connected otherwise you will encounter problems rendering later on.

At this stage I have an ouline of something which looks like a car but at the moment it is just a potential silhouette and not a detailed full-colour illustration. To expand the detail, I have to use the same process I used to create the outline but now on the more fundamental elements such as windscreen, wheels, headlights and anything else which is fundamental to the image your trying to achieve. I suggest you take each element one by one. You’ll need patients but try to persist as the end result is well worthwhile.

Once you have done this, you can take the detail one step further if you wish buy tracing any distinct lines which make up shines and important contours.

The more detail you cover, the closer the illustration will look to the initial jpeg but also consider that more detail adds valuable extra bytes the final file size of the SWF.

Once you are satisfied with the detail traced, you shoud end up with something that looks like a blank canvas of a painting by numbers(minus the numbers unfortunately!).

I reccommend you copy the outline layer to a new symbol so you have the option of using it later if need be. Even this stage of the illustration has graphical potential with a wireframe look and always goes down well as a background watermark to any page layout.

Rendering
Now that I have my jpeg car and a network of lines on the layer above, I am ready to start adding some colour to the process. Depending on how clever you are with the gradients, you can add more shape to your illustration and also give more depth using shadows and transparency on further layers. I like to keep things on one layer if possible.

Assuming you jpeg has been adjusted for best colour already, it is most logical to pick the colours, which will form your new pallette, directly from the jpeg in the first layer. To do this you’ll need to unlock the layer first and select the picker tool. Find a shape within the line trace to render and study how the colour is made up.

This might take a moments squinting but how you render each segment/shape will largely effect the illustrations final look. If a particular shape has a gradient, simply pick the colour at both ends of the scale and replicate the gradient in the Fill pallette. If you use flat colours in each shape, the illustration will appear posterized and the painting by numbers process will be emphasized significantly.

The Flash Fill pallette offers two main gradients, – linear and radial. You might want to experiment with how these gradients work first. When you fill a shape with a gradient you almost certainly need to adjust it to your needs.

To do this select the gradient adjuster at the bottom of the main tool bar and click on the gradient which fills your shape. With radial gradients you can scale them in both directions and also rotate them.

The linear gradients can be stretched out one way and rotated also. This is quite key to creating this sort of illustration as it gives much more flexibility in the rendering and hence allows you to recreate curverd areas, shines and shading much easier.

Rendering, the whole tracing will certainly take a while depending on your level of detail. My car probably took around five hours and that’s on top of 2-3 hours worth of tracing with the line tool! I’d advise you start with something simple which will take a couple of hours and build up your patience over time. It can be a long fiddly process that takes up a day but the results are certainly worthwhile with its numerous applications.

Finally

When the rendering is complete, then there’s the satisfaction of deleting the lines and revealling your creation. As long as you’ve used the same colour of line throughout your trace, you should be able to double click anywhere on the line to select it all. Simply clear the lines and you’re left with the gradients which make your final illustration. Now you can delete the jpeg layer and your left with some original vector artwork.

Click out of the symbol, back to the stage and drag your illustration from the library. Now you can even animate it in whichever way you want. Make it fade in/out, add moving parts such as rotating wheels.

Just have fun experimenting and note the size when you create the SWF file. You’ll be able to export at high resolution and further develop it in other application such as Photoshop. The vector illustration also has a perfectly crisp quality to it so there’s no need to worry about anti-aliasing those jagged-edged imports.

More examples of Macromedia Flash vector illustration


Contact me at http://www.mwadigital.co.uk for more info on vector illustration and Flash animation.