Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Glossy Buttons

Glossy Buttons


In this tutorial, I am going to teach you how to make a simple, fast, yet attractive button good for use in navs, forums, ect.

1. Make a new document, 200 pixels wide, 150 pixels tall, with a white background. Create a new layer.

2. Take the rectangle marquee tool, and draw a selection similair to what I have shown below. It should be about three times as wide as it is tall.

image 1

3. Now fill that rectangle with a dull grey (make sure you are on the new layer). I used #959595. Now open up the blending options for that layer (Layer->Layer Style->Blending Options), and apply the following:

image 2

image 3

image 4

4. Okay, now create another new layer. Ctrl+Click the first layer (while the second layer is still the active layer), and go to Select->Modify->Contract, and contract the selection by 5 pixels. Now, on the second layer, fill in the selection with the color you want your button to be. I chose #006C99. Now, you should have something like this:

image 5

5. That button doesnt look like it has much depth does it? Lets go to Blending options again (this time on the second layer), and change that. Apply these settings:

image 6

image 7

And you will end up with something like this:

image 8

6. Now thats good and all, but its lacking a certain something. Lets apply that trendy gloss effect to it. Create a new layer, and use the elliptical marquee tool to select something like this:

image 9

Now, get out your gradient tool, and set your foreground to white. Now use the Foreground->Transparent gradient to create something like this:

image 10

image 11

Now, with the third layer selected, hit Ctrl+Click on the second layer, then go to Select->Inverse. Now hit the delete key. Your done! Add some text, and you have yourself a nice little nav button:

image 12



Author's URL: Fife
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Glossy Buttons"

Captcha