Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Animated GIF

VCA225 Digital Production

Exercise: Animated GIF

Most web savvy folks agree that the PNG is a superior format to GIF; if can do everything a GIF can do save one thing—animation. In this exercise we will create an animated GIF. For our subject, we will use a sequence of photos shot by Eadweard Muybridge, a pioneering 19th century photographer.

Procedure

1. Download this zip file; it contains several photographic sequences by Muybridge. Unzip the file and then pick one to use for this exercise.
2. Open the file in Photoshop.
3. Drag guides and position them between all of the image frames.
4. Choose the Slice tool. In the Options menu at the top of the page, press the Slices From Guides button.
5. Choose File > Save for web and devices.
6. In the dialog box that appears, select all of the slices (with the Slice Select Tool). For the format, choose JPEG, maximum (100%) quality.
7. Press Save. In the "Save optimized as" dialog box choose the "Images Only" option (at the bottom). Also make sure to save "All slices." Press Save again. Photoshop will create a separate peg from each slice and place them all in a folder called "Images."
8. Close the Muybridge image (you don't have to save it).
9. Choose File > Script > Load files into stack; in the dialog box that appears navigate to the Images folder you just created and select the images inside of it. They will all load into a single document—one image per layer. Make sure all of your layers are turned on.
10. Open the Animation palette. Create a new animation frame (press the "post-it note" button on the bottom). Select this new frame and hide the top layer of your document; this will put the second layer in the second frame. Set the delay under the picture to .1 second (this is the amount of time until the next frame plays).
11. Create a new frame and hide the next layer. Change the delay to .1 sec. Continue to add frames, turning off one layer at a time until you reach the bottom (final layer).
12. Press the "play" button in the Animation window to see if it works. If your animation seems a little uneven or jumpy you can click on the frame you wish to adjust and nudge the layer slightly.
13. Choose File > Save for web and devices. Select GIF as your file format. use as few colors as you can and still have the image look good.
14. Once you've save the GIF you can quit Photoshop.
15. Put the animated GIF in your root folder. Now create a new html page and put the GIF on it (link to it like any other GIF or JPG). Save the page as "animatedGIF.html" and upload it (and the GIF) to your site.
16. Update your home page: add an Animated GIF link and point it to the page you just created. Option: put the GIF on your home page instead.

Course Outline

Syllabus

Student Resources