DaveJays Blog

Photoshop Shadow Effect

MAY 16th 2007 • 3 Comments

I first came across this effect by John Hicks on hicksdesign. It involves a shadow that slowly shrinks down into the background behind it. The end result looks somewhat like a tab, or slab of paper that is cut out of the paper and lifted up a bit. It's really a cool effect, and it establishes a nice rounded border for an element through the use of a shadow rather than an actual border line. This tutorial will show how I go about doing this effect, it mostly involves making an adjustment to the shadow of a rounded box. I must admit, this is my latest craze. I love this technique.

Here's the end result that we're shooting for:

Creating the shape

First step is to create a rounded box. Set the radius to about 20px for a nice wide curve. Next, double click on the newly created shape to enter the layer effects dialog. Or alternatively, on the menu bar select "Layer > Layer Style > Drop Shadow...". Now, on the drop shadow options, set the shadow to a -130 degree angle, and lighten the shadow to a lighter shade of gray. Finally, set the size to about 8px. You should now have the completed shape.

Separate the Shadow

Now, under the effects of the layer, right click (two finger click, control click, whateverver you prefer) on the 'Drop Shadow' effect and select "Create Layer". This will separate the shadow from the shape and put it on its own layer. You may get a warning about some effects being unable to be reproduced. Just click OK.

Transform Perspective of the Shadow

Select the newly created shadow layer and transform the perspective by going to "Edit > Transform > Perspective". Now, select the top right corner and move it just a few pixels to the right. This will distort the shadow making it suitable for the effect we're trying to get. The amount of pixels you distort the shadow will depend on how tall you want the container to be.

Add a New Rounded Shape

Now that the shadow has been fixed, just create another rounded shape (with the same color as the background), back on top of the shadow and push it over to the right of the shadow till the shadow fades out smoothly to behind the shape. On the left side, you should not see any shadow at all,The left curve of the shadow should curve down before it hits the edge of the shape.

Add some Decoration

The last part is to add a little decoration. It primarily serves to help outline the left edge of the shape, and it also just makes the effect look *good*! So that's how I do the effect. I hope you've enjoyed my first tutorial!

posted in: Design | Tutorials |