We have discussed a new emerging design trend called Long Shadow Design in the previous post, and today there are various more examples of long shadow design implementations we can find online – particularly in Dribbble.
In addition, one of our readers named Simon Rahm also shared a nicely crafted icon set with long shadow. But if you have ever wondered how you can create this shadow effect yourself, you’re on the right post.
In this post we are going to take a look at this matter and will show you how to create long shadow effect, and in an easy and quick way. Let’s get started.
Recommended Reading: Long Shadow Design – A New Trend?
Long Shadow Generator
Shortly after this trend had become a buzz in the design community, Raul Taciu of GraphicBurger created this Long Shadow Generator, which is a PSD file that consists of a bunch of layers.
In this file you will find 2 group folders, which allow you to create long shadow in 45 degrees and in two direction, left and right.
Within these folders, you will find a Smart Object layer named “You design here“. It is obvious that we should insert our design, an image or text, within this layer. To do so, right-click on the layer and select.
This will bring you to a new file
.psb tab. Put your design in this file, in this example I added the Google Mail logo from the flat icon set by CarlosJJ, like so.
After saving the file, the Smart Object will be updated, and the shadow will reflect our inserted design. Then go back to the orginal PSD file, and turn off the overlay effect.
That’s all, you have applied long shadow in your design. Now you can show it off to your friends and peers.
Using a generator tool like this is really a time saver, and also a great place for beginners to learn how this effect is built. However, the generator shadow might not fit all design circumstances, and customization will likely require more work than creating our own from scratch.