DesignLovr

Photoshop Quicktip #2: Shadows

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.

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.

Drop Shadows with Photoshop's Blending Options - Step 1

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.

Drop Shadows with Photoshop's Blending Options - Step 2

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:

Drop Shadows with Photoshop's Blending Options - Example 1

And one more example with actual text and an icon:

Drop Shadows with Photoshop's Blending Options - Example 2

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.

Shadows with Gaussian Blur - Step 1

Remark

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

Step 2


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

Shadows with Gaussian Blur - Step 2

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

Shadows with Gaussian Blur - Step 3

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.

Shadows with Gaussian Blur - Step 4

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:

Shadows with Gaussian Blur - Example

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.

Caster Shadows - Step 1

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.

Caster Shadows - Step 2

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.

Caster Shadows - Step 3

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.

Caster Shadows - Step 3-2

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

Caster Shadows - Step 4

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.

Caster Shadows - Step 5

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.

Share on Facebook Stumble this post Bookmark on Delicious

Similar Posts

25

Comments so far

  1. Hey, really cool article. I especially loved the last shadow effect on the iPhone. However I thought the shadow beneath your logo example was a bit dark. Sweet tutorial though! :-)

    • ximi says:

      Thanks for your comment.

      I agree with you that it was a strong shadow, but I rather over- than underdo it in a tutorial, so that people can actually see the effect.

  2. Lee Fuller says:

    Very interesting tutorial, useful for new designers that aren’t too sure on shadows!

  3. Mars says:

    interesting tuts you got here mate, it was an enlightening one to have those kind of shadows

  4. Richie says:

    Cool. Very detailed and neatly explained. This is exactly how one should learn Photoshop. I liked the first image ‘Shadows’. Getting the right perspective is a great way of adding realism to the shadows.

    Why don’t you start off a new category called ‘School of Photoshop’ or something and write such tutorials. It will help beginners a lot to find them at one place :) Just a suggestion :)

    • ximi says:

      Tutorial 9 actually has this exact same thing: School of Photoshop.

      I didn’t want to do the same thing, that’s why I thought of the Photoshop Quicktips. They are somewhere in between Photoshop for absolute beginners and advanced Photoshop.

      Thanks for the suggestion and comment in any case though.

  5. Demir says:

    Great tip for beginners. i always like quicktips.
    Demir´s featured post: Web Tasarım Kaynakları #3

  6. Lee Fuller says:

    for a really nice shadow effect for a page head, check out the tutorial on The Tutorial and Review: http://www.thetutorialandreview.com/stylish-page-head-tutorial.htm

  7. Laiptai says:

    Very interesting… Love this

  8. texture plus says:

    thanks alot for this nice post!

  9. Excellent tutorial, thank you! But do you really think custom shadows are necessary with the FX option already available? Or is this just a matter of taste?

  10. David C. says:

    Very good tut.I liked how you used the Gaussian Blur in the step 3 for the phone.
    David C.´s featured post: Pr 3 package

  11. Inge says:

    Nice step-by-step tutorial for creating Caster Shadows, it helped me al lot. Tried it once but I wasn’t able to create the effect I was looking for.

  12. Cuneyt Akcam says:

    Thanks for sharing them :)

    —————————————————-
    izmir web tasarım | Web sitesi | sanal tur

  13. fuji instax says:

    wow great tutorial, I always struggle with shadows but this tutorial makes it a breeze. thanks

  14. Thanks for sharing. Nice post, keep it up!

  15. Very cool. Detailed and nicely explained.

  16. Well explained in depth tutorial.

Leave a Reply

CommentLuv Enabled