Shadows are an important and sometimes overlooked part of Photoshop and Design in general. Whether it is a simple Drop Shadow added to a text, a shadow used as a frame around an image or many shadows in a complex web site design, they all help elements to stand out and give a design depth and a more realistic look.
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.
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.
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.
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.
Even though we’re using a elliptical selection in this example you can use whatever shape you want to create a shadow with this method. This is one of the aspects that makes this method so versatile and powerful
Create a new layer (Ctrl+Shift+N), select the Paint Bucket Tool (G) and fill the selection with black.
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).
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:
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.
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.
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.
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.
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).
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.
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.