Let's spend a little time getting into some more advanced ideas - like those gorgeous, gel-cap like Aqua buttons. Believe it or not, they're not too hard to create with a couple simple observations.
I'll be doing this over a grid background so you can see the effect as it's built up.
Aqua-Like Glass[]
As always, we start with a basic shape. But this time we're going to make use of the Contour Gradient, instead of the Linear one. And we're also going to shove the center color out toward the edge, like so:
Which gives us:
If you're wondering WHY we're doing this, look at a glass bottle. You'll see that near the edges of the curve the glass gets darker and is more transparent in the center. While we could play with transparency as well as color, it wouldn't add much except for time to create.
Set your basic object to opacity 80%.
We place another rounded rectangle over the first.
This one gets a 100% to 0% opacity gradient, but we only use about 2/3 of the shape's height.
Set the opacity of this one to 80% and give it a 3px gaussian blur.
Add another rounded rectangle over the first, this one with tighter corners and only about 2/3 the height of the first.
Apply a 100% to 0% gradient to this one as well, again not using the whole height of the shape.
80% opacity and a 0.5px gaussian blur.
Now you can add in your text. I find Arial Bold works well.
Adding Depth[]
We could be done right there, but there's one more touch I like to add that I think gives it a very subtle, extra bit of "oomph" by giving the hint of reflection of the text off the "Back wall" of the gel-cap. This is nowhere near necessary - I just like it myself.
Duplicate your text and "perspective" it. Fireworks has no "perspective" transform, so you'll have to freehand it by dragging the lower corners straight out in "distort" transform and then squashing it height-wise.
20% opacity and a 1px gaussian blur.
And finally, put your text layer back in place.
And there you have it. Is this the only way to create Aqua/Glass buttons? Certainly not. Is it the right way? Probably far from it. But this is fairly quick and does a decent job of getting to the look without taking a ton of time.
Colors and Action[]
Hey, there's one more thing to think about, if you're making glass buttons. How do you show active/inactive buttons and how do you show action like, say, onMouseEnter and onMouseDown?
Well, it's really not very difficult at all. Check out these examples:
The first one is just green instead of blue. Easy enough. The second one has a red highlight, but the background uses a grey gradient - from #333333 to #000000. Simple as that. Nice "inactive" look for a red button. This should work on most any color, too.
Not shown, an onMouseEnter could change the text from black to white. But for the "push" effect, we reduce the drop shadow on the main button layer and add an "inner shadow" effect to darken the left and top of the button, making it look as though it's been pushed a little below the surface, casting a shadow into the back of the button.
I did up a little Liquid Button Demo for people to check out. It shows off what the buttons look like when they're hovered and pressed. I also added a "cancel" button with hover and an inactive button. Enjoy!