Drop a line

Have a tip, or just want to say hi? Just use the form to the right!

           

123 Street Avenue, City Town, 99999

(123) 555-6789

email@address.com

 

You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

All

On Launcher Icons: Thinking of hard shadows realistically

Liam Spradlin

I recently wrote a short post about Google's new vision for launcher icons.

One big component of that is emphasizing the top-most element of the design using a hard, gradated shadow. But it's important to note that - even accounting for the harshness of hard shadows - designs strive to at least imply realistic, possible lighting.

Coming from a background in photography (which I still practice when I have the time), one thing that sticks with me when working with shadows is how lighting is used to achieve them. In practice, the closer the light source is, the more sharp and contrasty (that's a highly technical term) the shadow is. The farther away, the softer and subtler.

Likewise there are easy hard-and-fast rules for long shadows. The light source for a Googley shadow would be close to the subject, and positioned at a very low angle, particularly considering the material our subject is made of is very shallow and short. In this case, our subject is also a single shape, on a single plane.

So, if our subject has components that lie in - or jut into - the larger overall shadow, they should not have their own sub-shadows. A sub-shadow on a component of the overall element implies that that component is raised or taller than the rest of the element. If this were the case (as illustrated above), the light would be making a shadow for the widest part of the subject, the overall square, and then the raised part would be getting its own sub-shadow, that falls within the main shadow.

Paper, the metaphorical material for much of Google's new design direction, does not typically change thickness in the same sheet. Additional sheets would have to be stacked up, which wouldn't normally happen on top of a single, unified element.

So, under normal circumstances, the entire element would have only one shadow. Any spikes or other protrusions inside that shadow would share that shadow, which comes from the widest part of the shape and extends at a 45-degree angle until it either runs off the surface of the underlying element or gradates to transparency.

The "exception" to this rule is when you have an element with components jutting out outside the main shadow. So, if you have some kind of crazy shape with a component jutting out between the main element and the light source, it may have its own smaller shadow, like below. Of course this isn't really an exception, since the aforementioned element does not fall under the larger shadow.

o, when going forward with new, "materialized" launcher icons, just remember that shadows should behave in a way that resembles reality. In real life, setting up tiny hot lights to cast long shadows on pieces of paper is not a priority, but there are some general principles that will make it easier to keep your launcher icon looking good.