How to Create a Long Shadow Design + Resources

  • 6 Read Time(minutes)
  • 2/5 Difficulty
  • Ai Application

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.

Step 1

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.

01

Step 2

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.

02

Step 3

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.

03

Step 3+1

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.

04

Congratulations, we’re done! Let’s see a couple of tools that would make our lives a bit easier.

Surprise!

Free .AI file if you got stuck or don’t want to follow along the steps, just see use the end result.

DownloadBtn

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.

longshadowdesign1

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.

longshadowdesign2

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.

longshadowdesign3

Conclusion

Long Shadow Design is still a newcomer design trend but already a big craze both among designers and users.

Share it?

There should be an ad here...

Aaaw, too bad you're using AdBlock. Care to add my Blog to your whitelist, please? Much appreciated!

Written by

Web designer, web developer, UI/UX designer 9-5. Energy drink consumer, video game addict, avid blogger 5-9. Owner of Szaboka.com.

Related Articles

4 Responses

Comments

  • Nathan said on 2013.09.06. at 13:59 Reply

    Thank you very much :D

  • Daniele said on 2013.09.23. at 11:47 Reply

    Hi, i tried to follow all steps, but when I Select the two layers and select object - blend - make, Illustrator doesn't ask me the blend color and it creates a third text on the center. I have Illustrator CC...

  • Bryan said on 2013.09.23. at 23:26 Reply

    I love Flat Design and this new trend: LONG SHADOW. I made some graphic with long shadow. Effect you can see here: http://bryanpokucinski.pl/long-shadow-flat-design/

  • jannat said on 2013.11.25. at 12:59 Reply

    Thank you very much but i did not it.

Trackbacks

There are no trackbacks yet.

Join the Conversation

Captcha: − four = 3