Black Glass Tutorial

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.



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.



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.



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



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.)



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



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.



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.



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.



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.



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



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



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 at a higher zIndex, of course.