An Animated Website Logo With Jasc Animation Shop

Project Information: • Skill level: Intermediate • Corel^R Jasc^R Animation Shop^TM 3 • You will need 2 images for your logo (width: 200 pixels, height: 200 pixels)

In this tutorial you will make a simple animated logo for your website. All you need are two images and Jasc Animation Shop 3. These two images could be anything you wish. For example I have used two images that I created with two very different graphics programs; UltraFractal and Paint Shop Pro. However, if this animation is for your business site, you could use your business logo and an image of your best selling product. The animation will switch these images repeatedly and your website logo makes twice the impression.

Click Start > Programs > Jasc Software > Animation Shop 3 to open the program. If you have created the images for your animation with Paint Shop Pro (.psp or .pspimage) you can import them in this format. If you are creating the images in another graphics program, you can save the images in the bitmap format (.bmp) which can be easily imported into Animation Shop.

Step 1. Animation Wizard. You will use the program's Animation Wizard to create this simple animation. To open the wizard click File > Animation Wizard on the Menubar. The wizard will walk you step-by-step through the process.

Panel 1. Set the dimensions. On this first panel you will set the dimensions for the finished animation. You can manually set the pixels for the width and height. However, because the two images for your logo are the same size, you can simply tell the wizard to use the dimensions of the first image that you import into the program. Click the radio button next to "Same size as the first image frame" and click Next.
Panel 2. Color of background. Here you have two options to choose from. If the images that you are using to make your animation are different sizes, then the program will automatically compensate by creating a border around the smaller image. In that case you will need to choose a color for the background/border. However the two images you are using for your logo are the same size, so you can use the transparent option instead. Click on that radio button and then click Next.
Panel 3. Placement of the images. Here your have two options also. If your images are different sizes you might want the smaller image to be centered inside the animation frame. But your images are the same size, so you can choose the following options and click Next.

Upper left corner of the frame
With the canvas color
Panel 4. Loop and timing. You will want the animation to loop continuously. Set the radio button to "Yes, repeat the animation indefinitely". You also need to set the speed at which the frames will change. A good speed for a two panel animation is 200. Set this number in the box and click Next.
Panel 5. Import your images. Now you are ready to import your images into the program. Click on the Add Image button to open the Open dialog box. Click on the first image for your animation and click the Open button. Repeat this for the other image. The order that you import the images will be the order that the images will be displayed in the animation. When you have imported both images click Next and Finish.

The Animation Wizard will create a strip of the two animation frames. To preview the animation click View > Animation on the Menubar. Now click the X to close the preview.

Next →

Jasc^R material used by permission of Jasc Software, Inc. Copyright ©1997-2000 Jasc Software, Inc. All Rights Reserved. Paint Shop Pro, Animation Shop, Paint Shop Photo Album, Paint Shop Pro Studio and Jasc are registered trademarks of Jasc Software, Inc.