Q.
"How do I make a simple button in Fireworks?" How do I do metallic effects like brushed aluminum in Fireworks?" "How do I get a glassy look in Fireworks without a special filter?" "How about the little branding buttons like the ones for Netscape and I.E. and how do I get the engraved look for the text?"-- J.K.

Fireworks makes it dead simple to add effects like inner and outer bevels, shadows and glows to button shapes. With a click in the drop down list of the Inner Bevel feature, for example, you can alter the shading and direction of the light on the bevel to simulate the Up, Over, Down, and Over While Down states of the buttons.

With a little imagination, it's possible to use Fireworks "Live Effects" to create button images that rival those done with expensive plug-in filter packages. The jewel-like image you see here was created with one of a small set of styles I've tucked into a ZIP file.

Place the files with the .stl extension in the Fireworks styles folder. On my machine, that's C:\Program Files\Macromedia\Fireworks 3\Settings\Styles

Once there you need to tell Fireworks where to find them. Click on the right arrow button at the top, right of the Styles panel and choose 'Import Styles' from the menu that pops up. In the 'Open' dialog box, browse to the folder where you deposited the styles, select one or more, and then click on Open. The Open dialog box will close and the new styles will show up in the Styles panel. Thereafter they can be applied to Fireworks vector objects with one click.

Once you've added one of the styles to a shape, you will be able to observe how they were created by looking in the fill, stroke, textures and effects panels. Feel free to change them as you wish. Included in the ZIP file is the texture used to create the brushed metal effect below. The File is labled Brushed.png and it goes into your Fireworks Textures folder. On my machine, that's C:\Program Files\Macromedia\Fireworks 3\Settings\Textures

Since the brand button uses many of the same techniques needed for the creation of decorative bullets, buttons, and dividers, let's have a brief look at them.

As always, step one is to open a new file. Drag out a rectangle approximately 90px by 35px. Mine will be a little larger to make this easier to follow on the screen. Open the Style panel, and if you've downloaded and installed the styles, apply brushed aluminum A.

To adjust the highlight, move the round handle of the gradient rotation bar so the the highlight falls where you want it.

You can also rotate it by moving your cursor over the gradient rotation bar until you see the rotate cursor, and then moving the handle up or down.

To cut out a shape for an icon or animation, activate the shape tool.

Drag a square on top of the button. Click-select both square and button, then choose Modify > Combine > Punch. Add an animation or icon.

Back to top