Creating Graphic Buttons Using Fireworks
1. Open a Fireworks file. The first thing to decide is how large to make the button by setting the width and the height of the canvas. The example button will be 100 pixels wide by 33 pixels high. Since the canvas should not show, you can either keep the default color (white) or you can make the canvas transparent. After you make changes to the width and height and change the canvas color, click O.K.
2. Select the Rectangle tool under the Vector tools category.
3. Select the color you want your button to be with the Paint bucket (fill) tool under the Color tools category.
4. Using the cross-hairs of the Rectangle tool, click and drag a rectangle vector object over your canvas to create a rectangle the size of the canvas. Start at the top left corner and drag down to the lower right corner of the canvas.
5. Click the Pointer tool on your toolbar. With the pointer tool, click the rectangle on the right side of Fireworks (in the layers panel) to select the rectangle object.
6. In the properties inspector, click the plus sign on Effects. Then select Bevel and Emboss, and click on Inner Bevel. This effect will make your button looked raised (3-D).
7. To add text to your button, select the Text Tool on the Vector toolbar. Select the color of the text with the Paint Bucket tool.
8. With the mouse pointer, click on the graphic in your workspace. When the textbox appears, type the text for your button. When you finish typing, click the Pointer tool. With the Pointer tool, select the text layer in the layers panel. Use the pointer to move your text to the center of your button graphic.
9. While the text is selected, you may also add special effects in the same way you added special effects to the rectangle. A good effect for text on a button is the Inset Emboss.
10. Save your file. The default file type is a png file. Save your button as “button.png”. This is the file you will use as a template for all of your buttons.
11. Export your button graphic to the assets folder of your website. Click the file menu and then click the Export option. You should get the following dialog box. Make sure that the “Save In:” textbox contains the name of the folder where you want to store your button graphics. Rename your button in the File Name textbox and make sure the Save as type textbox says “Images only”. The name should be descriptive of the button. Example: Home button should be named something like: btnhome-up.gif Click the save button on the dialog box to finish saving your graphic.
12. Congratulations you have created a graphic button! Now you want to modify the button for the down state (for the rollover effect). Using the pointer tool, select the Rectangle layer on the layers panel. In the property inspector, change the color of the Rectangle object to a different color (This can be a different color or a different shade of the same color). Once you have changed the color of the button, export the button as the down button of the pair of graphics. To do this, repeat step 11, but this time name the button with down instead of up. Example: btnhome-down.gif.
13. Now you have a pair of graphics that can be used for your navigation bar in your website. You should repeat these steps to create all of the pairs of button graphics for your navigation bar. You can use the same png file (button.png) as a starting point. Select the text layer and type the text for another button. Remember to export the files each time you make a change to the graphic and rename the files appropriately.
14. When you finish creating all pairs of buttons, close Fireworks and open Dreamweaver. You can now insert a navigation bar and use the button graphics you created.
15. For variety, you can make buttons with shapes other than a regular rectangle. Experiment with the vector shape tools. Click the arrow on the Rectangle vector tool and you will have several shape choices. The Ellipse tool, Polygon tool, Beveled Rectangle tool, Rounded Rectangle tool and Chamfer Rectangle tool could all be used for buttons. The Arrow tool could be used as graphic buttons for forward, back, up and down.
6