Create a Stylish Curved Drop Shadow in Photoshop CS3

Photoshop Icon

[dropcap]E[/dropcap]ver wonder how to create a stylish curved drop shadow like the ones you see all over the web these days? In this tutorial I will show you how to create that look quickly whether you’re experienced or new to photoshop! It’s no surprise this look has caught on as it adds a great effect to any flat website.

Are you ready?

Open Up Photoshop!


Step 1

We are gonna start off by making a new  document in photoshop by going under file>new. Just set the size to 500 pixels by 400 pixels, resolution to 72 and leave the color to RGB for web use.

We are going to grab our Rectangle Tool ( “U” on the keyboard )

Step 1 of photoshop drop Shawdow

Step 2

We are going to make a long rectangle like the one you see below. This will be “shape 1”. Set the color to whatever color you would like your shape to be. I will use “Smurk Creative Green”, or #39b54a if you would like to use it and follow along.

Step 2 of photoshop drop Shawdow

Step 3

Next make a copy of that layer by “right-clicking” on the “shape 1” layer and select duplicate layer or dragging and dropping the layer onto the “new layer” icon on your layer panel.

Select your original “shape 1” layer and change its color to black by double-clicking the green square shown in the red box in the picture above.

Now with your original shape layer and “move tool” ( “V” on the keyboard ) selected move the black shape down until you get something like the picture seen below.

Step 3 of photoshop drop Shawdow

Step 4

Now comes the fun part… With your black layer selected go to Filter>Blur>Gaussian Blur. Gaussian Blur works great for drop shadows and even highlights! But that’s in another tutorial!

Step 5 of photoshop drop Shawdow

Step 5

Photoshop will prompt you that your shape must be rasterized  before proceeding. This is ok because we no longer need this shape have a vector mask to it. Click “Ok” and proceed.

Step 5 of photoshop drop Shawdow

Step 6

Make sure “preview” is selected and set the radius to 5 pixels. You can play with these setting as much as you like until you find the look you’re looking for but you should have something like the image below.

Step 7 of photoshop drop Shawdow

Step 7

Now with your newly Gaussian Blurred layer selected in your layers panel; get your “move tool” ( “V” on the keyboard….remember?) and grab the end of either side of the drop shadow and drag them in slightly. Giving the appearance of a shadow directly behind your shape layer copy.

Step 7 of photoshop drop Shawdow

Step 8

Now we get to use the wonderful “Warp Tool”. If you haven’t used it in the past I am glad to be introducing it to you as it may just spark some new options for your creativity!

With your shadow layer selected go to Edit>Transform>Warp

Step 8 of photoshop drop Shawdow

Step 9

You will get a grid around your shape that looks like the one below. You are now able to use your “Move Tool” (You should remember by now) to grab any part of the line you wish and “warp” the object. For this tutorial we want to focus on the area right in the center of the bottom line as indicated by the red arrow.

Select your “Move Tool” (V) and drag the shape upwards until you get something like…

Step 9 of photoshop drop Shawdow

Step 10

This! As you can see we have now created an “arch” on the bottom side of the shadow. Now press “enter” and finalize your awesome warping!

Step 10 of photoshop drop Shawdow

Step 11

Feel free to move your shadow around until you find the spot where you like it most. I decided to move mine up a just slightly to make the bend appear towards the end of my shape… Does yours look like the one I have below?

Step 11 of photoshop drop Shawdow

Step 12

Next we want to add some depth to our shape later and really make it look like its bending in conjunction with our drop shadow. We can do this with a “Gradient Overlay”. It can be found by “Right Clicking” on the shape 1 copy layer or by clicking on the little “FX” on the bottom left of your layers panel.

Step 12 of photoshop drop Shawdow

Step 13

With your gradient menu open click on the gradient color panel shown in red square below…

Step 13 of photoshop drop Shawdow

Step 14

A new menu will appear where you can set the color options for your gradient. We do this by first clicking on the gradient color we wish to change as shown as number 1, and then selecting its color by clicking on its color option shown as number 2.

Step 14 of photoshop drop Shawdow

Step 15

You should see something like the screen shot below…Go ahead and set the color to our original choice which was #39b54a and click Ok.

We are going to leave the other color as white. Typically you could use a lighter green as your second color choice to add depth but instead I am going to show you another way to do it.

Step 15 of photoshop drop Shawdow

Step 16

You should still have our layer style sheet open after choosing your color for the gradient. Under “Opacity” select “Multiply”.

Multiply allows the color underneath to mix with your gradient selection. Giving you a smoother blend. This works great for drop shadows as well!!

Step 16 of photoshop drop Shawdow

Step 17

You should have your settings set up as follows… Under “style” choose reflected and check the box for “align w/ layer”. You can set the scale to whatever you think looks best. Make sure preview is checked so you can see the changes you are making instantly in your document!

Step 17 of photoshop drop Shawdow

Step 18

Next we are going to add an “Inner Glow”. With your layers style still open check the box on the left hand side that says “Inner Glow” and set the settings like you see below…

Step 18 of photoshop drop Shawdow

Step 19

You should have something like this when you’re finished! Play with the setting until you get just the look you want!

Step 19 of photoshop drop Shawdow

Step 20

I added a nice background and our wonderful website

Step 20 of photoshop drop Shawdow

There you have it!! A quick and easy way to get a nice curved drop shadow look in Photoshop CS3 for your next creative design! If you have any questions feel free to post below. Go Ahead… Be Satisfied!!