7 Replies Latest reply on Feb 3, 2010 7:49 PM by pixlor

    Exportproblem with shadow-box on a gradient background

    ribery75

      Hi folks,

       

      I have huge problems exporting this black box with a shadow on a gradient background;-( What is the best way to conserve the shadow?

       

      Every time while I hide all the other layers (and also the gradient background!) and export the shadow-box (now on a background with no color!) I'll get a shadow with some white color in it;-( What shall I do?

       

      Kind regards from Germany

        • 1. Re: Exportproblem with shadow-box on a gradient background
          Jim_Babbage Level 4

          Export the background separately from the rectangle, and export the rectangle as a PNG 32, with a transparent canvas. Put them back together in Dreamweaver or the web page editor of your choice.  HTH

          1 person found this helpful
          • 2. Re: Exportproblem with shadow-box on a gradient background
            pixlor Level 4

            PNG8 might be better. PNG32 requires special coding to get it to work in IE6, and even then it can sometimes fail. See this article:

            http://blogs.cozi.com/tech/2008/03/transparent-pngs-can-deadlock-ie6.html

             

            PNG8 works without special coding and gives you up to 256 semi-transparent colors. (If FW doesn't give you your full range, try adding more with the color dropper.) See this article:

            http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

             

            If you know none of your visitors use IE6, PNG32 should be fine, though.

            • 3. Re: Exportproblem with shadow-box on a gradient background
              Jim_Babbage Level 4

              Good point.

               

               

              Jim Babbage

              • 4. Re: Exportproblem with shadow-box on a gradient background
                ribery75 Level 1

                Hi pixlor,

                 

                thank you very much for your quick answer!

                 

                With PNG 32 the shadow and the gradient of my black box looks very nice. With PNG 8 it seems that I have not enough colours to achieve a nice gradient (see attached file;-(

                 

                If you have a nice tip how i Should use the color dropper I really would appreciate it:-)

                 

                Oh, do you know the best way to export the several images of a complete layout? Should i use the slices option or do i really need to hide all the other layers first, crop the image and then export it? That'S the way I do it but that really sucks;-(

                 

                Kind regards from Germany

                • 5. Re: Exportproblem with shadow-box on a gradient background
                  pixlor Level 4

                  Hello to Germany from the northwest U.S.!

                   

                  Export your gradient and the shadow as two separate images. For the gradient, you can use a PNG24 (full color, but no transparency) or a JPG. Use the PNG8 just for the shadow. It looks like you ought to be able to use narrow vertical slices and tile them horizontally, if you want. If your shadow extends to other sides, you could create two images: a larger one with a solid rectangle plus the shadow and a smaller one of just the gradient. Then, place these images as the backgrounds of nesting divs with the proper margins or padding.

                   

                  In any case, once you're ready to save the shadow, see how many colors Fireworks gives you. Zoom in to your image. It looks like your shadow is about 15 pixels tall, so you could sample each horizontal row with the eyedropper.

                   

                  Create slices! That's what they're for! Cropping endangers your working file. What if you accidentally save the cropped version? Also, you can read the position and dimensions of the slice objects from the Info panel ("Info" in English, the panel that is in the top right by default) and that's often helpful for writing your HTML and CSS.

                   

                  Name your slices, as this name then is used for the file name. Depending on what you're doing you may need to hide some layers for export, but slicing is far better than crop/undo. For instance, recently, I created a layout where I had a transparent logo over a tiling background element. I made slices for the logo and for the background tile. But when I went to export the logo, I turned off the layers below the logo.

                  1 person found this helpful
                  • 6. Re: Exportproblem with shadow-box on a gradient background
                    ribery75 Level 1
                    Hi  pixlor,
                    sorry for my late  reaction but the last few days have been very stressful;-(
                    Thank you very much  for your precise answer! I really, really appreciate  that:-)))
                    The idea with two  several slices for the gradient and the shadow seems to be very neat! But it  seems that I could only choose between the GIF- and the JPG-Format via the  Slice-Properties (at the bottom)!?!
                    Kind regards form  the (rainy) South of Germany
                    • 7. Re: Exportproblem with shadow-box on a gradient background
                      pixlor Level 4

                      I'm sorry you've been stressed!

                       

                      Yes, the Properties panel only has .gif and .jpg. But you can set other image formats and options for those formats elsewhere.

                       

                      In the Layers panel, under the Web Layer, select the slice to export. Go to the menu item File > Image Preview. It's probably different in German, for me it's in the third grouping. From there, you can select your file format and can apply fine adjustments to the options.

                       

                      For example, if you want to output a .jpg, you can vary the quality settings in 1% increments, not just "Better Quality" or "Smaller File" that you have on the Properties panel.

                       

                      Good luck from the (rainy here too!) U.S. Pacific Northwest!