How To Create The Glass Effect
March 21st, 2006 - Articles
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…
March 21st, 2006 at 5:01 pm
[…] Yes, the all so famous glass effect on buttons. Want to learn more? Check out this tutorial on how to create the glass effect […]
March 21st, 2006 at 7:21 pm
WOW, I haven’t seen this tutorial before. Oh wait I did, 5 years ago.
March 21st, 2006 at 8:30 pm
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…
March 21st, 2006 at 10:40 pm
Well presented article and a simple but attractive effect, good work
March 21st, 2006 at 11:46 pm
Can’t you also just set your stroke to be on the outside? That would eliminate step 7.
Good info. thanks.
March 22nd, 2006 at 8:55 am
Nice tip!
March 22nd, 2006 at 5:03 pm
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.
March 22nd, 2006 at 5:04 pm
ignore m_333 he’s obviously a donkey. nice tutorial - thanks.
March 24th, 2006 at 11:42 am
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!
March 27th, 2006 at 3:38 pm
[…] Many tutorials were produced at the time of Apples’ adoption of this style (for example here’s one from Home Xonnet and another from New tutorials). Also designers still seem to be interested in this style now, here’s a tutorial I produced recently about creating this effect in Adobe Illustrator: “How to create the glass effect” and I have had quite a few positive responses to it. […]
April 20th, 2006 at 11:27 pm
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 !
May 10th, 2006 at 9:58 pm
sweet Tutorial!
July 13th, 2006 at 9:37 pm
Cool, thanks, there’s no way I could’ve figured this out myself
August 3rd, 2006 at 10:04 pm
I must agree with the donkey comments above. I really liked the very clear, simple tutorial presented above. Thanks!
September 26th, 2006 at 3:44 pm
thanks!!! that helped a lot
and lol@”donky” comments…someone must listen to the Wendy Williams experience
September 27th, 2006 at 6:48 pm
Nice to have people trying to help people!
Nice work, really
November 4th, 2006 at 7:13 am
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
November 5th, 2006 at 3:31 pm
Thanks for the support guys. Visit again soon for more articles and tutorials…
November 24th, 2006 at 3:14 pm
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!
January 16th, 2007 at 12:07 am
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…
January 19th, 2007 at 7:01 am
this is the best of the best tutorial. thank’s
February 20th, 2007 at 5:57 am
Hey
thanks for the tip. Can we also make it in Fonts and lettering…..?
February 26th, 2007 at 1:53 pm
I like the article very simple. I’m new to all this stuff so I’m glad you made it. thanks.
March 26th, 2007 at 3:10 pm
i m impressed, thaks a loooooooot.
April 22nd, 2007 at 7:38 pm
Thanks so much I have always wondered how to do that!
April 29th, 2007 at 1:21 pm
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!
May 25th, 2007 at 1:11 pm
great stuff… thanx a mill
June 10th, 2007 at 3:19 pm
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.
July 3rd, 2007 at 8:40 pm
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?
August 1st, 2007 at 1:11 pm
Just what I have been looking for, Many thanks!
Keep up the great work…
August 2nd, 2007 at 3:48 pm
[…] glass fx Looking pretty cool. Are you going for some effct like this - Journal » How To Create The Glass Effect __________________ I’m a thread […]
September 2nd, 2007 at 7:50 pm
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?
September 2nd, 2007 at 7:56 pm
OK I see now, the angle determines the angle of the shine.
Thanks for sharing
March 5th, 2008 at 5:56 pm
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…
June 13th, 2008 at 8:51 pm
Thank you for that perfect little tutorial.
Attitude’s site design is a pleasure to look at.
July 31st, 2008 at 1:58 am
Thanks for this easy and clear instruction, you saved my butt!
September 20th, 2008 at 3:14 pm
” …it is DEFIANTLY a style worth knowing…”?
Good article!