Editing your image

Open your digital picture or image editing program. I am using Jasc Paint Shop Pro version 8. You may be using GIMP (the link is provided on the Easy Animation home page), or you may be using Corel’s version of this program, or something else. The procedure is the same, regardless. I will show you what I do using Jasc Paint Shop Pro 8.

Open your digital picture editing program, and then use File-> Open to open up your scanned file. Here, I am opening up a copy of my scanned spider bitmap file. This is what it looks like:

I really do not need all that extra white space around my spider, so I use the cropping tool to crop the image so I just have the spider, without all the space. Your software will have a crop feature. If you don’t know how to use it, check the “help” feature on the program you are using. Save this new, cropped image with a new file name.

Now, open Inkscape. We want to edit the default document that it displays, so go to File->Document properties.

Change the width and height of your document to 8.0 by 8.0 inches. That screen looks like this:

On the “Snap” tab, uncheck snap object to path. This is the third box shown on the page. This makes our drawing easier to work with, for otherwise, Inkscape would try to make some of our drawing decisions.

Now, to make our document larger on the screen, go to View->Zoom to 1:1. You should now have this:

Choose File->Import-> and browse to the saved copy of the cropped spider image, which in this case, mine is named “spider rough small.bmp.

Resize the image using the arrows on the sides and corners of the imported image until the image fits inside the page you’ve created. You should have something that looks like this:

We are going to create something called “layers” while doing this drawing project. You can think about the layers we are creating as stacks of paper. Have you ever used tracing paper? You put the tracing paper over your original drawing, creating a stack of 2 papers. The tracing paper was just as important to your artwork as the original drawing.

Here, we are going to create a number of layers. Adding a new layer is the same as adding a new piece of tracing paper. We are able to see through the layer, if we wish to, but we can add parts of our drawing on only that layer. If you are confused, this will become more clear as you begin to work with layers. (I hope! :-)

To create a layer above our spider pencil drawing layer, select Layer-> Add Layer. You will get the screen shown below.

Name the layer “Spider Body Outline.”

To see the layers we have created, we can look at the layers palette. Show the layers palette by selecting Layer->Layers. This brings up our layers palette, and you can see we now have two layers. The layer where we inserted the spider drawing is called “Layer 1.” In the layers palette, click on the little padlock for Layer 1. This locks the layer, so we can’t delete or otherwise change this layer. (See the screen below to see what the layers palette looks like.)

We want to work on the layer, “Spider Body Outline,” so select that layer in the palette. To show it is the active layer, it should show as highlighted in blue. We now have a “stack” of two layers. Our original drawing is underneath, and our new layer, called “Spider Body Outline,” is like a piece of tracing paper we’ve laid over the top of it.

We are going to draw in the spider body, and to do this, we are going to use the “Draw Bezier curves and straight lines” tool, which is the funny looking pen right underneath the pencil tool. See the image below:

Zoom in until the spider fills the center of the screen. Using the straight line tool (That funny-looking pen tool mentioned above) start going around the spider’s body, clicking (or putting your pen down) so that your line matches the curve of the spider’s body. This may take some practice. If you mess up, simply selected Edit->Undo, or select the arrow at the top of the tools on the left side of the screen (the one that is in line with the pencil icon, and the funny-looking pen tool you are using). Select your “mistake” line by clicking on it with the arrow tool, and then press the “delete key” on your computer. The line should disappear, and you can select the funny-looking pen tool and start again. (Again, you can practice doing this. If you don’t save your file, you can practice on this as much as you like. It’s not as confusing as it sounds, trust me.)

Here is what it looks like as you’re drawing:

It’s hard to see here, but you see the little teeny green square near the top left of the spider’s body? That’s where I started drawing. See the little tiny red line, like a red whisker near the spider’s chin? That’s where my tool is currently drawing. The tool itself looks like a pen tip when you’re drawing, but for some reason, it refuses to show up in my screen captures.

Once you complete the circle of the spider’s body, a dashed square should form around the area you’ve drawn, like this:

This means you have a complete “selection.” This selection, the outline of the spider’s body, is something we can now modify so we like how it looks.

First thing we need to do it make the line visible, for right now, it is not. We do this by changing the “stroke” characteristics. We change the stroke characteristics by selecting the little paint brush icon on the top of the screen, the one right next to the capital T. A box opens up when we do this. Select the third tab, which says “stroke style.” Enter 0.050 for the width, and make sure the pull down menu is set to “in.” Select the two middle styles for the “Join” and “cap.” These are the line styles that are more rounded than the others. This looks like this when we do it.

Click the X at the top of this menu box, and you should see this:

Woo Hoo! Now we’re drawing with virtual ink!

We’re going to move on to drawing another part of the spider, namely, the eyes. We are going to add another piece of virtual tracing paper, or layer, because this really makes it easy for us to change our spider later on.

Create a new layer by going to Layer->Add Layer. Call this one “Spider Eyes.”

Go to your layers palette (if you don’t see it, go to Layer->Layers) and lock the “Spider Body Layer,” by clicking on the little tiny padlock next to the name of that layer. Highlight or select the Spider Eyes layer. This is the layer we’re going to work on now.

