Make Money with Photoshop

Join our mailing list to receive the ShowAndTell-Graphics Newsletter. You will get an email whenever a new tutorial is added, or when new Myspace layouts are created.

At ShowAndTell-Graphics we value your privacy. Please view our privacy policy.

Come join me on Myspace! Click here to view my page. Drop me a note and say "Hey!"

Search Query
Do you want to know how it's done? Learn how to use Photoshop the easy way!

How to Create Glossy Buttons for the Internet
Photoshop Training

Recently I needed to create some buttons for use on a friends website. He didn't want the standard type of buttons like I use for the menu on this site. He wanted glossy 3D buttons that pop out and make you say "oh pretty". Now this is nothing terribly new. A lot of sites use these type of buttons. I had just never made one before. I surfed around on the internet and found a few sample buttons to use as inspiration. Once I figured it out, it was pretty easy, and they look really cool. Of course any time I think of something new to do in Photoshop, I usually decide to make a tutorial out of it. This time is no different.

I am going to start with a new document that is 300x300 pixels at 72 pixels per inch. Remember that whenever you are creating an image to be used for the web to use this resolution of 72. Anything higher will only create a larger file size with no added benefit.

I am going to create a rounded corner rectangular button. The first thing to do is grab the Rounded Rectangle Tool, and then drag across the document until you get the size and shape you are looking for. At the top of the screen there is a place to adjust the radius of the corners. I have mine set to 30 px.

Next right click in the middle of your shape and choose Make Selection with a feather radius of 0. You should now have the dancing ants indicating a selection.

Double click on the foreground color tile and select the color for your button. I am using a shade of orange #E28309.

Select Edit/Fill and choose Foreground Color from the drop down menu. Hit Ctrl+D to deselect it.

Now we need to create the highlight for the button that will really make it stand out. Change your foreground color tile to white. Create a new layer by choosing Layer/New/Layer and click OK. Go back to the Rounded Rectangle Tool, and create a selection as shown below. Remember to first make your shape and then right click to change it into a selection as we did above. Set the feather to 0 for a glossy button. Set the feather to 3 or 4 for more of a matte finish. If your shape is not exactly centered, don't worry, we can move it after it is filled.

Select the Gradient Tool, and change it to Foreground to Transparent mode at the top of the screen.

Start at the top of the highlight selection and drag down about 75% across the selection. If you hold the shift key while doing this, it will make the gradient perfectly straight. Hit Ctrl+D to deselect it. And really that is all there is to it. Add whatever text you like and you're good to go. It's amazing how glossy and 3D it makes the button look.

And here is what it looks like with a matte finish.