Creating a Home Button In Fireworks

Open Fireworks under your program files then start a new file with canvas dimensions of 150 pixels wide by 150 pixels high (this is just an estimate). You will trim the canvas later so this might seem a bit large for a button. Select transparent as your canvas color. Since you already have a background image on your page you will need to import this graphic into the document. Click File > Import:

Import File

Select your background graphic, click open, then click on the canvas to import it. If your background does not cover the entire document import another background until all your document is covered. Below is my background image imported:

Import File

Create another layer by clicking the add layer icon on the layer panel.

New Layer

Now you will select a shape that will define your button. You will select a shape by clicking on the down pointing arrow by the Rectangle tool. Once you have selected it, click on the canvas to draw out the shape of your button.


I choose the star button shown below. Notice the color I selected from the background is the fill and outline color.

Star Button

Now you will add a filter to your button. Click on the plus sign by the Filter section on the Properties Panel. Choose several different filters. If you don't like a filter, simply click the minus sign to remove it. Bevel


Here is my star with an outer bevel attached with my blue color selected earlier:

Star With Bevel

Next you will need to add text to your button. Click on the text tool Text Tool on the vector section of your tool panel then click on the top of your shape and type out the text HOME. You can change your font size, face and color on the properties panel.

Text Options

The last thing you need to do is export it and save it as a gif. At the optimize panel select gif and make sure index transparency is selected:


Make sure you also save it as a fireworks file so you can edit it in the future. Once you export it as a gif it compresses your layers so you can't edit it.

Here is how my button turned out:

Star Button

Now you need to put it on all your external pages. I want it aligned to the center so I will use the paragraph tag. The html code for the hyperlink is <a href="nameofyourwebpage.html"> The html code for putting your button on the page is (where name of your website will be the name of your home page:

HTML Code:

Remember to add the alt and size tags to your image tag!!! (alt="Description of your button: width="250" height="250" )

Save your page and view it in a browser. When you click on the button it should take you to your home page. Below is how my button looks on the page.