Edit Article

wikiHow to Create Animations Using Adobe ImageReady CS

Community Q&A

You can create animated .gif animations with ImageReady, however, Adobe has done away with ImageReady and incorporated it's tools into Photoshop for the release of Adobe Creative Suites 3+. Whichever program you're using, most tools and pallets are the same.


  1. 1
    Create a document. Saving a .psd or .tif will usually also save all animation and settings. Save often to avoid losing your work. This is a 'working file' and will not be your final animation file, so feel free to experiment with different things.
  2. 2
    Create elements. Always plan ahead. Draw, type, or otherwise create separate layers for your design elements. Anything that will move or change should likely have a layer all of it's own. Depending on your program version, you may or may not need a new layer just to move something from the left to the right. If in doubt, plan extra layers.
  3. 3
    Familiarize yourself with the Animation Pallet. This pallet has several key uses:
    • Duration Under each frame, set the duration of the frame in seconds (usually).
    • Repetition Set how many times you would like the animation to repeat each frame - 'once' to 'forever'.
    • Playback Test your animation as you go along.
    • Motion Tweening Advanced users can create a motion tween, which is something like an automated creation of frames to produce a preset animation effect.
    • Frames Use the sticky-note-looking button to create a frame. One frame for each bit of animation. Use the trash-can-looking button to delete a frame.
  4. 4
    Use it! For each frame in your animation pallet, turn layers on and off as needed.
    • Example: Frame 1, turn on layers 1 and 3. Create a new frame. Turn off layer 1 and turn on layer 2. Create a new frame. Turn off layer 3 and turn on layer 1, etc.
  5. 5
    Save your .gif. Depending on your program version, go to the File menu and choose either 'Save for Web', 'Save for Web and Devices' or 'Save Optimized As...' Don't forget to also save your .psd or .tif with your final adjustments - it will remember!

Community Q&A

Ask a Question



  • If using Photoshop, an optimization window will usually appear allowing you to customize your .gif file for colors and file size. If you're using ImageReady and would like to use Optimization settings, there is a pallet to use before-hand. Optimization is not always necessary, but is sometimes helpful.


  • It's always the best idea to have your entire animation ready before adding frames. Editing layers and frames is much harder once you have multiple frames. Avoid changing the layers contained in the first frame of animation as it will usually automatically change the rest of your frames by default.
  • This How To contains information based on previous knowledge of designing with layers in Adobe design programs.
  • Keep in mind that .gif animations should be basic. Any .gif files beyond 250k (a common, but subjective limit) will take a while to load and are probably worth creating with a different program like Flash.

Article Info

Categories: Adobe Software

In other languages:

Русский: создать анимацию с помощью Adobe ImageReady CS

Thanks to all authors for creating a page that has been read 11,926 times.

Did this article help you?