Glossy web 2.0 button
Learn how to make a nice Web 2.0 style Glossy Button using Layer Styles, also how to make a rollover.
1. Make a rectangle with the Rounded Rectangle Tool (any color) and right click and Rasterize it.
2. Open the Layer Style and add these values:
3. Inner Glow
4. Bevel and Emboss
5. Gradient Overlay: #99b910 to #d1dc42
6. Stroke: #d1dc42
7. You should have something like this:
8. Over a New Layer, make a selection with the Elliptical Marquee Tool as shown below:
9. Make a Radial Gradient white to transparent and change the mode to Soft Light and Fill 40%.
10. Right click over the thumb while pressing Ctrl and go to Select/Modify/Contract and put 2 px, then go to Select/Inverse and press Del once. Ctrl + D to select.
11. Add text using Segoe 25 pt.
12. Then add it a Drop Shadow.
13. Now we’re going to make a Rollover using the same button, duplicate it and change the Gradient Overlay: #2a2e2f to #4a5052 and the Stroke #454b4d. Note: If you want to have both separete, copy all the layers and put them each one into a group.
14. And you’re done.
231 Kb
Random Tutorials
That’s similar to the technique I just posted yesterday: http://antonpeck.com/journal/how_do_i_make_glossy_buttons/
[…] windows vista layout 2 […]
Dude, the PSD link is incorrect.
http://www.avivadirectory.com/photoshop/wp-content/uploads/psd/glossy_button.psd
Thanks for the tutorial!
Whooouu, nice tutorial…i like it very much…
I searched a long time for this kind of button. Now I find it… Brilliant! You have done great work! Thank you!
so nice tutorial..i like it..i can learn, thnks ya
Really nice! I used this button in my site and it perfectly matches with the site design
[…] no luck from you guys but i didnt eventually find decent tut’s heres some for you guys: Glossy web 2.0 button // Adobe Photoshop Free Tutorials at Photoshoplovr.com How to make transaparent "bitmap128" in Photoshop - An Article by Philip De Jesus […]
Very nice tutorial. Thanks alot. I suggest adding a small bevel into it to make it look chisled in.
[…] Glossy web 2.0 button // Adobe Photoshop Free Tutorials at Photoshoplovr.com - 注釈有 […]
Great tips — best part for me is the text drop shadow!
Thanks for the instructions to make an web 2.0 button. I needed some on my webpage and they were easy to make! Check them on http://www.hypotheek-weetjes.nl
where can i find the Elliptical Marquee Tool?
i cant understand thi9. Make a Radial Gradient white to transparent and change the mode to Soft Light and Fill 40%.
k got it.
Thanks for the great tutorial.
Tried it just now and am very happy
super button
Nice tutorial, but no need to rasterize the shape. All the effects can be applied to a shape, and it can be resized at will. You’d have to recreate the elliptical highlight if the resize goes too far, though, unless you make that a shape and mask it.
Nice tutorial. Thanks, we certainly can use it. Menno
Leave a Reply