Long Shadow Design is all the rage in mid-2013. The first ideas and the name “Long Shadow Design” came out of Jeff Escalante‘s mind.
Building on the personally much-loved flat design’s foundations, long shadow design features subtle, yet still distinct diagonal shadows to give depth to those overly flat interfaces.
Important rules when creating long shadows
- As a general rule of nature, shadows fall in the same direction
- Generally, shadows are facing in a 45° angle, most commonly to the bottom right
- Make sure that the shadow is at least 2.5 times longer than the object itself
How to Create a Long Shadow Design Icon using Adobe Illustrator
In this tutorial we’ll be creating a simple but awesome Adobe Illustrator icon by using long shadows.
Create a new document in Illustrator, I’ll use an 1000×1000 artboard. Set the artboard’s background to grey [#BDC3C7].
Now, create a perfect rectangle in the middle of the artboard, mine is 500px wide and tall. Give it a nice orange color [#F39C12], and add 20 points of white stroke to the inside of it.
Pick the Type Tool and type in “Ai”, set the text color to white, the font to Myriad Pro Semibold and the font size to 350 points, then position it to the very center of the orange rectangle.
Now here comes the real deal. We’ll first add the long shadow to the text. For this, select the text layer and press Enter or Return on the keyboard to bring up the Move dialog box. Enter 350 pixels both to Horizontal and Vertical (if you’ve been following along with my sizes) Positions. Press the Copy button on the bottom to commit the changes. You’ll see the newly created layer.
Select the original layer again, and duplicate it one more time by hitting Ctrl+C then Ctrl+F (Cmd+C then Cmd+F on the Mac).
You must now have 3 layers if you check the Layers Panel. You might want to rename the bottom-most one to “Ai Original”. You’ll see why in a second.
Now select both visible text layers on the artboard by Shift-clicking on them. Go to Object – Blend – Make, and then set its color to black from the Swatches Panel.
There we have our shadow layer, now let’s style it.
Click on the little dot next to the “Blend” layer in the Layers Panel to select it, then in the Appearance Panel, set the blending mode to Multiply and the Opacity to 10%. When you’re done, move the “Ai Original” layer on top of the “Blend” layer. Almost there… we need to create a clipping mask for the shadow.
To create a clipping mask, let’s duplicate the orange rectangle, and move it to the very top of the layers stack in the Layers Panel. Also make sure to re-align the Stroke to the inside.
To achieve the best looking results, select the new rectangle layer and Expand its appearance, so we’ll have the orange fill and the white stroke on separate layers. With the help of the Layers Panel, pull the stroke out of the group to the very top of the layer stack.
Now, select the orange rectangle and the “Blend” layer together by Shift-clicking and press Ctrl+7 (Cmd+7 on the Mac?) to create a clipping mask.
Here, depending on your layer structure, you might need to rearrange your layers so that the “Ai Original” layer is above the “Blend” layer.
If you’ve done everything correctly, you should have a result the same as mine.
You can stop here if you want to create a simple icon that doesn’t need to cast a long shadow itself. If it needs to, you just need to repeat the above discussed steps on the orange rectangle to achieve the same effect. Here’s my result on the whole icon.
Congratulations, we’re done! Let’s see a couple of tools that would make our lives a bit easier.
Free .AI file if you got stuck or don’t want to follow along the steps, just see use the end result.
Free Long Shadow Design Resources
Long Shadow Photoshop Action [Download]
With one single click on this Photoshop action created by Dlacrem from DeviantART, you can easily create your own long shadows with beautiful results. Here’s mine.
Long Shadow Generator [Download]
A freebie PSD provided by GraphicBurger takes a different approach to generating long shadow designs. Basically, it is a predefined Photoshop document where you can set what you want to put a long shadow to, then it automatically does the magic by using Photoshop’s Smart Objects. Here is one of my results after experimenting.
Long Shadows Icon and Text Generator [Visit]
An awesome online tool built by Juani uses CSS3 to create long shadow designs. If you want to use long shadow designs on the web, this tool is a must have! Being possible to set the sahdow size ,opacity and strength, you can create any type of long shadow you’d like. Here’s a screenshot from the web app.
Long Shadow Design is still a newcomer design trend but already a big craze both among designers and users.