Animated Button

By Björgvin Guðmundsson

Introduction

I made this tutorial after getting a lot of requests from visitors that came to my page. It's a reather simple tutorial and the possibilities are endless if you got the imagination. It shows you step by step how to use ImageReady's animation tools such as tweening and timing.

Step 1: Create a new image

Make a new image in photoshop. I made mine 200x200 pixels.

Fill the background layer with white and make a new layer (shft+Ctrl+N).

Step 2: Create the button

Select the rectangular marquee tool and make your button. After you have filled the selection with color select your type tool . Click on the image and type the text you want to use.

Step 3.

Now you should have 3 layers with background - button - and text, like on the pictures below.



Next select the crop tool and crop the image so you have only a minimum area around the button.

Step 4.

The next step is to import the image into ImageReady by clicking the "jump to ImageReady" button.

Step 5.

After ImageReady has opened your image, go to the menubar and activate the animation toolbar (window - show animation).

Step 6.

Start by duplicateing the first frame by clicking on the button on the animation toolbar.
Then go to the layers pallette and lower the opasity of the button layer down to 50%.

Step 7.

To make the animation you press the tween button on the animation toolbar.
I tweened mine with 5 frames. Like on the picture below.



Then press the "OK" button.

Step 8.

The last frame should be selected, in this case frame number 7.
Now duplicate frame 7 (the last one) and set the opasity on the button layer back to 100%.

Step 9.

Select frames 7 and 8 by clicking on frame 7 and then holding down Ctrl and clicking frame 8.



As you have both frames selected press the tween button again and use the same values as before.

Step 10.

Now you set the loop frequence to "once" by selecting it in the -lower left corner of the animation toolbar.



You can also play around with the timing on each frame to get a different fade -in and out.

Step 11.

Saving the animation.
Before you save the animation go to the optimize pallette ( window - show optimize) and choose a propper settings for your image. I used "selective GIF with 16bit" color for mine.

To save the animation go to "file - save Optemized As" (Ctrl + Shift + Alt + S), and save the image to your hard drive.

The outcome:

Download the rollower script here

You can find more Photoshop tutorials at tutorialvault.net