Tutorials
To Make A Blinking Animated Avatar (Without Transparency)

Okay. Since my first tutorial didn't seem to be so bad, I decided to try my luck and make another one. This tutorial will tell you how to make a tutorial with an animation, but without transparency. The programs used in this are Jasc Paint Shop Pro 7 and Jasc Animation Shop.

Step 1
---------
First off, get a picture that you would like to use. For the avatar in this tutorial, I used this picture. Right click the picture and go to 'copy'. Once you have your picture, open up PSP7 and right click and put 'paste new image'. Now go to your selection tool.

Don't forget to check your tool options palette (View>>Toolbars>>Tool Options Palette) and make sure your settings match mine:

Pick out a part of the image you want to be avatar. Use the selection tool to select this part of your image. To select it, click on the top left corner of where you want the avatar to start and drag the mouse down and left to the other while holding the mouse button down. Then let the button go, and you should have your selection.

Now minimize your big picture. Right click and go to 'paste as new image'.

The selection that you made and copied will now be pasted as a completely new image.

There's just one problem that we have to take care of before we can start having some fun. Since avatars are only 100x100 at most places, we need to resize this picture. So go to Image>>Resize and set the height to be 100.

< Set the height to 100. Don't worry about the width unless it's less than 100. If it is, set the width to 100 and ignore the height. If they're both less than 100, then your image was too small to begin with and you need to go reselect it, making it bigger this time. Also, try to make it as close to a perfect square as you can when you select it. And as a last thing, set the maintain aspect ratio when you resize your image.
So your image is resized, and it's about avatar size now.

Step 2
----------
Allright, go to File>>New and set the following:

Hit okay and a new image should pop up.

Take your avatar image and right click on it and select copy. Then go to the new image you made, right click on the image bar and go down to 'paste as new layer'.

Then go up to Layers>>Merge>>Merge All (Flatten), since you don't need multiple layers for this type of avatar.
As an optional step, you can put a border around it, using your draw tool.

You can refer to How To Make An Avatar with Transparency for the settings for the draw tool. This is how my avatar looks with a border:

Step 3
----------
Now we get to add the words. Yay! Go and select your text tool.

Click on your image wherever. A text box should pop up, like this:

Select your preferences: color, font, size, alignment, styles, whatever. Make sure you create it as a floating selection. Once you've got everything set, type whatever words you want in your avatar. Click ok. Your text will appear on the image as a selection. Drag it to wherever you want to position it, then hit Ctrl+D. This will deselect the text.

Technically, we could be done with our avatar now. Only it wouldn't be animated. And since that's what we want to do, let me tell you how.

Step 4
----------
First off, before we start the process of animation, save your image. I don't care what you call it, but whatever you call it, you must save it as bitmap (.bmp). This is important for the animation.
So you've saved it? Good. I'll now proceed to discuss two different ways of animation. The first is a bit more simple, and won't consist of but a few frames.

A Flashing Animation

Click on your text box again. Your text is still there, and all your preferences are still the same. Don't change any of them, except for one thing. Pick a different color. I used blue before. I want it to flash red now. So I change my color to red, and once again I hit ok. Then I position the text over the blue text, like this:

Don't forget to hit Ctrl+D to deselect it. Once it's deselected, save it. But don't save it as the same thing. I originally saved mine as Image9, now I'm saving it as Image9a.
Ok, so you've got all the frames you need for this one. Skip the part of this tutorial that explains the other animation, and go on down to Step 5.

A Letter by Letter or Word by Word Animation

So here's what you do. You've saved it as bitmap, right? Click on your text box again. Your text is still there, and all your preferences. Go and change the color to what you want it to flash. I used blue before, now I want it to flash it red.
Now, depending on how many words you have or how you want it to flash, decide whether you want it to light up word by word or letter by letter. Also, you don't have to make everything animated, you can just animate one of the words letter by letter if you want. Because I'm lazy, I'm just doing it word by word.
Erase all the text you had in there previously. Now type in the first word or letter of your phrase. My phrase was "I'm a... Sloane Clone!" (It's a joke based on a webcomic). Since I'm doing this word by word, I'll type in the word "I'm". Line up the new text so it fits exactly over the old one, and Ctrl+D it.

Now that you've done this, save your image as something different. I saved mine as Image10 before, this one I'll save as Image10a. Always save it as .bmp. Then click on your text box again and input the next letter or word and once again, line it up over the old word. Save it, as something different. Mine is Image10b. Starting to get the picture? Keep doing this until you've replaced all the words or letters with the new color. You have to save after every word or letter, otherwise your animation will look funny. If you forget to save after one, you have to undo everything (Ctrl+Z) until you get to the one you missed, save that one, and redo the rest, resaving them all. Quite a hassle. So don't forget to save, okay?

So you've got them all saved. Now we move on to Step 5.

Step 5
---------
Minimize PSP7 and open up Jasc Animation Shop. Go to File>>Animation Wizard. Set the following:
+Same size as the first image frame
+Transparent
+Upper left corner of the frame
+Yes, repeat the animation indefinitely, for 20 in 1/100th of a second

These are generally want you always want to set for your animations, though sometimes you might want to fool around with the 1/100th of a second time. So after you've set all those, you've come to this:

Click on the add image button, and find the folder where you saved your images. If you made just a flashing animation, add those two frames about three times. So for me, I would add them like this: Image9, Image9a, Image9, Image9a, Image9, Image9a.
If you did the other animation, add each of those frames only once. Mine would go like this: Image10, Image10a, Image10b, Image10c, Image10d, Image10e.
Either way, once you've got them added, hit "Next". Then hit "Finish". Something like this will pop up:

Now to see that it looks okay, go up to View>>Animation, and make sure that you like the way it looks. If it is too fast or slow, go back to your frames and hit Ctrl+A, then right click on the image bar and go down to Frame Properties and check the time. The higher you go, the slower the animation goes. Once you're satisfied, save it as .gif. If this is the first time using Animation Shop, an Optimization thing will come up. Just keep hitting Next ^^

And that's it. You're done. You now have an animated avatar. Or if you want, you can combine both of these effects. Have it animate word by wordxword or letter by letter, and then flash a couple of times at the end. The effect would be like this:

But whatever you decide, just make sure you like it =P

This tutorial and all contents found within are Š2003 to satori and are not to be reproduced in any way without permission.