Get Our Free Ebook
Beginners Guide to HTML

  Raster Graphics Fireworks i-Phone-like Buttons

i-Phone-like Buttons

Figure 1: Final Preview

New Document

Open a new document in Adobe Fireworks 550x398px with a dark background #333333 and a 100 px (in height) white stripe across it.

Figure 2: New Document

Styling the Stripe

Apply a vertical gradiant effect for your background.

Figure 3: Final result

It should look like this:

Figure 4: Gradient

Create a button

Create a button with the Rounded Rectangle auto shape from the tools panel.In the Auto shape properties you can read width, height and radius used.

Figure 5: Create a button

Styling the button

We will apply a vertical gradiant effect and a Bevel and Emboss effect.

Gradient Effect

Figure 6: Gradient Effect

Photoshop Live Effects

Bevel and Emboss

Figure 7: Bevel and Emboss


Figure 8: Stroke

It should look like this:

Figure 9: Completed button

Add Text


I used the Franklin Gothic Medium font.

Figure 10: Completed button

Bevel and Emboss

Figure 11: Bevel and Emboss

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