Design trends: Bringing long shadows into 2015

Will flat design disappear in 2015?


Not necessarily, but I think we’ll see it applied in other ways, such as implementing images and textures. But isn’t that sceumorphic design again? No, not if it’s not pretending to be something it isn’t.

 

How to make long shadows in Adobe Illustrator


If vector graphics are needed, ai files are a must. And creating files in Illustrator is a good way to start, although it is somewhat labor intensive.

 

Step 1. Create shapes


 

long-shadow-m-1

 

  • Make square (light blue) on separate layer
  • Set type (MH icon)
  • Duplicate type in front on separate layer
  • Outline type on both layers
  • Lock layer icon on front layer

 

Step 2. Duplicate and move


 

long-shadow_01

 

  • Duplicate icon on the back by option shift dragging down to the right

 

Step 3. Blend icons


 

long-shadow_02

 

  • To get the shadow, use the Blend Option tool. Select this tool and click on the two elements to get a row of them in between the first and last (top and bottom). Use the options to specify a number of specified steps to keep the visual separation between them to a minimum. I used 400 steps in this example.

 

Step 4. Change shadow color


 

long-shadow_03

 

  • Choose a color for the blend. This can be a solid color or a blend.
  • Set layer to multiply

 

Step 5. Crop shadow


 

long-shadow_04

 

  • Now, since we want to keep the look of the icon consistent, crop the shadow to the shape of the icon or button. Duplicate the background shape, keeping it in the same position on top of all the other elements, select all and apply Make Clipping Mask.

 

Step 6. Duplicate steps on icon square


long-shadow_05

 

  • Repeat steps 2–5 to make shadow on the square agains the background

 

Bringing long shadow design into 2015


The result from this technique is a flat design with long shadows. If you are a minimalist and like the trend from 2013 and 2014, keep as is. Should you want to take the design one step further, do so by exporting the .ai document for Photoshop. In Photoshop, select the background and fill the shapes, background and square, with images. I used grass and a sky for my demonstration.

TIP: If the shadows are not dark enough, simply duplicate layers as many times as needed, or change levels settings. Make sure the layers are set to multiply.

Start typing and press Enter to search