• Tweet

This tutorial will teach you how to create your own glass buttons, it’s a style that seems to be in fashion at the moment so here goes…

1: Firstly you need to draw your shape, so select a rounded rectangle shape (U on the keyboard). Set the radius to 50px and draw your shape.

2: The next step is to rasterize your shape so that you can add a gradient. Select the shape layer and from the layers palette Crtl-click (right click on a pc) and select Rasterize Layer.
3: Now select your colours for the gradient. For my gradient I used a dark blue colour: 1052AD and a light blue colour:96DBFF
4: Next you want to select your layer so that it shows “marching ants” around it. Apple click the layer (alt-click on a pc).
5: Delete the contents of the box. (Edit > Clear) and draw a vertical line with your gradient tool from the top to the bottom.
6: Next duplicate your layer. Layer > Duplicate. Create a new gradient with the foreground setting in white make sure you have selected a foreground to transparent gradient.
7: Repeat your earlier steps i.e select the object and clear the contents and again draw your gradient from top to bottom. This time only draw the line to half the height of your shape.

8: The next step is to shrink the highlight. Select the highlight layer and go to Edit > Transform >Free Transform. Pull in the sides until you get your effect.
9: Add your text and place it between your highlight layer and the shape.
10: The final step is to add a shadow so add a layer effect to the shape layer. Select the layer in the layers palette and click the small “f” (add layer style). Select the drop shadow option by ticking the box and choose a colour a little darker than the darkest colour of your button.

About Jo

I'm the owner of Jo's Web, a professionally qualified graphic designer who has been involved in the industry for over 20 years. I have worked as an art editor for London publishing houses, B.B.C , Haymarket and now run Spiral Pixel Design.

• View all posts by Jo →
• Blog
• Twitter
• Facebook