Making an "Aqua" looking button in Fireworks

In this tutorial, we will make an aqua-looking button with Fireworks MX.

Of course, there are always other ways and other programs that you could use.

For instance, you can also use Photoshop to make this in almost identical steps.

NOTE: I have made this sample on a grey background to show the button more clearly, but you can set the background color to match your need.

Sample Result:

1/ Open a new file (125 x 40) with background color #CCCCCC. Note that the size of the button can be changed to suit purpose, set the background color to the same as your page background so that the outer area will not shown.

2/ Use the Rounded Rectangle Tool to draw the base of the button.

My button size is 100 x 25, but you can make it as big (or as small) as you like.

3/ Now, use the Paint Bucket Tool to fill the the button base as follow:

The color I used here are: Left side : #9999FF Right side : #FFFFFF

After fill, the button base should look like this:

4/ To make it more 3D like, set its effects as follow:

Drop shadow as

Drop inner shadow as

Drop another inner shadow as

When finished it should look like this

5/ Draw a smaller rounded rectangle on top of the button base.

Its width is about 80% of the base, and height is about 1/2 of the base, and place it like this:

Leave a little bit OF space on the top, and place it in the middle horizontally.

6/ Now, use the Paint Bucket Tool again to fill the top rectangle as follows:

- Use Linear effect
- Set both left and right color to #FFFFFF
- Set right color's Opacity = 0

Then, change the top rectangle's transparency from "Normal" to "Screen".

It should now look like this:

It is beginning to look like an "Aqua" button already....

7/ Now, type the name of the button, here I'll just type "BUTTON" for example, and it should now look like this:

It doesn't look that "Aqua" anymore, does it?

We'll fix this little problem using a little trick.

See on your right hand side where the layer's information is displayed. Currently, your 3 objects are placed in the order as (top to bottom):

1) Text
2) Button Top
3) Button Base

Drag and Drop the Text object so that the new order is:

1) Button Top
2) Text
3) Button Base

And now it should look like this:

8/ Well, that's about it ... just remember when you use it to set up a link, set the border=0, otherwise it won't look good.

 

TIP:
You can also make other colored button - change color used in Step 3 will give you different colored button, just remember you must use a darker color on the left, and a lighter color on the right. Also, use the same lighter color to set both colors in Step 6.