1 Adding a background for the button
a. Create a new layer.
b. Fill the area with a brownish, peachy colour. The best way to find this colour is to click on the
colour blocks on the toolbox, to bring up the Color Picker. Move the slider down to red, and then
click in the middle of the colour box.
To add a simple wood finish, click Filter > Noise > Add Noise. Set it to 6%, Gaussian,
Monochromatic, and press OK.
Click Filter > Blur > Motion Blur, and set the Distance to about 10 pixels. Press OK.
To create the gradient effect, right-click the layer, and select Blending Options. Click Gradient
Overlay. Change its Blend Mode to Overlay, and its Opacity to 50%. If the Gradient isn't blackwhite, click on the little gradient bar, and choose the Black-White gradient. Then press OK.
Optional: you can use the Hue/Saturation (Ctrl+U) and Brightness/Contrast sliders to play around
with the colours a bit more if you like.
2 Creating the button shape
a. In the Channels window, make a new layer. If the Channels window isn't visible, click Window
> Channels.
b. Choose the Selection Tool, and select a rectangle in the centre of the area.
c. Fill the area with white, and press Ctrl+D to deselect the area.
d. click Filter > Blur > Gaussian Blur, and set the Radius to about 8 pixels.
To re-condense the blurred area, press Ctrl+L to bring up the Levels window. There should be
three arrows beneath the main window. Drag the left and right arrows in, so that they're very
close to the central arrow.
In the Channels window, Ctrl+Click the "Alpha" layer, to select its outline.
3 Filling the button with a Gradient
a. Go back to the Layers window, and create a new layer.
b. Choose the Gradient Tool. (Remember that it might be hidden under the Paint Bucket Tool.)
Apply a gradient from the bottom of the image to the top.
Running your gradients in opposite directions like this increases the image's contrast, and helps
to make it look more realistic.
You can deselect now. (Press Ctrl+D)
To lighten the gradient, click Image > Adjustments > Brightness/Contrast, and increase the
Brightness to +80.
4 Adding some effects and text
a. Right-click your button layer, and choose Bevel and Emboss. Set the Style to "Pillow Emboss",
and the Technique to "Chisel Hard". Next, choose Stroke, set the Size to 1, and change the
colour to black.
b. Use the Text Tool to put some text on your button. I've used Palatino Linotype, bold, here. If
you're using all capital letters, make the first letter slightly bigger.
Click File > Save for Web, and save the image as a Quality 60 Jpeg.
This image is your "normal", unpressed button.
5 Creating the pushed-down effect
To make a realistic mouseover button, you'll need to move the text slightly, and give the button an
Inner Shadow. These two effects combine to give a realistic pushed-down feel.
To add the Inner Shadow, go back to your button layer, and right click it. Select the "Inner
Shadow" option, and then press OK.
a. To make the text move, click on your text layer, and choose the Move Tool. Press the Down
Arrow key, then the Right Arrow key.
Click File > Save for Web, and save the image as a Quality 60 Jpeg. Give it a different name to
the image you saved in the previous step.
This image is your pressed button.
6 Making the rollover effect in your web editor
In Frontpage, insert the "normal" version of your button, just like you would any other picture.
Click on it, and click Dynamic HTML effects. Follow the prompts through, and when it asks you to
select another image, choose your "pressed" button image.
In Dreamweaver MX, on the Common bar, click the Image icon, and choose "Rollover Image".
Put the two images you've made as the Original Image and the Rollover Image.
