Photoshop: Create a Glossy Web 2.0 Button

Posted on 02. Jun, 2009 by Shawn Ramsey in Design, Featured

Want to design your own Glossy Web 2.0 Button? Here is an easy Photoshop tutorial to help you Create a Glossy Web 2.0 Button similar to the Vista taskbar.

Check out a newer tutorial on Designing a Clean Glossy Button

Simple Glossy Web 2.0 Button Tutorial

1. Open up Photoshop and create a new document. Make sure it is RGB with a white background. Make the dimensions 400 px X 300 px.

2. Grab the Rounded Rectangle Tool. Click the drop down arrow and make sure that Snap to Pixels is checked. Also, make sure that the Corner Radius is set to 8 px.

3. Draw a Rounded Rectangle about 40 px tall and as long as you want.

4. Now lets change some layering affects. Start by selecting Layer>Layer Style>Stroke… from the top menu bar in Photoshop. Make sure that you are on the shape layer, and not the background layer. Change the settings as noted in the screenshot below:

Now lets add a gradient. Slide the color selector from the bottom right side to the right to roughly 50% and make sure the color is black #000000. Add another color selector at about 51% and change its color to #272727. Change the color selector on the right to #686868. Change the other options to match the screenshot below.

5. You should have something that resembles the picture below.

Lets change a few more settings to make it appear polished.

First, select Inner Glow and change the settings.

Now lets add a Drop Shadow.

And finally, let’s add an Inner Shadow.

6. Change the background color to a medium grey in order to see the results better. To do this, highlight the background layer, and hold Ctrl and Backspace with the medium grey already selected. You should have something similar to the picture below.

7. Finally, lets add some text. Use the Lucida Sans Unicode for a clean font to add text to your button.

Here is an easy way to change the button color

1. Go to Layer>Layer Style>Gradient Overlay… and change the gradient colors to whatever you like.

Here is an example of three different colors of the button, easily manipulated by changing the Gradient Overlay colors.

Download the PSD

Note: You may also try using the fonts Eras: Bold or Med and Lucida Bright for button text.

Share it if you like it:

Tags: 3D, Photoshop

One Response to “Photoshop: Create a Glossy Web 2.0 Button”

CC

02. Sep, 2009

Of all the tutorials I have seen on the subject this is the simplest and more stylish of them all.

There are some sites that make you jump hoops and still the buttons don’t look glossy at all and the processes are complicated or sometimes one’s outcome is not as the one described.

Thanks so much, I hope you don’t mind me linking to this tutorial

If so let me know.

Reply to this comment

Bluefaqs