Web Design Magazine | News, Tips, Blogs, Articles & Insights

Drop Shadow (Layer Effect in Photoshop)

Written by Pete Prestipino | Aug 31, 2009 5:00:00 AM

Drop shadows are a useful effect that can be achieved in Photoshop (or GIMP), adding a certain 2.0'ness to your text or images. Let's look at how to create a drop shadow for both images and text now. 

Note that I'm working on a slightly older version of Photoshop (so there might be some slight variations in naming conventions) but the whole process is so simple that it will be easy to figure out.


Drop Shadows on Text

1) Create a new file (the text we are working with will result in an image approximately 400x75 pixels) 
 
2) Once the file is open and the text tool is selected, type some text (and make sure it fits on the canvas) 

2.1) Set the resolution at Web (72 pixels) and the mode to RGB color





3) Now, select the individual layer (with the text included) and select "Blending Options" 

4) When the "Layer Style" box appear, simply select "Drop Shadow" from the list of available options. (It is also possible within the Layer Style dialog box to add inner shadows, outer and inner glows, beveling, embossing (and contouring and texture) to the text/image. 

5) Once you select "OK" you'll have successfully added a drop shadow to your text. 

6) Should you want to lighten (or darken) the shadow, simple adjust the opacity higher or lower accordingly. 

Drop Shadows on Images
Not only can you add a drop shadow to text but also to images. Drop shadows add a nice modern feel to design elements and it's very easy to create - just follow along. 

1) Create a new file (the image we are working with - our Twitter icon - is roughly 73x73 pixels) 
 
1.1) Do provide for additional space around the image you are adding the drop shadow to (in our case for example we'll make the default canvas about 80x80)
 

2) Once the file is open and extra space is available to support the drop shadow, again select Blending Options from the Layers menu.

 
3) When the Layer Style box appears, simply select "Drop Shadow" (or any of the other options for alternate effective).


4) Once you select "OK" you've got an image with a drop shadow!