Fireworks has a built in button editor, and it will help you design great looking buttons for your web pages, and also write the scripts that are needed to control the buttons.
 |
Create a new canvas 300 x 300 pixels From the menus, choose Edit > Insert > New Button The Button Editor will open. The Button Editor is a separate canvas where you design the buttons for each of the states when it is Up, Down, Mouse Over it etc. Start with the Up state. |
 |
Draw a simple rectangle, and then using the text tool, type some text on it. Don't worry about what the text says, make it say button for now. |
 |
If you don't have the align panel open, from the menus choose Window >
Align. Select both your rectangle and the text, and click align horizontally and align vertically. This lines up your button and the text with the centre of the canvas. |
 |
Now we will create the Over state. Click the Over tab at the top of the window. |
 |
We want the over state to be similar, so we start by copying the up button. Click Copy Up Graphic |
| Change the colour of the button slightly. | |
 |
Select both the rectangle and the text, and using the arrow keys on the keyboard, press down once and right once. This will move your button slightly down and to the right. This helps give the impression that it is being pressed. |
 |
Now that you have buttons for 2 states, click the Active Area tab. This creates a slice for later export. |
| If you wish you can create buttons for the other two states. Click Done and return to the main Fireworks window. (You can return to edit your button at any stage by double clicking it) Save your button as button.png We will use it later to make a navigation bar. |
