A lot of people downloaded the glossy web navigation templates I posted few days ago. What was really attractive on those templates are those colored glass balls as navigation buttons. In this tutorial, I will try to demonstrate how to create one using Adobe Illustrator CS4.

Here’s the final image of what we will try to create, the same colored glass ball we used in our glossy web navigation templates.

As usual, we need to create a new document. I created a 300 x 300 pixel sized artboard. “Artboard” is what you call your document area or page boundary in Illustrator. Create your black base layer by using the Rectangle Tool and create a black square covering the entire Artboard. Create another layer for the glass ball on top of the black base layer. Now use the Ellipse Tool to create a circle for the ball.

Click on the artboard and illustrator will prompt you to enter dimension for your circle or ellipse. Enter 175 px for both width and height or whatever ball size suits you as long as it is properly proportionate with your artboard.

Now let’s do two more ellipses. The secondary ellipse and the small circular glare using the same “Ellipse tool”. You may also copy or duplicate the big circle then adjust the size and position of the two new ellipses similar to the image below.

Now it’s time to apply some colors to our glass ball. I used 1 color tint and 2 color shades for our green color set. These three colors have the following RGB values which you can use to create new swatches:

Next, we apply some gradient colors using the new green color swatches we made. Select the big circle and apply gradient color by opening the “Gradient” palette and selecting “Radial” as gradient type.

By default you will only have two gradient colors left and right on the gradient palette. To create the middle gradient color, simply click in between the two gradient colors to create one. Adjust the middle gradient color to a location value of 60%.

To apply colors on the gradient palette, simply drag from your swatches towards each gradient palette color.

You gradient will look something like the above image. By default, the gradient midpoint is in the center of the object. Although previous versions of Illustrator have a Gradient tool, the Gradient tool in Illustrator CS4 has greatly expanded editing capabilities. You can adjust and control your gradient real time in CS4 by selecting your gradient object then selecting the “Gradient tool” on your toolbar. Doing so will display all your gradient control handles.

Now what we need to do is move the midpoint from center to the bottom and stretch the rightmost handle farther to the right. Simply drag both handles as instructed above to have a similar gradient position as illustrated below.

Next we apply another gradient to our secondary ellipse. Position the gradient settings similar to the image below. Colors will be bright green on both ends and mid-green on the middle.

Apply white color with no stroke on the smallest circle for the highlight. Then type the numbers and apply linear gradient of bright green to white.

We’re almost there. Let’s create the ball reflection by selecting the big circle, mirror it (Object > Transform > Reflect) below and flatten it to an oval shape. Set the object Transparency to 30% and apply Linear Gradient settings indicated below. Done!

Again, here’s our final colored glass ball image.

You may also try to experiment and apply different color hues, shades and tints.