Its a pretty powerful program for the creation of web graphics. Getting your head around some of the features though can be difficult. A reader recently asked for some help with creating buttons using Fireworks. In this tutorial we will look at a few of the techniques we can use to build a set of roll over buttons.

The finished buttons can either be exported as a fully working HTML file or, you can just take all the images generated and use them independently, inserting them into your pages via Dreamweaver or whatever.

What Are We Trying To Create?

a] We are looking to create a set of roll over buttons.
b] We want to be able to create a "template" button for the set onto which we can easily add different text depending on its function.
c] We can of course just use the images we create here as static buttons.

Where Do We Start?

1/ Open Fireworks. From the "File" menu, select "New" and create a new white canvas 400px x 400px as shown below.

2/ Hold your pointer over the shape icon, depress and hold down the left mouse button and you will see a row of available shape tools appear. Select the rectangle tool.

3/ Place the cursor on the canvas, depress the left mouse button and drag the cursor across the page to draw a rectangle. This will form the basis of your button.

4/ Go to the bottom of the tool bar and click in the colour box next to the paint pot. The colour pallet will appear. Select a colour for your button.

5/ We will now add a bevel to the outside of the button. With the button selected (blue dots at each corner) choose "Effect" from the "Window" menu.

6/ From the "Effect" window choose "Bevel andEmboss" from the drop down menu and "Outer Bevel" from the sub menu.

7/ Adjust the settings according to taste....

8/ We will now "convert" the image to a button "symbol". This will enable us to perform all sorts of clever tricks with our button. First make sure that the button is selected (blue dots).

9/ From the "Insert" menu, select "Convert to Symbol".

10/ In the "Symbol Properties" window give your button a name (MyButton) and ensure that the "Button" radio button is checked (far too many buttons in this paragraph). Hit OK.

11/ Your button will now look like the one below. DON'T PANIC!

12/ Time to add some text to our button. Click on the "Text" tool.

13/ The "Text Editor" window will open. Choose a suitable font, size and colour then type in the required text. Hit OK.

14/ You will see the text appear near your button. Drag and drop the text to the approximate position that you want it to be. Don't try to be too accurate, we have a neat trick coming up for pin point alignment of the text.

15/ Ensure that the main body of the button is selected (blue dots & lines) by clicking on it. Now select the text by clicking on the text whilst holding down the "Shift" key.

16/ Once you have the text selected choose "Align" and "Center Vertical" from the "Modify" menu. There is a keyboard shortcut (Ctrl+Alt+2) that you could use once you get used to this routine. Fireworks has now taken your text and centralised it vertically on the face of your button.

Repeat the above operation, this time selecting "Align" and "Center Horizontal" from the "Modify" menu. The keyboard shortcut for this would be "Ctrl+Alt+5". These keyboard shortcuts apply to people using a PC. Those of you using a Mac should simply take a look at the menu to find out what shortcuts apply to your machine.

Your text is now perfectly centralised on the face of your button. Neat hey?

17/ Hit the "Preview" tab and you will see a rather "off colour" representation of your button. That's just Fireworks way of telling you that your work is still in progress. To get a better view of the way your button looks, see point 18 below.

18/ Hit "F12" and the button will open in your web browser window. Simply close the browser window to return to Fireworks.

19/ We are now going to create a "Roll Over" image for the button. Make sure you are viewing your button in "Original" mode as opposed to "Preview" and "Double Click" on it. This action will open a button editing window as shown below. You will notice that the text is not displayed. Don't worry about this right now.

20/ Hit the "Over" tab and you will be presented with a blank window. Click on the "Copy Up Graphic" button to recreate your blank button image in the "Over" window.

A word here about the Up and Over conditions. The "Up" condition is how your button will look just sitting on your web page. The "Over" condition is how it will look when you roll the mouse over it. You will notice that there are other editing screens available. Take a look at the Fireworks Help files to find out more about them.

21/ Now that you have copied the "UP" button graphic into the the "Over" window, we will modify the "Over" image to give us a simple "Over" effect. Make sure the image is selected (blue dots) and go open the paint pot (flood fill) colour palet as shown. Select yourself a roll over colour and you will see the colour of your button change.

22/ To save the change simply close the button editing window by clicking on the X in the right top corner.

23/ Go back to the "Original" view window. The text has reappeared on your button. Check the button out in "Preview" mode and you will see that the "Roll Over" effect kicks in when you pass the mouse over it.

24/ Now we are going to create a set of buttons using our original artwork as a template. Each new button will contain its own text.

Make sure you have the "Original" window open and click on the body of the button to select it. Then click on "Copy" from the "Edit" menu. The button is now copied to the Windows Clipboard.

25/ Now "Right Click" anywhere in the "Original" window and select "Paste" from the menu. A "Copy" of your button is now "Pasted" onto the page covering the original image.

26/ Click on the "Pasted" image and drag it to a position just below the original.

27/ Carry on "Pasting" , "Dragging" and "Dropping" until you have all the buttons you require.

28/ Using the techniques you learned in points 12 to 16 add new text to each of your "Copy & Pasted" buttons using the "Align" and "Center" trick in point16 to keep everything neat.

29/ Once you have created the buttons and checked them out in the "Preview" screen it is time to export your work for later use. From the "File" menu, select "Export"

30/ Browse your way to the folder you want to export the files to. In the "Save as type" field make sure that "HTML and Images" is selected. Hit "Save" and that's it. Fireworks will save your work as an HTML file and all the related images. I normally dump the HTML file and just utilise the button images using Dreamweaver. Play around with the files to see what technique suits you the best.

31/ If you decide that you want to use the HTML file that Fireworks generates you will need to assign some actions to the buttons. This is done using the "Link Wizard". Simply double click the button to open it in the "Button Editor" window ( if you get a pop up message asking whether you want to edit all the buttons or just the current one, choose current) and select the "Active Area" tab. Then hit the "Link Wizard" button.

32/ In the link wizard enter the URL that you wish to link to. You can also specify any <alt> text you wish to display and even an optional status bar message which will be displayed on roll over.

That's it. Buttons with Fireworks. Now that you have mastered the basics, it would be worth your while to explore the Fireworks Help Files for some more ideas. There are all sorts of textures and effects you can add to your buttons.

We "Exported" our work to a file for later use. Don't forget to also "Save" your work for future reference. This is useful if you want to create extra buttons as your web site grows.