Logo

Title Bar

Home
Custom Shape
Manipulation
Orginization
Rollover Button
   

 

 

 

 

1. Create a Button 2. Apply a Rollover 3. Export to Dreamweaver  


Open Macromedia Fireworks. From the File menu, choose New. From the window that opens, you will choose your file's properties.

New Document

150x50 pixels is a good approximation of the size a button. Change the dimensions as needed. The file is a web image, so the resolution should be 72 pixels/inch, the standard for all web images.

Finally, select the Canvas Color for the background of your button. Transparent will let the web page's background color show through. To select a color other than White or Transparent, use Custom.

Now create the shape of your button. Fireworks has several predefined shapes (Rectangle, Ellipse, etc.). If you need a shape other than the ones provided, refer to the Custom Shape tutorial.

You will use the Rounded Rectangle Shape. The ninth button down on the left is the Shape tool. Click and hold the mouse on the tool. Select your shape from the menu that appears.

Shape Tool

Choose the Rounded Rectangle, then move the mouse to the top left corner of your image. Click the mouse and drag to create the rectangle. It should fill the canvas.

Now choose a fill for your shape. Locate the properties window at the bottom of the screen. You can fill a shape with either a solid color or a gradient. The default is set to a Solid, but for this example you will use a gradient. Click on the pulldown menu shown in the picture below.

Select Fill Options. From the first drop down menu select Gradient. From the second drop-down choose Linear. Choose a color scheme from the second drop down menu. You will use Black and White.

To adjust the shading of the gradient, click on the shape, and either move or rotate the black line across the button.

Your button should look like this.

Shape

Next, Apply a Rollover arrow