How to Make a Glass-Look Icon
A 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
- First, make a simple shape. For this example, I used Fireworks' built-in arrow shape.
- 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.
- Give 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.
- Change 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.
- Adjust the gradient direction so it's vertical with the darker color on the bottom. Now it's really starting to look like something!
- 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.
- 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.
- 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.