Animated Panels with ImageReady

Here's a few simple steps to simulate an animated panel effect.

Below is base image I will apply the animated effect to. (Use any image of your choice, its the steps thereafter that matter.)

Here is start of the Layers Palette view.

To set up the rest of the stage for the animation all we need is to add a single Shape Layer above the 'baseimage' layer.

To begin, set your Foreground Color to White (#ffffff), then select the 'Rectangle Tool (U)' from the Toolbar with Options Bar feature 'Shape Layers'icon active.

Next, click and drag to draw a rectangle area over the baseimage, as I have captured below.

Set the Blend Mode to 'Screen' and bump down the 'Fill' opacity to a low integer as highlighted in red below.

Here is the image preview, thus far.

Finally, with that 'Shape 1' layer active, right click and choose 'Blending Options'.

Once in the Main Styles panel, set the 'Inner Shadow' to what I have captured below. Color: Black (#000000).

Click 'OK' to commit the 'Blending Option' and the Layers Palette should be like the following.

Note there will be no visible change to your image preview because the initial shadow Distance is set to 0. This will be the determining feature once in ImageReady for the animation.

Now the stage is set. Click the 'Edit in ImageReady' toolbar icon .

The rest of this tutorial assumes you are familiar with the basics of ImageReady animations. If you are unfamiliar with the basics I recommend this Animation Primer.

Once ImageReady is open, make sure the 'Window/Animation' palette is open as I have captured in the below workspace link.

Now follow these steps to complete the animation process.

1. Click the 'Duplicate Current Frame' .

2. With the New frame active, double click the 'Inner Shadow' layer Effects of 'Shape 1' layer.

3. Once in the 'Inner Shadow' panel, bump up the 'Distance' integer by about 20 -30 px.

Repeat step 1. to 3. until the inner shadow has reached the bottom and back to the top again.

As in the final animation palette preview window link below.

Note: In my screen shot, Frame 3 timer control is set to 1 sec.

Here is the final animation. (IE users hit F5 to Refresh Page)