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.

Create Realistic Web Shadows

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”.

Create Realistic Web Shadows

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”

Create Realistic Web Shadows

Lower the fill opacity of the Shadow to 0.

Create Realistic Web Shadows

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.

Create Realistic Web Shadows

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.

Create Realistic Web Shadows

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.

Create Realistic Web Shadows

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.

Create Realistic Web Shadows

And that’s it!

Create Realistic Web Shadows

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.

Create Realistic Web Shadows

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

This entry was posted in Design Tips, Splashing Blog and tagged , , , by Matt. Bookmark the permalink.

About Matt

Matt Hall is a web developer, marketer, and WordPress enthusiast. When he isn't organizing new WP projects, he can be found enjoying the sun, exotic coffees, and craft beers with friends.

Splash your Comments

Your email address will not be published. Required fields are marked *

*

*