Skip to main content

Introduction

Considering the previous tutorial was about realistic shadows, its only fitting that the next one is about the long shadow fad. Even though Im referring to the long shadow effect thats been closely associated with flat design as a fad, I honestly like, it gives the flat design a sort of 2.0 feeling. Finally I will also present two handy tools for generating long shadows purely in CSS.

Note: If you are just starting out with Adobe Photoshop, and have a hard time following the basics presented in this tutorial. Consider going through our Adobe Photoshop Essentials series, before you dive in to more advanced material.

Preview

Step 1

Create a new document with size 730px by 420px and 72dpi. Right away fill the background layer with #d54442.

Step 2

Select the round rectangle tool, and as a foreground color chose #ffffff, finally create a shape sized similarly as the image below.

Base Clock

Step 3

Change the rounded rectangle tool for the rectangle tool, and change the foreground color to black. Now create a shape that is nearly as wide as our clock base, but a bit longer. Right after creating the shape, rotate it for 45 degrees. While still in the transform mode, shrink or increase the width of the rectangle in order to match the edges of the clock base.

Long Shadow

Step 4

Change the blending mode of the black rectangle to multiply and the opacity to 25%, this will give you an even long shadow. If you want more of a gradient long shadow, leave the blending mode to normal, and decrease the fill to 0. Now add a gradient overlay to our shape, with an angle at -45 degrees, going from black to transparent, and blending mode set at multiply with opacity 20.

Long Shadow Complete

Step 5

With the rectangle or rounded rectangle tool, create the hands of the clock and center them to the base of the clock. Also while you are at it, create the 4 dots representing the hours of the clock with the ellipse tool.

Clock Hands

Step 6

For this step we are going to need the pen tool, if you have hard time working with the pen tool I highly suggest you first give this tutorial a try (Photoshop Essentials: Pen Tool), in order to familiarize yourself with the pen tool.

Starting from the hands and finishing at the edge of the clock, draw a black shape with the pen tool. Keep in mind that this shadow needs to fall exactly like the earlier shadow, in a 45 degree angle. Also don’t worry if the shape is getting outside of the clock or inside the hands of the clock.

Step 7

Position this shape from the layers palette, just above the clock shape. Right after that right click on the shadow shape, and chose create a clipping mask.

Step 8

Again for this shadow we are going to repeat the process from step 4, its up to you to decide if you want a gradient shadow or full hard shadow. The only difference here is, since this shadow falls on a white color, you will need to lower the opacity around 10% or even less, compared to step 4.

Final Product

Conclusion

Once you introduce shadows in to flat design, don’t be afraid to add a little depth to your elements just like I did in the feature image. You could also achieve a completely different look if you add a perspective to your shadows, instead of having them fall in a straight line. Furthermore you could try to overlap both shadows for even more dramatic look.

Download PSD

CSS Long Shadow

You can also create long shadow purely with CSS, but if you don’t have the know how, here are two great open source executions of which you can take advantage: Codepen Long Shadow, and CSS Deck Long Shadow.

Similar Posts

Tutorial: Hipster Poster - Featured Image

Tutorial: Hipster Poster

| Tutorials | 2 Comments
In order to create this hipster poster, we are going to cover few procedures regarding…
Tutorial: Long Shadow - Featured Image

Tutorial: Long Shadow

| Tutorials | 4 Comments
Considering the previous tutorial was bout realistic shadows, its only fitting the next one...

Tutorial: Realistic Shadow

| Tutorials | One Comment
In the following tutorial I will take you through the process of creating a realistic…

4 Comments