|
This lesson demonstrates how to optimise and save animation image-frames. The screen captures depict animated fire text; however, instructions are identical for all animation frames, the difference will be the number of frames, and the object you are animating.
Optimising/Animating/Saving Animations - Photoshop CS and CS2 Using ImageReady
Optimising/Animating/Saving - Inside Photoshop CS2’s Interface - Without ImageReady
Optimising/Animating/Saving - Photoshop CS3 (& Extended) Without ImageReady
1/ Animating In ImageReady - Photoshop CS and CS2 Only
Open ImageReady by left-clicking the following Edit in ImageReady icon - at the foot of the toolbar.
ImageReady will open, and your (layered) image will open onto its workspace.
To display the Animation palette; (from ImageReady’s top menu), choose Window and click a tick before Animation.
Important
From ImageReady’s Optimise palette.
Ensure you set the Format to Gif. If it is not set to Gif, you will be unable to save your animation.
2/
ImageReady’s workspace will resemble my screen capture - or it will display your image-frames, in a similar way.
3/
Now, left-click the following tiny black arrow at the top-right corner of the Animation palette.
4/
And from the drop-down list, click Make Frames from Layers, illustrated above. Your (four) frames will then display in the Animation palette - or the number of frames in your animation.
5/
Now, if you want your animation to animate indefinitely, ensure Forever is selected for the Select Looping Options.
Then click the tiny black triangle (below) to change the Frame Delay Time.
And choose 0.1.  Note: Always experiment with these settings.
To preview, or stop your animation, click the following Plays/Stops Animation button.
6/
When you are happy with your animation; from the top menu of ImageReady, choose File then choose Save Optimised As. Enter a name for your animation, then click
Save.
Photoshop CS2’s Animation Palette
In Photoshop CS2 you can access the Animation palette from its top menu bar, without opening ImageReady. Animating Instructions (and animation palettes) are identical for both ImageReady and Photoshop CS2. To save your layered image as an animation in CS2, from the top menu, choose File then choose Save for web. It is important that in the Save for web dialogue box - you save your animation as a Gif. Change the Matte tab to a colour that will blend your animation with its background - if you are unsure of this, choose White. Then click Save. My savings Optimising Gifs lesson can be found Here.
Photoshop CS3 and Extended - Saving Animation Instructions
This is a generic saving animations tutorial and assumes you have one image, that consists of two, or more layers, ready to animate.
1/
There is no ImageReady in CS3; therefore, to animate your layered image - from the top menu of Photoshop CS3, click Window, then from the drop-down menu, click a tick before Animation. This opens your Animation palette. If the traditional image-frame palette is not displayed; click the following Convert to frame animation icon - found at the bottom-right corner of the Animation palette.
Please Note
Although CS3 does not include ImageReady, you can fully edit your image-frames within CS3’s workspace.
2/
Now, from the top-right corner of the Animation palette, click the tiny black downwards facing arrow; then from the subsequent drop-down list, click Make Frames From Layers.
Your animation layers will then be arranged into separate animation frames; and for personal animations, experiment with the sec. settings, and click Forever if you want your image to animate continuously.
Tip
To quickly change all frame’s Delay at the same time; press Shift, then left-click to highlight each frame. Then change just one Delay time, and all highlighted frame will change, at the same time.
Note
To slow down a single frame, change its Delay to 1 or 2 seconds.
Note
The sec. setting sets your animation’s speed, making it slower, or faster - and the Forever setting ensures your animation plays indefinitely.
3/
To test your animation; click the Plays animation triangle - click it again to stop the animation.
4/
If your animation is jumpy, add more frames by clicking the following Tweens animation frames. (I did not use the Tween feature in my animated sparkly night signature). Experiment with Tween, and see how it effects your animation.
5/
When you are happy with your animation; from the top menu, choose File then choose Save for web and devices. In the subsequent dialogue box, ensure you are saving your image as a Gif, and change the Matte setting so your animation blends with your background, then click OK. You are changing the Matte to a colour that closely matches the background you are displaying your animation on, if you are unsure of this, choose White. Enter a name for your animated Gif, then click OK. Screen Capture Here! My savings Optimising Gifs lesson can be found Here.
Wendi E M Scarth. Top of Page - Home.
|
