Material, Coloration and Gradient in Icon Design (revisited) 1

As mentioned in the beginning of our last post, we had to cut the old long article into small and separate subjects for easier discussion. So today, we are going to continue to get back and dig into other essential aspects that have hugely significant effect in our icon creation: Material, Coloration and Gradient. This topic has been revised and updated as well.

Material in Icon Design

Icons that represent actual objects should look as if they were made of real materials. What you should do is take a close look at various ordinary objects around you and study their characteristics – what materials are they made of? How do they look like in such materials? Basically, the materials we mainly see are plastic, glass, paper, water, and metal.

Your icon would look more real if you could successfully deliver its weight and feel as well as its appearance. To achieve that, there’s nothing better than practice as much as possible.

Learning to draw is like learning a new language. The more you learn, the more your vocabulary is plentiful. A cooker mixes main ingredients with spices and makes a delicious meal. Making an icon follows the same process. That’s to say, if you want to create an icon that represents a real object, you should characterize its material, then mix colors and light with the material. That’s it!

Coloration in Icon Design

We don’t have much to say but these rules:

1. Use color with care to help the icon tell its story. Don’t add color just to make the icon more colorful.
2. Use smooth gradient to give balance and harmony.
3. Use color in relation to the content and status that the icon shows. For example, the color of a paper icon must be white while the color of a floppy disk or binocular must be in black.
4. The color of an icon is sometimes dependent on the style of the other icons when they all belong to one set.
5. Consider using color and its intensity so that the icon must be displayed well in a variety of backgrounds.

What about the coloring tools?

The Color Fill seems to work for icons when working with Adobe Photoshop. Indeed, with this popular graphic edit software, you can easily create shapes by using the Color Fill along with brushes, and you got to have a Wacom tablet or Cintiq already to make this work at ease.

But in our main weapon – Adobe Illustrator, the Color Fill is used indirectly when we want to make gradients or when to fill colors with the Mesh tool.

The Mesh tool is regarded as a powerful tool in the world of vector software. It is used to compose large images with a lot of details and high fineness requirement. Only when the Mesh tool is taken on to draw objects in small sizes of 128×128 pixels or lower, it will become a nightmare due to the pixelation issue. As a matter of fact, it’s so hard to give sharpness to those low-resolution objects.

Gradient in Icon Design

As you already knew, the gradient modes in Adobe Illustrator are Linear and Radial. Each mode has its own strong and weak points. How to take them into use where it needs to be is a question of experiments. From our experience, it’s sensible to use a gradient from white to a darkest color (nearly black).

How to properly use gradient and effectively apply it into icons?

To answer the question well, let’s go back to the lighting topic. When light strikes a surface, the color level of the surface will change upon the form of the surface. This surface can be seen by three basic color levels: brightest, darkest and medium.

• The darkest area does not receive and reflect light.
• The brightest area receives light most.
• The medium-light area is transitional between the brightest and the darkest.

Form and Value diagram

In the diagram, light emits vertically to the surface and creates different color levels, helping us realize the form of the surface.

In Adobe Illustrator, we call it “gradient”. If you’re being in traditional art with a pencil to create many different color levels, then in Illustrator you use gradient to do that. Using gradient to create a form of an object requires long-time experience. Understanding the basic principles of light will help you a lot in reasonably adjusting the color levels of a surface.

To end this article, let’s take a look at how to draw a surface as shown in the picture. We got two ways to work it out.

1. Use one gradient only to create the surface.
2. Or, use two gradients, one gradient to depict surface without reflected light and the other set in the Screen mode to depict reflected light.

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

1. How to Create a Simple Button Icon in Adobe Illustrator
2. Adobe Illustrator’s Tools and Palettes Used Most for Icon Creation
3. How to Create a Simple Stroke Dashboard Icon in Adobe Illustrator
4. How to create a realistic globe icon
5. How to create a glossy Network icon
6. Perspective in Icon Design – Part 1: Draw a Paint Bucket icon
7. Perspective in Icon Design – Part 2: Know-hows
8. Lighting in Icon Design (revisited)
9. Material, Coloration and Gradient in Icon Design (revisited)

P.S. You might as well read our first-ever guide “Drawing A Pencil Icon” already published on Smashing Magazine. (Again, many thanks to SM guys for this opportunity).

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.