Casting Shadows From Complex Shapes

Adobe Photoshop Tutorials :

Category: Adobe Photoshop Tutorials
Added: 06/24/2007
Views: 69,558

Casting Shadows From Complex Shapes

Einstein

Tutorial Goal

To learn a simple and versatile method of casting a shadow from any complex object in Adobe Photoshop. I find myself using this technique on a regular basis. Learn it once and reuse it the rest of your design career. It's a great way to quickly add a 3-Dimensional quality to a 2D design.

Resources Needed

A graphic to cast the shadow. You can choose anything you like or download the example Einstein Character provided below:
Einstein_example.jpg
Source: X-Power.com - An Algebra I Multi-Media Course.

Step 1 : Preparation & Document Setup

Open Adobe Photoshop and Create a new Image:
Size: 380 x 300px
(This is the size of the example background image)

Step 2 : Separate the Object from the Background

If your object is already on it's own layer skip this step. Otherwise separate the object from the rest of the background using the selection tools. For the example image provided the easiest way to separate the character from the white background is to use the Magic Wand Tool.

Select the Magic Wand Tool, Magic Wand Tool, and using the properties below click anywhere in the white area.

Wand Properties

Now with the white area selected, Inverse the selection to select Einstein.
Select > Inverse

Select Einstein

Cut Einstein from the background and paste him into a new Layer.
Edit > Cut then Edit > Paste

You should now have a background layer and a layer with the object that will cast a shadow.

Layers

Step 3 : Create a Shadow Version of the Object

The entire object casts a shadow so we start with a 'perfect' shadow that matches the object's contours. Afterwards, we can distort, blur and fade the shadow into our desired effect.

Ctrl/Cmd Click the object's layer to select it's border.

Create a new layer, New Layer, above the object layer.
Layer > New > Layer...

Select the Paint Bucket Tool, Paint Bucket, set the foreground color to Black and fill in the selection.

Fill Selection

Before Einstein dishes out for his electric bill let's drag the shadow layer below Einstein and above the Background layers.

Layer Order

Now you have a shadow object that matches the contours of your complex object perfectly.

Step 4: Manipulating the Shadow

Time to take the perfect shadow shape and manipulate it into a more realistic shape.

First we'll distort the shadow to cast it across the ground. The final angle and length of distortion is completely up to you.
Edit > Transform... > Distort

Click and drag the handles to distort the shadow shape. A good place to start is the top, middle handle circled below.

Distort the Shadow

I dragged it down and to the left. Drag individual corners to make minor adjustments to the shape.

Shadow on ground

Step 5: Blurring the Shadow's Edges

Unless your light source is a spot light the resulting shadow will blur at the edges. Don't believe me, take a look around your desk and observe the different shadows. So, let's blur the edges of our shadow.
Filters > Blur > Gaussian Blur

Gaussian Blur

I choose a setting of 3.0 but tweak it to what looks good to you.

Blurred Shadow

The shadow is still too defined. Let's reduce the shadow layer's opacity to 50%. This does two things, first it lightens up the shadow and secondly it will allow any texture beneath it to show through.

Shadow Opacity
Flash Den

Step 6: Fading the Shadow

Looking good but it's too consistent don't you think? As a shadow gets further away from it's originating object it becomes less defined. Let's create that effect with another easy step.

With the shadow layer selected, click the 'Add A Layer Mask' button, Add Layer Mask, on the bottom of the Layers panel.

Mask Layer

Now select the Gradient Tool, New Layer, and set it's properties to:

Mask Settings

With the Mask Layer still selected, click and drag from the object across the shadow and release somewhere outside of it. The gradient fills white to black allowing 100% of the shadow layer to show through at point 1 and then fades to 0% of the shadow layer at point 2.

Faded Shadow

If you don't like the way the fade looks the first time, simply undo the gradient and reapply it until you are happy.

Faded Shadow

If Einstein is happy, I'm happy.

Casting Shadows From Complex Shapes:
Concluding Statements

Now you've learned a simple technique to create shadows from complex objects. Want to simulate two light sources? Simply repeat the steps for a second shadow casting in another direction. Hope you reuse this technique as much as I do. Until next time...

Feel free to send Comments, Questions, and other inquires using the contact page. I hope that you enjoyed the "Casting Shadows From Complex Shapes" tutorial. View more of my tutorials here.

Like My Work?

I am a professional freelance web developer & graphic designer. These tutorials are a small sample of what I'm capable of. Check out my client portfolio and feel free to contact me. Whether it's a full blown database driven web application or simply a flashy banner design, hire a professional.

Project Sample

Print & Graphic Design : 36 Flagstaff Lake Wall Panel

36" x 24" Wall Panel
Wall panel of historic sites on Flagstaff Lake

Web Development : Interactive Map Tour de Baccalieu

Interactive Map
New Foundlands Business and Tourist Destinations

Print & Graphic Design : Logo & Business Card Design Credit Union Insurance

Logo & Business Card Design
CUinsure Branding

Testimonials

"I have worked with Max Langdon for almost five years. Max is not only a talented web designer and programmer, but he has an added quality that I find quite rare. He is able to really listen to and understand the client's vision. He asks excellent questions that help you zero in on exactly what you are trying to accomplish. This helps you clarify your goal and allows Max to think through the scope and sequence of the process before beginning to program. This saves him time and saves you money.

Working with Maxwell Langdon and his company, Pixel Hive has been a pleasure. I have always found him to be responsive and helpful. There is no "attitude" when you ask for an explanation or guidance.

I would be happy to speak with anyone who is thinking of working with Max. "

- John Burstein, Slim Goodbody Corporation, Lincolnville Center, ME
View More Testimonials

More Tutorials!