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

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.

Img

2. Open the Layer Style and add these values:

3. Inner Glow

Img

4. Bevel and Emboss

Img

5. Gradient Overlay: #99b910 to #d1dc42

Img

6. Stroke: #d1dc42

Img

7. You should have something like this:

Img

8. Over a New Layer, make a selection with the Elliptical Marquee Tool as shown below:

Img

9. Make a Radial Gradient white to transparent and change the mode to Soft Light and Fill 40%.

Img

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.

Img

11. Add text using Segoe 25 pt.

Img

12. Then add it a Drop Shadow.

Img

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.

Img

14. And you're done.

Img



Author's URL: avivadirectory.com
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


Like us to: