Creating a Button in Fireworks
Open Fireworks under your program files. Start a new file with
canvas dimensions of 150 pixels wide by 150 pixels high. You will trim the canvas
later so this might seem a bit large for a button. Select transparent as your
canvas color. You will select the rectangle or oval tool to draw the shape of
your button. I choose a rectangle for an example:
Drawing the Button:
Click and drag your oval or rectangle to open it on your
canvas. If your toolbar is not visible, click window on your standard toolbar
then toolbars, and make sure that Main is checked.
Applying a Stroke:
- Open the stroke toolbar, if not already open, by clicking
the Window, then select stroke.
- Click the stroke tab and drop down you menu and experiment
with different stroke effects. Drop down your second menu choice box and notice
other effects and colors you can choose from. Strokes are the outline your
button. I used watercolor as my stroke with a tip size of 15 and color dark
You will now experiment with fill color using
the fill toolbar which allows you to apply affect and texture to your button.
- Click the fill tab, then drop down the
menu by clicking on the arrow button. These are additional features you can
use with your fill. Experiment with several of these fills. Notice that if
you choose solid, you have the same color choices you have on your color palette
on your canvas by clicking on the color swatch arrow, however, you have a
choice of applying a texture to your color.
- If you did not have a color previously
chosen, you will have to click the paint bucket to apply your fill.
- When applying texture, continue pouring
from your paint can to see the effect the texture makes on your canvas. If
you are not seeing a texture appear, make sure you don't have 0% displayed.
- Drop down your arrow and choose a number,
the larger the number, the more texture will be applied. The fill I used was
a pattern with the leaves format applied. You will need to play around with
the different options until you get your desired effect.
Convert the Button to a Symbol:
- Select the button. To select the button, click the arrow
tool the click on the shape. You will notice that four blue dots will appear.
- Click Insert>Convert to Symbol.
- In the "Symbol Properties" window give your
button a name (MyButton) and ensure that the "Button" radio button
- Hit OK.
- Click the text button (the capital letter A) and type
the word back. Make sure you choose font color and size that will be easily
- You can also add an effect to the text. I used an outer
bevel on the text.
- First I click the word home to select it. You can
see the effect dialog box below.
- Click on the effect tab.
- Drop down your menu box. Check out what each of these
items will do. If you choose the multiple tab, you can apply more than
one effect to your button.
- You can also assign effects to the entire button. To
do this you must select the button by clicking on it with the arrow tool.
Then follow the directions above.
- You will now want the text aligned to the center on the
- 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 while
still holding down the "Shift" key.
- Once you have the text selected choose Modify>Align>Center
- Now you want to make sure the text is aligned horizontally.
Click Modify>Align>Center Horizontally.
- Fireworks has now taken your text and centralized
it both vertically and horizontally on the face of your button.
- Once your have the text displayed the way you want it
to look, you will now assign a behavior to the button that when clicked on
it will take you back to your home page.
Create a Roll Over Image:
You 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.
- 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.
- 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 effect panel as shown below. Select yourself a roll over color effect
by changing another color that will apply to the watercolor stroke. You will
see the color of your button change.
You can play around with different effects,
or you can even change the color of the shape you chose to make the button.
The button I made is shown below:
- To save the change simply close
the button editing window by clicking on the X in the right top corner.
- 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.
- Click back on the "Original"
view tab to add behaviors to your button.
Assigning Additional Behaviors:
Make sure the behavior toolbar is open (Window>Behaviors).
You have already applied one behavior, a simple rollover. It is listed in your
behavior palette shown below:
- At the behavior panel click the + arrow and select Display
Status Message. In the Message text box type Just Plain Stupid. You may be
prompted if you want to include down or over state. Don't check either box.
- Click OK to close the Set Text Status Bar dialog box.
Click F12 to see how your button looks on the
web. Notice the bottom left hand side of your screen. Your Company Name now
appears there. Cool huh!!!!
Define a Link:
You will now need to define your link and alternate text
in your object toolbar.
- Before you can assign a link to the button, you will need
to insert a hotspot, click on the button to select it then click Insert>Hotspot.
Your button should now look like the one below.
- If you don't see the objects toolbar on your canvas, select
window on your standard toolbar, then choose object from the drop down list.
- Open the home page of Just Plain Stupid and copy the URL
address by clicking in the location box, choose copy, the return to fireworks
and click in the object toolbar, with the object tab selected, then click
on the drop down box that displays a chain link and paste the location in
- On the alternate text button type Just Plain Stupid.
Trim the Canvas:
Getting rid of extra space is no problem in Fireworks. Simply
Select Modify>Trim Canvas. Save your button, then press F12 to view your
button in a browser. Click on the button to see if it will take you to Your
Company home page.
Save as Gif, Png, and HTML:
Now you will place the button on all of your category pages.
First you will save your button as a png file by clicking within Fireworks and
clicking file>save. Saving as a png will allow you to change your button
later. If you only save it as a gif, you will now be able to edit it later.
To save your file in html and gif format, choose File, then
export. Save as a gif and html file by clicking in the Save as Type dialog box
and select both .
Because you have assigned behaviors to your
between your tags just above the end of body tag. By saving your file in html
you where to copy and paste. To align your button to the center, in the image
tags with the command align=center. Save you document and view it in a browser.
Check to see if your button works. You should have a button on all six category