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.

This is what I got as my button when I play the animation this is what i get. Now go to File>Export>Macromedia Flash (SWF). Now this is what i got.

View the flash animated button

Step 1:

Start a new document of size 460×68 pix. Use the foreground colour as #B39E75 and background colour as #EFD8AB.

Use the gradient tool and do a gradient fill as background.

Step 2:

Create a new layer and select the eleptical Marquee tool and fill it with this gradient.

Now use the following settings in Blending Option. Stroke>1 px Black Colour.

Step 3:

Now Create a new layer and use the rectangular marquee tool to select a long rectange at the bottom and fill it with white colour with a 1 pix black colour stroke. This is what I got.

Now let us fill in the price and some advertisement text. Use a Bold and Colour ful font as the main intention of a banner is to attract the visitors. This is what I have choosen.

Step 4:

Now let us create a simple logo for the banner. I just typed a text and used a small icon over it to make a simple logo. Usually your client will give there own logo so you can use it instead.

Step 5:

Now it is time for some animation. Type 3-4 ad text and use the visibility mode of the layer to turn them on of off. The visibity mode can make a layer visible or hidden on the canvas. You can select or deselect the visibility anytime by click the “eye icon” on or off.

Now it is time to fire up Image Ready. File>Edit In Image ready (Ctrl+Shift+M ).

In the animation window duplicate the current layer

Now select the layer visibility of the ad text layer to make the first ad text appear and the second layer disappear. This is how to do it.

Now duplicate the existing layer again and make the current ad text disappear and make the new ad text layer visible. Press the play button and this is what I got my animation as.

This is what I got as the Final Result. Hope you liked the tutorial.