This time we will learn how to draw and detail a glossy icon much like the ones in Mac OSX or Windows Vista. By using the Blend mode and some creative lighting techniques, we will be able to create one of the most widely used and in demand graphics. We will keep it simple and create a glossy music note like the image below. Let’s Begin!

glossy icon step 1

Step 1

Start by making two circles using the Ellipsis Tool (L) in a light and dark color. Next use the Pen Tool (P) to create a circular shape on top of the two circles in a whitish/blue color (this will be our highlight). Select all three shapes and go to Object < Blend < Blend Options... and set the Specified Steps to 128. Now go to Object < Blend < Make and you will see that the three shapes will blend and make a gradient “bubble”. Copy (Ctrl + C / Cmd + C) and Paste (Ctrl + V / Cmd + V) the blended object to make the second bubble of the music note.

glossy icon step 1

Step 2

Next we will make the Stem of the music not and add a gradient highlight. Use the Rectangle Tool (M) to make one of the music stems. Use the same technique in the previous step to create Gradient Blend using two shapes, one blue and one whiteish/blue. Copy (Ctrl + C / Cmd + C) and Paste (Ctrl + V / Cmd + V) the stem and place it be the second note. Use the Rectangle Tool (M) again to make the top bridge between the two notes. You can use the Direct Select Tool (A) to select the top-right and bottom-right anchor points to Skew the shape like the image below you if want.

glossy icon step 2

Step 3

To add some detail in the “bridge” of the music note, Copy (Ctrl + C / Cmd + C) and Paste (Ctrl + V / Cmd + V) the bridge and resiez it using the Direct Select Tool (A) to select and move the anchor points. We created two rectangles, one on top of the other, Group (Ctrl + G / Cmd + G) them together and gave it a Gradient (G) to add some dimension. Use the image below as a guide for the gradient.

glossy icon step 3

Step 4

Using the Rectangle Tool (M) and the Object < Blend < Make technique again, we will make a light highlight on the bottom of the Music Bridge. Use the Direct Select Tool (A) to move and skew the anchor points to match the angle and placement of the Music Bridge.

glossy icon step 4

Step 5

Pay attention to this next step, it may be a little tricky. We are going to add a wavy gradient highlight over the music note. To do this, we need to Copy (Ctrl + C / Cmd + C) and Paste (Ctrl + V / Cmd + V) the music note and go to Object < Expand to expand (or separate) the shape. Select the shape and go to the Pathfinder Palette and select the Unite icon.

Next, use the Pen Tool (P) to create a wavy shape like the image below. To get the gradient to go from white to transparent, adjust the gradient so it goes from white to white. Go to the Gradient Palette on the right hand side and adjust one of the white square’s Opacity to 0%. Place the wavy gradient on top of the copied music note and select Intersect. Place the new shape on top of the original note shape and you will have the results similar to the image below.

glossy icon step 5

Step 6

Now we will add some highlight details to help make our icon “pop”. First, use the Pen Tool (P) to create a white transparent gradient shape for the highlight on the Bridge. You can reduce the shape’s Opacity by going to the Transparency Panel on the right side Palette. Next, Copy (Ctrl + C / Cmd + C) and Paste (Ctrl + V / Cmd + V) the circular note twice and place them slightly on top of each other. Click the Minus Front button on the Pathfinder to get the white highlight line. If done right it will look similar to the image below.

glossy icon step 6

Step 7

Last, we will add a drop shadow and a reflection for some dimension. Select the whole object, Copy (Ctrl + C / Cmd + C) and Paste (Ctrl + V / Cmd + V) to get a duplicate, go to Object < Expand to expand the shape and click Unite in the Pathfinder Panel. Change the shapes color to black and go to Effect < Blur < Gaussian Blur. The Radius should be around 7.8. Click OK and reduce the shapes Opacity to 10% in the Transparency Panel.

To get the reflect, just Copy (Ctrl + C / Cmd + C) and Paste (Ctrl + V / Cmd + V) the bubble shape and move it down a little. Right-Click and select Arrange < Send to Back to send the shape to the back. Right-Click again and go to Transform < Reflect and select Horizontal to “flip” the reflection to mirror the music note. Do the same to the other side.

glossy icon step 7

Wrapping It Up

Creating Glossy Icons and graphics is a proven style that is highly in demand. It helps add dimension to General User Interfaces and Operating Systems and helps set them apart from competitors. The trick is to create sharp crisp highlights with smooth gradients. The more light source your display, the “shinier” it will look. Try practicing on other shapes and objects to become a glossy icon pro!