Creating Glossy Buttons in Photoshop CS3

One of the things I seem to have people ask me a lot is how to make glossy buttons. There are a lot of different ways to do this but this is usually how I do mine.

First create a new Photoshop file of any size with a white background. Next create a new layer. Set your foreground color to black. Now select your Ellipse tool

Hold down your shift key and drag your circle out to your desired size. Now we have our circle. Now lets add some color. Remember you can use any colors you would like but for this tutorial I am going to use shades of blue. Double click on your layer with the circle in it to bring up your layer styles. Check Inner glow and apply the following settings for your inner glow. The blue that I used is #4ebaf8.

Next we are going to add a gradient overlay. Make sure to set your style to radial. The colors I used are #d1d1d1 for the gray and #2a6485 for the blue

And for the stroke I used #1181c8 for the blue outline

Now you should have something that looks like this

Now we need to apply the glow. Add a new layer and call it glow. Now select your Elliptical Marquee Tool. Now drag your Marquee tool over the top portion of your circle going outside of your circle at the top and sides.

Now make sure you are in your new layer called glow. Now select your fill tool and fill your marquee with white. Now it should look like the top portion of your circle is cut off. Don't worry this is what we want. Now change your opacity of the glow layer to 17%. You can now see the glow on the top of your circle. You can set your opacity to any setting you want depending on the look you are trying to get.




Now all you have to do is apply your image to your button. For this example I am just going to use a shape in my custom shapes tool. Create a new layer under your glow layer. This will allow the glow to appear over your image as well. Now your final glow button should look something like this.