Webwork
/
Photoshop - GIF Animation

In addition to its ability to compress large graphic files, a single GIF can contain multiple images and display them sequentially making it a useful format for simple frame animation.

As with other types of animation, you first need to make a series of individual frames/drawings and then save them as a single GIF. Photoshop has tools that make this easy.

Photoshop Layers:
anima_layers
Individual Images:
a an ani anim anima

To export the animation, open Photoshop's Animation palette:

animation_palette

In the Layers palette, select the items you want to appear in Frame #1 of your animation.

photoshop-a

In the Animation palette, create a new frame and, in the Layers palette, select the items you want to appear in Frame #2 of your animation.

photoshop-an

Keep going until you're done. At this stage, this animation has a total of 5 frames:

photoshop-anima

Tuning the Results

Once all of the frames are in the Timeline, play the animation to test pacing. This animation needed a pause between cycles so an empty, 1-second frame was added at the beginning and a 1-second pause was added at the end.

anima_tuned

Once the animation is tuned, you save it as a GIF using Save for Web and Devices.

Source:
<img src="a-n-i-m-a.gif" width="336" height="98" />
Web page:
a-n-i-m-a

Variations:

Source:
<img src="anima-fade-in.gif" width="336" height="98" />
Web page:
Source:
<img src="anima-dropdown.gif" width="336" height="98" />
Web page:
Previous | Webwork Table of Contents | Next >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma