Illustrator Tutorial: How to make a Vector Glass Button

Posted on February 13th, 2007 by BittBox

If you are a regular BittBox reader, this is the post you’ve been waiting for! Not only will this tutorial help you make your own vector glass buttons, bars and who knows what else; it will help you to understand the structure of my free files a little better, and how to customize them easier. This tutorial covers how to create a basic vector glass style button in illustrator CS. Basic knowledge of Illustrator is required, but I tried to make it as strait-forward as possible.

Illustrator Vector Glass Button Tutorial 26

Make a new (blank) Illustrator file, name it, and save it to your desktop. Select the “Rounded Rectangle” tool.

Illustrator Vector Glass Button Tutorial

Click once on the artboard, without dragging, to bring up the Rounded Rectangle tool options dialogue box. From here you can set the exact width, height, and corner radius of your button.

Illustrator Vector Glass Button Tutorial 1

Click “OK” or hit enter to create your basic button shape.

Illustrator Vector Glass Button Tutorial 2

Next, apply a drop shadow, by going to the “Effect” menu and select > Stylize > Drop Shadow.

Illustrator Vector Glass Button Tutorial 3

Choose your drop shadow settings. Note: Click “Preview” to see the settings live.

Illustrator Vector Glass Button Tutorial 4

Now we have our basic button shape with a drop shadow.

Illustrator Vector Glass Button Tutorial 6

