Today we’re going to learn three different ways to create shadows in Photoshop, ranging from simple Drop Shadows to complex Caster Shadows. This is the second tutorial out of a series of tutorials that will teach Photoshop beginners how to apply various design effects to their designs.

Drop Shadows with Photoshop’s Blending Options

This type of shadow is the easiest to create, but also the most versatile due to its Blending Option nature. This shadow will often be all that is needed to give a design additional depth and with the right settings you can achieve some interesting results.

Step 1

Create a new document (Ctrl+J) and create a simple shape, a short text or any other element (you can paste an image for example) you would like to apply a Drop Shadow to (you can also open an existing document that already has elements in it). Right-click on your new layer in the Layer Palette and select Blending Options. A new window that presents you with a multitude of settings and panels will open.

Step 2

Select Drop Shadow out of the list of options (if you have Preview activated you should already see a simple Drop Shadow applied to your layer) and you’ll be presented with several different panels and sliders, which you can use to change the appearance of your Drop Shadow dramatically.

Here is a quick explanation of each setting:

• Blend Mode: The standard setting here is Multiply and for a simple shadow you usually don’t have to change this. Photoshop’s Blend Modes let you change how your layers (or in this case Drop Shadow) interacts with other layers. Blend Modes are a complex topic, but you can read this excellent explanation of each one of them.
• Color Field: To the right of the Blend Mode you have a little, black rectangle. By clicking on it you open a color picker and you can select a different color for your shadow. For regular shadows black (the default) is just fine, but in combination with the different Blend Modes you can achieve some really interesting effects (even though they often don’t have anything to do with classic shadows anymore).
• Opacity: Just like you can change the opacity of each layer in the Layers Palette you can also change the opacity of your drop shadow. It basically just influences how strong your shadow will appear. 75% is the standard setting, but you’ll change this setting rather often.
• Angle: This allows you to define the direction of the (imaginary) light that is falling on your layer and casts the shadow. This is pretty straightforward (e.g. if the light comes from the downer side (-90°) the shadow appears at the top of the layer, etc.) and its standard value of 120° often needs no change.
• Use Global Light: If this check box is activated Photoshop uses a document wide setting for the light direction. If you apply a drop shadow to more than one element (or other effects that use Global Light for their creation) and Use Global Light is activated all shadows will fall in the same direction. If you change the angle of your shadow while this Checkbox is activated the light direction of all shadows that use Global Light is changed. This allows you to give your document a consistent light direction. You can usually let this activated – only if you want shadows that fall in different directions you should deactivate it.
• Distance: This determines how far away the shadow is from the element it is applied to. A value of 0 places it directly under your element (and it appears on each side of your element), whereas a value of 20 makes it appear far away from your element. This is one of the core values you’ll manipulate to achieve different kinds of shadows and you won’t keep the standard value of 5 too often.
• Spread: The Spread lets you define how intense the shadow is. A high value will give your shadow a harder edge (and simulate very bright light). Even though this setting is not essential it can be useful in certain situations. Usually its default of 0 works just fine.
• Size: This defines the size of your shadow, mainly the size of its blur. The Size and Distance are what gives your shadow its essential look and the values you will influence the most in order to achieve different results.

There are several other settings (including the Contour), but these are only necessary for very complex shadows and you usually won’t need them. If you are interested you can read some more about the Contour setting. The Layer Knocks Out Drop Shadow let’s you decide whether or not the drop shadow can be seen below the layer if the layer’s fill opacity is below 100% (Example).

This is all there is to say about Photoshop’s Drop Shadow Blending Option. Have a look at the examples below to see how different settings influence the looks of the shadow:

And one more example with actual text and an icon:

Shadows with Gaussian Blur

Even though this kind of shadow is a little bit more complicated to create it gives you more flexibility and control over the shape and position of your shadow. The biggest advantage is that you can create shadows that aren’t following the outlines of an element or layer as well as your unrestricted regarding the position and distance to your original object.

Step 1

Create a new document once again and create or open an element of your choice in a new layer. Now select the Elliptic Marquee Tool (Shift+U) and create a relatively flat ellipse below your object. It should have a width similar to the one of the original element.

Step 2

Create a new layer (Ctrl+Shift+N), select the Paint Bucket Tool (G) and fill the selection with black.

Step 3

Go to Filter>Blur>Gaussian Blur and select a value somewhere between 3 and 10 pixels (due to Photoshop’s Preview Function you should see what looks best).

Step 4

Make sure that your shadow layer is placed below the original layer, arrange it appropriately and reduce the opacity of the shadow layer in the Layers Palette until you’re satisfied with the result.

This was only one simple example of what can be achieved with this kind of shadow. There are many tutorials out there that use this technique and by following them you’ll definitely find out how powerful Shadows that are created with Gaussian Blur really are. Check out: Create a Professional Web 2.0 Layout and 3D Wooden Box Photoshop Tutorial.

