Sleek Glass Button Tutorial

[The Voice]

This is a short tutorial on how to create a sleek glass button for your website in Photoshop.

EDIT :: UH OH WHAT'S HAPPENED WITH THE CODES? Anyway, it still works if you ignore the codes.

Create this skeek, glass button. This is perfect for a modern, stylish website.
[/URL]
1) Create a new document
2) Select the rounded rectangle tool and change the radius of 5px.
3) Now draw it on your canvas and you should have something like the below image.
4) Now add the following blending options:
Gradient Overlay:
[URL="http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/011.jpg"]http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/011.thumbnail.jpg (http://habboxforum.com/)<A class=imagelink title=011.jpg href="http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/011.jpg">
Inner Glow:
<A class=imagelink title=022.jpg href="http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/022.jpg"><A class=imagelink title=022.jpg href="http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/022.jpg">http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/022.thumbnail.jpg (http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/022.jpg)<A class=imagelink title=022.jpg href="http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/022.jpg">
Drop Shadow:
http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/032.thumbnail.jpg (http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/032.jpg)<A class=imagelink title=032.jpg href="http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/032.jpg">
Stroke:
http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/042.thumbnail.jpg (http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/042.jpg)<A class=imagelink title=042.jpg href="http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/042.jpg">
5) Now select the Rounded Rectangle Tool again and set the Radius to 15. Draw the shape like below. You will then need to rasterize that layer. This is done by right clicking the shape layer and selecting ‘Rasterize Layer’.
http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/051.thumbnail.jpg (http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/051.jpg)
6) Now, select the smudge tool with a brush size of 15 and smudge both sides down.
http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/061.thumbnail.jpg (http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/061.jpg)
7) Now make the Layer Opacity 15%. Your button should look something like the following:
http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/071.thumbnail.jpg (http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/071.jpg)
8) Now place some text and voila! A sleec, glassy button. Try changing the colour of the buttons to get different effects.
http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/083.thumbnail.jpg (http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/083.jpg) http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/091.thumbnail.jpg http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/101.thumbnail.jpg (http://www.bonxa.com/wordpress/wp-content/uploads/2006/07/101.jpg)

Remember to click the image to enlarge it.

[Flauvo]

Poor image quality and should be in graphics

[Impossible]

I fail to see how it looks like glass =[

Good tut though +Rep =]

[The Voice]

Poor image quality and should be in graphics


Good tut, crap image quality, wrong forum but hey you'll learn - Impossible

The Image quality is not poor, click on the images and they will appear full.

Can be in Website Designing because they can be navigation bar.

Impossible - I also fail to see the glass however a friend suggested that it looked like glass so i just called it that. lol. :D TY for the rep.

[Flauvo]

The Image quality is not poor, click on the images and they will appear full.

Can be in Website Designing because they can be navigation bar.

Impossible - I also fail to see the glass however a friend suggested that it looked like glass so i just called it that. lol. :D TY for the rep.
Who'd want a button that big?

[Impossible]

Dude, maybe some people would, at the end of the day hes tried no need to keep like moaning at him..

[The Voice]

Who'd want a button that big?

well, Ive heard resizing is quite easy to do.

dude, you can change some things in a tutorial.

[[Oli]]

seen this tut before :)

[SimplyTech]

dont rep him he never wrote it
http://www.bonxa.com/index.php/?p=36#more-36

[Impossible]

Um rip? Forget that rep i will wait till i repped 20 more people and -Rep you for ripping..

[The Voice]

I own Bonxa-Designs!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Even check my habbox profile email and homepage url.

How do you want me to prove it?

[SimplyTech]

on the end of the tutorial on that page write Proof lite

[Impossible]

yeah write something like Heres Proof HxForum

[The Voice]

on the end of the tutorial on that page write Proof lite

Check now, Ive done it. See, im not a noobish ripper

[SimplyTech]

I stand corrected

[Impossible]

Urm, oops.

[The Voice]

Lol. Im not a noobish ripper. Also, check the Bonxa-Forum.

http://www.bonxa.com/forum/

[[Oli]]

hey, lol, i never said u were a ripper, i just said id seen it before
;) so that would of been on ur site

[Impossible]

Pfft, MyBB, wanna buy a vb?

[The Voice]

Anyway, How did you find it on my site?

Its not MyBB, its phpbb2. I thik theres a redirect error there then

http://www.bonxa.com/phpBB2/

[SimplyTech]

Anyway, How did you find it on my site?
with tutorials incase they are ripped i always copy a few lines into google

[Impossible]

amagawds google rawks

[Colin-Roberts]

plus the images were from that site.

[The Voice]

Lol. Well, now you know that Bonxa-Designs is mine.

[Impossible]

=]]]]]]

A4AOwen (Forum Moderator) - Please do not post pointlessly.