I know there are bunches of tutorials for making animated signatures out there, but people ask me how I make mine so often that I have decided to make a tutorial about it anyway. So remember this in not necessarily the only approach to making an animated signature, but it is the approach that I use. I will try to make the tut as clear and basic as possible, but I will be adding additional comments throughout the tut. If you are a beginner just skip them and focus on the main text.

The tut is written for Paint Shop Pro 7 and Animation Shop 3. I'm certain all this can be made in PSP 6 and AS 2 as well, but a few minor adjustments might be necessary. If you are an experienced user of PSP you will be able to adapt.

First of all you must download the pen that we will be using. It was made from a photo of a pen, I cleaned up the image myself and saved as a psp file and then zipped it. So there should be no copyright problems here. The zip contains two pens, actually the same pen in the two positions needed for this signature. They are both psp files and both PSP 6 compatible, which means that you can also use them in PSP 7.

The font I am using is called Van Dijk. You can use any font really, but script fonts often look very good in this type of signature.

Finally, I must tell you that it takes more than just a couple of minutes to make an animated signature, especially the first time you try it. But don't give up, if you stick to it you'll come up with a really nice signature to spice up your emails and web site.

Those were the necessary preliminaries, now let's get started!

1. Open up a new image in PSP: transparent background, 16.7 million colours, and 300 x 150 pixels. It's big and that's good because it gives us a lot of room to work on (we'll crop it later).

2. Click the text tool and click somewhere on the canvas. These are the settings I used (this image has been zoomed down, to see the image at it's right size just click it and a new window will open):

You can use another font or colour if you like, and a size that is appropriate for the font, but I recommend that you use the other settings as I do.

(Note: I have the antialias unchecked. This gives more edgy letters but is also easier to work with. You should leave it unchecked if you are not an experienced user. If you are an unexperienced user and choose to use the antialiased text which comes out smoother there will probably be a lot of left over pixels that you haven't noticed and thus a lot of cleaning up to do when you finish the animation).

3. Placing the cursor over the center little square that you see on the text press down the left mouse button and move the text to a center and upwards position on the canvas such as this:

4. Layers > merge > merge visible. You now have one layer, and it's a transparent raster layer.

(Note: My name is a strange one and lots of fonts will not let me write it correctly so I have to modify the writing sometimes. This is one of those cases. I will draw a line through the d to make it look like this ð which is the correct letter in my name. But don't let this confuse you, just follow the tutorial and ignore this line).

5. File > save as. I save the image right on the desktop and name it 1.psp (don't save as a gif or jpg file, save it as a psp file which gives the best image quality and which can be opened in AS).

6. Use the magnifier tool to enlarge the image so you can see the details clearly. It's important to be precise in the next steps.

Read this paragraph before you go on. We are now going to erase the letters piece by piece. We will erase the letters in the reverse motion that they were written. Afterwards we will assemble the frames in AS and reverse them so it looks as though the text is being written out in the normal fashion. It is important to keep in mind that if we erase too little at one time we will end up with too many frames and hence a very big file which isn't of any practical use. If we erase too much at one time the writing will not look smooth or natural.

7. Click the eraser tool . These are the settings I'm using:

8. Now erase a little piece of the last letter. This is how mine looks like:

Notice that I did not stop in the middle of the straight line in the 'n'. This is not necessary unless you have a very long straight line. It's much easier to erase entire straight lines 'from corner to corner' so to speak.

Save as 2.psp.

Now take a look at the next one.

Notice that I go all the way down to where the red arrow points. I don't stop in the middle of the line. Save as 3.psp. And take a look at the next one.

Notice that I leave one single pixel at the beginning of the letter right where the red arrow points. In the next frame this pixel will be erased. Then I will start to erase the letter 'u' in the same way. It's very important to remember to save every time you've erased a bit. Keep on doing this until there is only one pixel left of the first letter. Remember to save that frame too. I ended up with 27 images/frames, but you might have more or less depending on how long your name is and how much you erased at one time (a difference in font might also make a difference in the number of frames).

Now it's time to go into Animation Shop.

9. Choose the animation wizard and when prompted choose these settings: 'same size as the first image frame' > next > 'transparent' > next > 'upper left corner of the frame' > next >'yes, repeat the animation idefinitely' and set the time to 15 > next. Now use the 'add image' option to add all the psp images that you saved from 1 to 27 (or how many you had). Next set them in reverse order using the 'move up' and 'move down' buttons with number one as the lowest on the list and the highest number as the highest on the list. My list is like this: '27, 26, ... 2, 1'. Then 'complete'.

10. Highlight the first frame (that's what the images are called now that they're part of an animation) simply by clicking on it with the left mouse button.

11. Animation > insert frames > empty: 'number of frames' = 1, 'insert before frame' = 1 and 'blank to canvas colour'. You've now got a complety empty frame as the first one in the animation. There is an idea behind this.

12. Highlight the first frame by clicking on it. Now right click and choose 'frame properties' and set the display time to 60.

13. Go all the way to the last frame and highlight it by clicking on it. Click the 'duplicate frame' tool . You've now got two identical frames at the end of the animation.

14. Highlight the last frame by clicking it. Now right click it and choose 'frame properties' and set the display time to 250.

15. Now it's time to save your animation for the first time. File > save as. Name it and just save it right on the desktop. Chances are that the default settings are ok. If it looks weird then undo and click here to go to another tutorial that describes how to save (step 28-34).

16. Now highlight the second frame by clicking it. Export to PSP .

17. In PSP open both pen images that came in the zip file: they are called: 'pen011a.psp' and 'pen011b.psp'.

18. Highlight the first of the pens. Right click > copy.

19. Highlight the frame that was exported from AS by clicking it. Right click > 'paste as new selection' and place the pen with the tip just covering the one pixel that appears in the frame. You now have the pen with marching ants around it. Right click > 'update back to Animation Shop'. Close the image.

20. Do the same thing with all the frames except the first one and the last one. You don't have to copy the pen every time since it has already been copied to the clipboard, just paste it as a new selection to the exported frame. Be careful where you place the pen.

21. In AS highlight the last frame by clicking on it. Export to PSP.

22. Now click on the second pen to highlight the image. Right click > copy.

23. Highlight the exported frame. Right click > 'paste as new selection'. Place the pen below the name. IMPORTANT: notice the coordinates in the lower left corner of PSP. It is very important to be very precise. Write them down if you can't hold them in memory. My coordinates are: 125 ; 53, but yours might very well be different depending on where your name and pen are placed.

24. Right click > update back to Animation Shop. Close image.

25. Go back to AS, export the first frame to PSP and paste the pen to exactly the same coordinates as you did with the previous frame. Update back to AS and close image. You can now close down PSP.

26. It's now time to view the animation in AS. You do this by clicking . Notice if the pen moves while it is in the horizontal position. If there is a little jump you'll have to use the undo option until the error is erased and repeat the necessary steps. If the animation looks fine you are ready to crop it.

27. Highlight all frames by pressing ctrl+a. All frames should now have a blue (if you're using the default colours) edge around them.

28. Click the crop tool . With this tool draw a rectangle around the image (it will appear in all frames). It's good to get close to the image but not close enough to cut anything off. When you think it looks right double click within the rectangle and the excess will disappear. Now view the animation. If you've cut off too much just undo and repeat the step. If you've cut off too little, just cut some more.

29. When you're satisfied with the animation go to file > save as. Name the animation and specify where you want it to be saved. Save the way you saved the animation earlier.

30. You are now the proud owner of an animated signature that you have made all by yourself. Enjoy!

(This entire tutorial is © 2001 by Guðrun Jacobsen.)