Create Realistic Web Shadows

If creating shadows is you weakness, you’re not alone. It took me a several blog posts and hours of practice before getting shadow techniques down right. Realistic looking shadows have the power to transform good graphics into great graphics and add a ton of value to any picture, slider, widget, menu bar – and pretty much everything. So, because shadows play such a key role in web design in particular, I created this tutorial to teach you a few fairly simple techniques in creating realistic looking shadows using Photoshop.

Lets start by placing a graphic in Photoshop. The graphic doesn’t necessarily need to be a square or a flat image, you can use logos or anything you desire.

Duplicate the graphic by dragging and dropping the layer into the “Create New Layer” icon and place this copy of the layer underneath the original graphic. A good shortcut for this is to hold “ALT” while dragging the layer underneath the other, this will save a few clicks. Lets call that layer “shadow”.

Now turn off the Graphic layer and convert the shadow into a Smart Object by right clicking the layer and selecting “Convert to Smart Object”

Lower the fill opacity of the Shadow to 0.

Double click the shadow and select the “Gradient Overlay” effect, then choose the color of the shadow you want to use, I used a black gradient that goes form 10% opacity to 60% in the center and 20% on the other side (to change opacity use upper squares, to change color use lower squares) orient the gradient so that the darker side is down.

Keep the “Shadow” layer selected and apply to it a Gaussian Blur smart filter. To do so Click on Filter > Blur > Gaussian Blur and give it a radius 5px.

Now, go ahead and turn the top Graphic layer back on and with the shadow layer selected, transform the shadow by pressing Command T (for Macs) and Control T (for PCs) now right click and select the “Warp” transformation tool and stretch out the corners by dragging them.

And now, to give your shadow the realist effect finishing touch, click on the smart object little square under the shadow layer (highlighted below), select the eraser tool and using a soft brush with 20% opacity erase in the middle section of every side or anywhere where you want to have a sharper shadow effect.

And that’s it!

Now that you know how to create shadows go ahead and experiment with making different types of shadows on the same object, like I did below.

For those that want to see how it is done in the PSD, you can download it here. Source PSD