FW4 Aqua Button
Make a very convincing Mac Aqua style button in only two layers.
| User Level: | Intermediate |
|---|
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. |
User Reviews
Total of 9 reviewsHow to fix Symbol Problem
Written by Joey Longo on October 11, 2005I 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 ...
Kool
Written by Ade O. on May 29, 2005kool, very easy. wish too have more tutorials liek this that have less click before u get what u want. love it.
last few steps
Written by Rashi Thadha on December 16, 2003Got 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!
Written by Ed Terry on September 11, 2003i used a script style font instead though, gave the button a kind of contrast that worked well.
RE: Another Step
Written by c e on September 4, 2003Adding a feather effect to the hilight layer will make the button look amatuer-ish and just plain ugly. The purpose of this tutorial is to make a Button that looks like the Apple Aqua Buttons. Go to Apple.com to see examples. See how the look like ...
Great but...
Written by Andy Bee on July 18, 2003Hello, I tried this out and it worked great. However... I wanted to make a button symbol from it, and when I did, something strange happened. The instances of the button would render incorrectly, as if the blend mode on the top rectangle (hilight) ...
Lost it's touch . . .
Written by Jason Janeaux on May 31, 2003Excellent help, but the last few steps were very vague.
Button symbol
Written by David Hagelthorn on March 4, 2003This is great and I like the effect - my only comment would be that when you create a button symbol, the screen layer does not respond how it should (or is that just me?)
