i-Phone-like buttons

624

Thierry Lorey

604

50127

7 October, 2010

Description

Awesome i-Phone-like buttons in Adobe Fireworks using the Photoshop Live Effects. 

Requirement

Fireworks 4 and higher

Tutorial

1. Final Preview



Figure 1: Final Preview

2. 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

3. Styling the Stripe

Apply a vertical gradiant effect for your background.



Figure 3: Final result

It should look like this:



Figure 4: Gradient

4. 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

5. Styling the button

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

1. Gradient Effect



Figure 6: Gradient Effect

2. Photoshop Live Effects

Bevel and Emboss



Figure 7: Bevel and Emboss

Stroke



Figure 8: Stroke

It should look like this:



Figure 9: Completed button

6. Add Text
1. Font

I used the Franklin Gothic Medium font.



Figure 10: Completed button

2. Bevel and Emboss



Figure 11: Bevel and Emboss

7. Final Preview



Figure 1: Final Preview

Where to go from here

1. How to make items stand out

Download