Method for creating and installing animated gifs on a website

Method for creating and installing animated gifs on A website using Photoshop, Image Ready, and FrontPage

Updated 2002-06-16

I recently created a short animation of the solar eclipse of 10 June 2002. Because I found the explanations in the Photoshop/ImageReady manual quite incomplete, I wrote up the procedure that worked for me. There are probably a number of more efficient procedures, but they are not obvious to me. I would be happy to hear about them.

Summary: This method requires a series of frames of similar size and format. These frames are placed on individual layers in a Photoshop image. The layered image is then opened in ImageReady. In ImageReady, a sequence is created using the animation palette. Each layer is added to a sequential frame in the sequence. The whole is then optimized for the web, producing a series of gif frames. The result is saved, creating an html file (preferably as text and images, so that text can be added at the top and bottom) and a separate gif file. The html file is then edited with a web editor in the usual way and linked to other pages in the website.

Scan and save the original sequence images as tif files.
In Photoshop, open all of the sequence images. Save the first one under a new .psd file name.
Copy and paste each image in sequence on top of the new background image. Result: image #1 is Background layer; image #2 is Layer 1, image #3 is Layer 2, etc.
Align the images using the usual opacity and move tool techniques. (Remember to move the opacity back up to 100% before going on to the next image.)
Crop the final assemblage to the smallest possible size.
Change the Image Size to the final web display pixel size. Eg, for the solar eclipse, a 400 px square worked well. Save the whole thing as a psd file.
Jump to ImageReady (or open it separately). See page 301, Photoshop 6 manual. Open the psd file containing the multiple layers. On the ImageReady layers palette (identical to the PS layers palette), uncheck the eye from all the layers except the background.
Open the Animation palette and if necessary, create the first frame in the animation (it may come up automatically). Make sure it shows the first layer of the layers palette. If it shows one of the other layers, that other layer must be active. Uncheck the eye from the unwanted layer.
Now create a new frame (#2) in the animation palette sequence by clicking the new page icon. It will show the same image as frame #1. In the layers palette, uncheck the eye from the background layer and then check and activate layer #1 (the second one in the Layers sequence). Now the 2^nd animation frame should show the second (layer #1) image
Create another new frame (#3) in the animation palette as in step 9. Uncheck the eye in the layer#1 layer of the layers palette and check and activate layer #2 in the layers palette.
Repeat steps 9 and 10 until all the images (layers) have been assigned to independent frames in the animation sequence.
Assign timing to each frame in the animation thumbnail strip (0.1 to 0.5 sec seems good). Test it by clicking the run animation icons below the strip.
Optimize the animation as a gif file (page 309, col B, Photoshop 6 manual).
Save the optimized gif file as html (page 347, col A, Photoshop 6 manual) with a new name and place it in the appropriate website directory. Use the “save as html and images” option. Take note of the new name and which directory you put it in! You should find that both an html and a gif file have been created in the target directory.
In FrontPage, open the website and open the new html file you just saved. Using FrontPage, add the usual background color, titling, and comments. Save it, making sure it is going into the directory you think it is. Add hyperlink(s) to appropriate return pages.
Go to the linked pages and add hyperlinks to the new animation page, making sure the link is to the “html” page and not the “gif” file.
Test all the links and correct them if necessary.
Copy one representative frame from the original animation sequence to use as a thumbnail in the website directories. Use jpg with a low accuracy level to save space. Make picture and text thumbnails in the appropriate pages that link to the new animation page.

Good luck! Please let me know if this procedure does not work for you.

mailto:katzung1@attbi.com

Back