Select your fill and apply the default black-to-white gradient from your swatches palette. In the Gradient palette, with your fill selected, click on the left white box to select the left gradient color. Now in your color palette, use the sliders to change that left color to a gray, instead of white. (or you can enter the values in the text fields, but they all need to be the same value to be a gray in RGB. i.e. 210, 210, 210, or 190, 190, 190. Also, in the gradient palette, change the angle to 90.

Illustrator Vector Glass Button Tutorial 7

Next, open your Illustrator “Preferences > General” and make sure your keyboard (Nudge) increment is set to 1 px (1 pixel).

Illustrator Vector Glass Button Tutorial 8

Now, using the Select Tool (black arrow), select your button shape, and copy and paste it. Then you need to get rid of the effects that it copied, so in the Appearance palette, drag the drop shadow of the newly pasted shape to the trash. Also, fill the newly pasted shape with white.

Illustrator Vector Glass Button Tutorial 27

Use the Direct select tool (white arrow) to make your 2nd shape smaller than your original by selecting the points and moving them with your keyboard arrows. (Nudging) I usually do this in 3 steps as follows:

Illustrator Vector Glass Button Tutorial 10

Now use the Delete Point tool and get rid of the bottom 2 points in your 2nd shape.

Illustrator Vector Glass Button Tutorial 16

Use the Convert Anchor Point tool to get rid of the curves on the bottom 2 remaining points. Then select those same 2 points and Nudge them up 4 pixels.

Illustrator Vector Glass Button Tutorial 17

Your second shape should now look like this:

Illustrator Vector Glass Button Tutorial 29

Select both shapes like this:

Illustrator Vector Glass Button Tutorial 14

We are going to align these shapes together, but first make sure your align palette is not set to align to the artboard.

Illustrator Vector Glass Button Tutorial 28

Align your 2 shapes to each other horizontally and vertically by hitting these 2 buttons in the Align palette. (doesn’t matter what order)

Illustrator Vector Glass Button Tutorial 15

Now both shapes should be aligned like below. Select the original shape and lock it’s position by hitting “Command + 2″ Mac, or “Ctrl + 2″ PC.

Illustrator Vector Glass Button Tutorial 21

Use the Rectangle tool to make a rectangle that completely covers your second shape. (the reflection shape)

Illustrator Vector Glass Button Tutorial 22

Fill that shape with the default white-to-black gradient with an angle of -90

Illustrator Vector Glass Button Tutorial 24

Select the top rectangle with the gradient and the reflection shape at the same time. Once selected, in the Transparency palette, click on the little arrow in the upper right. Select “Make Opacity Mask.” This creates a mask out of the top shape. White being visible, and black being invisible. Play around with the color values of your gradient to get your desired effect. It works kind of like a clipping mask, but you have to apply it through the transparency palette. There is no right click for this.

Illustrator Vector Glass Button Tutorial 25

And presto! A glassy - completely vector image using only 3 shapes in illustrator. You can play with transparencies and all kinds of other options. I’m not going to give away ALL of my secrets, but I think this is a pretty generous post none-the-less. NOW! Go out there and make the UglyNet a little easier on the ol’ eye-socket, will ya?

Illustrator Vector Glass Button Tutorial 26

Download the file I used for this tutorial:

Includes: - AI (1) EPS (1) SVG (1) PNG (1)

Online learning sites are providing online certificates as well and do need reliable web hosting services along enough bandwidth in order to run smoothly. Dedicated hosting services along reliable as well as advance backup structure are strongly recommended for the high flying learning sites offering online certificate too. Taking the services of seo companies enables to create more SE friendly pages as well as how to benefit for an ip phone.

Aqeel, on February 14th, 2007 at 12:45 am

Great tutorial, Thanks
Judi, on February 14th, 2007 at 6:57 am

Awesome ~ absolutely awesome!
Lance Fisher, on February 14th, 2007 at 4:43 pm

This is great! Not only do you give away beautiful web design elements, but now you’re showing us how to make them ourselves. You rock. Thanks.
Doug Karr, on February 14th, 2007 at 8:09 pm

Thanks very much! Sometimes I struggle with Illustrator since I don’t use it on a daily basis… these tutorials really help a lot.
kongmeng, on February 15th, 2007 at 11:23 am

nice thanks!
Nathan Tran, on February 18th, 2007 at 3:03 pm

Thanks a lot! Really appreciate the education.
Seattle, on February 21st, 2007 at 2:42 pm

Aligning the two shapes center aligns both elements, but what you really want is to offset vertically. Correct?

“Align your 2 shapes to each other horizontally and vertically by hitting these 2 buttons in the Align palette. (doesn?t matter what order)”

After using the align palette, nudge up the top part by 4 px….
Irshad, on February 26th, 2007 at 6:39 am

best tutor
rochi, on February 26th, 2007 at 10:45 pm

Muchas gracias por el tutorial !!!!
Diego Garcia, on February 28th, 2007 at 5:29 am

Great Tutorial, Im`ve searching for this! tnx a lot!
Alessandra, on February 28th, 2007 at 9:05 pm

Wow, thank you! You’re covering a lot of topics on this site that I never learned in Graphic Design class.
bachtuantu, on March 1st, 2007 at 12:55 am

Thank a lot! that is cool
candingas, on March 17th, 2007 at 5:38 pm

excelente aportaci?n, muchas gracias.
animo raza!!
Akram, on March 30th, 2007 at 5:53 am

Thanks for this great & really useful info - helps learn skills that are in line with current graphic trends!
cam, on April 2nd, 2007 at 1:06 pm

what photoshop is that?
Joan I, on April 3rd, 2007 at 3:10 pm

i
Joan I, on April 3rd, 2007 at 3:12 pm

i love it! TY! =)
Rene, on April 5th, 2007 at 8:11 pm

weird. I don’t have a “Corner Radius” there. I have only Width and Height. :S
fdyasd, on April 9th, 2007 at 8:04 am

i love it thanks a lot
beno, on April 9th, 2007 at 10:00 am

thanks a lot
joe, on May 15th, 2007 at 12:35 pm

i don’t quite get it.
when i try to do the last part doing transparency, i could not produce something that looks like that… not even close…what am i doing wrong there?
Lops, on May 16th, 2007 at 6:15 am

very very helpfull tutorial, thanx a lot man!!!!!
claus, on May 21st, 2007 at 5:42 pm

Prueba cambiar el tono negro del gradiente del primer rect?ngulo por 50% de negro y 100% de tu color favorito (CMYK)
greg, on May 31st, 2007 at 11:59 pm

thank you guys your great!!!
shilo, on June 7th, 2007 at 2:38 am

This is a great tutorial, but could you also elaborate on how you created the RSS glass icons in the freebies section? I probed around that AI file and there are some mysteries there (to me), like the gradient circle and the wavy opacity mask. Thanks!
Elijah Echeveste, on August 1st, 2007 at 9:02 pm

How do I do this in CS3, sorry for the dumb question.
michelle, on August 8th, 2007 at 9:47 pm

great tut!!!

BUT! i must be doing something wrong as my image looks just like yours but when i scale it up it’s not a true vector as it is pixelated and has jaggies. could you tell me what i am possibly doing wrong as a true vector doesn’t pixelate!!!
thanks very much you have a great site here!!
michelle
Chandresh Kesri, on August 10th, 2007 at 1:00 am

Really,

Very nice article for Glass button creation. I am using Adobe Illustrator 10. Your all mention steps are completed supported for Adobe illustrator 10, which is the strong point of this article.

This button is also look very good when we set some setting in “Transparency palette”

Blending mode=”Soft light” with while setting “Make Opacity Mask“
Col, on August 11th, 2007 at 5:05 pm

Grazie mille! Eccellente guida!

Thanks! Excellent tutorial!
Helen, on August 15th, 2007 at 6:39 pm

Great tutorial - thanks.
Joshua, on September 5th, 2007 at 6:21 pm

Awesome! Always wondered how to get that perfect glass look! Your tutorial was amazing!
anon, on September 13th, 2007 at 3:05 am

Nonsense
mellowdesign, on September 22nd, 2007 at 10:20 am

Fantastic!

Just one question (I’m probably having a blonde moment!)…how do you unlock the layer following Command+2?

:o)
Fahim-ud-din, on October 5th, 2007 at 10:32 pm

Great tutorial Always wondered how to get that perfect glass look! Your tutorial was amazing!
Adam Stubbs, on October 18th, 2007 at 6:30 am

Very good tutorial. Very east to follow. Good job.
Luciola, on November 20th, 2007 at 6:34 am

Thanks for the tut, very clear & effective~
:: matteommDesignPRO ::, on December 14th, 2007 at 9:12 am

[…] Adobe Illustrator: Come realizzare un bottone Glass - Tutorial […]
Lina, on December 21st, 2007 at 7:17 am

hey thanks alot, I’ve been having problems with the glare part

i didn’t know that you should choose them “both” before you choose the “Make Opacity Mask”

thanks again =o)

xxx
How to make Glass Buttons in Illustrator #2 | Beeex.net, on January 15th, 2008 at 10:41 am

[…] View this tutorial here. […]
Fred, on January 31st, 2008 at 9:03 am

That works so well, thank you
^_^, on March 17th, 2008 at 8:29 pm

Thanks for your tutorial, very clear & amazing.
Jamie, on April 5th, 2008 at 5:36 pm

GOD WHY CANT I FIGURE OUT THE SIMPLE SH**. this has been puzzling me for a while. thanks. oh and a cool tip…

1.Put text half way up the mirror shape so that it extends ovr the top
2.Copy it and flip it upside down (putting it right under the original
3.Make an oppacity mask with the mirror shape and ur new text on top
4.VOILA DUDES. I don’t know what to call it but it looks cool doesn’t it (and its great to spice up links on ur site)