How to Make a Glass-Look Icon

arrow circle hexagonA lot of the icons available for MacOS X and Windows XP have a cool, glass-like, three-dimensional look For example, these icon sets from InterfaceLIFT. Making your own glass-look icons is easy with Macromedia Fireworks. Here's how I did it:

The Instructions

  1. step 1 First, make a simple shape. For this example, I used Fireworks' built-in arrow shape.
  2. step 2 If you've created a shape with a compound path, simplify it. Modify > Ungroup will simplify a built-in shape. This is important because you need to have all the stroke options available for the next few steps.
  3. step 3Give your shape a 2-pixel-wide stroke that's a shade darker than the main color. In the stroke color selection box, choose "Outside Path" from the drop-down list at the bottom.
  4. step 4Change the fill from Solid to Gradient > Linear. Put your icon's main color at the end of the spectrum and a lighter tint of the same color or white at the other end.
  5. step 5Adjust the gradient direction so it's vertical with the darker color on the bottom. Now it's really starting to look like something!
  6. correct Copy your shape and paste it on top of the original. Remove the copy's fill and change its stroke to white, 1 pixel wide, Inside Path.
  7. step6 Reduce the opacity on the white outline you just made. I used an opacity of 60 here. Change the edge of the stroke to 10 to make the line blurry.
  8. step7 Finally, give the original shape a subtle drop shadow to make it look three-dimensional. I used a distance of 2, opacity of 30, and blur of 1.

Valid XHTML 1.0!