Creating a Glass Button

Creating a Glass Button

Photoshop CS6 Tutorial

 

How to Create a Glass Button in Photoshop

 

 

Glass buttons can be found throughout the web. Creating a glass button requires a little knowledge of Layer Styles, Gradients and the Styles panel.

 

Step One

Open a new 512 pixel by 512 pixel Photoshop document (File > New).

Step Two

Set the Foreground and Background colors to a dark and light version of your new button color. The dark version should be the Foreground color.

Step Three

Select the Ellipse Shape tool. Make sure it is set to Shape with no stroke in the tool options.

Step Four

Click-drag to add an oval shape to the document.

Step Five

Double-click just to the right of the shape layer name in the Layers palette to open the Layer Style panel.

Step Six

Click Gradient Overlay to add a gradient and view it's options. From the gradient options, choose Foreground to Background.

Step Seven

Click Stroke to apply a stroke around the button. Set the stroke Size, then change the color to a lighter shade of the button color.

Step Eight

Click Inner Glow and set the color to a light shade of your button color. Adjust the Size and Opacity to enhance the button.

Step Nine

Click Drop Shadow to apply a drop shadow to the button. Adjust the Opacity, Distance and Size.

Step Ten

Click Inner Shadow to add the button reflection. Deselect Use Global Light and set the light angle to 90.

Step Eleven

Set the Color to white and the Blend Mode to Screen.

Step Twelve

Adjust the Distance to add a reflection to the button. In our case the Distance was set to 36. You may need to decrease the Opacity to soften the effect.

Step Thirteen

Open the Styles menu (Window > Styles). Make sure the button shape layer is selected, then click the Create New Style icon at the bottom of the Styles panel. A new style now appears in the panel.

Step Fourteen

To apply your style to a new button, draw a new Rounded Rectangle Shape in your document.

Step Fifteen

With the new rectangle shape layer selected, click the new style icon in the Styles panel.

Now the Quick Way

Another way to create a glass button is to use an existing Layer Style. There are several glass textures available in the Layer Styles libraries. From the Styles panel pull-down menu, choose Web Styles. Click OK to accept the new library and view your new texture presets.

Try Your New Style with Other Shapes

In addition to ovals and circles, you should find that your new style also works with rounded rectangles, custom shapes and text objects.

Editing a Style

To edit a style, apply the style to a shape layer. Open the Layer Styles for the shape layer and make your changes, then save your new Style in the Styles panel.

 

Lynda.com career skills