Today's Question:  What's your opinion about Alibaba mooncake incident?        GIVE A SHOUT

Technical Article => Software =>  PhotoShop Design

Glass Button in Photoshop

  secondpicture.com      2011-10-10 13:55:46      2,267    0    0

These days glass buttons seem to be very popular. You can find glass buttons in Windows Vista and all around the Web. Other popular buttons are metallic and plastic buttons. All these buttons have one thing in common: They are all shiny. Some people call these kinds of buttons Web 2.0 buttons. Here I cover the creation of two different glass buttons in Adobe Photoshop CS3. Both glass buttons utilize the same principles. Once you have completed this tutorial you should be able to apply the same principles and create many different kind of glass buttons. In this tutorial I give you the exact measurements and values to make things easy but feel free to try other settings as well.

Rectangular Glass Button

Black rectangular button with rounded corners

Picture 2. Create black basic button on the new layer.

Create a new picture the size of which is 400 x 180 pixels. Create a new empty layer. Activate the Rounded Rectangle Tool and set the Radius to 10 px in the Options panel. Select black color and create rounded box (140 x 50 pixels) on the new layer according to picture 2. (You can see the size of the box in the Info panel while drawing.) Probably the most common way to create a glass button in Adobe Photoshop is to use layer effects. Next we are going to apply several different layer effects to the button to make it more glassy:

  • Gradient Overlay
  • Inner Glow
  • Stroke
  • Drop Shadow

Gradient Overlay

Rectangular button with Gradient Overlay

Picture 3. Gradient Overlay settings in Photoshop.

Right click on the new layer in the Layers panel and select Blending Options... from the menu. Turn Gradient Overlay on. Change the color of the right end of the gradient to 50% gray (#808080) according to picture 3.

Inner Glow

Inner Glow settings in Adobe Photoshop Blending Options

Picture 4. Inner Glow settings in Adobe Photoshop.

Turn Inner Glow on. Change the color of the glow to pure white. Change Opacity to 40%. Change Size to 8 pixels. The button should now look like in picture 4.

Stroke

Stroke settings in Adobe Photoshop Blending Options

Picture 5. Stroke settings.

Turn Stroke on. Change Size to 1 pixel and color of the stroke to 50% gray (#808080). The button should now look like in picture 5.

Drop Shadow

Drop shadow effect

Picture 6. Drop Shadow settings.

Turn Drop Shadow on. Change Distance to 0 pixels and Size to 8 pixels. The glass button should now look like in picture 6. Click OK to close the dialog.

Button Text

Button with text

Picture 7. Button text.

Create the button text with Type Tool. Select white color for the text and create 1 pixel wide black stroke for it. Align the text to the middle of the button. The glass button should now look like in picture 7.

Highlight / Glare

Glass button highlight

Picture 8. White rounded rectangle will become the highlight.

Glass button made in Adobe Photoshop CS3

Picture 9. Complete glass button in Adobe Photoshop.

When creating a glass button the highlight (reflection of the light source) is the most important element.

Create a new empty layer on top of the text layer. Select white color and create new Rounded Rectangle (136 x 23 pixels) on the new layer according to picture 8. Right click on the new layer in the Layers panel and select Blending Options... from the menu. Turn "Blend Interior Effects as Group" on. Turn Gradient Overlay on. Change the color of the left end of the gradient to 25% gray (#404040) according to picture 9. Click OK to close the dialog.

Change the blending mode of the new layer to Screen and Opacity to 90%. Now the glass button is complete and it should look like in picture 9.

This is a black and white glass button but using the same principles you could create a glass button of any color.

Part 2: Glass Bead in Photoshop

See glass buttons in action. The glass buttons of www.filmgator.com have been made according to this tutorial

Glass button elsewhere:

Source:http://www.secondpicture.com/tutorials/digital_image_processing/glass_button_in_photoshop.html

DESIGN PHOTOSHOP GLASS BUTTON ROUNDED BUTTON

  SAVE AS PDF   MARK AS READ   MARK AS IMPORTANT

Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious

  RELATED


  0 COMMENT


No comment for this article.


  WRITE ARTICLE

When Bill Gates wants to buy a Lamborghini

By sonic0002