Animated flash button

November 11th, 2007 in Photoshop by Allwin Samuel Jeba

In this tutorial we will learn how to create a animated flash button using Adobe photoshop CS 2.

Step 1: Create a new document of size 200X56 pix. Keep the background color as white (#FFFFFF). Select the rounded rectange and draw a new rectangle like this.

Step 2: Select the rounded rectangle layer and click on gradient overlay.

and use the following settings this is what I got, also ad 1 pix black color stroke (outside).

Now out basic button base is ready, it is now time to add a text. Let us add something like Homepage. You can use anything for that matter. I will use Homepage use any font of your choice. Create a new layer and now ctrl+click on the rounded rectangle layer. This will make the selection now fill it with black color so this will cover the complete button with black color. Now select only the starting part because we will animated with varying colours there. I guess you would have seen lots of similiars buttons at myspace.

Now press ctrl+shift+ (inverse selection) and press the delete button. This is what I got after doing the above step.

Now work with photoshop is over. Now we will animate it using Adobe Image ready. Make sure you have saved the file. Now press File>Edit in Image Ready. This will open the button in Image Ready. Where we can perform layer animation.

Now select duplicate current frame

now select the top layer and select color over lay and use this color #3B2424, again duplicate this layer and select a more ligher color like #4F4242. Now try animating the effect you can already see some nice effects don’t you . To make the animation more smooth make more layers and lighten the color slightly in every frame. Once done then reverse the process. i.e. after completely light make it dark all over again. All depends how many frames you use, the more frames you use more smoother animatiion also big file size. This is how my frames looks like.