Zoom in until you can easily see the spider eyes to work with them. Select the straight line tool (that funny looking pen again) and start drawing around one of the spider’s eyes. When you complete the circle, edit the stroke width just like you did for the spider body. (Using the little paint brush icon next to the capital T.) In this case, I set the line width to 0.030 in.

Now, you see that I have a circle for one of the spider’s eyes. However, this is a bit jagged, yes? Maybe I want to correct that. Rather than redraw it, I can select the “Edit Path Nodes” tool, which is on the left side of the screen, underneath the arrow tool, and above the little magnifying glass tool, here:

Click on this tool while the eye is still selected, and you will see a bunch of little square dots appear on your black line around the eye. It looks like this:

These gray dots are called “anchor points.” These are the places that you touched your pen tool down onto your layer to “anchor” the line. These points can be moved when you are using this “Edit path nodes” tool. Take the sharp-looking arrow that shows on your screen (but refuses to show up in my screen capture), and click on one of the dots, holding down your mouse button while you drag the dot outward. As the arrow moves over one of the dots, the dot turns red. This is the “active” dot or anchor, and if you click on it while it’s red, this is the anchor you will be moving. See how you can move these things?

I’ve moved a couple of the anchors, and now my eye line looks like this:

While this isn’t much of a change, I like it better. I now click anywhere outside of the eye, and the dashed box disappears, indicating this selection is no longer active. If you can’t get the dashed line to disappear (sometimes it’s stubborn), then select the arrow tool from the menu, the very top tool icon. Click anywhere on your screen, and the dashed line should easily disappear.

Now, select the funny-looking pen tool and begin drawing in the other eye. Follow the same steps, setting the stroke width and making adjustments with the nodes, or anchors, until you are happy with the results.

Here’s how mine looks:

Nice, huh?

Now, we’re going to draw the pupils of the eye. Select the funny pen, and draw the outline of the left eye in the same way you drew the outline of the eye. When you select the stroke size, however, leave that box open once you’ve selected the stroke width (set this to 0.010 in) and style. Select the “Fill” tab, the first tab on this palette. Currently, this says “No fill.” Select the first colored square, which says “flat color” when you move your cursor over it. When you select it, you get a palette that looks like this:

Close this palette by clicking the X, and your eye should now look like this: (Note: There are arrows on the corners of my dashed selection box, because I deselected this part of the eye, and then reselected it using the arrow tool. You will be doing this later as we work, so you should know what this looks like.)

Click anywhere away from the eye with your cursor, and the dashed box should disappear. Select your funny pen and start on the right eye, filling it in the same way as you did the left.

Your spider now looks like this:

You may be wondering why we are creating an animated spider using a bunch of complicated drawing tools on our computer, when we could just use a pencil and paper. To make an animated movie using a pencil and paper involves creating drawing after drawing, and then putting them all together into a movie. That is, we would draw the spider on page 1 standing still. In drawing 2, we would move one of his eyeballs, just a little. Drawing 3, we move it a little more. Drawing 4, we move it more, and maybe move one of his legs, just a little. We keep making new drawings with our pencil and paper, making small changes in each one. When we’re done, we put all the drawings together, in order, and hopefully we have an animated movie. But this means a lot of drawing, and a lot of pages. Each time we want our spider to move, we need a new “frame” or drawing. This can mean a WHOLE LOT of pages to draw.

Here, we are going to save some drawing time by allowing the computer to help us make our small changes. I’ll show you what I mean. Use the arrow tool (The top tool on the left, right above the magnifying glass) and click on the eyeball in the left eye.

You’ll see this: (Remember, I told you we see arrows on our selection boxes later on, and here they are!)

Click on this eyeball again with that same tool, and try dragging the eyeball in any direction. Can you do it? Yes you can! Here, I’ve dragged the eyeball completely outside of the eye.

If we want the spider to move his eyeball, to maybe look up, or roll his eyes, this is how we will do that, by making a change in our computer drawing by dragging or moving something around. We do not have to redraw our spider every time. Rather, we are free to move parts of our spider around any way we want. If we aren’t happy with the way it looks, we can always move it back.

I’m moving my eyeball back into place. Now we’ll move onto the drawing the legs.

Add a new layer, calling this one “Spider Legs.”

Lock the “Spider Eyes” layer by clicking on the tiny padlock.

Now, select your funny pen, and draw in the spider’s legs. Make sure you do each leg separately, without connecting one to another. When you get to the end of the leg, right click your mouse to create your selection. (With the spider’s body and the eyes, we completed a circle, which created our selection automatically when we closed the circle.) Set the line stroke to 0.030.

Here are three of the legs:

Here are the rest. (Yes, I know that spiders have 8 legs, but that is too many legs for me to manage in my drawing, so this spider gets 6. Why do you think that cartoon characters all have 3 fingers and a thumb instead of 4 fingers and a thumb? Fingers, toes, legs—the more you have, the harder it is to draw and animate.)

Here are all the legs:

Now, add a new layer, and title this one “Spider Mouth.” Lock the “Spider Leg’s” layer by clicking the little padlock, and select the “Spider Mouth” layer by clicking or highlighting it.

