Vu Tran September 24th, 2010

How to create a glossy button icon (revisited)

In our last two articles, we shared with you some major issues about lighting and shadow and gradient and how to bring them into icon design. So this time, based on what we have learned about, let’s pull it off with this little practice in creating a glossy button icon. Just to remind you that we also had a very long article that guides to create a simple button icon, including a small part showing how to give a style to a button icon (located at the end of that article).

Fig 1. Glossy button creation diagram

Look at Fig 1, you can see that those icons are made from 3 paths. The first path (round) aims to create the icon’s main shape. The second path in half of the round with the curved line is to evoke the button’s form. And the last path is to create the shape of the button look prominent.

In order to cast a shadow, if you’re with Adobe Illustrator CS3, you can draw a path in black and then make the path bit by bit go transparent by using Mask Opacity Mask. However, on Adobe Illustrator CS4, which has already supported the transparent gradient, you only need to pick an available gradient and use it immediately.

Step 1

Create a circle by using the Ellipse tool and use the Color Fill to make it 100 percent black.

Fig 2

Step 2

Go to the Transparency palette’s command menu and choose “Make Opacity Mask”.

Fig 3

Step 3

Click on the black rectangle in the Transparency palette.

Fig 4

At this step, we’re working with a black circle that will act like a shadow. The goal is to make the black shape blur and transparent with the background. The circle you’ve chosen to act as the opacity mask will disappear, but not to worry because it’s still there and just being hidden.

For making the opacity mask, if the mask is in white color the path/group/object will show. By contrary, if it’s in black (with 100 percent opacity), the object will be hidden.

Step 4

Draw one more circle at the position of the hidden one. Fill a Radial gray gradient to that new circle.

Fig 5

However, as you see in Fig 5, there’s still a light black contour wrapping outside, meaning that the black shape wasn’t as blur and transparent as expected. The issue here is that the default gradient in the Swatches palette was not fully black (RBG color = 000).

Step 5

Adjust that gradient to full black. Oh yeah, there it is. The black color now appears to gradually grow faint from the center point and dissolve into the color of the background.

Fig 6

Step 6

Go to the Transparency palette and click on the black circle. Next, select the shadow and press the E key to scale the shadow down so that it becomes a small ellipse.

Fig 7

Still in the Transparency palette, change the opacity of the shadow until you got the result as shown in Fig 7.

In this case, we need to cast the shadow in the shape of an ellipse because the button, in reality, is of the ellipse as viewed from the top.

Voila. Here is the outcome!

Fig 8. The finished glossy buttons

To arrange those icons in Fig 8 in a straight line, first put each button into one group, then select the groups on one row or column and use the Align palette (Shift + F7) to align them.

Please always keep in mind that all the icons must share the same smoothness of surface, the same intensity of light and the same perspective, in order to have an iconset in the same style.

This post follows up the tutorial series “Icon Design Made Simple“. Followings are the parts of the series:

As a perfectionist, not only have we wanted our products to be as perfect as possible, we have also wanted to improve the quality of each and every article published on this blog. Any suggestions or contributions to this article are highly appreciated. We appreciate your time.

Like what you read?

Title

Subscribe to our RSS

IconEden.com

the blog of

IconEden’s blog