Posted by Brightlemon Admin on 20 Jan, 2009

In CS3 Image Ready has been discontinued and instead many of it's features are now included as menu items in the main Photoshop program. The tutorial contained in the this blog can still be followed using CS3 but instead of jumping to Image Ready, simply choose 'animation' from Photoshop's 'Window' menu.
In these days of super sophisticated flash movies and real time streaming video, it's easy to over look the humble animated gif.


There are however situations where the easy of editing, small file sizes and more importantly accessibility of the animated gif come in handy.


If you own a copy of Adobe Photoshop which shipped with it's sister web optimising program, Image Ready you are just a few clicks away from easily creating an animated gif.


In essence, the principle is to create a PSD document in Photoshop with each stage (or frame) of your animation on a separate layer and then in Image Ready you are simply turning layers on and off to build your animation. Once happy you save as a gif and 'hey presto!'

We're going to create the simple animation below.


1. Firstly Open Photoshop and a new blank psd file. Create a new layer for each frame of your animation; Here I'm building a simple animation of a audio bar meter where the bars will rise in sequence as they might on the led read of a stereo hifi system. Each 'bar' shape is on a separate layer.

01-psd-all-blocks

2. In the layers pallet of Photoshop, turn OFF all layers other than the one needed for the first frame of your animation and the background if you have one.

02-psd-layers-1-block

3. At the foot of the main tool pallet in Photoshop, click the button shown below to launch Image Ready in a new window

03-image-ready-button

4. From Image Ready's top menu bar choose Window > Animation, to turn on the animation pallet in the main workspace

04-image-ready-ani-window

5. You should now have visible your psd showing the layers you want in the first frame of your animation and also the Image Ready Animation pallet

05-ani-01

6. The Animation pallet in really easy to use, so let's get on with it. Click the 'new frame' button shown below to create a new frame of animation

06-ani-02

7. With frame 2 of your animation selected, turn on the layers needed in the layers pallet (exactly the same as the one in Photoshop)

07-ani-03

8. Repeat this process until all the frames you need are shown and all have the correct layers shown or hidden. Hit the play button (as shown below) and you will see a preview of your working animation.

08-ani-05

9. If the animation appears to be 'playing' either too fast or too slow, you can alter the duration of all or individual frames by clicking the small arrow next to the current duration of the frame (shown in seconds or fractions of.) To change the duration of all frames at once, first select all the frames by clicking on the first and then shift clicking on the last.

09-optimize

10. When you are happy with your animation you can choose to optimise the file using Image Ready's Optimisation pallet before saving

10-image-ready-export

11. When you are happy, choose 'save optimised' from the main Image Ready menu and save your finished animated gif.

12-save-psd

12. Also it's worth noting that although you have been editing the file in Image Ready, it is still the same PSD document you created in Photoshop and any changes made in Image Ready (including your whole animation settings) can (and should) be saved with the PSD for future work. From the main menu choose 'Save' or 'save as' to save you document. (again to confirm THIS WILL SAVE A PSD FILE as Image Ready has no native format.)

13. .. And after all your hard work, it's also worth opening your finished animated gif outside of Photoshop or Image Ready to check everything is working. You should see something with a similar effect to the animation below.

11-working-animation

Tags: Animation

GET OUR NEWSLETTER