Long Shadow Design Photoshop Tutorial

The web design trend called flat design has now been established. A big role played the new UI of Windows 8 Metro Style. This look has arrived very fast in the web design community. Most recently, a new trend is buzzing through the internet world, which is mainly used in the design-community dribbble.com and is very well received – long shadow design.

Last Update 14.08.2014

Long Shadow Design

Today I would like to do a beginner-friendly tutorial and explain how to create or edit a logo in Photoshop. The final logo has the fancy long shadow design. I will show some great logo examples later for further inspiration.

For this we need only Photoshop and depending on your knowledge it will take about 10-30 minutes. You can use this “W” here and follow the tutorial step-by-step.

W-Logo as Starting Point

W-Logo as Starting Point

I took the “W” from the-webdesign.net, but you can also use your own logo of course.


Step 1: Create a new file

First of all, we create a new Photoshop workspace for our logo. Just select “File > New” or use the key combination Ctrl + N. The size of course depends on the size of your logo. I create just one example here so I choose a work area of 600×400 which fits the aspect ratio of the thumbnails in this blog.

If you want to create a wallpaper for example you have to choose the size of your resolution (like 1920×1080). All the other setting are shown in the screenshot below,which are basically just the default settings.

Settings for the Logo

Settings for the Logo


Step 2: Background & Logo

Let’s dive into the action. After we created our workspace, we need to fill the background. I just took the color scheme of the-webdesing.net with the 4 colors you see underneath. The colors will be used to create the long shadow design logo.

We need to create the background and therefore we create a new layer. For this we go to “Layer > New > Layer” or press SHIFT + CTRL + N and name it “background”.

Color Scheme for the Logo

Color Scheme for the Logo

Now we use Color Picker to the select the color of us (#34495e). We use this color with the paint bucket tool and colorize the layer we just created. Once the layer appears in our chosen color we can add our logo. You can drag & drop it or goto “File »Place”.

Now we color the just inserted logo. Since our color scheme is very dark, I choose white as the logo color. By right-clicking on the logo layer we receive the context menu and select “Blending Options”. We click it, select “Color Overlay” and choose the color white.

Adding the Color Overlay

Adding the Color Overlay


Step 3: Second Background

Now we have to insert another background on which we will place the logo. For this purpose we use the rectangle tool and draw a square that is slightly larger than our W. If you want you can set the foreground color (as explained above) to the 2nd background color (#1abb9c) of our color set. You may also use the “Blending Options” of this Square and set the hex #1abb9c.

Of course we must draw beneath the W-Layer, so that W is visible. Most of the time we face the problem that the W is not exactly in the center of our new square.

We can automatically center multiple objects automatically in our work area. For this purpose we choose all 3 layers and now take the “Move Tool” (Ctrl + V) and select “Align to vertical center axis” and “Align to horizontal center axis”.

Center the Layers

Center the Layers

Our logo should look like this right now:

Logo without Shadows

Logo without Shadows


Step 4: Shadow of the Box

Let’s go one step further. We select the “Rectangle 1” layer and then click on the “Layer -> Duplicate Layer“.

I suggest we make a group for the layer we just duplicated and the original layer and move them together in the group so we get a better overview. Select “Layer > Group Layers” or use the shortcut CTRL + G. Since we need to duplicate this layer several times now, it may, depending on the system, lead to problems with the performance. Therefore, we use the “Rasterize Layer” option which shows up when we click on the layer.

Now this layer has to be shifted by 1px. In our example, I want to run right up the shade at a 45 ° angle down right. So we have to move in both directions – 1px right and 1px down. The easiest way is via the arrow keys on your keyboard. Now we duplicate the layer again and repeat the movement with 1px right and 1px down. We do this several times until we have 10 layers. Now we will proceed faster :).

Now that we have 10 layers in our group, we can mark this ten layers. You have to click on the top layer ,hold down the Shift key and then click on the last layer so that all layers are selected. We will now merge all layers into one single layer. Right click on of the layers and choose “Merge Layers” or optional CTRL + E and we will get a single layer. We now duplicate this again, but we move this layer now 10px at once. We do this by holding down the shift key while using the arrow keys. We repeat this process until we reach the point where the boxes reaches the bottom right edge.

We select all the layers again and merge them to a single layer. We can set the color to # 223140 in the blending options with the color overlay.

Doing the Final Steps

Doing the Final Steps


Step 5: Finish the Logo

We have to repeat the process for the shadow of the green rectangle also for the “W”. You should be able to repeat the step 4 and create a big long dark green shadow (#138b74). The logo is nearly finished right now.

Logo with Long Green Shadow

Logo with Long Green Shadow

As you can see the shadow of our logo is much too long, even for a long shadow design. We can fix this so the shadow will be only seen above the rectangle. We right click on our logo shadow and then click the “Create Clipping Mask” option.

Well done. Your first long shadow logo in full glory.

Final Logo with Long Shadow Design

Final Logo with Long Shadow Design

Download the final Logo here.

Download Free PSD


Long Shadow Design Tools

If you like long shadow design as much as I do you will find some cool tools here. I found some really useful Photoshop and illustrator actions. They will help you to create your own long shadow design logo or icons with a long shadow. I also added a resume template with a long shadow design and the same colors as you can see above.

Long Shadow Maker

Long Shadow Maker Photoshop Action Kit

Long Shadow Maker Photoshop Action Kit

The long shadow maker is a Photoshop Action Kit. The kit comes with 56 ready to use actions and you can customize it very easy. The actions work for small 100px icons as well as 1500px logos for print.

Get the tool


Long Shadow Generator

Long Shadow Generator

Long Shadow Generator

The Long Shadow Generator is a powerful collection of 64 PSD files. Each file has a different combination of shadow style and direction. You will also get a documentation how to use it.

Get the tool


Advanced Long Shadow Generator

Advanced Long Shadow Generator

Advanced Long Shadow Generator

The Advanced Long Shadow generator is yet another Photoshop action. You also get sample PSDs and a documentation.

Get the tool


Long Shadow Illustrator Actions

Long Shadow Illustrator Actions

Long Shadow Illustrator Actions

Logos are mainly created with illustrator, because you can work with paths. This Long Shadow Illustrator Actions give you the power to add the shadows with a Illustrator action.

Get the tool


Creative Long Shadow Print Resume Template

Creative Long Shadow Resume Template

Creative Long Shadow Resume Template

Flat web design and the retro colors found their way into the print. This creative printed resume template uses long shadow design in the header.

Get your Resume Template

Tobias Gebauer

Webworker, web developer and also web designer. I love blogging and working on my websites all the time. I like to share great web design inspiration, freebies and tutorials with the world :).

You may also like...

Pinterest