The reasoning behind this post is that I am trying to enhance my graphic skills and web design skills so as I learn little things I will try to help share my findings with others. Who knows maybe someone else out there is trying to do the same thing and learning Fireworks 8 or Photoshop themselves.
This quick tutorial will help you create nice looking buttons for your website or you can apply the glass effect to other graphics. I use Macromedia’s Fireworks 8 for my graphics just because its an easy graphics package and I don’t really need all the features of Photoshop, although I have that as well. You can use just about any graphics program to create these button images.

1. Draw your Button Create a 200×200 pixel document in Fireworks and draw a rounded rectangle in the middle.
2. Select the rectangle, and in the Properties panel choose ‘Linear’ as the fill type. Click on the Fill Color Swatch in the properties panel, and click the black color slider. Enter #006699 in the text box
3. Rotate the gradient so the blue color is at the top. Go to the Effects section in the properties panel and choose ‘Shadow > Inner Shadow’ reducing the distance to 0 pixels and the opacity to 65%.
4. Next Add a drop shadow, reducing the distance to 2 and the opacity to 50%

You can stop her and have a nice looking button as it is, but to touch it up a little throw the ‘Glass Effect’ on it.

5. To make the beveled button into a glass button, draw a small rounded rectangle along the top, and fill in with a white and black linear gradient.
6. Go to the layers palette and set the blending mode to Screen.
7. Rotate the gradient so the lighter part is at the top.

You should now have a finished button that looks like the one above.

Questions? Comment’s?