Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Drop Shadow in Photoshop

Newbie question relating to drop shadows



6:26 pm on Mar 9, 2005 (gmt 0)

10+ Year Member

This is how I create a drop shadow, but hope there is a simpler way to do it?

1. Resize my photo.
2. Use the "Move" tool to move the photo to the top and left, so that it creates a "white" space on the bottom and right (for the drop shadow to fit).
3. Add the drop shadow effect on the bottom and right.

Important question - Is there any way to add the shadow without having to "move" the photo up and left?

4. Then, because the background of my homepage is (currently) green, I add a new green fill layer so that any gaps between the drop shadow and the edges of my graphic/photo will show green instead of the usual white default.

I have about 500 photos on my site and will be changing them all to have a drop shadow with a green background layer. My fear is that I will have to change all 500+ photos again if I change the design of my site to say, light blue, coz then I would need to change the background layer on all the photos again from green to blue.

Any tips would be appreciated.


6:42 pm on Mar 9, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Easy as pie with Photoshop:

Double click on the layer you want to create a shadow beneath - the layer properties pallette will open. Toy with the settings in the drop shadow toolbar till you have the depth/distance/shade you want and click ok


>> Added - record this as an action and you can apply it to multiple files using batch process - Assuming you have just one layer it should do what you want without needing to do each one every time you want to alter the background colour

>> Alternatively find a solution to your design so that by altering your css you do not need to go through this rigmarole everytime you want a change


6:48 pm on Mar 9, 2005 (gmt 0)

10+ Year Member

Also, if you have Photoshop... and have a million and a half pictures you need to change. Google "Batch Processing" [google.com] and you will have all your photos changed in a matter of minutes, not hours ;0)

-- Zak

<added> limbo, You edited your post! Sorry!</added>


11:40 pm on Mar 9, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Does the drop shadow need to be rendered within the image itself, or can you apply it using the HTML/CSS that will display them? There is a technique called "css fuzzy shadows" that a web search should turn up which would allow you to use a generic drop shadow for any image, regardless of dimensions.


12:08 am on Mar 10, 2005 (gmt 0)

10+ Year Member


THAT is an AWESOME tip! So simple.. I bet you could even use that with text. Like using white text on a white background and drop-shadowing it. I have a new toy to play with!

-- Zak


2:17 pm on Mar 10, 2005 (gmt 0)

10+ Year Member

Thanks for the tips........lots of information for me to take in and learn (as a newbie) but the css fuzzy shadows looks awesome, although unless I find a site that will add the css for me then it is probably beyond my capabilities?

limbo - the problem I have here is that the shadow does not show in my photo (presumable it is outside the borders) and I have to "move" my photo left and up to see the shadow on the right and bottom. Unfortunately, this then displays a white space which looks very unprofessional on my sites green background. I may want to change to blue in the future but this would still be the same problem unless I change my sites background to white, which I do not want to do.

limbo/zak - thanks fore the info about batch processing, this will save me a lot of time.

choster - Top Tip - I am so envious of the guys who can manipulate their css to produce this tremendous looking effect. I am only a newbie and probably won't be able to do this unless I can find a site who practically write the additional css for me - wish me luck coz I would love me site's photos to look like that.


3:16 pm on Mar 10, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Reddevil as part of an action in the batch, you could:

> increase your canvas size by say 3%
> apply your dropshadow to the image
> then apply new layer + colour
> send the new layer to the background
> save as psd to another folder
> flatten
> optimise
> export as jpg
> close.....

... all that while you make the tea...

It is very powerful when you get to grips with it :)

>> edited for the usual


5:22 pm on Mar 10, 2005 (gmt 0)

10+ Year Member

Thanks again limbo - I have now managed to change the 4 photos on my homepage - and I am getting quite good at it (haha).

I can't believe what a fantastic difference the drop shadow makes to the photos.

Now I will be learning about the batch process. I guess it is quite easy to change the background colour if I want to in the future?


12:04 am on Mar 16, 2005 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Reddevil... After making your photo its own layer (rather than the background), go to the "canvas size" command, and on the nine-square grid in the dialog click the top left corner, then enter the values for the slightly larger canvas.

Your image canvas will expand, with the new empty space along the bottom and right-hand edges of the image.


Featured Threads

Hot Threads This Week

Hot Threads This Month