Drop Shadow (Layer Effect in Photoshop)

Posted on

  • email
  • twitter
  • facebook
  • share this

share this

advertisement

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.

 


Stay up to date on the latest Internet trends:
Request a professional subscription to Website Magazine,
the most popular print publication on Web success.


 


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



Drop Shadow sample

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

 

Drop Shadow Layer Effect Photoshop

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. 

Drop Shadow Layer Style

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

Drop Shadow Effect in Action

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.

Drop Shadow for Image

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

Layer Style for Drop Shadow on Images


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

Drop Shadow Image

 

Custom WordPress Design Themes at 99designs.com. Get the most designs for your buck when you start a design project!


Login To Comment

forget your login information?

Become a Member

Not already a part of our community? Sign up to participate in the discussion. It’s free and quick.

Sign Up

5 comments

ClayP 09-05-2009 9:05 AM

I find this much easier to do in Illustrator

ValerieL 09-15-2009 3:33 PM

Ok, but how do you combine the two files?

Atlanta Real Estate 09-15-2009 3:36 PM

You really think drop shadows are 2.0-ish?

really?

To me, they are one of the first effects people jumped on right after Photoshop was ever shipped, how many ever years ago that was.

They scream OUTDATED whenever and wherever I see them.

But, you know, that's just how I roll. Just me. :)

Rob

Christine Deverell 03-08-2012 1:57 AM

I love the site because you offer a lot of tips and articles that really help my workflow and creativity as a freelance artist. Thank you very much for sharing, and I would love to do up some tutorials of my own in my free time.

名古屋 クラブ 03-03-2013 5:52 PM

Thank you for the good information.

Add to the discussion!

advertisement

999 E Touhy Ave
Des Plaines, IL 60018

Toll Free: 1.800.817.1518
International: 1.773.628.2779
Fax: 1.773.272.0920
Email: info@websitemagazine.com

Facebook


Twitter