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…