Draw in our spider’s mouth, using our funny pen. Set the stroke width to 0.030.

Our spider now looks like this:

Since we have him drawn in Inkscape, we no longer need our original pencil drawing to show in this image. So look at your “Layers” palette. (Layer->Layers) See the padlock that we’ve been clicking next to each layer? To the left of the tiny padlock is a teeny weeny image of an eyeball. All the eyeballs for our layers are open. Find the eyeball next to our layer marked “Layer 1,” and click on it. When you click on it, the eyeball closes. This means our layer is now invisible. Here is how our screen now looks:

If I click the eyeball next to the “Spider Body” layer, that layer disappears, and our spider looks like this:

Make this layer visible again by clicking on the eyeball. Leave Layer 1 invisible for now.

Zoom out so you can see the edges of our document box. (The 8 by 8 inch box we created at the beginning of this.)

Our screen now looks like this:

Now, we begin to animate.

First, let’s save our file. Select File->Save as-> and give this file a name. The file extension will be .svg, which means it is an Inkscape file. I called my file “spider1.svg,” since this is the first image I’ve created.

Now, to animate our little beastie, we need to start moving him. I’m going to have him first look left, then right. To do this, I’m going to have to edit items on the “Spider Eyes” layer. Go to your layers palette, Layer->Layers, and click OPEN the tiny padlock next this layer. Opening the padlock means this layer can be edited. Those “locked” layers cannot be changed at present, which means we can’t move something we don’t want to by mistake.

Let’s first move the eyeballs to the left, about half way across the eye. Here’s how that looks:

(Zoom in, if you need to, zoom back out to see how the movement looks.)

Save this file as “spider2.svg.”

Move the eyes all the way to the left.

Save this as “spider3.svg.” (We are going to do a lot of saving of files, so get used to that now.)

Move the spider’s eyes back to the center.

Save this as “spider4.svg.”

Move the eyes part way to the right.

Save this file as “spider5.svg.”

Move the eyes all the way to the right.

Here is how he now looks:

Save this one as spider6.svg.

Now, our spider is going to look up. Start moving his eyeballs round the inside of his eyes.

Save this one as spider7.svg.

Move his eyeballs to the very top of his eyes.

Save this one as spider8.svg.

Now, we are going to move to a different layer. We are going to modify the spider’s mouth, for while looking up, our spider has seen something shocking. Let’s lock the eyes layer by clicking the little padlock, and unlock the mouth layer.

Select the “Edit path nodes” tool, the one right under the arrow tool and above the magnifying glass, and click it on the mouth. The square anchor dots appear again. We are going to move some of these to make our spider’s expression change.

First, pull the corners of his mouth down by dragging the anchor points at each end down. Remember, don’t move anything too much, and don’t move anything in the middle of the mouth.

Here is how mine now looks:

Save this file as spider9.svg.

Flatten the spider’s mouth out a bit more. This time, you can move a few anchors in the middle, but remember, not too much!

Here is what mine looks like:

Save this one as spider10.svg.

Now, click on the funny pen again, and draw a tiny oval shape in the center of the spider’s mouth. Make the stroke width 0.010, and fill this in with black, like we did the eyeballs.

Here is how mine looks now:

Save this one as spider11.svg.

I am going to use the “Edit path nodes” tool to drag the anchors on the mouth oval to make it bigger, and I’m going to use this same tool to make the line from the original smile smaller. Like this:

Save this one as spider12.svg.

Here’s more mouth movement:

Save this one as spider13.svg.

Here another edit:

Save this one as spider14.svg.

Now, I’m going to edit the spider’s mouth one last time, and I’m also going to add a new layer called “Spider Eyebrows.” I’m going to draw some surprised looking eyebrows on this layer so our spider looks even more shocked. Set the stroke width for the eyebrows to 0.030.

Here is what that looks like:

Save this one as spider15.svg.

Now, we are ready to move our drawing into our animation software. But before we do, we need to export each and every one of our 15 files as a bitmap file. (This is the tedious part, I know, but we have to do it.)

Open spider1.svg. Once it’s open, select File-> Export Bitmap.

A rather complicated box will open up. Here, simple select the “Page” button to export the entire page. This will look like this:

Click “Export” in the lower right corner of this box. If you check your folder on your computer, you should now see a file named “spider1.png.” This is a bitmap file, and one we can use in our animation software.

Close out of spider1.svg (File->Close), and if it asks you if you want to close without saving, you can say “yes,” unless you made a change, and open spider2.svg. Export it as well. Do this for all 15 files. Note: You can open the files and export them, one right after another, without closing any of them out, and then close out the program when you’re done. Any way you prefer is fine.

You should now have 15 files with .png extension. Move these files into a new folder called “Spider Bitmaps.” Then we’re ready to start using Jasc’s Animation Shop to have some animation fun.

Click the BACK button on your browser to go back to the tutorial, or close the window, if a new window opened up.

_____________________________________________________________________________________________________________________________________________

Content created by Annette Griessman, and may not be used without permission.

Last modified on November 9, 2007.