Below is one more example of this kind of shadow, this time applied to an icon:

Caster Shadows

The last type of shadow we’re presenting is also the most complicated. A Caster Shadow can give your creation a real 3D Look because it comes the closest to actual real-world shadows.

Step 1

Create a new document and add the object or text of your choice one last time. Duplicate the layer with your object (Ctrl+J), select the Paint Bucket Tool (G) and fill the copy of your object with black. Move the copy under the original layer in the Layers Palette.

Step 2

Select the duplicated, black layer and go to Edit>Transform>Distort (alternatively you can simply press Ctrl+T and hold down the Ctrl-key while transforming the layer) and distort the layer as shown in the picture below.

Step 3

It’s time for a Gaussian Blur again. Go to Filter>Blur>Gaussian Blur and apply a blur of 3-5 pixels to your shadow layer.

Now duplicate your blurred shadow layer (Ctrl+J), move the duplicated version under the original shadow and apply one more time a Gaussian Blur. This time choose a bigger value between 6 and 10 pixels.

Step 4

Because we want our shadow to become softer towards the end we’ll now add a smooth transition between our first and second shadow with the help of a Layer Mask.

Select the upper shadow (with the smaller Gaussian Blur) and add a Layer Mask (red circle in the image below) in the Layers Palette. Select the Gradient Tool (Shift+G), define a white to black gradient and add it as shown below (make sure you have the Layer Mask selected in the Layers Palette).

Step 5

Now you only have to reduce the opacity of the shadow layers based on your own preferences. In the example below I chose 70% for the upper shadow layer and 40% for the downer one. You should generally keep the opacity of the upper shadow higher than the opacity of the lower shadow.

Conclusion

Congratulations, by following this tutorial you learned three different techniques for the creation of shadows in Photoshop. There are many more ways to create shadows in Photoshop, but with above examples you should be able to create whatever shadow you may need throughout your work in Photoshop.

The best way to improve your skills in this area is to experiment and try out different settings and techniques.

One last piece of advice: In terms of web and graphic design you should use subtle shadows, rather than full-blown monsters – layer opacity is your biggest friend here.

But we have more than just a plain tutorial for you, we’ll also talk a little about the Mirror Effect and how and where to use it. Finally we also have a mini showcase of web sites that use the mirror effect.

The Tutorial

Step 1

Open a new document (you can choose the dimensions by yourself) and add the object or text of your choice in form of a new layer. I chose a styled-down version of the DesignLovr logo.

Step 2

Duplicate the layer (Ctrl+J) and flip the new layer by going to Edit>Transform>Flip Vertical.

Move the freshly flipped layer down until the bottom of the original layer and the top of the duplicated either touch or have only little space in between them (depending on which method you choose you get a slightly different Mirror Effect, just play a little around and see what you like).

Step 3

Now you have to add a layer mask to the duplicated layer by clicking on the little symbol at the bottom of the layer palette (see the red circle below). Select the Gradient Tool (Shift+G), choose black and white as colors in the Tool Option Window (it usually is placed directly above your canvas) and move the white stop to the left until a location of 50% is indicated (see screenshot below).

Now create the gradient by clicking on the lowest point of your duplicated layer (in my case it was the bottom of the D of DesignLovr) and pulling a straight line to the highest point (the end of the g in the example).

Step 4

The only thing left to do now is to lower the opacity of the duplicated layer in the Layers Palette (usually a value between 30% and 50% is good) and you’re done. Looks great, doesn’t it?

Final Result

In order to create an even stronger mirror impression you can also add a split gradient to the background as I did below.
You can achieve different results by playing with the distance between the two layers, the gradient you add to the layer mask and different opacity values.

I also prepared a version in which I used an icon (from the Smashing Retro Icon Set) instead of text, the process is the same.

Additional Info

The Mirror Effect had his big moment a few years ago during the Web2.0 boom. It was heavily (over)used on a great amount of web sites and is out of this reason a little bit frowned upon by many web designers nowadays. But that is no reason not to use this effect if it suits your design.

The mirror effect can help to give your design depth, realism and a polished, shiny look. As you will see in the showcase it is often (and should be) used very subtle and added rather to objects than text. It seems to be especially popular in the combination with iPhones (another, overused web trend).

Just do yourself and others the favor and use the effect only if it really fits rather than on your next grunge design.

The Showcase

The amount of web sites that use a mirror effect is much smaller than it was just a few years ago, but you can still find it on selected web sites.

In combination with a simple black or white background it adds an extra ounce of elegance (reminding one of shiny, polished surfaces) to a web site and can help to emphasize a product or object.

Enjoy!

960pixels

Cookmate

Filemaker

Maridaje Digital

Media Temple

MobileMySite

Newstream Design

Suki

Tanner + Tailor

VixML