Sign in to follow this  
BuzzKill

Making glass buttons

Recommended Posts

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 =)) .

Share this post


Link to post
Share on other sites

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 ^^)

Share this post


Link to post
Share on other sites
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 :D

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites


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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this