Unit Four

Unit 4: Creating Animations in ImageReady

 

Adobe ImageReady is a utility application that is  bundled with Photoshop.  It is used to prepare images for the web, create web graphics and animations.

Open the dog.psd file in Photoshop and transfer it to ImageReady by clicking on the Jump to ImageReady tool on the toolbar (bottom tool)

 

 

Unit Objective:

 

To create a gif animation for the web using clipart.

 

 

In order to create an animation of the dog wagging its tail, we need to separate the tail from the dog and create three separate images of the dog’s tail.

 

Separating the tail:

  • Using the lasso tool, circle the tail of the dog.  Avoid selecting any other part of the image.

 

 

  • Under the Layer menu, select New layer –Layer via cut.  This will cut the tail from the existing layer and create a new layer in the layers window with the image of the tail.  Rename this layer tail middle.

 

Text Box: Layer visiblity

 

 


Creating two more layers of dog tail:

o       In the Layers  window, right-click and duplicate the tail middle  layer.  Rename the layer tail down.

 

 

Click on the eye next to the tail middle layer to hide the layer.

o       Reposition the tail down layer by using the free transform tool in the Edit menu.  Position the rounded arrow in the corner of the box to rotate the tail and then drag the tail downward to fit the dog. Press the enter key when you are satisfied with the position of the tail.

o       Repeat the steps to create a tail up layer.  Use free transform tool to position the tail in the up position.

 

 

 

 

Animating the Animal

After all the layers are in place, make sure the all the layers are visible (the dog should have three tails at this point.  Check to make sure that all four layers are visible (eye icon).

 

Text Box: Play animation

 

Text Box: frame

 

Text Box: New frame

 

Notice the animation toolbar located at the bottom of the screen.  (If it is not in place, add it under the Window Menu)

 

 

Animations are created by playing the three existing layers one at a time in sequence.  Note that the first frame is already in place.

 

  • Remove the eye from the middle and top tails to hide those layers.  Only the tail down and dog layers should be visible.
  • Create a new frame in the animation window. Hide the tail down layer and reveal the tail middle layer.
  • Create another frame.  Hide the tail middle layer and reveal the tail up layer.
  • Create a 4th frame.  Hide the tail up layer and reveal the tail middle  layer again.
  • Play the animation using the play button on the animation window.
  • Slow the animation: Adjust the time of each frame to 0.2 seconds.  Play again.

 

Saving animation for web:

To add the animated image to a website, image must be save as a gif file

In the File menu, select Save optimized as…. And save the image as  animated-dog.gif in your website folder.