FW4 Aqua Button

Make a very convincing Mac Aqua style button in only two layers.

Fireworks 4 Tutorial :: Aqua Button

This tutorial will work perfectly on all shapes but looks best on rounded objects.

Step 01 :: Shape/Gradient

Draw a rounded rectangle in the middle of your canvas with the Rounded Rectangle Rool (R).

Go to you Fill Panel(Shift + F7) and choose Linear from the dropdown menu.

Edit the gradient and change the first color to #CCCCCC and last color to #FFFFFF.

Select the Arrow Tool(V) and adjust the gradient bar so that it looks like the image to the left.

 


Step 02 :: Inner Shadow

With the rectangle layer selected, go to your Effect Panel(Alt + F7) and choose Shadow and Glow | Inner Shadow from the dropdown menu.

Set the options as seen in the image on the left.

Press enter and your image should look like the image on the left.

 


Step 03 :: Shadow

With the rectangle still selected, go tto the Effect Panel again and choose Shadow and Glow | Drop Shadow from the dropdown menu.

Set the options as seen in the image on the left.

Press enter and your image should look like the image on the left.

 


Step 04 :: Hilite

Draw a new rounded rectangle at about 80% of the width and 50% of the height of your original rectangle. Move it to the top 3/4 of your first rectangle.

Go to the Fill Panel and choose Linear from the dropdown menu.

Change the gradient White, Black in the dropdown menu below the Linear dropdown.

Select the arrow tool and adjust the gradient bar so that it looks like the image to the left.

Finally, go to your Layers Panel and change the blend mode of your top rectangle from Normal to Screen. Look at the screen shot to the left for an example of the Layers Panel.

 

Step 05 :: Final

Add a text layer below the top rectangle layer and you will have a very convincing aqua style button.

Place your comment about FW4 Aqua Button




You must me logged in to write a comment
Comments
How to fix Symbol Problem
October 11, 2005 by Joey Longo

I ran into this same problem and have there is a way to make it a button. Instead of making that top highlight black to white gradient, make it white to white and turn down the transparency on the bottom part. That will translate into the button fine and should fix your problems.

Joey

Kool
May 29, 2005 by Ade O.
kool, very easy. wish too have more tutorials liek this that have less click before u get what u want. love it.
last few steps
December 16, 2003 by Rashi Thadha
Got lost in the last few steps - just can not work it out how to get the end result - It would be nice if you could just download the file
Worked Great for me!
September 11, 2003 by Ed Terry

 

i used a script style font instead though, gave the button a kind of contrast that worked well.

See all 9 Comments