homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

Drop Shadow in Photoshop
Newbie question relating to drop shadows

10+ Year Member

Msg#: 1911 posted 6:26 pm on Mar 9, 2005 (gmt 0)

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.



WebmasterWorld Senior Member 10+ Year Member

Msg#: 1911 posted 6:42 pm on Mar 9, 2005 (gmt 0)

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


10+ Year Member

Msg#: 1911 posted 6:48 pm on Mar 9, 2005 (gmt 0)

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>


WebmasterWorld Senior Member 10+ Year Member

Msg#: 1911 posted 11:40 pm on Mar 9, 2005 (gmt 0)

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.


10+ Year Member

Msg#: 1911 posted 12:08 am on Mar 10, 2005 (gmt 0)


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


10+ Year Member

Msg#: 1911 posted 2:17 pm on Mar 10, 2005 (gmt 0)

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.


WebmasterWorld Senior Member 10+ Year Member

Msg#: 1911 posted 3:16 pm on Mar 10, 2005 (gmt 0)

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


10+ Year Member

Msg#: 1911 posted 5:22 pm on Mar 10, 2005 (gmt 0)

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?


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

Msg#: 1911 posted 12:04 am on Mar 16, 2005 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved