Logo

Title Bar

Home
Custom Shape
Manipulation
Orginization
Rollover Button
   

 

 

 

1. Create a Button 2. Apply a Rollover 3. Export to Dreamweaver  


Now convert your shape to a button. Right click on your shape and choose Convert to Symbol. Choose a Name for your button, and select Button for the type.

Symbol Properties

Hit, OK. Ignore the green shade over the button. Double click using the normal arrow tool on the button to enter the button editing window. You should note any editing done to a specific button should be done in the button editing window.

(You are currently, editing the Up State of your button: how it will look when there is no mouse over it. )

Choose the Text Tool (the large A) from the toolbar, and click on the center of your button. Choose your font Style, Size, and Color from the window, and type what you want your button to say. In this case, I've used an "Arial" font type, 34 text size, a white text color, and the word "Button".

To change the font at anytime, double click on the text with the arrow tool while editing the button.

Now you will align the text with the button. Click on the text with the Black Arrow tool, hold Shift, and click on the shape to select both items.

Open the Modify menu, choose Align, and then choose Center Vertical.

Repeat the process again, but choose Center Horizontal.

The button may move slightly off the image's canvas. Close the Symbol window, select the button, and tap one of the arrow keys on the keyboard. Each tap will "nudge" the selected objects over.

Double click on the button again to re-enter the button editing window.

Now you will add effects to the button. For this example, you will use a drop shadow. Locate the Properties window at the bottom of the screen. Hit the '+' next to Effects and choose Shadow and Glow, and then Drop Shadow.

A Drop Shadow box will appear in the Effect window. To disable the effect, uncheck the box. To open the options menu for the effect, double click on it. Effects can be used on most elements in Fireworks.

Now you will create your rollover image. Select the Over tab and hit Copy Up Graphic . This is the image your button displays when the mouse hovers over it. In this example, you will add a glow to the text of the Over state.

Select the text with the Black Arrow tool. From the Properties window add an effect like you did before. Choose Shadow and Glow, and then Glow. Double click on the Glow effect in the window. Choose the Colored Square, and pick White as your color. Set the the Size of the glow (number above the color) to 5.

Your Over state should look like the one below.

Over State

You can add other states to the button such as the Down state(when it is clicked). Choose the Down tab, and edit that state of the button.

When you are done modifying your button, close the button editing window (the window with the Up/Over/Down states), but not the file. Now your button is ready to be exported to Dreamweaver.

Save your button at this point by choosing File - Save As. Choose a location to save the file (your personal H:\ drive is a good place for it) and a name. You can open the file again, and edit the text to create similar buttons.

Next, Export To Dreamweaver Arrow