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

hosting

  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

Stroke

Figure 8: Stroke

It should look like this:

Figure 9: Completed button

Add Text

Font

I used the Franklin Gothic Medium font.

Figure 10: Completed button

Bevel and Emboss

Figure 11: Bevel and Emboss

Final Preview

   

ABOUT THE AUTHOR

 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