Tutorial #39

Fireworks 4 Buttons

Level: Beginner
Requirements: DreamweaverMX, Access
Language: ASP, VBScript, SQL

Introduction

Fireworks 4 is 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.

To download the files generated by this tutorial click here.

What Are We Trying To Create?

We are looking to create a set of roll over buttons.
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.
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 and Emboss 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!

Go to page two of this tutorial to view the next steps.

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 and pasted buttons using the Align and Center trick in Step 16 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 thats 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.

Tutorial By	Submitted On	Views	Rating
Gordon Knapp	15/02/2003	1244	Not Yet Rated Rate Tutorial