Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address


  Raster Graphics Fireworks Inset Button using Adobe Fireworks

Inset Button using Adobe Fireworks

Figure 1: Final Preview

New Document

Open a document with a white fill. Draw a stripe across your document. The stripe will be the button's background.

Rounded rectangle auto shape

To create the button, select the rounded rectangle tool and draw a 157x37 px rectangle. Drag the yellow dots inward to the maximum to get a rounded button. Look at the Auto shape properties to see the values.


Add a text 'Try now!'

Now, it should look like this:

Figure 2:

Linear gradient to the stripe

Apply a linear gradient to the stripe. #99999 > #000000

Effects to the button

Now, we are going to apply 3 effects to the rounded rectangle: linear gradient, inner shadow and drop shadow.

Linear gradient

Apply a linear gradient to the rounded rectangle. #99999 > #666666

Apply an inner shadow and a drop shadow

Figure 3:

Now, it should look like this:

Figure 4:

Change color

To change the color, select the rectangle and Adjust Color > Hue/Saturation. Do not forget to check Colorize in the interface and then drag the Hue cursor to the right and to the left to switch colors.

Figure 5:

Final Preview

Figure 1: Final Preview


Fireworks Zone is the main resource for Adobe Fireworks enthusiasts with tutorials, articles, linkbase, commands, styles, textures, patterns, auto shapes. It is by far the largest and regularly updated Fireworks sites on the web.

subscribe to newsletter