For those of you who follow Sebastiaan de With’s Blog you may have noticed the subtle, but gorgeous “curved drop shadow” that he uses on all of the images on his blog. It is a very nice, elegant way to make the images on your website or blog pop. In this tutorial I will go over how to reproduce this effect in photoshop. The final result is pictured below:
Final Result Of Curved Shadow Tutorial
Grab The Source File For This Tutorial
Step 1: Open File & Add Padding
Open the file in photoshop, and give the image spacing of about 20px on all sides. It should look like this:
Image With A Border of About 20px
Step 2: Setup Guides
Next, set guides around all 4 sides of the image (not the document). Add another guide 10px from the left, and another 10px from the right. Finally, add the last guide 15px from the bottom, so it looks like this:
Image With All Guides Set
Step 3: Add 1st Stroke
After adding the guides, give the image a white, outer stroke with a width of 3px, the layer style dialog should look like this:
Layer Style Settings For Your First Stroke
Your image should look like this:
How The Image Stroke Should Look
Step 4: Convert To Smart Object
Next, convert your image to a smart object (right click on the layer>convert to smart object). If you have a version of Photoshop below CS3, just rasterize the layer (right click on the layer>rasterize).
Step 5: Add 2nd Stroke
After converting your image to a smart object, add a second stroke to your layer. Give it a 1px, inner stroke, that is a light gray (I used #dcd3d3). The layer style dialog should look like this:
Layer Style For 2nd Stroke
Your image should look like this:
Your Image With a Second Stroke
Step 6: Create 2 Lines
After that, drag 2 lines with a weight of 10px from the inner guide on the left, to the inner guide on the right, and again from the inner guide on the right to the inner guide on the left. After, it should look like this:
Image With Lines Drawn
Step 7: Rearrange Layers
After creating the lines, simply drag your image layer so that it is above the lines. It should look like this:
Image With Lines Under It
Step 7: Blur Lines
After rearranging your layers, select one of the lines, and give it a gaussian blur (filter menu>blur>gaussian blur). I used a blur radius of 6px, but use your judgement, and play around with it a bit. After you do this, you may need to move the lines up or down a few pixels to get the positioning just right.
You Are Finished! The final should look something like this:
The Final Product!
That’s it for this tutorial, if you have any questions, please just comment and I’ll do my best to answer them!
