Ultra-Glow Button
Skill level: Intermediate
Programs used: Photoshop 6 & Image Ready 3.0

This tutorial will teach you how to create a high-tech looking animated button which you can use on your own homepage or blend in with the interface that you have designed.

(1) First, create a new canvas of size 200 x 40 pixels and fill the background with a light colour. Then create a new layer on top of the background layer.

(2) Use the rounded rectangle tool, draw a rounded rectangle to fill up most of the canvas. Fill the rectangle with any colour. Now, double click on the rectangle layer and you will see the layer style window pop up. Click on Drop Shadow and set the distance to 3 pixels.
(3) Then click on Gradient Overlay and click on the gradient bar shown. This will call the Gradient Editor window. Follow the color settings shown below for the gradient bar. Then click OK. Your rectangle should now look like a 3D rectangle like the one shown below.
(4) Create a new layer and draw a rectangle which is smaller than the rounded rectangle you did before. Then , perform a gradient overlay on that layer using the same steps before, only this time, use a different colour setting like the one shown below.
(5) So far, your button should look like the one below.
(6) Create a duplicate layer of the layer you have just done. Now, change the gradient settings by changing each colour box or colour level on the gradient bar to a slightly lighter shade of blue than the original one. Keep creating the layers and changing the gradient levels until you get down to a really bright blue. You should have around four different layers.
(7) Now load up Image Ready by pressing Ctrl-Shift-M. Image Ready might take some time to load up depending on the number of layers you've got.
(8) In Image Ready, select Window >> Show Animation if the animation window is not up already. Click the animation tag and you should only see a single frame in the animation panel. Select the time frame at the bottom of the frame as 0.1 sec. As you can see, there is a row of icons visible at the bottom of the animation panel. Click on the only one that is highlighted at this stage which duplicates the current frame. Make sure the new frame is selected. Now, deselect the layer with the original gradient and select the layer on top of it with the next lower shade of blue.
(9) Duplicate another layer and select the gradient with the next lower shade of blue. Repeat this until you get to the lightest shade of blue. After this, duplicate another layer and now, we shall do the reverse. Select the gradient with the next higher shade of blue which was the one we used previously. Repeat this until you get to the original gradient.
(10) Your ultra-glow button is now done. Click on the Explorer icon on the tool bar to preview your animated button in Microsoft Explorer.
(11) Now you can add the text you want on your button.
(12) You can even enhance your button by putting roll-overs on them.