Making glass buttons

[BuzzKill]

This tutorial is available as a PDF download. Click here to view or download >> Making Glass Buttons.PDF

 

I was over at Microsoft's Visual Studio site and saw these cool buttons.

I wanted to see how easy or difficult it would be to recreate them in Paint.NET. After being able to accomplish it in just a few easy steps I figured I'd write a tutorial on it.

Ok, we'll start of with creating a new image (ctrl+n). I chose 200x50 px. Fill it in with a color of your choice. This color will be the main color of your button. Whichever color you choose, avoid having the "Value" of that color set to maximum (100) as we will be using it in the next step for a gradient.

Pick the Rectangle tool (o), make sure you have "Draw Filled Shape" selected (bottom toolbar, next to "Fill style"), and set the value of your color to maximum (100). Go about three quarters down the image and draw a rectangle from that point down, all the way across. Do a Gaussian Blur at a 10px radius.

Add a new layer. On that new layer, from the left, go in about a third of the way and draw a white rectangle all the way across the image, top to bottom. Do a Gaussian Blur at 100px radius.

Add a new layer. Pick the Line/Curve tool (o). Turn off Antialiasing. With the brush width set at a value of 2, go down about half way and draw a line all the way across. Start at -1,25 and finish at 199,25 so the nubs (handles) are pretty much centered. I used a bright red for this. Grab the two center nubs and move each one down about 10 pixels.

Pick the the Magic Wand tool (s) and select the bottom half of the layer (below the line). I used a tolerance level of 69. Once that is selected, hold the Ctrl key down and now select the line itself. While you have this portion selected, switch to the layer below this one (the one with the white gradient). With that layer selected, cut out the selection (ctrl+x). Uncheck the layer with the line so you can no longer see it.

On you white gradient layer, do a motion blur with the angle set at 0.00 degrees and the distance set at 20px. Select the entire image using the Rectangle Select tool (s). Switch to the Move Selected Pixels tool (m). Grab the bottom center nub and move it up about 16 pixels.

Open the properties dialog for that layer by double clicking it in the Layers window or by pressing F4 and adjust the opacity to 150.

Flatten the image (ctrl+shift+f). Add a new layer and select the Rounded Rectangle tool (o). Set the brush width to 4 and make sure you have "Draw shape outline" selected. Turn on antialiasing. From the top left corner, go in 5 pixels and down 5 pixels. From there, draw your rectangle until it is centered in the image.

Pick the Magic Wand again and set the tolerance to 30. Select the rectangle you just made. Switch to the other layer and cut out the selection (ctrl+x). Erase the remaining outer portion. You may notice that the bottom right corner is not the same as the other three. It's not as round. To get it more rounded, zoom in and add the missing pixels manually.

There you have it!

It's not an exact reproduction but it is pretty close.

As always, experiment with the colors, blurs, gradients, and all that good stuff to achieve the look you want.

Special thanks to CMD for helping me out when I first started making glass effects.

__________________________________________________________________

Here's a tutorial for a different glass button.

1.) Create a new image. Whatever size you want your button to be, make the starting dimensions three to four times larger... and then resize it to a smaller size after you're done. (i.e. for a button that is 100x25px, start out with making it 400x100px)

2.) Fill in the image are with whatever color you want your button to be.

3.) Add a new layer and fill it with the color white. (hex: FFFFFF)

4.) In the Colors window, set the primary color's transparency-alpha to 0 (zero). Open up CodeLab and load SearedIce's Transparent Fade script. You can get CodeLab here , and you can get SI's script here . You'll notice that the layer faded from transparent to opaque, top to bottom. If you would have set the secondary color's alpha to 0 and not the primary, the layer would have faded from opaque to transparent, top to bottom. OPTIONAL... before you click "OK" in Code Lab, go ahead and name the script (something like... TransparentFade), and click "Make DLL". After you made the .dll (if you chose to) go ahead and click "OK" in Code Lab.

5.) Double click the layer inside the Layers window and adjust the layers Opacity to 175.

6.) Add a new layer and fill it in with the color black. (hex: 000000)

7.) Repeat step 4. Only this time, make the layer fade from opaque to transparent, top to bottom. Adjust the layers opacity to 175.

8.) Add a new layer and fill it in the color black again.

9.) Select the Rectangle Select tool in the Tools window and make a selection on the black layer about 10 pixels from each side and cut out the selection. This will give you a black border.

10.) Duplicate that layer.

11.) Switch back the original black border layer and Gaussian blur that layer at a 10px radius.

12.) Add a new layer and fill in a little less than half of the top half of the layer with the color white.

13.) Repeat step 7

Adding in text... before you flatten the image.

1.) Add a new layer and type in whatever you choose.

2.) In the Layers window, move that layer down to where it is below the layer that has your top highlight. (the highlight you made in steps 12 & 13)

3.) OPTIONAL... duplicate the layer with your text. Switch back to your original text layer. If your text is a different color other than black, Fill in each letter with the black color. Gaussian blur it at a 10px radius. Adjust the layers opacity to 175.

There ya go!

As always, experiment with the color, blurs, and all that good stuff to see what you can come up with.

 

[BuzzKill]

Updated - added a new button to the above tutorial.

[KamourianKing]

sweet^^ i will try them out

edit

i tyed it, it worked out really well ^^

but i added a few extra layors to add " Shine"

1. Additive, then set capastity to 150 or to what ever you like

