This Adobe Photoshop tutorial teaches you to design a clean glass button for your website.
You will make this button:


Start out by creating a blank document.
Use [ Rounded Rectangle Tool (U) ] to draw a rounded rectangle as shown.


Right click on its layer and click on [ Resterize Layer ].

Making Layer Style
Double click the layer or go to Layers->Blending options and apply settings as shown.


Result :

[NEXTPAGE]

Select the [ Rounded Rectangle Tool (U) ].


Draw an small rounded rectangle for glass effect.
Right click on new shape, then click on “Make Selection “.


Now make a new layer and use [ Gradient Tool (G)
] to make a gradient as shown below.



Here is final result :

You can add your text to button.
I used style below for it.

Select the [Horizontal Type Tool (T)
].
Click and type your text.

Making text style
Double click the layer or go to Layers->Blending options and apply settings as shown.

Final Results :
















Sponsors
Visit Our Friends, Too
About Photoshop-Pack
3 Responses
Great tutorial! You made it look very easy and simple to do. It’s like you do not have to be an expert in Photoshop just to create your own clean glass button.
Great tutorial! You made it look very easy and simple to do
Hey Superb post! I liked the reflection effect. Its awesome. I also saw another tutorial in a website .But that one can be done very fast and a glassy effect . But there is no reflection : http://reviewglitz.com/2010/01/create-a-professional-button-in-photoshop/