Shadowing with Photoshop 

By Hasmita Chander

If you’ve paid attention to shadows, you know that they can be soft edged or hard edged, long and ominous or diminutive and stunted. It all depends on the position and intensity of light falling on it. Indirect light causes soft, almost imperceptible shadows while afternoon sunlight from directly above causes a very sharp small shadow. A street light in the late evening creates those long distorted shadows that enhance the tension in suspense movies.

Shadows give an object a realistic appearance – they make it three-dimensional. If there are no shadows, a picture or button tends to look “flat”. Take a second look at the good-looking web sites on the Internet and you will most probably find 3D-like buttons.

And guess what, these shadows are pretty approachable things – they won’t shy away or make your fingers twist around each other. Photoshop 5 has a built-in Drop Shadow effect that reduces your work when you want a simple shadow. For more realistic shadows however, a little manual manoeuvring is needed, you’ll see how.

Simple Drop Shadows

1.      Create a new canvas, say 250x100 pixels in size. Fill it with a background colour of your choice using the Paint Bucket Tool (K).

2.      Select a different colour and pick the Type Tool (T). Click on the canvas. A window pops up which lets you type in whatever you need. Type a word in a large sized font.

3.      Now use “Layer-Effects-Drop Shadow” to get the shadow. The default settings give a nice shadow. Try changing values in the Effects window to see the changes possible – the distance of the shadow from the text, the opacity, intensity.

When you vary the settings in the Drop Shadow parameter window, you will notice that the “Distance” only moves the shadow in one direction. To get it in the position you want, vary the “Angle” as well as the Distance.

Perspective Shadows

These are shadows cast by a diagonal light source. The distance between the object and the ground (or whatever area the shadow is cast upon) causes a long shadow.

1.      Open the file “Shadows.PSD”. It contains 2 layers – one containing the background sky and floor titled “Environment” and the other containing a few characters from a game prototype and titled “Characters”.

You can see that the light source for these 3D model characters is from the front of them and at a diagonal. We’ll create a shadow for the “Mummy” character towards the centre of the picture.

2.      Select the Characters Layer by clicking on it in the Layers Palette. Use the Lasso Tool (L) and draw a rough outline around the Mummy. Hold the Ctrl key and press the Upward Arrow key once to select the Mummy exactly. Press the Downward Arrow key once to reset his position.

3.      You could have a sharp shadow or a soft one. For a soft edged shadow, feather the edges by using “Select-Feather” and enter a value of 4. If you want a sharp one, don’t feather.

4.      In the Layers palette, create a new layer by clicking on the centre button in the bottom bar in the palette, “Create New Layer”. Your selection is still active.

5.      Select a dark grey from the Swatches and fill the selection with either the Paint Bucket Tool (K) or by pressing the Alt + Del keys together. This has caused the grey to appear on top of the character, so drag this layer between the “Environment” and “Characters” layers.

6.      Now we’ll stretch out the shadow behind the Mummy by using one of Photoshop’s Transform facilities. Pick “Edit-Transform-Distort”. You will see a rectangular enclosure around the selection with “handles”. Hold the upper middle handle and squash the selection, downward, then use the corner handles to skew the selection to the right as shown.

7.      Reduce the opacity of the shadow layer to 65% by adjusting the “Opacity” slider in the Layers palette. Use “File-Save as” to save the PSD file under a new name. To save it as a flat picture (without layers), use “File-Save a copy” and select the JPG format.

For a more realistic effect, you can manually adjust the shadow by using various Photoshop tools that you are aware of. Try creating shadows for the other two characters on your own.

Approximate or Manual Shadows

This method of creating shadows is quite convincing and quick even though it is not really accurate. Here we’ll create a shadow for the coyote-headed creature based on the Egyptian god, Anubis.  

1.      Open the original file, “Shadows.PSD” and create a new layer between the two existing ones.

2.      Using the Lasso Tool (L) draw an approximate shape near the feet of Anubis – the way it should look according to the lighting. Remember, to add to a selection, use the Shift key and to subtract from it, use the Alt key.

3.      Feather it with “Select-Feather” and fill it with a dark grey. Set the opacity of the layer to about 65%. 

Note: Here you created a new layer directly and then created a shadow unlike the earlier Perspective Shadow. This is because you did not need to select anything from the existing layer.

Shadows are, as you can see, fun to create and not so difficult. The impact they can give an image is tremendous especially when you look at something like a button for a web page. By varying the colour of the “shadow” you can come up with some weird effects, with greys you can give an image a dramatic look, a realistic look – use them often in your Photoshop work!