16 Replies Latest reply on Aug 29, 2010 10:32 AM by pixlor

    Drop Shadow

    quality11 Level 1

      I am trying to make the drop shadow on this site (temporary location) darker.  I used a method I learned but just have the gif file so I need to recreate the file.  I've tried creating the canvas (1034 x 6959) then drawing a rectangle the same size leaving a bit of space on the bottom and right and then adding a Filter > Drop Shadow to the rectangle and making the transparency high so that it will be dark, but either the canvas shows (I did Fit Canvass too) or it's grainy or not dark enough or all of it.  Is there a way to create this file but darker and less grainy?


      Thanks so much!

        • 1. Re: Drop Shadow
          quality11 Level 1


          • 2. Re: Drop Shadow
            pixlor Level 4

            Your shadow looks grainy because your gif only has a few greys in its color palette.


            Here are a couple of approaches you could try:

            1) Make the shadow out a separate image with its own color palette. You can apply that as a background to a containing div that's just a bit bigger than the rest of your content.

            2) Make separate side and bottom shadow images and place them in individual divs.

            • 3. Re: Drop Shadow
              quality11 Level 1

              So you're saying not to use this method with the gif and the CSS? Can't I do it this way since I already set it up and fix the gif?

              • 4. Re: Drop Shadow
                quality11 Level 1

                #bg_shadow {
                     background:url(../images/shadow.gif) no-repeat bottom right;
                     margin:30px auto 0px auto;
                Using the gif (link in previouse post).

                • 5. Re: Drop Shadow
                  quality11 Level 1

                  If your first answer is saying to do that, that's what I'm asking.  I don't know how to create the shadow.  I've been trying and it won't work.  What do I do step by step to recreate that giv only darker and less grainy?

                  • 6. Re: Drop Shadow
                    quality11 Level 1



                    I think I'm doing #1 already.  What I need help with is how to create the

                    gif in FW.  It needs to be darker and I'm not sure how you use it's own

                    color pallette.  Need step by step help.  HELP!

                    • 7. Re: Drop Shadow
                      pixlor Level 4

                      Oh! Right. Okay... Sorry, it's been a long week


                      Ack! You have a 7000-pixel high image?!? Ouch.



                      Don't start with that gif and try to darken it. Start with a brand new image. Also, you might be better off with a jpg or png instead of a gif.


                      Like this:

                      Layer 1 has your original gif.

                      Layer 2 is a rectangle with a dark drop shadow.

                      Layer 3 is what you get if you export layer 2 as a PNG24; see how the shadow colors are much smoother?


                      (It's a FW png, and it's the width of your image, just that the forum resized it to display.)

                      • 8. Re: Drop Shadow
                        quality11 Level 1

                        I'm trying yours on for size and the white (on the shadow.png) is still

                        showing in the background.

                        • 9. Re: Drop Shadow
                          quality11 Level 1

                          I think I got it.  I recreated yours and used transparent bg.  Dah.  Thanks Pixlor!!


                          What do you think?

                          • 10. Re: Drop Shadow
                            quality11 Level 1

                            Problem.  Forgot IE 5 and 6 don't recognize transparency so the white is showing in the bg of the shadow.png.  Any suggestions for IE 5 and 6?  I still like to code for them.  I know some people don't.

                            • 11. Re: Drop Shadow
                              pixlor Level 4

                              PNG8 and tweak the color palette (you may need to add colors), since Fireworks doesn't always include everything you have, even if you only have 256! It won't be perfect for the older browsers, but they'll be a smaller slice of your market pie.



                              • 12. Re: Drop Shadow
                                quality11 Level 1

                                Thanks for that article.  I love sitepoint.  Unfortunately, that doesn't work.  The bg is showing through as white now on even the other browsers: Chrome, FF, etc.

                                • 13. Re: Drop Shadow
                                  quality11 Level 1

                                  What works is what my colleague did with this site here (see drop shadow).  That's what I based my original CSS/shadow.gif on.  I used his gif file.  It looks good in all the browsers (the shadow anyone).  The gif file just needs to be darker.  That's what I've been trying to do the whole time -- recreate what he did but make the file darker.  I'm not sure how he created it though (here's his gif file and I'm not sure why he made it so huge).

                                  • 14. Re: Drop Shadow
                                    pixlor Level 4

                                    Gah! It IS huge.  (It doesn't need to be, either. You can use a short, wide slice and repeat it in the y direction. Then have a separate div with the bottom shadow just underneath. So many fewer bits to send and load! But anyway...)


                                    Try this...make a PNG24 (yes, non-transparent) image with the darkness you want. Then take the pencil tool and paint the corners that need to be transparent a bright pink or green or something. Then, export THAT as a transparent gif with the pink/green/whatever as the transparent color.

                                    • 15. Re: Drop Shadow
                                      quality11 Level 1

                                      Sorry...I'm not following you at all. 

                                      • 16. Re: Drop Shadow
                                        pixlor Level 4

                                        The reason you can't just darken his image is that, being very light, there are probably only a few colors in it. When you darken it, you don't have a gradient between the darker grey and white, you have maybe just 3 or 4 dark greys. Darkening his image is not a useful way to go.


                                        1. Start with a new image.
                                        2. Make a FW png document with a rectangle and a drop shadow.
                                        3. Export a non-transparent PNG24 image from the FW document.
                                        4. Open the non-transparent PNG24.
                                        5. Using the pencil tool (set to 1-pixel hard so you don't get any aliasing), draw over the corner pixels that you want to be transparent, using a bright color.
                                        6. Use Image Preview to set up export as a GIF and use the eye-dropper to set the transparent color to your bright corner color.
                                        7. Export as a GIF. Your corners will be transparent.


                                        Now then. Your friend is using a giant image because he doesn't know how to do things correctly. The better way is to use a slice across the image with just the right-hand side of the shadow behind most of the content and set it to repeat-y. Then, stack that over a new, separate div that only contains the bottom shadow.

                                        <div id="outerbox"> (maybe this is 805 pixels wide, with a 1-, 4-, or 10-pixel high repeating bg)

                                        <div id="content"> (maybe this is 800 pixels wide, since it doesn't have the shadow)

                                             Your stuff goes here



                                        <div id="bottomshadow> (maybe this is 805 pixels wide and 5 pixels high)