Home - Tutorials - Photoshop - How to create a reflective button

Tutorials
How to create a reflective button

Author Nicholas Hall | Saturday 9th June 2007 | Photoshop | Views: 210 | Rating: Rating 3.5

Nicholas HallNicholas Hall
Nicholas is a accomplished web developer.
He owns NPA Media and many more well known sites.

View all articles by Nicholas Hall
How to create a reflective button
Step 1:
start out with a new document 400x400 and creat a new layer. now go to your "rounded rectangle tool" and make the Radius :5 then make a box like shown below.

Nicholas/glassbtn1.jpg

Step 2:
now we are going to add our layer styles. start out with a gradient and use my settings below.

Nicholas/glassbtn2.jpg

Step 3:
now we are going to add a stroke, use my settings below.

Nicholas/glassbtn3.jpg

Step 4:
now we are going to add a Inner Glow, use my settings below.

Nicholas/glassbtn4.jpg

Step 5:
now we are going to add a Drop Shadow, use my settings below.

Nicholas/glassbtn5.jpg

Step 6:
You should have something like this. make a new layer to get ready for the next step.

Nicholas/glassbtn6.jpg

Step 7:
On your new layer get your Rounded Rectangle Tool and make the Radius 15 and draw a shape like shown below. (use white)

Nicholas/glassbtn7.jpg

Step 8:
now get your Smudge tool and make the Brush size 15 and smudge both corners down like shown below.

Nicholas/glassbtn8.jpg

Step 9:
then make the layer opacity 30 and slap on some text and you should have something like this.

Final Image


Nicholas/glassbtn9.jpg

I have also added a few variations by pressing Ctrl+U you can change the hue of the image to make multiple colors of the same button.

Nicholas/glassbtn10.jpgNicholas/glassbtn11.jpg


del.icio.us it Digg this Furl Reddit Yahoo! this!


How would you rate the quality of this article?
Poor Excellent