As of August 1st, 2008, the Edutech web site will no longer be updated. Edutech was funded by the Swiss Virtual Campus programme, which ended on July 31st, 2008. Some activities will be taken over by the e-Learning Services group at the SWITCH foundation.
Create animated Gifs with ImageReady
Introduction
Keywords: ImageReady, animated Gif, animation
This page helps your to quickly create an animated gif with the Adobe ImageReady. The images that you want to show at this simple animation will have to be prepared before hand with other image editors. For examples and more information see Daniel Lawniczaks page Animierte Buttons und Menüs or Boutons et menus animés (animated buttons and menus).
Creating animated Gifs
- Open ImageReady from Adobe (comes with all recent version of PhotoShop).
- Open your base picture (jpg will do fine). It will appear on the screen and will be inserted into a storyboard like window in thumbnail format at the bottom.
- Open the next picture. Copy its content into picture one,
your base picture. You will see that a second layer appears in the
layer window at the bottom of the right side.
- Add a new frame to the story board - for each of the
layers that you add - and make sure that only on eye-icon is visible in
this layer
frame, when you click a frame (thumbnail) in the storyboard. The
eye-icon
should belong to the layer that corresponds to the frame in the
storyboard. To add a new frame select the little black arrow at the
right side of the
storyboard and chose new frame.
- Add more pictures (layers and frames) the same way.
- If you want to end the animation with a colored frame (or a transparent one) you
need to create an empty frame and fill that with color. Chose "New Frame" in
the "Animation"-window below.
- Chose the length of display time for each frame individually in the storyboard by clicking on the number below the corresponding frame.
- Reduce the number of bytes in choosing the adequate settings in the "Optimation" window in the upper right corner of the screen. Gif-Web-Palette is the lowest, but also in quality.
- Select the little black arrow at the right side of the storyboard and chose "Optimize animation" in the appearing context menu.
- You should keep the default option: "Delete redundant pixels".
- Save the layered image for further editing (in the Photoshop format psd) with the "Save" or "Save as..." submenu in the "File"-menu.
- Save the animated Gif with the "Save optimized version" or "Save optimized version as..." submenu in the "File"-menu.
- Open the gif-file with a web browser and control the effect.
 "Click image to start animation")