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.
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.
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”.
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.
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”.
Our logo should look like this right now:
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.
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.
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.
Download the final Logo here.
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
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.
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.
Advanced Long Shadow Generator
The Advanced Long Shadow generator is yet another Photoshop action. You also get sample PSDs and a documentation.
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.
Creative Long Shadow Print 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.