Lighting in Icon Design (revisited) 3

“Lighting in Icon Design” was one of the topics we posted three months ago in a pretty long, multi-topic article. We had thought that it might be more convenient for readers to snatch various but relevant topics in one article. However, that was when the blog was in the old theme. Now, with the new clothes and an improved playground for discussion, the blog should be filled with less topics in one article to make it easier for us and our readers to exchange and control opinions. So, we decided to split the old article into each separate subject and, here it comes back again with a little bit updated and revised topic: Lighting in icon design.

In this article, we are going to share with you some aspects of lighting and how to make it fruitful to our icon creation. Meanwhile, there are some new techniques in term of lighting we hope you will discover, too.

Look at all the icons in Fig 1 below. It’s not hard to figure out what object each icon represents, is it? Although they are silhouetted, we can tell them apart by their look and characteristic. How? The first thing we should think of is that it’s all thanks to the light.

Fig 1. Icons in silhouette

Let’s talk about painting first. For those who start to learn and practice painting, there’s one thing we have to admit that they normally take the pencil and draw something by their gut instinct. Naturally, they draw what they see, in lack of drawing essential principles like basic shape and perspective, color balance, lighting rules, etc. Although during their drawing process, they might be able to find in their work some problems, out of which primarily is lighting, and they would likely try to fix that natural issue according to their gut feelings.

Nevertheless, once you grasp the lighting principles, the problem would be partly avoided or solved. That also means you already got hold of the key: the light.

Light in nature

The natural light, generally coming from the sun, is the assembly of myriad of light rays. It’s huge and diversified. When you look at an object, light tells you what characteristics the object bring, in relation to such properties as dimension (height, length, and width), position (close or far), surface (smooth or rough, glossy or matte), nuance (warm or cool), and material.

To make it clearer for you to see, let’s suppose that light from the sun to be parallel, it in reality isn’t so though. We will take a look at this supposition in terms of physics and reality.

Light is grouped into three main properties (or phenomena): reflection, refraction, and absorption.

1. Reflection of light

Obviously, we are able to see objects thanks to the presence of light. But for those that don’t have their own light to emit, why can we still see them? This case can only be explained that it’s totally dependent on the phenomenon of light reflection.

Shown below are the direction of light, which is able to be seen from various viewing angles, regardless of in perspective or in side view. When light is incident on a surface (smooth or rough), it is reflected with an angle of incidence equal to the angle of reflection.

Fig 2. Perspective view (light on a smooth surface)

Fig 3. Side view (light on a smooth surface)

Fig 4. Defuse light (light on a rough surface)

2. Refraction of light

An image that typically represents this property of light is when you drink a glass of water with a straw, hold up the glass and see through it, can you tell what happens with the bottom part of the straw in the water? Yes, it looks bent. That is because the water causes light to “change course” when it moves from air into the water. The light will again be caused to change course when it leaves the water to go back into air. This is called refraction.

Fig 5. Refraction of light

This phenomenon happens when light bends at an interface between two transparent materials. Many things in our livings refract light such as glass, water, air, and plastic.

3. Absorption of light

What will happen if everything in the world just reflects or refracts all the incident lights? Everything then will become dazzling with one single color – the very bright white and that makes it really hard for us to distinguish among things. People call it “color-blind”.

So, how can we see other colors apart from the white? The only answer is that it’s all on account of the third phenomenon: the absorption of light.

The absorption of light happens as light rays with various specific colors are incident on an object. If the light is white and so is the object, then the white light bounces off from the white object, meaning that the white light and the rest are not absorbed but reflected. But in case the object appears blue to our eyes, it means that only the blue light is reflected, and the red, green and other colors of light will be absorbed by the object. So, if the object appears black, then all of the lights will be absorbed and nothing is reflected.

Still there is no absolute absorption of light as regards with all things in the nature. That is, when something is hit by light rays, it absorbs part of the lights and reflects the rest into the surroundings.

Fig 6. Absorption of light

Fig 7. On The Snowy Path by Peder Monsted

Lighting in icon design

It can be said that icon design is one of the most specific illustrating fields, and its specifications are showed up right from icons. That’s to say, icons need to be made in certain ways to bring about both clear, user-friendly, “cool” appearance and wide applicability.

For that reason, the lighting we apply in icon creation is normally an “artificial” light source, created by the artist, making it easy to control the color, intensity, angle and direction of light. By doing this way, it is also possible to avoid troublesome impacts rising from the surrounding environment, like shades and chaotic interactions of natural things.

Light source

The direction from which we view a light source has a profound effect on our perception of it, and on how an icon will appear. There are several light directions to manipulate yet the light source should be slightly coming from above and exhibit between the eye and the icon. This could offer a uniform lighting appearance across all icons and spotlight effects.

Fig 8. Lighting in Icon Design

Shadow

Shadow is strongly relative to light source. Shadow gives an icon dimensionality and reality. It also helps bind the elements of an icon together so that the icon will not look like a patchwork.

That’s almost everything we thought of and shared with you about lighting in icon design at the moment. We also know that this article has yet to explain or give enough details in how to effectively bring lighting and shadow into play, because that’s a hard part to tell in the creation process. So, don’t hesitate to bother us if you have any question or encounter any problem regarding this topic. Thank you for your time reading this.
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.