Making glass buttons

[Illnab1024 11]

That is neat.

And if you take the opacity slider from 0 to 255, it looks like a light turning on inside!

[Born2killx 0]

I'm sorry I didn't say this earlier, but I used your example glass button for my forum:

[BuzzKill 7]

Cool... where's your forum?

[Born2killx 0]

maplemushroom.com its a maplestory forum. i paid for the domain name (well actually i made my dad do so) and set all the registrar stuff 0.0 i also made a freewebs site all by myself except for the text effects at freewebs.com/annoyingwebpages (space =)) .

[teotanato 0]

mmm Illnab1024 an trickman were yur avatars thnks to this tutorial? or was that form another? =/ if it was from another...could you just send me the link =/ because the button and you sigs are similiar =/

thnks

(i want to do a buttn like your for another forum ^^ or mybe even for this one ^^)

[trickman 1]

mmm Illnab1024 an trickman were yur avatars thnks to this tutorial? or was that form another? =/ if it was from another...could you just send me the link =/ because the button and you sigs are similiar =/

thnks

(i want to do a buttn like your for another forum ^^ or mybe even for this one ^^)

My av was done without looking at noone's tut! I created it without looking at other ppls pics... but if you want i can tell you how I made my av

[teotanato 0]

yeah yeah yeah! i want it =D its just because of the circles you used....mines stay....at least.....strange -.- so...post a tutorial bout it! thnks!

[trickman 1]

yeah yeah yeah! i want it =D its just because of the circles you used....mines stay....at least.....strange -.- so...post a tutorial bout it! thnks!

http://paintdotnet.12.forumer.com/viewt ... 0306#10306

[teotanato 0]

mmm i already did 1 but is a bit messy......i'll see the tutorial =)

[Maia Knuckles 0]

Very good!

[EXreaction 0]

Awsome work.

[trickman 1]

hey, EXReaction, how did your sig change everytime I refresh the page?

[B1lancer 0]

hey, EXReaction, how did your sig change everytime I refresh the page?

I assume the location of his sig (http://www.lithiumstudios.org) has javascript that changes the image displayed.

[entY8 2]

hey, EXReaction, how did your sig change everytime I refresh the page?

I assume the location of his sig (http://www.lithiumstudios.org) has javascript that changes the image displayed.

nah, he got subfolder called "userbars.gif" containing an index.php outputting random userbars.

edit@the post below: lol

[Illnab1024 11]

Thank you...I didn't want to seem the anal one by saying "It isn't JavaScript!!!"

thank god for <?php

[EXreaction 0]

hey, EXReaction, how did your sig change everytime I refresh the page?

I assume the location of his sig (http://www.lithiumstudios.org) has javascript that changes the image displayed.

nah, he got subfolder called "userbars.gif" containing an index.php outputting random userbars.

edit@the post below: lol

Exactly.

[kostas101 0]

Great tut! :wink:

Thank you!

[BuzzKill 7]

You're welcome!

[Wardecke 0]

Thanks dude !!!!...

i've made mi signature with your glass button style..

[BuzzKill 7]

Looks nice.

[umja345 0]

Cool! This will really help my website!

[umja345 0]

It is also easy!

[dcvchicago 0]

Great tutorial--one of the best I have seen on the subject.

In my button, I added to minor tweaks to help sell the 'glass' effect:

(1) I moved the white overlay down and to the left 3 pixels in each direction. That leaves a dark blue border across the top of the button to represent its top side.

(2) If you look closely at the Microsoft glass buttons, you can see a white highlight running along the top of the button. To reproduce this highlight, I drew a white outline rounded rectangle, the same size as the button rectangle, on a separate layer. I cut the rectangle at its left edge, just before it begins to curve down, and at its top right edge, just after it finishes its curve downward. That leaves a straight line at the top of the button with a curve on its right side.

I moved this line down and to the left three pixels, so it sits over the edge of the white overlay. Now all I need to do is fade the highlight in from the left, and fade it out as it rounds the curve on the right.

To do that, I selected the line from its left edge to about three quarters of the way to its right side. Then, using the gradient plug-in for Paint.NET, I created a gradient from 100% transparent to 100% white and applied it to the line. That makes the highlight fade in from the left. I did the same thing to fade the highlight out as it rounds the curve on its right side. The result is a button that is nearly a dead ringer for the Microsoft button.

Thanks again for the great tutorial! I've wanted to do glass buttons for ages, but could never find a good recipe.

[lekremyelsew 0]

I threw this together when i saw this tutorial

I would just have the image be right here, but i cant figure out how to make html work

http://lekremyelsew.googlepages.com/button.htm

[MadJik 963]

For IE 7.0 goto Page menu and select View Source. You'll see the code. Save it as button.html and you could open it in IE...

That's not all the stuff, but a start!