How to Create a Simple Glass Button in Photoshop

By eHow Computers Editor

Rate: (0 Ratings)

Designers often use glass buttons on websites to showcase links, as icons or as titles of content. You can easily make glass buttons for your own website using Photoshop. Even if you're a Photoshop beginner, you should be able to design customized buttons with practice.

Flag Article

Instructions

Difficulty: Easy

Things You’ll Need:

Photoshop 7 or newer application
Computer

Step1

Create a blank document in Photoshop with a white background. Change the foreground color to a light gray color of your choosing once the document is open.

Step2

Select the rounded rectangle tool from the toolbar. Click your mouse button and drag your mouse to draw the size rectangle you want.

Step3

Select the rectangle's layer from the layer menu. Right-click on the layer and select "Rasterize Layer" from the options that pop up.

Step4

Double-click on the layer to open the "Blending Options" menu. You can also access the menu through the menu at the top via "Layers>Blending Options."

Step5

Apply a gradient overlay with the following settings: Blend Mode set as "Normal," Opacity set to 27 percent, Style should be "Radial" and you should check "Align with Layer Box." Set the Angle to 127-degrees and the Scale to 150 percent. Select "OK" to apply the settings.

Step6

Add a stroke to your image with the "Blending Options" menu still open. The stoke should be 1 pixel and run along the outside of the rectangle. Once you select "OK" your rectangle should be slightly lighter in the middle and you should see an opaque line for the border.

Step7

Select the rounded rectangle tool again and draw a small, rounded rectangle at the upper quarter of the original rectangle. Right-click on the new rectangle and select "Make Selection" from the menu that pops up. The setting should be set to 0 pixels, anti aliased, and the "New Selection" button should be highlighted. Select "OK" to apply the settings.

Step8

Make a new layer. You can either select the option from the layer toolbar or create a new layer using the top menu options by selecting "Layer>New Layer."

Step9

Select the "Gradient Tool" from the toolbar. It's a box that looks half white and half black. Select the second preset that shows the black and white with some pixelated gray in the white area. Make sure all the arrows at the bottom setting are at opposite corners. Select "OK" to apply the settings.

Step10

Add text if you want and apply a drop-shadow effect to make the text appear to be set into the glass button. You can also work with the basic steps to change the colors and even the gradient settings and styles.