The flat design has been popular for a while now, but web designers everywhere are itching for a change. However, they’re not ready to give up the beloved simple yet catchy flat design. The solution? Long shadows!

Casting disproportionately long shadows on flat images creates a very interesting look that somehow works very well. It’s a fresh twist to the popular but common flat design. Know what’s great? It’s actually quite easy to create!

Before we show you how, let’s feast our eyes on some beautiful examples of long shadows on flat images:

Don’t forget to subscribe to our RSS or Follow us on Twitter if you want to keep track of our next post.

 

 

 

 

Okay, when you’re done drooling, let’s learn how to make one yourself! We put together 8 incredibly easy steps to creating a perfect long shadow on a flat image. Please keep in mind that you already need to have a flat image to work with.

01. Open Adobe Illustrator and create a new document.

Make sure the size of the document is at least 200% bigger than your flat image.

02. Paste your flat image in the middle of the document.

At this point, you should have already decided which direction you want the shadow to fall. Position the flat image accordingly. For example, if you want your shadow to fall to the right, move your image to the left to allow enough room for the shadow.

03. Select the element that you want to “cast a shadow over”.

If there’s a certain element, such as a letter or an outline, inside the flat image that you want to create a shadow out of, select it.

04. Create a duplicate of the element.

To do this, you can just copy the element and paste the duplicate.

05. Move the duplicate at an angle. Be sure it’s in the same direction where you want your shadow to fall.

If you’re a nitpicker, make sure the pixels in the x axis and the y axis are the same number. That way, the duplicate will be perfectly diagonal to the original image.

06. Create white space between the original element and the duplicate.

To do this, you need to use the Blend Option tool. Simply select the Blend Option tool and then click both elements. You will get white space between them. Play around with the Blend Option tool until you get the perfect outline you want.

07. Change the color of the white space.

Play around with the opacity and the blending mode until you get the result you want. You can even apply a gradient if it’s easier for you.

08. Crop the shadow.

Crop the shadow to fit the image well. To do this, duplicate the background shape and then apply the Make Clipping Mask.

Ta-da! You’re done now! You can repeat this process to add more shadows to the flat image. Just make sure all the shadows fall in the same direction. Do you have any beautiful flat images with long shadows that you’d like to share with us?