Photoshop -> Web Graphics -> Glossy Buttons
Glossy Buttons
- Feb 21 2006
This tutorial will show you how to create those smooth, glossy buttons that are so popular these days.
Tutorial Monkey is a database of technology-related tutorials. We write our own tutorials as well as linking to other ones in the web. If you would like to submit a link to your tutorial, feel free to do so. Just click on "submit" at the top of the page. Note: Images may result in loss of quality due to the fact that we must resize them to fit the design. You can click resized images to see its original image in a new window. Sponsors Step 7
Now, select your gradient tool. You have a choice of linear, radial, angle, reflected, or diamond gradients. We will want to use the linear one. Make your foreground color white and change the gradient type to foreground to transparent. 
Click and hold below the button (about half of the buttons height) and drag while holding shift (to make the gradient perfectly straight) up above the button (about half the buttons height). 
A very suddle gradient of white to transparent is put into your selection. The idea here is to get a good refraction that isn?t too soft or isn?t too hard. If it is too soft then the button will look less glossy, but if it is to hard the button loses realism. 
Step 8
Click on the base layer and add a new layer named 'bottom glow'. Get your brush tool and set the hardness to 0 and the size to about 3/4 the height of your button. Change the flow to about 50%. 
Now hold ctrl and click on the base layer thumbnail (the little picture of the layer, not the name). Be very careful to remain on the bottom glow layer and not the base layer. We are just getting the selection of the base layer so we only paint on the button. This tutorial is paginated, please navigate [ Steps 1-2 ] [ Steps 3-4 ] [ Steps 5-6 ] [ Steps 7-8 ] [ Steps 9-10 ] « Back |