Summertime Jogger

~ a vector drawing tutorial ~
Copyright Arizona Kate ©2001 All rights reserved.
All tutorials, including images, remain the property of Arizona Kate and may not be sold or distributed in any format without purchasing a license from Arizona Kate.

This tutorial uses the vector tools in Paint Shop Pro to draw the toon style character shown sbove. Instructions are written for the intermediate user who's already made a few vector drawings and do not need each tool explained in detail. If you are very new to vector drawing, you might want to do one of the tutorials written especially for beginners, such as the intro to using Vector Tools and the EggToon tutorials.

Create new image image 200 wide x 300 high.

Use 16 mil colors and a transparent background or make the background the same color as your webpage. If you don't like working with the checkerboard pattern that indicates a transparent background, create a new 'fill' layer and fill it with white. Delete that layer before final save.

The Object Selector and the Preset Shapes tools will be the main tools used in this tutorial. Settings for the Preset Shapes tool are: Retain style UNchecked, antialias and vector checked, line width 1, line style solid, stroke color black, fill color varies.

Make the following shapes, in the order listed.

Exact size and alignment of objects doesn't matter at this point, we'll be editing them later. Creating the vector objects in the order listed will position them as needed.....with the correct ones in front, behind, above, below, etc, etc. When you create vector objects, PSP places each object on a sub-layer of whatever layer you're working on. It also names each layer as line or ellipse or whatever is appropriate. If you re-name each vector layer on the layer palette, it will help you locate each object. Click the + sign next to the vector icon on the layer palette to view all the object layers. To change an existing layer name, right click the layer button, select rename and type in the new name.

For a screenshot of how your Layer Palette should look after creating all these shapes, click here.

Stroke is black for all shapes, fill color will change as noted in this list of shapes:

4 rectangles, fill color=flesh (left leg, right leg, left arm, right arm)
2 rectangles for socks, fill=any color (left sock, right sock)
2 ovals for shoes, fill color=white (left shoe, right shoe)
1 rectangle for shorts, fill=any color
1 rectangle for shirt, fill=any color
1 oval for ponytail, any hair color
4 ovals, fill color=flesh (neck, left ear, right ear, head)
1 oval for hair/bangs, same hair color used above
2 white ovals for eyes, left and right
2 black circles for eyeballs, left and right
1 circle for nose, fill color=flesh

Change to line tool, freehand line, line width 1, line style solid, antialias and vector ON, close path OFF. Stroke color black, fill color Ø null. Draw 3 lines to represent 2 eyebrows and a mouth. Rename these objects on layer palette, too.

Node editing the preset shapes.

For simplicity, we're going to draw an uncomplicated character that doesn't have a lot of detail in some of the body parts. If you're comfortable doing some ad lib node editing on your own, go ahead and add more detail to the arms, legs, clothes, etc., as we go along. Zoom in where it's necessary to see better when editing small areas.

Shorts. Select the shorts with the Object Selector, RC (right click) select Node Edit. Add 3 nodes** along bottom edge of blue rectangle. Pull the center one of the 3 new nodes up a little to make crotch of shorts. Move the other nodes in or out to adjust size of shorts. RC the top left node and change the node type to Cusp>Curve Before. RC the top right node and change the node type to Cusp>Curve After. Adjust the handles on these 2 nodes to give some curve to the hipline.
**To add nodes: Select Node Edit, hold down the Ctrl key as you hover over the line, click mouse when the + appears and a new node will be added.

Adjust Size of Legs.

Select one of the legs and adjust thickness and length to be in proportion to the shorts. When that leg is correct size, select it, hold Shift key down, select the other leg, RC select Make objects same size>both. This gives us 2 matching legs to start with, but next we'll shorten the right leg to make it look bent.

Right Leg: Push the right leg rectangle up under the shorts so only part of the leg shows, as if the knee was bent. RC to node edit. Select the bottom right node of the right leg, RC change node type to cusp, curve after. Adjust the handle on the node to make a rounded end (knee) for this rectangle.

Oops!! The right shoe and sock should be behind the bent knee not in front! We need to re-arrange the order the layers are in. On the layer palette, drag the layer for the right sock and the layer for the right shoe down so that they are below the right leg. This puts the shoe and sock behind the bent knee! To drag a layer, select the layer button and hold your mouse key down as you drag the layer button into position.

Now we have to adjust the shape of the shoe and sock a little. RC Node edit select the bottom right node of the sock, RC to change node type to cusp, curve after. Adjust the handle to put a curve on the bottom edge of the sock that is similar to the curve for the bent knee. Use the Object Selector to adjust position of sock behind the knee so only some of it is showing. Select the shoe oval and elongate it so it looks like you're looking at the top of the shoe. Position this layer behind the sock layer.

