Curved Shadows

Tip: Curved Shadows in Photoshop

Since sneaking a very subtle update to IceflowStudios.com, many of you have asked how I was able to achieve the ‘curved shadow’ effect on the post blocks. Let me show you a super simple way of doing so!

Curved Shadows in Photoshop

Why Not CSS?

While a shadow like this can be done with pure CSS, it’s a complicated process, and something I have yet to figure out, so Photoshop it is!

Creating the Shadow

This is what I’m going to be starting with. The whole ‘block’ won’t be saved when the shadow is complete, but it’s good for visualization purposes. Of course, if you’re adding a shadow to a photograph, you’ll probably want to keep that in the final output.

Setting Your Guides

Adding guides is completely optional, but to ensure that everything lines up properly, it’s always a good idea to snap two guides on the left and right side of your ‘block’. Guides can easily be added by dragging them from your rulers, which you can find on the left, and top of your interface. If you don’t see your rulers, reveal them with the Command/Ctrl + R shortcut.

The Rectangle

The shadow starts with a simple rectangle, which you can create with either the Rectangle Tool, or the Rectangular Marquee Tool. If you choose the Rectangular Marquee Tool, make sure to create a new layer first. This ensures you don’t ruin the current layer.

Drag out a rectangle that’s the whole length of the image. We’ll be changing this in a moment, though.

If you went the Rectangular Marquee route, fill the selection in with pure black. If it’s your background color, Command/Ctrl + Delete/Backspace will fill it in. Again, make sure this is happening on a new layer!

Once your rectangle is in place, for shadows like this, it’s a good idea to scale it inwards just a touch. Command/Ctrl + T to enter Free Transform mode, then with your Alt/Option key held down, drag one of the sides inwards to scale the shape from the center.

Adding the Blur

So now that the shape of the shadow is ready to go, it’s time to add the blur! If you want to be able to experiment with the blur value after it’s applied, it’s a good idea to convert the shape to a Smart Object. Under the Filter menu, choose the Convert for Smart Filters option.

Once the layer has been converted to a Smart Object, you can safely add your blur of choice. Gaussian Blur usually does the job.

Warp Speed!

In order to create the ‘curved’ effect, we’ll want to apply a Warp transformation to this layer. This action can be found under the Edit > Transform menu. If you are working with a Smart Object, the blur will be temporarily disabled until the Warp is applied.

As you can see in the image above, when the Warp transformation is activated, you’ll see the grid overlay your current layer. This will allow you to drag the rectangular ‘segments’ to warp the layer. For this example, you simply want to drag the lower/middle segment (highlighted below) upwards.

Once you have the desired shape in place, pressing Return/Enter will accept the warp, and reenable the blur.

Final Placement

Now that the blur and warp have been applied, it’s time to move it into place. If you’re working with a multi-layered document, move the shadow behind the layer you want to ‘pop’. In this case, it’s the sample post block.

Finally, decrease the opacity so it’s not too dark. 20-30% usually does the trick.

Putting it to use!

If you’re simply looking to add a shadow to a design/photo you’re working on, you can stop here. Otherwise, if you are planning on using it on your website, I’ll include the CSS below. It’s fairly straight forward.

Saving the Image

For my case, the shadow will be connected to the bottom of the main post block. To make things simple, save the shadow including the box that will contain the text (author, comments, views), as highlighted below.

Remember: If the background of your website if different from the document you’re working with, you may want to save the image as a transparent PNG.

The CSS

Below is how my CSS is structured. However, this may or may not work for you.

HTML:

<li class=”list_box”> //main post block
<div id=”post-info”>  //box where title and except will appear
[Title and except code here (may vary from blog to blog)] </div> //closing post-info section

<div class=”list-meta”> //meta box (where the shadow will appear)
<div class=”list-metadata”> //text for the meta box
[Author, comments, view code here] </div></div> //closing the meta divs

</li> //closing main post block.

CSS:

li.list_box { float: left; display: block; width: 358px; padding: 20px 0; margin: 0 0 10px 12px; } //main post block.
#post-info { background: #fff; width: 100%; } //this will house the title and excert.
.list-meta { background:url(../img/cshadow.png) no-repeat; max-width: 358px; height: 41px;  padding: 0 5px; } //this is where you define the shadow’s image, in this case “cshadow.png”. “max-width” is used for responsive sites. Change the width and height accordingly.
.list-metadata { font-size: 11px; color: #5b6674; padding: 5px 10px; } //this is for the text that will appear inside the meta box

Once again, the HTML/CSS may or may not work for your website. Every site is structured differently, but this should give you an idea at how mine was set up.

  • Aalap Shah

    Great tutorial! Thanks!

  • Shawn

    Just wanted to say thanks! Simple and well explained! Thank you!

  • TD

    Say I have a Image which is cropped in a circle shaped [O] . the remaining white background is transparent Png/gif. Now i need to add a bent effect to this NOT jus a drop shadow e diagonally vertical but Similar to above to it feels its bent from the center. How do i do that thanxx