Creating Long Shadow Effect Easily with Long Shadow Generator

By . Filed in Web Design

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.

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.

You can download the file here (or here), open it up in Photoshop, and we are all set. It is worth noting, however, that you need at least Photoshop CS5 to open the file.

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.

Final Thought

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.

Author:

Thoriq has been dabbling in Web Design for 5 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.

Advertisement