How To Create The Glass Effect


Introduction

The glass effect. Endorsed by Apple and now out in the open for all to enjoy (or not!). However like this style or not it is defiantly a style worth knowing how to reproduce. This tutorial shows how to create a simple glass orb icon using Adobe Illustrator. Why? Because it took me ages to figure it out and now I have done I hope this will save you some time (Aren't I a nice guy)! Once this technique is mastered it can be applied to all sorts of shapes – from buttons to icons – to whole website designs. I personally feel that this effect should be used subtly, please don’t make me regret putting this up! Enjoy

The purpose of this article is to give a brief but comprehensive guide to producing this style. Let me know how you get on by placing comments below.

Step 1 - It Started With a Circle


Start simple (that's always a good rule). Use the "ellipse" tool (Hot key = "L") constrain the proportions (by holding the "shift" key whilst dragging. If you want to start from a specific point use the "alt" key to make the circle grow from the middle.

Step 2 - Stroke it


Open up your stroke pallet (press the "F10" key). and add a fairly thick stroke. The stoke helps to define the icon and gives the icon impact.

Step 3 - Fill it


Now add a filling gradient (Press the "F9" key for the gradient pallet). It is important that this gradient is subtle and only pales out towards the end. This will later give us the glass sub shine required to make the icon appear 3d. See the example below for my recommend gradient.

Step 4 - Define that Shine


Now we are going to create the finishing touch which I call the "touch of glass". Use the ellipse tool again (Hot key = "L") and draw a small oval on the upper half of the first circle. Use the align pallet (press “shift†and “F7â€) to center both and then give this circle a gradient. See below:

So now we have a glass orb! Simple but effective. This glass technique works across all colours and can also be introduced into other shapes.

Step 5 - Icon


We could of left it at stage 4 but now lets make this orb a little more relevant. We shall add a simple white arrow. Use the rectangle tool (Hot key "M"), the rotate tool (hot key "R") and the pathfinder pallet (Hotkeys "shift" and "F9" together). Once you have produced your arrow place it in the middle of the orb.

Step 6 – Stroke it.. again


Give your arrow a heavy stroke.

Step 7 - Bring it back


To keep the detail of your arrow copy it ("Option" and "C"), paste it back in place ("Option" and "F") and then take the stroke off. Now you have a defined arrow on a classy glassy orb.

Conclusion

So there you have it. Once you get used to this process you can knock out these simple glass styles in a matter of minuets. I would be most intrested to see websites or designs using my technique - let me know.
Any comments most welcome...

Comments

great stuff... thanx a mill

Very handy. 5 years old or not, thanks for taking time to publish this. I've used it in the design of some Windows Vista icons commissioned by a customer.

Ha! this tutorial rocks.

If you don't like it, don't view it.
Oh yeah- if you saw this tutorial 5 years ago, then where is your site?

Just what I have been looking for, Many thanks!

Keep up the great work...

Hi

With a linear fill the white bit as shown in step 3 is on the left hand side and not at the bottom. Did you rotate the circles for this effect?

OK I see now, the angle determines the angle of the shine.

Thanks for sharing

Nicely explained! I was just about to be a clever cloggs and suggest aligning the stroke to the outside but saw someone already had... wanted to post something anyway to say "love the site!" and loved the site before the redesign, and the one before that, and...

Thank you for that perfect little tutorial.

Attitude's site design is a pleasure to look at.

Thanks for this easy and clear instruction, you saved my butt!

" ...it is DEFIANTLY a style worth knowing..."?

Good article!

Thank You Very Much

lOVE YOU... I tried another tutorial is was to complicated..

Thanks

Wow! cool! Thanks very much.

thanks ! for the info.

What a great tip! I had been looking for this and yours was the best illustrated and easy to follow :) thank you for putting it up.

WOW, I haven't seen this tutorial before. Oh wait I did, 5 years ago.

I accept that this glass style has been around for a while - I'm not trying to pretend this is somehting new. I wasn't aware that this exact technique had been used though so I would be interested to hear where exactly you've seen this precise style...

Well presented article and a simple but attractive effect, good work

Can't you also just set your stroke to be on the outside? That would eliminate step 7.
Good info. thanks.

Nice tip!

Nice tutorial, especially helpful for those of us who may not have been doing this 5 years ago. It never hurts to re-post continuously useful tips. Thanks.

ignore m_333 he's obviously a donkey. nice tutorial - thanks.

M_333...bad tempered sarcastic donkey or what???
good work Matty, never hurts to give tips, and I for one found it thoroughly useful!!!
certainly didn't see that article 5 years ago, but Im sure geeky will still have it archived somewhere!

thanks. thiis has helped a lot ! i always wondered how to do this glass effect and it always looked so hard. this tutorial really helped me in a simple but thorough way. thanks !

sweet Tutorial!

Cool, thanks, there's no way I could've figured this out myself ;)

I must agree with the donkey comments above. I really liked the very clear, simple tutorial presented above. Thanks!

thanks!!! that helped a lot

and [email protected]"donky" comments...someone must listen to the Wendy Williams experience

Nice to have people trying to help people!
Nice work, really :D

I think you did a great job i used it to make a button! I know it is a pain to make screen shots and organize an even short tut

Thanks for the support guys. Visit again soon for more articles and tutorials...

Found the article pretty good, thanks for the steps and the info, I was trying to figure out how to proceed since a while. Hi from Montreal!

I didn't need this tutorial 5 years ago - I need it today for a class project. Thanks for posting it and helping an Illustrator noob get his glass effect.

Is there any chance you could go over this same effect with other shapes perhaps? I know thats asking a lot...

this is the best of the best tutorial. thank's

Hey
thanks for the tip. Can we also make it in Fonts and lettering.....?

I like the article very simple. I'm new to all this stuff so I'm glad you made it. thanks.

i m impressed, thaks a loooooooot.

Thanks so much I have always wondered how to do that!

I've never been able to achieve this effect, until now! I've read lots of other tutorials, and they always lost me somewhere along the way. But your tutorial nailed it for me. Thank you! Thank you for making it so easy! I feel so accomplished now!