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. |
 |
