Inset Button using Adobe Fireworks

625

Thierry Lorey

203

24613

11 October, 2010

Description

This tutorial will show you how to create an inset button using Adobe Fireworks. In this tutorial I demonstrate several features of Fireworks including how to use gradients, add shadowing, create shapes, and add filters and effects.

Requirement

All Fireworks versions

Tutorial

1. Final Preview



Figure 1: Final Preview

2. New Document

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

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

4. Text

Add a text 'Try now!'

Now, it should look like this:



Figure 2:

5. Linear gradient to the stripe

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

6. Effects to the button

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

1. Linear gradient

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

2. Apply an inner shadow and a drop shadow



Figure 3:

Now, it should look like this:



Figure 4:

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

8. Final Preview



Figure 1: Final Preview

Where to go from here

1. How to make items stand out

Download