How To

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.

Difficulty: Easy
Instructions

Things You'll Need:

  • Photoshop 7 or newer application
  • Computer
  1. Step 1

    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.

  2. Step 2

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

  3. Step 3

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

  4. Step 4

    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."

  5. Step 5

    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.

  6. Step 6

    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.

  7. Step 7

    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.

  8. Step 8

    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."

  9. Step 9

    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.

  10. Step 10

    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.

Post a Comment

Post a Comment

Have you done this? Click here to let us know.

I Did This

Related Ads

Computers
Alexia Petrakos,

Meet Alexia Petrakos eHow’s Computers Expert.

Copyright © 1999-2009 eHow, Inc. Use of this web site constitutes acceptance of the eHow Terms of Use and Privacy Policy.

eHow Computers
eHow_eHow Technology and Electronics