2. on top, Color Doge, then set to the capasity you like.

then i blurred it at 0 and 10 pixles, for the Addive layor i did the same, but its at 2 pixle.

[glombo]

this is my first EVER proper project using paint.net and its rly gr8!

thanks BuzzKill :!: :!: :!:

[Crazy Man Dan]

Not trying to show you up or anything... :wink:

But as an example:

It's better to use Radial Blurs instead of Gaussian Blurs for round images. I kinda had to flub the bottom of the large upper sheen arc, as its position nearer the center of the image caused great distortion when it was Radial Blurred with a radius of more than 2px, but overall, I think it turned out pretty well.

[Alex G]

Not trying to show you up or anything... :wink:

But as an example:

It's better to use Radial Blurs instead of Gaussian Blurs for round images. I kinda had to flub the bottom of the large upper sheen arc, as its position nearer the center of the image caused great distortion when it was Radial Blurred with a radius of more than 2px, but overall, I think it turned out pretty well.

Thx m8, im gonna try it. :wink:

[Crazy Man Dan]

If you'd like the .pdn file to look at, just ask!

[Rick Brewster]

Heck, I'd like the PDN

[Crazy Man Dan]

Alrighty then!

If you'd like the .pdn, you can get it here:

http://www.freewebs.com/crazy-man_dan/infobutton.pdn

I think it's set up properly now. I know earlier this year, I noticed that I had exceeded my bandwidth limit for that account from the .pdn files of the orbs for the tutorial (looks like I'm pretty popular :wink:, and the files are pretty big compared to a .png, et cetera...), and no one could download them for the rest of the month.

Freewebs has an option, though, where you can choose your action when you've exceeded your monthly bandwidth - lock the site, or supplement the bandwidth with advertising on the pages. Since I don't actually have any pages, I chose the second one. So, I should get more bandwidth, and no one will have to be bugged with ads! (Shhh! Don't tell anyone!)

But, in the case that it does lock up and you can't get it, feel free to e-mail me at crazymandan@gmail.com, and I'll attach it to an e-mail for you!

Cheers!

Edit: Actually, the .pdn files aren't that large at all, now that I look again. Except for the Scrying Glass one I have on there... 193KB. The others are 12-20KB, not that big at all. I guess they're just popular!

[42nt1]

great tut, i used the same method to make my banner for one of my websites, basically the same image as my sig. thx for the tutorial on this. I think I may have nerfed a step or two, but i found them and will be using this method to make my logos and stuff in the future

thx again

kev

[Alex G]

I saw the vista icon, and thought it wouldnt be difficult for you guys to make. So here it is:

MAybe someone want to make a tutorial too.. :wink:

[flohrian]

Yes, I think, I'll try it.

I am not a good graphicer (how you can see in my signbature and in my avatar ), but I think, I'll try.

Greets

Flo

[flohrian]

There it is!

And here is the original one, to see the difference:

I think, it looks pretty, maybe nicer, than the original

Oh, the stupid IE-Users cant see the images correctly, 'cause IE dont use PNG-Transperency

So, here are the URLs to the PDN-Files (to download see it with transperency, create a new layer under the other ones and make it white):

http://www.florian-severin.de/Sonstiges ... _faked.pdn

http://www.florian-severin.de/Sonstiges ... iginal.pdn

Greets

Flo

[Bob]

Where do you find the logo? (Layer 12)

Try this instead:

(transparent PNG, just 2x bigger)

[Alex G]

working on it

[Sten]

I love wot was MEANT to be wot this tutorial was about! i would like to use those buttons on a website!

I make ALL my images in Paint.NET, i love it!!!

[Illnab1024]

Sten, I love the irony of your sig in a forum like this. (Paint.NET being a solely Microsoft program, you might want to rethink that.)

[Crazy Man Dan]

Oh, I'm sure Rick wants to click on that link... :wink:

NO DON'T DO IT NOW YOUR SUPERVISOR IS OVER YOUR SHOULDER!!!!!

<_<

type="pointless">

[Rick Brewster]

Sten, please remove the "anti-Microsoft" banner and the link to the petition from your signature. Thanks.

[Sten]

oh, ill remove it.BUT, i made it with paint.net! please tell me if that changes your mind!

i like the program for wot isnt microsoft by the way!

[Rick Brewster]

Why would that change my mind? I don't want anti-anything stuff in this forum even if it's anti-Linux: hatred is completely off topic and moronic. I don't know what you're possibly hoping to accomplish by having a petition, of all things, to get rid of Microsoft. "Oh ok, they got 1000 signatures, I guess we'll just fold the company and give the money back to the shareholders." It doesn't make any sense man. I don't understand what you mean by liking Paint.NET for "what isn't Microsoft" ... I work for Microsoft. Without Microsoft's involvement, Paint.NET would not exist.

[trickman]

oh, ill remove it.BUT, i made it with paint.net! please tell me if that changes your mind!

i like the program for wot isnt microsoft by the way!

Paint.Net WAS MADE FOR MICROSOFT...

[Bob]

Gentlemen, please note this discussion is not really related with Glass Buttons. I think it will be preferable to stop it now for the good of our community and the sanity of this forum.

Best regards.

(:

[BuzzKill]

*crawls out from under his rock*

CMD ~ I just grabbed that .pdn... nice. I like the way it looks when the blending of layer three is switched to Glow.

[Crazy Man Dan]

Heh, that does look cool. That could be the hover state of the button. :wink: