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




  • 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




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


Step 3. Blend icons




  • 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




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


Step 5. Crop shadow




  • 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



  • 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.