Web Design   Web Hosting   Photoshop Tutorials   Free Fonts   Drawing Basics  
Photoshop Tutorials - Free Fonts
[Read Me First!]
[Photoshop Tutorials]
[Canvas Tutorials]
[Corel Tutorials]
[Quark Tutorials]
[Illustrator Tutorials]
[FreeHand Tutorials]
[Drawing Basics]
[Porting Files]
[Free Fonts]
[Font Tutorials]
[Misc Tutorials]
[About Mike]
[Related Sites]

  Miscellaneous Animation Tips and Techniques - Part Four

Tip No. 5

Use a vector drawing program to create the image frames.

Make the frames one at a time, duplicating the previous one as you go.
Choose "anti-aliasing" when exporting frames if smooth edges are desirable.

Click here and here for examples of using a vector drawing program to create animation frames.

You can still use a vector drawing program to rough out the motion in an animation even if you plan to use an image editing program to paint the frames.

Tip No. 6

Some programs support "onion skinning". This is a feature that makes adjacent frames appear transparent so you can see more than one frame at a time and help you line them up.

Below is a sample of onion skinning with Macromedia® Fireworks®.

Activate Onion Skinning in the
Frames Panel
You will see the effect in the
Document window

Tip No. 7

Use a rectangle as a common frame of reference when creating the frame images.

This way each frame image will be the same size. When loaded into an animation program all the frames will line up and all the motion will be relative to the same space. If you don't use a common frame of reference and export each frame image using only the objects in the animation, you'll have no way to line them up.

If you don't want the rectangle in the finished animation then use ImageReady or Fireworks or other program that supports cropping to get rid of it. An animation program that supports cropping, will crop all the frames at once.

Tip No. 8

Use Adobe® Photoshop® or ImageReady™ to resample images (ImageReady will create animation frames from a layered Photoshop image). Adobe Photoshop or ImageReady does the best resampling.

Tip No. 9

Crop and resample AFTER you assemble the frames, not before.

If you use a rectangle as a common frame of reference, wait until you assemble the frames before cropping or resampling. Not all animation software supports cropping and resampling.

Tip No. 10

When making an animation that contains text using fonts - especially small text - use Adobe Illustrator® to make the frames. Adobe Illustrator has the best text rendering engine of all and small text will render very legibly. Every graphic application renders text differently - some better than others. Not all vector applications were created equal. Don't create text in an image editor.

The text in this animation was
rendered using Adobe Illustrator.

Tip No. 11

Use a background matte color when making frames containing anti-aliased objects and which have transparent backgrounds (click here for what a matte color is and how to use it).

The frames used in the following animated GIF were created in CorelDRAW®. The background was set to gray because the animation was to be displayed over a gray background. When each frame was exported as a transparent GIF, CorelDRAW blended the anti-alised pixels into the background color. In this fashion, the background color functioned as a matte. Click here for the tutorial.

Tip No. 12

Take advantage of porting animations from one format to another or from one program to another. Here are links to some tutorials.

Porting Animations Overview and Strategy
Animation Software - Supported Features and Formats
Porting a QuickTime™ Movie To Jasc® Animation Shop™
Porting An ImageReady Animation To Fireworks
Porting an AVI Movie To QuickTime Format With ImageReady


Previous   Home    Contact Mike   Related Sites    Next

Copyright © 1998-2016 Mike Doughty, All Rights Reserved Legal Notices
Page Last Revised: October 26, 2016
Privacy Policy