The are plenty of tutorials on the web doing this very same thing. But I thought I would put up my basic method for creating a glassy reflective button. It is a simple method and works for quickly creating small buttons for the web. This is done in Illustrator CS2 but any vector application could be used with this method

1. First I usually setup a document size to match the button. If you would rather use a larger page size and build it on that page that is fine. Sometimes you may need to use the crop tool to make sure your button is the dimensions you want.

2. Next, select the Rounded Rectangle Tool. Draw a rectangle to the size you want your button. You can set the radius of the rounded corners.

3. Use the gradation tool and select your colors. I like to make a basic linear gradient, but then I lighten the color a little at the end. I drag the gradient up at a 90 degree angle over the button.

5. Copy the button to the new layer and set the color of it to white. So now you have the gradient button on layer 1 and the white button on layer 2.

6. Draw a rectangle over top of the white button about 1/3 of the way down and past the bottom of the button. This will be used to cut away the bottom portion of the button.

7. Using the pathfinder palette select the subtract button. That will remove the bottom portion of the white button on the top layer.

8. Using the transparency palette while the white portion is selected lower the transparency so the white creates a reflection on the top of the button.

9. Create another new layer in between the top white and the bottom gradient. Using the text tool add your text for the button.

10. That finishes the button. Now use the save for web. I usually use png as my format. If you need transparency against a color background, you can select both transparency and the mat to use for the background color.

If you need a mouseover effect for your button, it is very easy to make a nice color effect by altering the gradient some. Try mouseing over it.

• Add new comment