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
