How To Make Simple Glassy Buttons in Photoshop

No Web 2.0 Web site is complete without a smattering of glass-like buttons. This simple Photoshop tutorial quickly shows you how to make these little buggers in a jiffy. The process is quite simple, but I’ve spelled it out with as much detail as possible for any new-comers to Photoshop. Obviously, if you’ve experience, just scan for gist ;-).

glassy button 01
The desired result.

Step 1: Open a new Photoshop file. You can make it any size you want, but for this tutorial, we’re going with 200×100 (72 dpi). Background colour is inconsequential, but set it to transparent, and then you can stick the button on whatever part of your Web site you like and it’ll match.

Step 2: Choose what the primary colour of your button will be. Select this as your Foreground Colour. Select a much lighter, but similar, colour for your Background Colour.

glassy button 04Step 3: Click and hold the Rectangle Tool (directly below the Type Tool), this will allow you to select the Rounded Rectangle Tool. Once selected, draw a rounded rectangle to roughly the dimensions of your box. It should be filled with your Foreground Colour, but if not – fix that. 😉

glassy button 08
Should look like this.

glassy button 05Step 4: Now we add some style to the button. In the Layers window, double click the layer called “Shape 1”. This will bring up your Layer Styles. Select Gradient Overlay, and choose the Foreground to Background gradient type. If your preview is on, you’ll see a gradient fill your button with the lighter colour (background) at the top and the darker colour (foreground) at the bottom. Reverse this (just select the Reverse option).

Step 5: While we’re in the Layer Styles box, lets add a stroke around the button to give it a bit of a border. Select the Stroke style (last in the list), set the stroke to 2 pixels, and choose a colour the same as or darker than your Foreground Colour. Click OK and close the Layer Styles.

Step 6: Our button is looking good, but we need a bit of a glare to give it that glassy look. To do this, simply hold down the CTRL key and click on the Shape 1 Vector Mask. This will cause the shape to be surrounded by a Selection (the marching ants) line. Now create a new layer (careful not to deselect the selection – if you do, just repeat the first part of this step).

glassy button 03With the new layer selected in the Layers window, and the selection still loaded on your image stage, click the Select/Modify/Contract… menu, and contract the selection by 5 pixels. Now, make sure your Rectangular Marquee Tool is selected, hold down the ALT key and you’ll see a minus (-) sign appear beside your mouse pointer. Click and drag a box around the lower 2/3rds of your selection. This will subtract that part from the selection. You should be left with a small box with its top corners rounded.

glassy button 02Step 7: Use the gradient tool to fill this selection. Make the gradient go from white to a colour from approximately the middle of your button (mid way between your original Foreground and Background colours). Set the Opacity of this layer to about 50%, and use the Gaussian Blur filter to blur it a bit (radius of 1.5 should do it).

Step 8: A button is of little use without a bit of text. Add some, and throw on a touch of drop shadow by double-clicking the text layer and bringing up the Layer Styles window again. Ah hell, if we’re going to do the most overused Web 2.0 graphics trick, we may as well overuse the most used Web 1.0 one as well – add a bit of drop shadow to the button by double clicking the Shape 1 layer. Now, sit back, crack a cold one, you’re done.

glassy button 09
Voila!

14 thoughts on How To Make Simple Glassy Buttons in Photoshop

  1. I wrenched my arm patting myself on the back for getting the new template up at http://blogofdreams.com without blowing up the server….

    Now I have a dent in my forehead from the many wow, slap, wows that went with seeing this baby….

    You never cease to amaze me…

  2. Hey, cheers Lonnie – I’m still getting stuff going over here, but glad to have you visiting.

  3. Yak! Coffee Cola! Better it burn a whole in your nose than in your gut. That stuff is brutal 😉

    @TaiTai: If you’re looking for me to tell you where to stick it…

  4. PHP. WordPress. Photoshop? You were almost on an open-source roll. How about a glassy button tutorial using GIMP?

  5. Haha, maybe next time. I used GIMP a bit in my brief journey into the wild world of Ubuntu, but haven’t used it since.

  6. Shaun,

    I can’t really go for a piece of software that costs thousands of dollars, but I wasn’t much of a fan of GIMP when I tried it, either. I hear that many, many movie studios are using CinePaint, though. That includes The Last Samurai, Spiderman, Harry Potter, and a lot of other first-run titles. I’ve never used it myself, but it may be the program you’re looking for.

  7. Pingback: How To Make Fast Hover Effects | Dao By Design Blog
  8. Ryan, you’re turning into my favorite far-away-from-Denmark-guy faster than I perform in bed. Very cool guide and easy to understand. Tnx man.

  9. Haha, thanks Peter. I’ll be doing a round glassy buttons tutorial soon. Just swamped at the moment.

  10. Hey Ryan, Great tutorial … I had been trying to figure this out. I do have one little problem though, when I do step 6 and get to the part after Select/Modify/COntract, I do as you say and make sure the rectangular tool is selected, but when I hold down the ALT key it does not bring up the (-) sign next to my mouse, it selects the eyedropper tool. Is there another way for me to get the (-)?
    Thanks, Karl
    P.S. Or a way to change the shortcut associated with the ALT key from eyedropper to whatever function the (-) is called?

Say something...

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Return to Top ▲Return to Top ▲