4 Replies Latest reply on Dec 16, 2008 3:50 AM by decoydoyle

    Question about transparent background

    GreenGoneMad Level 1
      Hi,

      I have created a simple graphic with 4 layers on a transparent background. When I save this image as a jpg, gif or flattened png, the transparent background turnsto white. What should I do to save it as jpg or gif with a transparent background?

      Thanks in advance

      Joe
        • 1. Question about transparent background
          pixlor Level 4
          The .jpg format does not support transparency, only .gif and .png (32 bit) do.

          Go to File>Image Preview (CS3) and select a format that supports transparency. Near the bottom left is a set of selectors for transparency type. For the Web, choose index transparency. Then, export your image.

          ("Saving" your image saves in the Fireworks format, which is not what you want as output, even if you want a .png file. You want to "Export" and the best way is through the preview, so you can set up your parameters. Once you have them set, though, you can just Export if you make changes to the Fireworks document, later.)
          • 2. Re: Question about transparent background
            GreenGoneMad Level 1
            Thanks pixlor.

            I set the Export settings and then exported as both Gif and png32. I opened the exported image in Photoshop CS3 and the background looks transparent. I was happy.

            Then I inserted the image in the blank HTML page. When I view the page in Firefox, I can see the background color through the image since the image background is transparent. When I view the same page In Internet Expolrer, I see a bluish gray background instead of being transparent. I don't understand where am I getting this bluish gray color from.

            Any clue?
            • 3. Re: Question about transparent background
              pixlor Level 4
              quote:

              Originally posted by: GreenGoneMad
              Thanks pixlor.

              I set the Export settings and then exported as both Gif and png32. I opened the exported image in Photoshop CS3 and the background looks transparent. I was happy.

              Then I inserted the image in the blank HTML page. When I view the page in Firefox, I can see the background color through the image since the image background is transparent. When I view the same page In Internet Expolrer, I see a bluish gray background instead of being transparent. I don't understand where am I getting this bluish gray color from.

              Any clue?


              Oh...sorry, yes. First, try index transparency, not alpha transparency. For IE prior to version 7, you need to add some JavaScript. For example, this script by Drew McLellan. Here's a Google search for more reading

              Also, copying myself from this thread
              quote:


              JPG: This format has all 16.7 million colors, but it compresses by throwing away "high-frequency" information (sharp edges will blur funny). This format is good for photographs and other images where colors change slightly from one pixel to another (as in gradients). This format does not have transparency.

              GIF: This format retains color information, but can only support 256 colors - any 256, though. It supports transparency, you can set one of your 256 colors to be transparent. This format is good for graphics with areas of solid colors. This format can also support multiple frames in the same file, giving rise to animation.

              PNG: This format retains color information like .gif and has 16.7 million colors, like .jpg. It handles transparency, too. What's not to love? Well, not all browsers show .png files properly. The major ones will, though, so if you know your audience is mostly on one of the major or newer browsers (intranet use? check your log files?), then you should be okay.

              Index and alpha transparency. Index transparency means, more or less, "make every pixel that is THIS color fully transparent and every other pixel fully opaque. Alpha transparency (often done with a mask of some kind) means you can set the transparency of a pixel in the range from fully opaque to fully transparent, from 0-255. These images are 32 bit: 8 bits for Red, 8 bits for Green, 8 bits for Blue, and 8 bits for alpha transparency.

              For the Web, you probably want to use index transparency, because support for alpha transparency on .png files can be a bit flakey. Support for index transparency is pretty good with the newer browsers, but if a good portion of your audience is using older browsers, you have some design trade-offs to make.
              Probably good to read up on things: Google search for png support in browsers.


              • 4. Re: Question about transparent background
                decoydoyle
                I also have a problem with getting a transparent background to work ANYWHERE outside of Fireworks. I tried the suggestions in this thread, but nothing is working for me. I'm using MX 2004. Any suggestions? Thanks.