Graphics Zone - Creating Animations

XRATED BUCKS

BONEFISH

Creating Animations in ImageReady

by BarryHilton, Adult NetSurprise

Welcome to our tutorial on designing animations in Photoshop's companion program, ImageReady. In this tutorial we'll be working with a Photoshop .psd file to create our animation, you can download the file by clicking here.

Start by opening up the animation.psd file in ImageReady... you should see our example below...

We'll be using the Layers menu and the Animation menu, so make sure you have both the menus below showing (windows > show layers or windows > show animation). You should see our examples below...

The first thing to do is create a slice for your image. Working with an animation requires a slice to be made which contains the animated area... Go to the main Tool menu and select the Slice tool... it looks like a knife! Our image should now show one slice labels 01, like in our example below:

Now, we can start working on our animation. We need to add a new frame to the animation menu... First, click the Duplicates current frame button to add a new frame. This is the small button, a square with a triangle cut out of the bottom left corner, and is next to the trash can at the bottom of the Animation menu.

This duplicates the original frame, so now you have two frames showing the girls head. We need to change the second frame to frame 2 of our animation... Go to the layers menu and click the little box to the far left of the frame 2 layer name, (where the eye should be). This will make our layer frame 2 visible and change the second frame of our animation! You should see our example below:

Now, we need to add our third frame... we do this the same way. Click the Duplicate current layer button at the bottom of the Animation menu (next to the trash can) to add a new frame. Then go to the Layers menu and click the far left box next to the frame 3 layer to make it visible (you should see a eye next to the layer).

We'll now have three frames showing each of our animation layers, frame 1, frame 2 and frame 3... like in our examples below:

Now that we have our animation frames set up, we need to add a delay (in seconds) to each frame to produce the animated effect... Look at the Animation menu and you will see under each frame 0 sec. in our example we're going to change this to 1 second delay or frame rate (our animation will play at 1 frame per second).

To do this, click on the 0 sec. for each frame and change this to 1 second on the pop up menu, like in our example below:

We've now finished our basic animation... you can test how your animation looks by clicking the play button at the bottom of the animation menu... your animation will now run in your picture image!

To save our animation we first need to select GIF from the optimize menu... Go to the Optimize menu and enter the values below...

Now, go to the File menu and select Save Optimized As to save your animation, and you're done!