I did a blog about "What's so good about the rain?" a few weeks back and I was asked if I could make a tutorial on how I made the animated image and share it with everyone. So here I am doing just that, however, as I do this tutorial with you, I will be doing my next "Whats so good about the rain? #2". So be watching for that as well!
First off, I use Paint Shop Pro and Animation Shop make, fix and animate my images. I will first use Paint Shop Pro to make the changes to my images adding text, color, combining images if I need too and then save them all as JPEG files (you need to try to keep the images close to the same size if possible for what I am doing, however it depends on the project and your personal preferences as well). Once I got all the images ready that I want to use for my animation, I open the Animation Shop. I will give you photo tutorials and step by step
instructions.
Note: Remember only GIF formats can be animated. GIF is CompuServe Graphics Interchange.
Go to file in the top left corner, click on that and a window list pops up. You want to click on Animation Wizard, even though it is a new file, the wizard is the easiest to use. Once you click that.......
You have two choices, "Same size as the first image frame" - with this one, you will be okay choosing it as long as your first frame is going to be the largest image you have for your project. The other choice "As defined here:"- with this one, you can choose the size of the frames, especially if you have images of all different sizes but your largest image is not going to be the first frame. Make sure the dimensions you choose will be large
enough to show the largest image or it will cut some of the image out. Once that is done click NEXT.
Note: A frame is one image. An animated image is made up of several images, that create the animated effect. For example, the project that I am doing, it has 17 images total that I will be using, so that means there will be a total of 17 frames.
This will be your background color, however, I always leave it on Transparent because the images that I will be using already have the background color I want, plus when putting the animation places it will use that background color. If you want to use a background color simply click on Opaque then click on that red box and color box will pop up for you to choose the color. Once you have decided what you want...click NEXT.
The next step asks you where you want each image to be located, upper left corner or the center of each frame. I like my images centered in the frames, again this is personal preference and depends on the project you are doing. The next question asks you, if your images are only occupying a part of the frame do you want to use the canvas color that you chose a few steps back or do you want to fill the background with content from the preceding image. I always choose the canvas color. I want all my frames to fit so I always make sure that scale frames to fit is checked. Ok, your ready to click... NEXT.
Okay here, it wants to know, do you want to have the animation repeat indefinitely or do you want it only to play a few times. That is again your
personal preference. Personally I like mine to repeat over and over, that way if someone missed something they can keep watching and it will show it again. The next step, wants to know how long do you want each image to be displayed before it goes to the next image. Keep in mind it is in 1/100th of a second. I will choose to use 325, again you choose what you think is best for your project. Sometimes you just need to test it and play with the display time until you get the duration you want. Click NEXT.
This is where you will choose your images that you want to use. Click on Add Images, another window pops up letting you browse your computer to choose your images. Now instead of doing 1 at a time you can hold down the CTRL key on the keyboard and click on every image you want then click open. Once all the images are in the white area there, you can
situate them in the order you want them to be displayed in by using the Move Up and Move Down buttons. Once you have them in order, click NEXT.
The next step tells you, that it is ready to build your animation, however depending on how many frames you have this can take a few moments. Just click FINISH. Once it is done you should see something like this below.
At the bottom of each image, you will see F:1 that is telling you which frame that is. The D:325 tells you how long your display is for that particular frame. Now you see that little red arrow at the top pointing to that black/red icon. That is the preview button, click that and you can watch your animation in action! You are ready to save the file now.
Go back up to file and click save as.. and when that window appears, choose your file name and make sure the "Save as
type" says CompuServe Graphics Interchange (GIF). There you go, you can now make an animated graphic.
"Success never happens in a straight line. There is always going to be twists and turns, ups and downs. Just remember that conquering those will make you successful!"
Marey Hoeppner -Virtual Assist Expert
