Sign in to follow this  
BuzzKill

Making glass buttons

Recommended Posts

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.

MSVSbuttons.jpg

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 quaters down the image and draw a rectangle from that point down, all the way across. Do a Gaussian Blur at a 10px radius.

01.png

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.

02.png

03.png

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.

04.png

05.png

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.

06.png

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.

07.png

08.png

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.

09.png

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.

10.png

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). Eraese 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!

11.png

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

As always, experament 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.

009.png

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.

001.png

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 Tom's Code Lab and load SearedIce's Transparent Fade script. You can get Tom's Code Lab here: http://paintdotnet.12.forumer.com/viewtopic.php?t=1096 and you can get SI's script here: http://paintdotnet.12.forumer.com/viewt ... ight=#5120 . 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". This will save the effect .dll in the correct place (Program Files/Paint.NET/Effects) so the next time you load Paint.NET, it will show up under the "Effects" menu. After you made the .dll (if you chose to) go ahead and click "OK" in Code Lab.

002.png

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

003.png

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.

004.png

005.png

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.

006.png

10.) Duplicate that layer.

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

007.png

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

008.png

13.) Repeat step 7

009.png

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)

0010.png

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.

0011.png

There ya go!

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

Edited by Ego Eram Reputo
Added PDF link

Share this post


Link to post
Share on other sites

sweet^^ i will try them out

edit

button.jpg

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.

Share this post


Link to post
Share on other sites

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

But as an example:

infobutton.png

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.

Share this post


Link to post
Share on other sites
Not trying to show you up or anything... :wink:

But as an example:

infobutton.png

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:

Share this post


Link to post
Share on other sites

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! :D

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

There it is!

WindowsVista-Logo_faked.png

And here is the original one, to see the difference: WindowsVista-Logo_original.png

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

Oh, the stupid IE-Users :P 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

Share this post


Link to post
Share on other sites

Where do you find the logo? (Layer 12)

Try this instead:

image_9.png

(transparent PNG, just 2x bigger)

Share this post


Link to post
Share on other sites

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!!!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this