Flat design has been one of the longest standing design trends that was born and bred on the internet. Browse through Dribbble and you’ll find a mix match of flat style UI and graphics that have been crafted by talented designers. A style that has developed from this trend is the long shadow effect. It tends to be used with more subtlety than it did when it first appeared on the scene, but it still represents a great effect that can be used to produce some super interesting graphics.
The long shadow design is often created with Adobe Illustrator. Illustrator often allows you to produce a better and more realistic result, however Adobe Photoshop is not to be outdone. There are several ways to produce a great long shadow effect with Photoshop. Here are my favourite 3 methods:
The Rectangle Method
This method is perhaps the fastest way to produce the long shadow effect, but it may only look good for certain projects.
To start with this effect, you’ll need a Photoshop canvas with a background layer and foreground layer. The foreground layer is what is going to cast the long shadow. The background layer is what the shadow will be showing up against. The basic premise of this method is that we’re going to set a dark rectangle with a low opacity below our foreground shape. This allows us to achieve the long shadow look.
With the rectangle tool, build a new rectangle above your foreground layer. Set this colour to be black as this will be our shadow layer. Make sure the angle of the rectangle is what you’re after for your design, and resize the corners to fit the outer corners of your foreground object. Place your shadow layer between your foreground and your background. See the below image.
The next step is to rasterise the shadow layer. You can probably see where this is going now! Once rasterised, select your eraser tool. Select a large enough brush size to give you control over your object and erase the front side of your shadow layer, or the section that would be the ‘light’. Once you have a suitable shape, set the shadow layer to an opacity of something around the 15-20% mark, which may change for your project, and you should have a very well formed long shadow effect.
The Path Method
The above method works best for simple shapes. You’ll need to use the path method for more complex structures, like text or icons. Don’t worry because it’s not as tricky as it sounds!
The first step is to set out a collection of guide line shapes on your text. Just use the line tool to do this whilst copying them to where the edges of the light will need to be cut off. Note, the key here is to keep the angle of the line consistent with all of the copies.
The guide lines, as shown above, all have the same angle and are placed in areas where the light will need to drop off at an angle. Next, we’ll have to trace over this shape and therefore over our text with the pen tool. Be sure to use the lines as strict guides.
Trace out the path as shown above. Be sure to keep your path points inside your text. Next, we’ll be applying a fill to this path. Once happy, fill your path with a solid black and delete your guide lines as we won’t need them anymore. You should see something like this:
Now with one final step, place this shadow layer below your text and lower the opacity. If you are using this shadow inside a layer – like I am in the image example (the shadow needs to stay inside the pink square) remember to apply a ‘clipping mask’ on the shadow layer to stop it from displaying outside that square.
You should now have a graphic something like this:
Long Shadow Layer Shift Method
This method is going to make use of Photoshop’s built in layer duplication meaning it’s probably the easiest of the lot. It doesn’t tend to produce as nice a results as the previous two methods however it’s one to keep in your arsenal.
The basic premise of this effect is that you are going to duplicate lots of instances of the same layer. They will then be shifted by one pixel down and one pixel right. Repeat. Once you have your foreground layer ready to go, duplicate the layer and fill it with a black colour. Place this underneath your main foreground layer. Move it one pixel right and one pixel down – this is easiest with the directional arrows.
Now we simply replace this process over and over. Remember to shift your pixels! Once you’ve reached a suitable length for your long shadow that you’re happy with, merge all of the layer copies.
As with the above, now simply set an opacity to suit the style of your image on your shadow layer and you’re golden!