12 Replies Latest reply on Dec 18, 2009 2:30 PM by pixlor

    animated gif and gradient color problem

    Cobby Fred Level 1

      Hi there,

       

      I have been trying to create animated gif with gradient background. My animation works alright but the problem is that when I preview either in browser or in the preview mode, the gradient doesnt look smooth. I want to know if there is a way to work around this? I have seen some on other websites and it looks perfect. I'm wondering how they do it.

       

      I'll appreciate anybody's help.

        • 1. Re: animated gif and gradient color problem
          pixlor Level 4

          Can you link to an animated .gif with a nice gradient background? My guess is that what you're seeing is a Flash animation, not an animated .gif.

           

          The GIF format supports 256 colors. That's your limit. When you produce a .gif from your working document, your color information is optimized for the palette. The GIF format is not well-suited to subtle color ranges. It is well suited to line art where color demarcations must be clear and sharp.

           

          Can you post your Fireworks .png file? (Use the Insert Image camera icon to the left of the smilie icon.)

          • 2. Re: animated gif and gradient color problem
            Cobby Fred Level 1

            Please I know gif file from Flash swf files. Please visit www.businessghana.com, some few refresh might bring up the gif ad with gradient backround I'm talking about. I have even downloaded it but don't know how i can upload it to the forum.

             

            Please I'll be waiting for your response.

            • 3. Re: animated gif and gradient color problem
              pixlor Level 4

              I don't know what I'm looking for, so sitting on a Web site, refreshing it in the hopes that something will strike me is pointless.

               

              It's easy to upload an image to the forum. In the controls, just above where you type, there are a number of icons for modifying content. The second line starts with standard text styles, bold, italic, underline, then a group for text alignment, then there's a camera icon for Insert Image. Click the camera icon and upload the image. If you don't want to do that, you could post the image to an image sharing account such as Photobucket and link to it.

              • 4. Re: animated gif and gradient color problem
                Cobby Fred Level 1

                Sorry I wasn't precise enough. Here I have uploaded both my .png file and .gif file that has smooth gradient. I want to believe this can help you to suggest something positive to me.

                 

                1. The png file

                get website.png

                2. The gif file with smooth gradient color

                chase properties.gif

                • 5. Re: animated gif and gradient color problem
                  JoyceEvans Level 3

                  I opened each of your atached files and compared settings. The gold one is set as "animated gid" and "exact" for the colors. Your png is set as jpg.try duplicating the optimize settings. What Pixlor said about gif limittions is true. What I notice is the gpld gradient is a slight color change from dark to light (less gradations). Your gradient has a sharper contrast from dark to light (many more gradations).

                  • 6. Re: animated gif and gradient color problem
                    pixlor Level 4

                    Thanks! That gives me something to analyze!

                     

                    The Chase background is dithered. There are 16 light gold colors. Because they are so close together in value, the dithering pattern is subtle and not unpleasant. I also rather like the subtle lighter question mark at the right hand side. Furthermore, the black text has good contrast against all of the gold colors. This makes the text easy to read against what is, essentially, a patterned background.

                     

                    You have a very dark to light gradient and you have white text over the white center. When dithered, your gradient would not be as subtle - the pattern will be more obvious, less smooth. Also, at the center of your image, the text (especially the red, for some reason) does not have good contrast against the background and is difficult to read.

                     

                    Here are some things you can try:

                    • Reduce the contrast between the values of your gradient
                    • Try moving the center of the gradient to the bottom of the image
                    • Try using a red that is slightly less saturated
                    • Add a subtle texture or noise pattern between your gradient and other objects. (You inserted a flattened .png rather than your Fireworks document, otherwise I could have experimented and shown you.) Play around with blending modes and opacity. This can break up the geometric dithering pattern and give you something that looks more natural.
                    • When you go to export, use File > Image Preview and make sure to check the Dither checkbox
                    • You might even try creating (exporting) the background gradient separately, using a very limited palette (16 colors?), then bring that back in to FW so that more of the 256 colors can be assigned to the foreground elements.

                     

                     

                    Edit: Hee hee Joyce! I take too long answering questions! You beat me!

                    • 7. Re: animated gif and gradient color problem
                      Cobby Fred Level 1

                      I have to thank you all for your assistance so far. I must say I only know how to put some few things together and I do not understand some of the technical words you used such as dither, geometric dithering, blending mode... But in all I understand that if I blend colors that are close I'll get something close to smooth.

                       

                      Here I have my unflattened .png file

                      get website-fw.png

                      • 8. Re: animated gif and gradient color problem
                        JoyceEvans Level 3

                        Looks good.

                         

                        Dither is an option in the optimize panel. The best non technical description I found  is "alternating
                        similarly colored pixels". Blending mode is in the property inspector. Each mode renders differently depending on hoe the top object mixes with the object or background below it. The best way to use vlending modes is to play :-) Put an object or photo on top of another object or colored background and select each blending mode to see.

                        1 person found this helpful
                        • 9. Re: animated gif and gradient color problem
                          pixlor Level 4

                          Cobby Fred wrote:

                           

                          I have to thank you all for your assistance so far. I must say I only know how to put some few things together and I do not understand some of the technical words you used such as dither, geometric dithering, blending mode... But in all I understand that if I blend colors that are close I'll get something close to smooth.

                           

                           

                          Here's Wikipedia's page on dither: http://en.wikipedia.org/wiki/Dither Scroll down till you see the images of the cats on the right-hand side. It's a little over half-way. In the original, the cat's pretty much a gradient. If that image is saved as a .gif, see how you get wide areas of color? It almost looks like a paint-by-number picture. This similar to what happens to your radial gradient when you save as .gif. I used the word "geometric," because the radial gradient will produce arcs of grey colors. The third image of the cat has dithering. This means that, instead of setting the colors in the original image to the closest one in the restricted palette, the software tries to figure out how to speckle the image to produce an average that would look better at a distance. Turning on dithering when you go to output your gradient will help make your image smoother, just as the third cat image is smoother than the second. Here's where you turn on dithering if you go through File > Image Preview:

                          dither.png

                           

                          Here I have my unflattened .png file

                          No, it's flattened. It's a single bitmap.

                           

                           

                          Here's a noisy image I created. It has a radial gradient at the bottom then a texture layer that has it's visibility off, because I copied it to make a greyscale version to use. I've set that to have 25% opacity and a blending mode of Multiply. Both the opacity and blending mode controls are at the top of the layers panel. This is a FW .png (Edit, no, it isn't! The forum  has stopped supporting that! ):

                          noisy-gradient.png

                          If I export the gradient alone, without the texture layer, I can get this (settings are "64-color" greyscale palette and no dithering):

                          grayscale.gif

                          or this (turning on dithering):

                          grayscale-dithered.gif

                          While the dithered image is better, it still shows the arcs. If I set the texture layer back visible, and export with dithering on, I get this:

                          noise-grayscale-dithered.gif

                          The noise in the texture breaks up the geometric arcs, which makes the image look smoother. Any small texture will do that. Choosing the 64-color greyscale palette gives me either 22 or 26 colors.The 32-color palette gave me 12. You should experiment with the .gif palette settings to see what you like best. Remember that the more colors you assign to your background the fewer colors you have available for your foreground objects.

                           

                           

                          As a final point, the red text looks blurry. When I zoom in on it (400%), some of the lines are partially "broken," specifically the verticals on the L, T, and N. You might want to try a different font or adjusting the size so that the aliasing (mapping) to the pixels is cleaner. Italic text in small sizes is difficult to use.

                          • 10. Re: animated gif and gradient color problem
                            pixlor Level 4

                            Here's the FW .png: http://drop.io/FWpixlor/asset/noisy-gradient-png

                             

                            Very annoying that Adobe has changed the forum software to flatten FW .pngs!

                            • 11. Re: animated gif and gradient color problem
                              Cobby Fred Level 1

                              Many thanks pixlor and Joyce for yourenlightenment. I now understand a lot about animated gifs. I have enabled dither, on one of my .gif files which has a gradient background and it almost look like a jpg file. I now know the points to consider when creating animated gifs.

                               

                              Thank you all once again.

                              • 12. Re: animated gif and gradient color problem
                                pixlor Level 4

                                You're welcome!