Unofficial Konfabulator Wiki
Advertisement

Creating the "dark glass" style in Macromedia Fireworks is really quite simple, thanks to the way Fireworks handles path objects. We will start exploring this by going through a fairly typical rounded-rectangle look. Once the basics are covered, we can look into creating glass buttons, both rectangular and round, and some more advanced tricks as well.

But first...

The Basics[]

We're going to start things out with a simple rounded rectangle with fairly tight corners. There is a subtle gradient applied to this shape, from top to bottom. It works out to being about #333333 to #000000 in HTML hex-style colors.

Rec 01

Next, we're going to draw some guide lines. Drag from the ruler to create a guide line. For this particular one, I'm putting them at 1 px in from the left and right, again at 10 px in from left and right. 1 px down from top and 10 px down from top. And last, but not least, one down the center of the shape.

Rec 02 Rec 03

Now, we're going to use the pen tool to draw a shape. Take note of the position of both the points on the line AND the curve handles. There are five points, two in each corner and one in the center.

Rec 04

The outside two points have curve handles stretched farther down than up. This is important for the look we're trying to achieve.

Rec 05

Next, we fill the shape we just created with a gradient from top to bottom and set the line color to blank (in Fireworks, that's denoted by a white square with a red / through it.)

Rec 06

Now we need to modify the gradient. It should be White to White, but 100% opacity to 25% like this:

Rec 07 Rec 08

The next step is to add an effect to the layer. We do this through the object properties panel at the bottom of the window rather than through using a "filter". What we're after is a 1 px gaussian blur. While we're at it, we set the opacity of the layer.

Rec 09 Rec 10

Now it's starting to look right. But we're not finished yet. It still looks a little flat. There's an easy way to fix this, and it begins by duplicating your glossy shape, flipping it vertically and positioning it at the bottom.

Rec 11

Now we use the point arrow tool (the white arrow in the tool pallet) and drag the center line point straight up (use the shift key to drag in straight lines!) And don't forget to fix the gradient, which doesn't stretch with the object.

Rec 12 Rec 13

Getting close! Just a couple steps left. Next, we need to change the color of the lower "gloss". Use a very light blue (#66CCFF) for a cool look, a very light yellow (#FFFFCC) for a warm one.

Rec 14

We also need to set the opacity very low and change the gaussian blur to around 4 px.

Rec 15

And there you have it. Your basic "dark glass" look.

Rec 16

A Quick Note[]

Keep in mind - if you want to have that "gloss" exist on top of other elements that Konfabulator is drawing over the dark background, you'll want to copy that upper "gloss" object to a new file and export it with a transparent background. You'll need to position it as a separate <image> at a higher zIndex, of course.

Advertisement