for creating and installing animated gifs on A website using Photoshop, Image
Ready, and FrontPage
I recently created a short animation of the solar eclipse of 10 June
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.
and save the original sequence images as tif files.
Photoshop, open all of the sequence images. Save the first one under a new .psd
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.
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.)
the final assemblage to the smallest possible size.
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.
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.
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.
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 2nd
animation frame should show the second (layer #1) image
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.
steps 9 and 10 until all the images (layers) have been assigned to
independent frames in the animation sequence.
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.
the animation as a gif file (page 309, col B, Photoshop 6 manual).
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.
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.
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.
all the links and correct them if necessary.
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.