LONG SHADOW DESIGN

long-shadow-design-2013

The re-introduced concept of long shadows is recently seen in conjunction with flat design, and as a reaction against elements such as drop shadows, textures, fake leather or wood, gradients, or skeuomorphic design.  The trend is most commonly seen in user interface elements and icons, although it can also be seen in logos, web design, and graphic design at large. Many programmer are playing with long shadow effects in CSS styles (see bottom of the page).

 

So, what is long shadow design?

Long shadows extend far past the main object and can be a mirror of the object itself. The term is borrowed from lighting and photography.

long_shadows

Photographers capture long shadows in images to create a high-drama effect, achieved when the sun is near the horizon at dusk and dawn.

Casting_a_Long_Shadow_by_dpturnbull

Some also refer to Bauhaus as an inspiration for long shadow, although adding elongated objects, often in black or very dark color, probably better describe the Bauhaus style.

a-tribute-to-bauhaus-andreas-xenoulis

A tribute to Bauhaus by Andreas Xenoulis

The angles and shadows used in Bauhaus (and poster design of the Russian Avant-Garde) can look similar by not creating a true perspective or three-dimensional objects.

In design, the shadows often follow a 45-degree angle, mirror an object without perspective or vanishing point. The trend typically feature shadows that do not fade away from the object, although we see both.

googlefontflatlongshademin

The shadow can be a tint of the object’s color or, more commonly seen, a darker shade of the background color. A black shadow would not fall into this “trend.” This works best if the background also is a flat color. Another variation is to use two sets of shadows, the first light and the second darker.

clock-dribbble

Designers have “agreed” on making shadows 2.5 times longer than the shadowed object, at a 45-degree angle – some use 120 degrees – towards the lower right corner of the object. Shadow edges are sharp, not soft.

long-shadow-design-trend

Shadows live within the element and often extend beyond an object to the surrounding frame.

 

Shadowing flat design

Long shadow design is borrowing from and is influenced a lot by flat design, elevating it to “almost flat.”

Just like flat design is based on simple shapes and clean lines, so is long shadow design. Furthermore, it also uses a color palette that is bright and vibrant. Color can be used for shadows, which may just be a shade darker than the hue it mirrors, instead of black or gray. The goal is not to create a three-dimensional effect, but rather an extra layer of dimension that is not entirely flat.

long_shadow_dribbble

Dribbble has become the place place to look for flat and long shadow design inspirations.

 

More examples of long shadow design

bates-longshadow

long_shadow_banner

long-shadow-examples-06

ls_010

ls_012

ls_016

 

How to create Long Shadow in Photoshop CS6

 

Long shadows in CSS

Here’s a link to “Long Shadows Generator” by Juani.

long-shadow-generator-css-1

long-shadow-generator-css-2

Start typing and press Enter to search