Her

Home Photoshop Tutorials ImageReady Animation Animated Button in ImageReady Animation

Animated Button in ImageReady Animation

Author: Havenfx.com Author's URL: www.havenfx.com More by this author

Here we will animate a button that was tutorialized in a previous teaching ^_^. If you are too lazy to complete the still button tutorial, a .psd file is provided below. Step-by-step instructions proceed..

Download the .psd file (45kb) here.

1) Open up the .psd file of your button or the downloadable one above in Photoshop.

2) Go to the Layers Palette and duplicate the original text layer by the number of letters are in your text. In my .psd, Havenfx has 7 letters so you would duplicate the original text layer 7 times.



3) Each copied layer is going to be a different letter of your original text. Select Copy #1 and delete all the text except the first letter. Change the color to a contrasting color (#0079C5 if you're using my .psd) and postion it directly over the original first letter. You should have something like this.



4) Do this for the remaining layers and make sure the copied text layers are positioned EXACTLY over the original text. Otherwise, the effect we'll create will not look good. You should have this..



5) We are all done in Photoshop, so let's jump to Imageready. Click this button at the bottom of the Tools Palette or press Ctrl+Shift+M.

6) With Imageready opened, you should see the Layers Palette and Animation Palette (If not, go to Window and activate each). In the layers Palette, you should see all of the text layer copies and the original text layer. Well, now click the eye beside each text copy layer, leaving the original text as the only text visible.

7) With only original text visible, go to the Animation Palette and click the arrow and select New Frame.

image 1
Click to enlarge


8) After selecting the New Frame and making sure that it's still highlighted, go to the Layers Palette. Click the eye beside the first letter copied to make it visible.

9) Repeat Steps 6 & 7 until all letters are visible and your Animation Palette should look something like this:

Click to enlarge


10) Select Frame 2 again and then click the Tweening Button or click the Arrow and Select Tween. Nonetheless, use these settings:



11) Now, go to the next frame where two letters are visible and Tween that. Next Frame - Three Letters - Tween...and so on...until you're done.

12) You can now click Play but it'll be choppy so we need to save it. File> Save Optimized As..., choose a name, and Click Save. My finished product came out like this:

Animated Button

If you are too lazy to create those text layers by yourself, you may download the .psd file and skip straight to Step 5.