Customer Street and UFindUs Web Design

In this Photoshop button tutorial you will learn simple ways of creating glass buttons in Photoshop. A lot of website and graphic designers spend hours, days and even weeks trying to create glass buttons. Unfortunately many have tried and failed. I’m not saying this is going to be the world’s best glass button or a perfect glass button but it will be visually good enough to do the job.

Lets make Glass Buttons!

When creating glass buttons you must first create a flat coloured object as the base graphic. Start by making a circle using the Photoshop marquee tool and fill using the paint bucket.

Select, Modify and Contract

After you have done this go to Select whilst highlighting the shape with the marquee. Go down the menu to “Modify” and you want to “Select” contract. This will bring up a pop-up box asking you how many pixels you want to contract by. For this I chose 6 pixels because of the size I have designed it at.

Using tools for creating glass buttons in Photoshop

Now your marquee is 2 pixels smaller than the shape. You need to select the gradient tool and have it one colour to transparent; this can be selected in the gradients heads up display under the main menu when the tool is selected.

Creating a glass shine in Photoshop

Now we are going to be creating the glass shine. Drag your Photoshop gradient tool from out side the marquee to the center of the shape. (Note: Also remember to do this on a separate layer.) Once you have done this, drag the circular marquee around the gradient layer. Make sure you get 65% of the gradient covered you need to invert your marquee (CTRL - I) and delete the bottom of the gradient that’s mostly transparent, this should create an effective glass looking shine.

Here’s where things start coming together, lower the opacity to around 90% and add an inner shadow using your Photoshop layer style editor on the base shape.

Photoshop gradient glare

On a new Photoshop layer between the main glass button glare and the base shape create a circular gradient this is selectable via the heads up display under the main Photoshop menu when you have the gradient tool equipped. Once you have a circular white glare drag it to the bottom and place opposite the shadow. you should now have a reasonaly good looking gradient glare that doesn’t look out of place.

Creating an icon for your glass button

Adding or creating an icon or text on top of your images is easy. If you’re adding text like I did use Photoshop’s to add a layerstyle menu to add a drop shadow to give it a bit more depth.

Glass button extras

You don’t have to do this if you don’t want to, but to give it extra character I added a window silhouette. In Photoshop simply make a square marquee, create a white gradient top to bottom and cut out a cross shape. Then skew the top inwards and lower the opacity centralising it within the glass button glare.

I hope you found this tutorial “creating glass buttons in Photoshop” useful. If you found this a little confusing and you would like to see how the final product is supposed to look, I have included the Photoshop PSD. NOTE: You may use this artwork for educational purposes only.

Download Glass Button PSD

3.8

after 5 Votes