Left leg. Adjust shape of shoe and sock. RC Node edit select the top right node of the sock, RC change node type to curve before and rotate node handle to put a little curve to the top edge of the sock. Select the left shoe, RC node edit. Select one of the nodes, RC select Edit, Merge. You should now have 3 nodes. Adjust handles on bottom right and bottom left node to point directly at each other, making a 90 degree angle and a flat bottom to the shoe. The third node should create an even curve for the top of the shoe. This simple half circle shape works well to represent a straight-on view of a 'cartoon' shoe. Use your Line Tool to draw a short, curved line to represent a knee wrinkle for this leg. Freehand line, antialias and vector on, line width 1.

T-shirt area:

Not much to do to the shirt shape. Just adjust the height and width to be in proportion to the shorts and legs. If you want the shirt to look tucked in, RC node edit and bring the bottom 2 nodes in to align with top of shorts at the waistline. Adjust size of oval for neck to be in proportion to the rest of the body. Node edit the bottom edge of the neck oval to make it appear that the T-shirt has a rounded or a v-neck. You can leave the shirt sleeveless or add some sleeves when adjusting arms in next step.

Optional: Add stripes or a pattern to T-shirt.

Create a striped pattern fill for shirt as follows: Open new image 10 wide x 4 high with white background.
Zoom in 6 to 9 times to see better.
Double click the regular (rectangle) selection tool on the toolbar. In the pop up box enter left 0, right 10, top 0, bottom 1. This creates a selection to flood fill with stripe color of your choice. Fill selection with color and deselect the stripe. Set the new image aside (minimize). Go back to the jogger image, RC the shirt with the Object Selector, select Properties. In the dialog box, change style selection box for the background fill to 'Pattern'. The pattern file you just made & have minimized should show up with the other pattern choices (all open files will appear as pattern choices). Select the stripe pattern & hit OK. Your shirt should change to stripes! Of course, you can use any pattern for the fill style, it's your choice.

Arms: We'll be making the arms in 2 different positions, 1 bent, 1 straight. The straight arm should be on the same side of the body as the bent knee. Start with 2 arm rectangles that are the same size. First, adjust the length and thickness of one of the arms to be in proportion to the rest of the body. The length of the arm from shoulder to fingertips should equal the distance from shoulder to mid-hip or crotch. Once you're satisfied with the size of one rectangle, select it, hold down the Shift key, select the other arm, RC select make objects same size, both.

Hands: Next we have to add hands at the end of the arms. For simplicity, we'll keep hands folded into a fist....that should look correct for this jogger! When following the instructions below, change node types and adjust node handles to add a little curvature to some parts of the arms. You can go back and add some curves to the legs too, if you feel they're too straight and stumpy!!  ;-)

Right arm: Select the arm on the right side (the same side as the bent knee) RC to node edit, add 4 nodes..2 to each side of the rectangle. Two will be the elbow and 2 will be the wrist. Connect the top 2 nodes of the arm to the shoulder and arrange the handles of all nodes in this arm until it looks like the screenshot. Add a freehand black line to represent the thumb.

Left arm: Oh-oh...this arm layer got positioned behind/below the shirt layer! That works for a straight arm but not for an arm that is bent in front of the chest!! To fix it....either drag the left arm layer on the layer palette so that it is above the shirt layer, or just RC the left arm, select arrange>bring to top. Add the same 4 nodes to this arm as you did the right arm and arrange the nodes so the arm is in a bent position. Add thumb to this hand by adding 2 more nodes on the top side of hand. Adjust node handles to get thumb shape.

Optional: Add 2 sleeves to the T-shirt. Create a rectangle shape for each sleeve (vector) and fill it with the same pattern as T. If you used a stripe pattern, use the pattern style dialog box to rotate the angle of the stripe a little to match the angle of the sleeve. Use undo if the angle is incorrect and try it again. It may take some trial and error to get the stipe to line up just right!

Face and hair: Adjust the size of the oval for the head so that it's in proportion to the body. Adjust the size and placement of the eye, nose and mouth shapes until you like the look of the face.

Tip: If you have trouble selecting the smaller face objects because the large oval for the face keeps getting in your way and gets selected instead, do this: Go to the Layer Palette and turn off visibility for the face oval layer. The Object Selector will then ignore that hidden shape!!

