Animation

Photoshop Elements can be used to create an animated Web graphic. Animated Web graphics tend to fall mainly into two categories

bullet

Slide Show Animations - this is a great way to show more than one picture on a Web page.
bullet

Heidi Buchwald's Classroom Web Site - from Emerald Park Elementary (scanned hand-drawn images)

bullet

Daniel Elementary - KidPix images

bullet

Cell animations - these are what you would usually think of for an animated Web graphic where things appear to be moving
bullet

Science flask - from Carrie Wattles's Kentwood High School Web site

(Note: if you're viewing this in printed form, there is an airplane flying through the scene in the Web browser.)

Once you've decided what you want to animate, collect your images and follow these steps:

bullet

Put each image (for each frame of the animation) on a separate layer. To do this you can have the image on one layer, make a duplicate of that layer (Layer > Duplicate Layer), use the move tool to move your image, and use the features under the Image menu (like Transform > Free Transform or Rotate > Flip Horizontal) to make the changes in each image.

bullet

Choose File > Save for Web or click the Save for Web button in the shortcuts bar.
 

bullet

Choose GIF format. You cannot animate a JPG image.

bullet

Select the Animate option.

bullet

Set additional options in the Animation palette:
bullet

Loop to continuously repeat the animation when viewed in a Web browser.

bullet

Frame Delay is the amount of time each frame is displayed. You can use the predefined ones in the list or type in your own (for example, .25 is one quarter second).

bullet

Click on the Preview in Browser to test out your image before saving. You can try different options this way before saving.

 

horizontal rule

Home Text Photos Project Ideas Tutorials Screenshots Buttons Web Gallery Image Maps Animation