Design Element: Drop Shadow

The drop shadow is a useful design element that can be used to add depth and detail to different parts of your layouts. In this tutorial, we’ll show you how to create your own drop shadow, as well as show you some of the different ways that you can use it in your website designs

Step 1

Start off by setting your foreground color to white and creating a new layer, name it drop shadow. Create a rectangle using the Rectangle Tool(U) (size doesn’t really matter). Now add a drop shadow:

Step 2

Set the opacity of the layer to 33%. It’s time to erase parts of the rectangle to get our drop shadow effect, but to do that we need to get rid of the layer style.

So go ahead and create a new layer under your drop shadow layer, then select the drop shadow layer and press Ctrl+E to merge them together.

Step 3

Make the following selections using the Rectangular Marquee Tool(M) and press delete:

Step 4

Another variation of the shadow is to fade away the rough edges. Grab the Eraser Tool(E), set the mode to brush, and use a soft round 100px brush to soften the edges of the shadow.

Usage

Curled Corner Tutorial

In the Curled Corner tutorial, we create a drop shadow to outline our content area. The method we use is a little different, but it shows how you can apply the drop shadow.

Product Sales Page Tutorial

In the Product Sales Page tutorial we use the drop shadow for the background for the middle part of the layout(where the 3 blues boxes are). It adds depth to the area and helps transition from the blue gradient to the white background.

Conclusion

The drop shadow can have many uses in web design. You can use it to subtly define space (such as defining where the main content area in a design is) or you can use it to transition from one part of a design to the next, as shown above. In the header of PhotoshopandYou, it’s used to define the banner area on the sides. I’m sure there’s many more uses for it that are escaping me right now, so next time you’re designing a layout in photoshop, you might come up with a perfect use for it.

Related Tutorials:

2 Comments |

Add a Comment

[...] This part is optional, but I think it looks much better with it. Create a drop shadow (See our Drop Shadow tutorial if you don’t know how to make one), and position it on top of our new layer, 1px [...]

[...] ahead and grab it and drag it into our document. If you don’t have one, then head over to the drop shadow tutorial and create one (should only take a few [...]

Add a Comment