Aligning and making left and right side face parts the same size: To get both ears the same size, select the one that's the correct size first, hold Shift key down and select the second object. RC select make objects same size, both. You can also use this menu option to make the eyes the same size. On the same menu is align object. Use this option by first selecting one object, hold down Shift Key and select a 2nd or even a 3rd object. Try using align object>bottom to get the eyes or ears to line up. Experiment with the other Align choices....you can always Undo!

If you have getting the head, neck, body, legs, etc, positioned the same on both sides of the body, sometimes drawing guidelines is helpful. Create a new raster layer and draw a straight vertical line down the spine or center of your image (antialias and vector OFF). Use this line as a guide to make sure your neck is centered on the body and the head is centered on the neck, the legs are both positioned correct....etc! Delete the guideline layer when done.

Grouping: Once you've got all the face parts sized correctly, you can group them all together to move them around in unison. To group objects: Hold your shift key down, select each object, then RC and select group. The face parts are usually small, so it's usually necessary to Zoom In to select each one with Object Selector. However, a much easier way to select multiple, tiny, hard to grab objects is to select from the layer palette. Do it the same way as selecting from the drawing, by holding shift key down and selecting multiple objects. However, select the object layers from layer palette instead of from drawing. This is easier when each button on Layer Palette has an easy to recognize name!!

Detailing the hair:

Select node edit and add a bunch of nodes to the hair shape. Node type for all of them should be cusp. (Check the Node Type, if it's grayed out...it's the current type.) Shape the hair object into bangs like I did for this screenshot or make whatever hairstyle you prefer! Also adjust the node handles on the ponytail until it looks like a bouncing ponytail! You can make a pretty face or a funny face, it's up to you. Sometimes changing one little thing can really change the look!

The 2 faces shown below started as the exact same image, I just pulled the face oval further down to the shoulders for the one on the right...cute! huh!...LOL!!

Finishing:

Your jogger is done! It's up to you to give her/him your own custom look and add more detail! You could draw some accent lines in the hair, some pockets for the shorts, some buttons for the shirt, some shoelaces, a Nike logo on the T, etc, etc.

Don't forgot to keep the vector option checked when you add your details so they will resize along with the rest of the jogger.

If you want to add some blush and still keep the blush a vector object, try this: Set your stroke color to the same color as the face and the fill color a blush pink. Set the Fill style box to sunburst gradient using the foreground-background colors. Stroke style should be set to Null!! Draw a circle preset shape (vector and antialias on!) for one cheek. Copy the first blush shape and paste as new vector selection onto the other cheek.

To resize entire drawing:

With Object Selector tool, drag a selection line completely around the outside of your jogger. Every object must be completely within the selection to get all pieces. Any small parts not 100% within the area will not get selected. Once you have the selection box around your drawing, you can grab any one of the handles to resize larger or smaller. If you use the right mouse button to grab a corner handle, your vector drawing will resize while retaining the same proportions.

Exporting as transparent GIF.

Duplicate your image window, duplicate and save the original PSP copy for making other images.
Resize your vector image as described above using Object Selector.
Use the Crop Tool to reduce the canvas size to exclude any excess space.
If you want a transparent gif, set the color in the fill (background) color box to the same color as the background of your image.
If you plan on using this image on a particular webpage, you can fill the background layer of your image with the color of your webpage background and not bother with setting the transparency.
Select the export gif button on your toolbar or file > export > GIF optimizer on the text menu.
In the Optimizer dialog box, select:

Transparency: areas that match this color If you set the color swatch as described above, your background color should already be displayed in this box. If it isn't, change the color by clicking the swatch. Check to make sure the background of your image in the preview box is showing the checkerboard pattern ...this verifies it has a transparent background.

Colors: Select 256 colors, 0-20% dithering, Optimized Octree. If you choose Web Safe colors, it will make a smaller file size but your flesh color will probably get all weird. Although this could be OK for some toons! *S* For my image, I compared the file size between Median Cut and Octree and they're about the same ...the only difference is that choosing Octree seems to keep the original colors intact. Unless you've made your image real large, your final file size should be under 10K. I try to keep ALL images under 20K or 25K for larger ones.

Format: Non-interlaced or interlaced. Your choice. Version 89a should be checked as the default, because this is the GIF version that supports transparency.

When done with your choices, select OK. Give the file a name and save to your graphics folder.

You now have 2 copies of your jogger, the PSP copy you already saved and the optimized GIF copy you just made....so you can toss away the un-named duplicate that's still in your workspace!

Now, lets go try the Jogging Annie animation tutorial and see if we can make Annie run!!