SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    May 2002
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation drop shadow help....

    alright...i understand how text drop shadows works...but that's not what i'm after...

    someone asked this question before, but i don't remember where...it was about deviantart.com and the shadows it puts under the thumbnails. i want to do the samething, but rather then using photoshop to redo each picture so it has a drop shadow, can css create the drop shadow?

    here's the example

    i went through and made each of those thumbnails with a drop shadow in photoshop, but it's just time consuming...so that's why i was wondering....


    (hehehe look i got the subdomain to work!!!)
    i want to be a nerd....

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS COULD create a drop shadow but it wouldn't work in all browsers, nor would it look the same in browsers that DID support it.

    Your best bet would be to use an images for this purpose. Take heart though because I'm going to tell you how to save time. Have you ever used actions in Photoshop? Actions are PERFECT for this situation.

    All of your thumbnails are the same size which makes this perfectly simple.

    Prep your images (get them all the same size. If your images are all coming from the same source (IE: all from the same camera) then you might even be able to automate this task.

    With an image open, this is how the action might run:

    -= If the image layer is called "background" then you need to turn that into a layer. Holding down the ALT button, double click the "background" layer. This should rename it to "Layer 1".

    -= Resize image layer (to top left) by about 90%. This will cause the image to become 90% smaller leaving the top left corner in place. You will have a small amount of empty space at the bottom and the right of the image itself.

    -= Create a drop shadow effects layer with the settings that you like.

    -= Create a new layer and fill it with the background color of your website. In your example the color is blue. Move this layer to the very bottom. Note, you must use either the menu or keyboard shortcuts for the action to record this step. Press SHIFT + CTRL + [ wil move the current layer to the very bottom.

    -= Save the image to a certain folder using Photoshop's "Save for Web" feature.

    Stop the action. Open a brand new image and test it out. Make sure it works like it's supposed to. Now, store a folder worth of images in a location on your hard drive, then go to File > Automate > Batch. Select the action you just created and point it at the folder of your images. Press OK and go get some coffee. Photoshop will automagically convert all of your images into Thumbnails for you.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Zealot
    Join Date
    May 2002
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    whoa, thanks!!!!

    i'm gonna give this a whirl at home tonight.

    super...hehehehe
    i want to be a nerd....

  4. #4
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're using a PC and you have trouble with the action let me know and I'll make it for you.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  5. #5
    SitePoint Zealot
    Join Date
    May 2002
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sure enough....

    i don't think i'm too bad with photoshop (okay i really can't do anyhting...lol)

    but i ran through a few 'phong' tutorials and i feel better about myself...i even loaded his actions...

    so i'll probably ask you to create an action and then just load it...lol but we'll see...


    thanks again!!!
    i want to be a nerd....


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •