Animation in Imageready

Requirements: Adobe Photoshop, Adobe Imageready.

Imageready's Tween tool is a great way to create animated gifs. Once you've created origin & destination frames, it can modify three parameters to your specifications: Position, Opacity and Effects or Layer Styles.

Position

In Photoshop, hit Ctrl+N to create a new file 22pxw × 20pxh. Hit Z to select your Zoom Tool and zoom that puppy until those pixels are staring you right in the face. Rename the first layer "bkgd" and hit Ctrl+Backspace to fill it with the background color of your choice. Hit Ctrl+N to create a new layer & name it "ball". Using your Eliptical Marquee Tool, hold down the Shift key and drag until your round selection touches both the top & bottom edges of the frame. Use the arrow keys to center it. With the ball layer active, hit Alt+Backspace to fill the selection with the foreground color of your choice. Double click the ball layer to open the Layer Style Palette, select Bevel & Emboss and use these settings:

Click & drag the ball layer down to the Create a new layer button at the bottom of the Layers palette and rename the new layer "addl depth" and set it's to 0 percent. This makes this layers pixels invisible yet allows the Layer Style's highlighting & shading Effect to remain giving us a little more depth. Now link it to the ball layer by clicking the link button next to the little eyeball in the layers palette.

Duplicate both the ball and addl depth layers, link them to each other, hit V to select your Move Tool and use the right arrow key to nudge them 21px until they just exit the frame on the right. Link the original ball and addl depth layers to the copies you just made, (all 4 image layers linked, bkgd layer not linked), and finally hit the Jump to Imageready button at the bottom of your Tools palette.

Now in Imageready, go to Window/Animation and check to make sure your Animation palette is visible. In your Animation palette, hit the Duplicates current frame button.

With any layer active other than your colored bkgd layer and the second or "destination" frame selected, hit V to again select the Move Tool Use the left arrow key to nudge the ball and addl. depth layers 20 px left so that the right ball is now just 1px away from being in the exact same position as the left ball was originally.

Since it took 20 one pixel nudges or steps to get from the position in the first or "origin" frame to the destination frame we're going to add 19 steps or frames in between these 2 frames for a nice smooth transition. Hit the Tweens animation frames button to open the Tween dialog.

Use the settings shown at left. The Opacity and Effects checkboxes don't really matter because we haven't altered those parameters in this example.

Quick note here: Fewer frames means faster motion & smaller filesize. Since this file is so small in physical size it's not really a issue. Also if we tried to use more frames to slow it down it would produce a jumpy effect. We can't change position by less than 1 pixel so Imageready would generate duplicate frames.

Also, you can specify the amount of time each frame is displayed in your animated gif by clicking on the drop down arrow for that frame in the Animation palette.

Finally hit and to enjoy your new animation. If it runs a little rough, try minimizing your Animation palette. Hit the Esc key or to stop the animation and then Shift+Ctrl+Altz+S to save your psd as an animated gif.

Your finished animation should look something like this:

The same gif repeated produces a seamless animation.

( Return to Top )

Opacity

This one's really a snap. In Photoshop create a new, 20 × 20 pix file & (Z) Zoom it to a comfortable size. Rename the first layer "bkgd" and hit Ctrl+Backspace to fill it with any background color you choose. Hit Ctrl+n to create a new layer & name it "block". Begining with your Rectangular Marquee Tool (M) in the upper left corner, hold down the Shift key, click and drag until your selection is 2px away from the bottom right corner. Use the arrow keys to center it. Hit Alt+Backspace to fill the selection with the foreground color of your choice. Double click the block layer to open the Layer Style Palette, select Bevel & Emboss and use these settings:

Click & drag the block layer down to the Creates new layer button to duplicate it and name this layer "addl. depth". Open the Layer Styles palette for this layer, select Bevel & Emboss and apply these settings:

Hit the Jump to Imageready button at the bottom of your Tools palette. Once in Imageready, open the Animation palette and duplicate the first frame two times by hitting the Duplicates current frame button twice. Now select the middle frame and in the Layers palette set the Opacity to zero for both the block and addl. depth layers.

Now we're ready to animate! Hold down the Ctrl key, select the middle and destination frames, hit the Tween button and add 9 frames. Ctrl click the origin frame, (second frame should still be selected), and again add 9 frames. Scroll through the Animation palette to the very last frame and delete by dragging it to the dumpster. Since it's actually a duplicate of the first frame, leaving it in will produce a hitch or stutter in your animation.

Finally hit the play button & enjoy your work. Stop the animation, Shift+Ctrl+Alt+S to save optimized as a gif & you're done.

Your finished animation should look something like this: More frames added when tweening will produce a slower, smoother effect.

( Return to Top )

Effects

Ctrl+N to create a 24 × 24 pix file in Photoshop and zoom it to a comfortable size. Rename layer 1 "bkgd" and Ctrl+Backspace to fill with a bgcolor of your choice. Ctrl+n to create a new layer and name it "arrow".

Hit L to select your Polygonal Lasso tool and draw a simple triangle that is at least 2 px away from all 4 edges. Alt+Backspace to fill the selection with the foreground color of your choice. Double click the arrow layer to open the Layer Style Palette, select Drop Shadow and apply these settings but don't close the palette just yet.

IMPORTANT: Make sure the box is unchecked.

Bevel and Emboss as shown at right.

Click/drag the arrow layer down to the Creates new layer button to duplicate, rename this layer "addl. depth" set it's to zero% and drag the Drop Shadow Layer Style down to the dumpster. Next apply the settings shown at right.

Now we're ready to hit the Jump to Imageready button and animate.

Now in Imageready, hit the Duplicates current frame button 4 times giving you a total of 5 frames.

We now need to change the lighting angle for all layer styles in frames 2,3 & 4 and then we'll be ready to animate. Go to Window / Layer Option/Style and make sure that is checked and that the Layer Options/Style palette is visible. The appearance of this palette changes depending on which Layer Style is selected.

Select frame # 2 and then select each Layer Style one at a time and in the Layer Options palette change the Angle to 90°. Repeat for frame # 3 using 180° and frame 4 using -90°. When finished, your lighting angles should look like this.

Now we're finally ready for the tweening steps. We're going to insert 4 frames between each pair of existing frames, a total of 16. Hold down the Shift key, select frames 4-5, (it's easier to work backwards from the end, trust me), hit the tween button and add 4 frames. Repeat this step for framesets 3-4, 2-3, and 1-2. When done, click & drag the last frame, # 21, down to the dumpster.   Now hit the play button and enjoy your animation. It should look something like this:  Hit Shift+Ctrl+Alt+S to save as an animated gif & you're done.

In this tutorial we only scratched the surface of what you can do with Layer Styles and Tweening. Keep in mind that any numeric parameter in a Layer or Layer Style can be controlled with tweening.

( Return to Top )