FANDOM


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 Edit

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:

Th button 00

Which gives us:
Th button 01

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%.
Th button 02

We place another rounded rectangle over the first.
Th button 03

This one gets a 100% to 0% opacity gradient, but we only use about 2/3 of the shape's height.
Th button 04

Set the opacity of this one to 80% and give it a 3px gaussian blur.
Th button 05

Add another rounded rectangle over the first, this one with tighter corners and only about 2/3 the height of the first.
Th button 06

Apply a 100% to 0% gradient to this one as well, again not using the whole height of the shape.
Th button 07

80% opacity and a 0.5px gaussian blur.
Th button 08

Now you can add in your text. I find Arial Bold works well.
Th button 09

Adding Depth Edit

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.
Th button 10

20% opacity and a 1px gaussian blur.
Th button 11

And finally, put your text layer back in place.
Th button 12

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 Edit

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: Th button 13

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!

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.