Creating Graphics - Rollover Buttons

In this tutorial you will create series of rollover navigation buttons you can use on your website.

The previous tutorials demonstrated how to create buttons in Fireworks. This tutorial will show you how to use the bevel action and create rollovers using Fireworks and Dreamweaver. When you produce your buttons for your website you can use the same style of buttons you produced previously though you will have to create a rollover image for each one to make them interactive. You could do this by changing the font or background colours.

To begin with you are going to create a basic button in Fireworks. You will then create a rollover version of this image. You will then incorporate these into your website and use a script to create the rollover effect.

Step 1
Create a new file in Fireworks this should be 125x50 pixels. Use the rectangle tool to draw a rectangle to fill the area. Remember to use the properties inspector to ensure this is accurate. Fill the rectangle red.

Step 2
Next, click the Effects + icon. From this icon select Bevel and Emboss then Inner Bevel.

Your rectangle should now look more like a button:

Rename the layer in which you created the button:

Step 3
You now need to add text to the button. To do this you will add another layer. Click the New/Duplicate layer icon:

Name the new layer Text.

With the text layer selected:

Click the Text Tool (T).

Set the font size to 20 and bold. Then click on the button and type home.

Step 4
Save your button as homebutton.png
This will save your image as a Fireworks document that you can come back to and edit later. All layers will be preserved which is important when you create your other images.

Step 5
Now export the button into a format appropriate for the web by clicking File > Export > give the button an appropriate file name e.g. homebutton then click Save. You have now created an image like the one below.

Step 6
You are now going to create the rollover version of this button.

Open homebutton.png then save it as homerolloverbutton.png

Select the Rounded Rectangle from the Button Layer:

Double Click Inner Bevel from the properties menu.

Select Inverted:

Save your image. Then export the image and save it as homerolloverbutton.

Here is what the image will look like:

Step 7
Using the method above create a series of other buttons (including rollovers). These should contain the following text: images / links / podcast. To do this open homebutton.png save it as a new name e.g. linksbutton.png, change the text to links then save. Export the image. Then save linksbutton.png. Then re save the button as linksrolloverbutton.png and produce the rollover, save then export. Repeat this for the other buttons.

You should end up with the following buttons:

You are now ready to create the navigation menu in Dreamweaver. To do this go to the Navigation Menu Tutorial.