Jul 18, 2013

Flat Long Shadows: Step-by-step Tutorial, Resources and Examples

Flat Long Shadows: Step-by-step Tutorial, Resources and Examples

Within the flat design trend on the rise at the moment, especially in this world of the web, one thing that stands out is the use of long flat shadows, particularly for small UI elements and icons. These shadows have a characteristic 45º angle below the horizontal axis and a gradient color close to the background shade can be applied.

This technique is by no means new. It has always been a widely-used resource in photography to emphasize shapes and transmit different emotions to the viewer.

Build a long shadow in Illustrator

We'll show you two different ways to achieve this long shadow finish with Adobe Illustrator. One uses the Pathfinder tool and the other uses the Blend Option.

Method 1: Blend Tool