Web Design Miami, TECKpert

HOW-TO make a Web 2.0 glassy button using Photoshop

You see those really cool buttons with that glass effect? If you have Vista or an iPhone, you have seen that some of your icons have this cool glassy effect to it. I am sure you think…”wow, this would be cool if I had this type of button on my website!”.

Well, here we are going to break down in a few easy steps how to do this in photoshop.

Warning: Some photoshop skills are required…

Step 1 Create the Button

Create a new image 400 x 150 pixels. Create a New Layer. Now, using the Rounded Rectangle Tool, create a new box 150 x 50 pixels. We are going to apply a black color (#000) to the shape/button. Now the next step is to apply different layer effects to this item.

Step 2 Layer Effects

Now we get to applying four different layer effects to get us closer to that cool looking glassy button.

Gradient Overlay

In the Layers menu, right click on the button layer and select Blending Options. Click on Gradient Overlay to turn it on. Select the gradient and change the color on the right side of the gradient to gray (#808080).

Inner Glow

With the Blending Options layer window still open, Click on Inner Glow to turn it on. Change the color of the glow to white (#ffffff). Change the opacity to 45% and the size of the glow to 8 pixels.

Stroke

With the Blending Options layer window still open, Click on Stroke to turn it on. Change the color of the stroke to gray (#808080) and the size of the stroke to 1 pixel.

Drop Shadow

With the Blending Options layer window still open, Click on Drop Shadow to turn it on. Change the distance to 0 pixels and the shadow to 8 pixels.

Step 3 Add Text

Using the Type Tool, create the button text. Align the width of the text box the length of the button and center. Again, In the Layers menu, right click on the text layer and select Blending Options. Click on Stroke to turn it on. Change the color of the stroke to black(#000) and the size of the stroke to 1 pixel.

Step 4 The Glare

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 . Again, In the Layers menu, right click on the new layer and select Blending Options. Turn on Blend Interior Effects as Group. Turn on Gradient Overlay and change the color of the left of the gradient to gray (#404040) and click Ok. Change the blending mode of the new layer to Screen and Opacity to 90%.

Your Done!

You now have a cool looking glassy icon! Of course, your going to want to use different colors…we used black and gray. Adjust to your requirements and have fun .