PI6 Animation Studio Fun

Skater Girl drawn by Amber KindigThe Animation Studio gives you a way to create stunning, eye-catching GIF animations for your web pages or to use in livening up presentations. This tutorial shows how to make a sampling of three animations: Puzzle, Signature and Droplet. The first example in this tutorial use this skater girl which graces the cover of my book, "Skating Through PhotoImpact 5.0." The skater girl was drawn a very talented young artist, Amber Kindig.

Before we get started, a few words of wisdom. If you plan to put the animation on your web site, stick with a smaller image. These are high quality animations, which require lots of frames. The bigger the original image and the more frames, the larger the file size will be. It's not unusual for these animations to weigh in at 200-300 kb, and not all visitors to your web site will wait that long to view an animation.

Open the image you plan to animate and choose Effect, Creative, Animation Studio, then click on the thumbnail for the Puzzle effect. Alternatively, from the EasyPalette's Animation Gallery, right click on the Puzzle thumbnail and choose "Modify Properties and Apply" to open the Animation Studio dialog box. 

Click the Play button (arrow) to view the animation in the preview window. You'll see that the default background is black and that few of the upper right tiles are rearranged during the animation. The animation will only play one time.

Click play button (arrow)

Let's edit the Attributes of the animation a little. Leave the Switches (number of times the pieces move around before becoming whole again), and the Columns and Rows at the default values. To get the animation to start toward the middle instead of in the lower left corner, edit the Seed value to 35. Leave the Level (magnitude of disarrangement of the puzzle pieces) at 100 to create lots of changes. 

edit attributes

To edit the background color, click in the Color box and select Eyedropper. Bring the cursor into the Preview window and select a blue from the girl's skirt. To keep the animation playing, you have two choices: (1) having it go foward then reverse, over and over; or (2) having the animation repeat itself continously. Under the Key frame section, click the option for the animation to repeat continuously (see arrow).

continuous play option (arrow)

Click the Play button now to see the results of custom editing. The animation will look very different now. Click the Stop button (to the right of the Play button) to stop the animation. To save it, click the Save button. Doing so opens the Save As dialog box.

Save As dialog box

Give the animation file a name (e.g., aniskater) and leave "Animated GIF Files" selected in the "Save as type" box. The GIF animation options section show that the animation will be saved with 256 colors, Infinite loop, with a Frame delay time of 1/10 second per frame. The background will be Transparent, and Dither and Interlace are both selected. Leave these defaults as they are and click Save to save the animation, which is shown below. 

animated puzzle

Next, let's create an animated signature. If you have a drawing tablet, this would be a good time to use it, as it's much easier to write with a pen than it is with the mouse. Choose File, New and create a new file 200 pixels wide X 50 pixels high. Choose Effect, Creative, Animation Studio, then click on the thumbnail for the Signature effect. Alternatively, from the EasyPalette's Animation Gallery, right click on the Signature thumbnail and choose "Modify Properties and Apply" to open the Animation Studio dialog box. 

edit pen attributes

Leave the Smooth value at 3 -- higher values smooth out the angles in your writing and can result in loss of detail in the letters. Note that the Size is 20 on the first key frame diamond, but it's 100 on the second key frame diamond. Click on the second key frame diamond to select it and edit the Size to 20. That way the writing will stay the same thickness throughout the animation. Leave the Level at 100, which displays the signature at its largest size in the base image. Click in the Pen color box and select black or another color. Move your cursor over to the Preview window and sign your name. If you make a mistake, click the Clear button and try again. When you're satisfied, click Save to open the Save As dialog box. 

animated signature

Give the image a name (e.g., anisignature) and save it. I left "Infinite looping" selected so the animated signature, shown at left, would loop continuously. To slow the signature down, increase the Frame delay time to 20/100ths of a second or more.

For the third Animation Studio animation, I'm using this underwater image taken by a friend.

underwater image

Choose Effect, Creative, Animation Studio, then click on the Droplet thumbnail. Alternatively, from the EasyPalette's Animation Gallery, right click on the Signature thumbnail and choose "Modify Properties and Apply" to open the Animation Studio dialog box. 

Click on the Play button to view the animation. You'll see that while it's pretty, the ripples are not particularly pronounced in the animation. To get a more "watery" look, we'll edit the Attributes of the animation. 

edit Droplet attributes

To increase the number of ripples, change the Amount value to 3. Edit the Light value to 10, since a higher value will make the ripples more visible. Let's go for really big disturbance for the ripples by editing the Warp value to 175, almost to the maximum allowed. Leave the default Thickness and Size values as they are.

At the bottom of the dialog box under the Key frames section, click the option for infinite looping (arrow).

infinite looping

Now it's time to save the image and do a little file size surgery. Click the Save button. When the Save As dialog box opens, select the option to "Open with Ulead GIF Animator." Give the animation a name (e.g., aniwater) and click Save. It will take a few seconds for the GIF Animator to open. To get an idea about file size, click on the Optimize tab. 

big file size

You'll see that this little animation is a whopping 405,532 kb! No matter how beautiful it is, no one except maybe your mom is going to wait around for this animation to download on a web page. Let's see if we can pare it down a little in GIF Animator by selecting File, Optimization Wizard or just click on the Wizard button. Step through the wizard leaving all of the default values, including 256 colors.

slightly smaller file size

Well, we saved a little bit in file size but it's still too big of a file for a web page, 353,072 kb. Click "Another Try" and step through the wizard again, leaving all of the defaults, but changing the number of colors to 128. Again, some file size reduction, but it's still 290,792 kb. Click "Another Try" and do it again, this time with 64 colors. You can get it down to 230 kb this way, but if you click on the Preview button, you'll see that by reducing to only 64 colors, the image looks blotchy with a lot of color banding. Click Cancel.

Now we'll try removing some frames to make the file size more manageable. Select (highlight) Frame 2, then choose Edit, Delete, or just right click on Frame 2 and Delete. Drop down to select Frame 4, then Edit, Delete. Repeat for Frame 6. Highlight each frame and change the Delay to 20/100ths of a second. Slowing down the frame delay will reduce the "jumpiness" that results from deleting some frames, creating a smoother animation. 

Choose File, Optimization Wizard again. Step through the Wizard again, leaving all of the defaults, except change the number of colors to 128. Now the animation is down to 203 kb, a file savings of 28%, or 80 kb. 

reasonable file size

Click the Preview button to preview the animation. It looks pretty good, indicating that we've achieved a reasonable balance between file size and image quality. Click Save As and save the animation, shown below.

The Animation Studio effects are a lot of fun to play with. Try them all out!

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage