home
animation

projects
 image manipulation
interactive whiteboards
interactive exercises
 presentations
multimedia tutorials
other tutorials
art links
gallery
about



 

 

 

 

Home - Animation - Video - Projects - Image Manipulation - IWBs - Interactive - Presentations - Multimedia Tutorials - Other Tutorials - Art Links - Gallery - About

Photoshop iconAdobe Photoshop 7 ImageReady
Animations from Filters
ImageReady is a program built into Photoshop 6 & 7 that operates as an advanced web-production tool. Users can build Javascript rollovers, tables, slice images, make image maps, customise images for the web and also create simple animations. The two applications are closely linked and you can switch between easily. To access ImageReady open Photoshop 6 or 7 and on the File menu, select Jump to > Adobe ImageReady 3.0 or 7.0 or use the shortcut:  

Shift + Control + M
Morning Glory animation Face twirl animation
Filter > Distort > Twirl Filter > Distort > Spherize & Twirl
Picasso portrait of a woman animation Weird text animation
Filter > Liquify Filter > Distort

1.      In ImageReady choose File > Open and navigate to the picture that you want to animate

2.      Select Windows > Layers > Duplicate Layer and repeat this several times to make as many frames as required for the animation. In my example I use 5 more layers

  Duplicate layers

3.      To apply a filter to each layer, select Layer 1 on the Layers Palette and on the Filter menu choose the filter that you want to apply. For the example I use Distort > Twirl

  Distort menu

4.      Apply a small amount of filter to the layer and click OK

  Layers

5.      Select the remaining layers in sequence applying increasing amounts of filter to each

 

6.      Open the Animation Palette: Window > Animation

Animation palette

  7.      Working with both the Animation and Layers Palettes, click on the first frame of the animation and choose        Animation > New Frame or click on the New Frame icon.

  Preview animation tools

8.      With the new frame selected go to the Layers Palette and select Layer 1. Switch off all the visibility icons except the one for this layer so that Layer 1 is the only layer visible in Frame 2.

  Layer visibility

9.      Repeat steps 7 & 8 to create a new frame for each layer and switch off all but one corresponding visibility icon for each of these.

 

10.  Click Play on the Animation Palette to play the animation.

 

11.  Set the animation to play once only, continuously or for a fixed number of repetitions using the Loop Count option: Once/Forever/ Other > enter the number of plays

12.  Set the Frame Timing if you want to modify the delay between frames e.g. for emphasis on the first frame .

Frame timing Note: for the web the frame rates can be from 8 to 12 fps [frames per second], whereas the rate for professional animations is 25 fps.

13.  Optimise the animation as a GIF file to reduce download times: File > Save For Web

 

14.  Check what your animation will look like in a browser: File > Preview In and choose your target browser from the sub-menu

 

 15. Finally go to File > Save Optimize

Top

 

© RKM 2002 - 2007

 

Home - Animation - Video - Projects - Image Manipulation - IWBs - Interactive - Presentations - Multimedia Tutorials - Other Tutorials - Art Links - Gallery - About