7 Replies Latest reply on Feb 8, 2009 11:09 AM by Newsgroup_User

    Export slice with transparency

    Level 7
      I have a rectangular object with rounded corners and would like to
      export it in three slices to use as a background on a web page (a common
      thing to do). However, this will be overlaid on a patterned page
      background, so what I want to do is to export these slices as GIFs with
      transparency around the outer edges of the curved corners so the page
      background shows through.

      I can't seem to get this to work right (CS4). I set up the slices to
      export in GIF format (256 adaptive) with my canvas set for a transparent
      b/g. Doing a straight export, the slices are created with a white -- not
      transparent -- background. I tried using the Export Wizard, and it does
      let me appear to set up the transparency, and shows transparency in the
      preview window, but the exported GIF once again has a solid background.
      The wizard appears to be trying to set up an export on the page as a
      whole, and not the particular slices (at least from what I see in the
      preview window).

      What I've done to get this to work is to export the slices, then open
      each GIF and re-export it, this time setting up the transparency
      settings in the image preview window.

      Is there a more direct way to do this?
        • 1. Re: Export slice with transparency
          Level 7
          Doug Gordon wrote:

          > I can't seem to get this to work right (CS4). I set up the slices to
          > export in GIF format (256 adaptive) with my canvas set for a transparent
          > b/g. Doing a straight export, the slices are created with a white -- not
          > transparent -- background.

          Switch to Alpha rather than Index transparency when exporting.

          --
          Linda Rathgeber - Adobe Community Expert
          http://www.adobe.com/communities/experts/members/8.html
          --------------------------------------------------------------
          • 2. Re: Export slice with transparency
            Level 7
            Linda Rathgeber wrote:
            > Doug Gordon wrote:
            >
            >> I can't seem to get this to work right (CS4). I set up the slices to
            >> export in GIF format (256 adaptive) with my canvas set for a
            >> transparent b/g. Doing a straight export, the slices are created with
            >> a white -- not transparent -- background.
            >
            > Switch to Alpha rather than Index transparency when exporting.
            >
            That doesn't change the behavior at all. Does the GIF format support
            alpha transparency? Another option would be to use PNG files, but I'm
            not sure if they're supported by all the browsers that people might be
            using.

            Also, there seem to be fewer options for specifying the export
            characteristics of individual slices than there are when exporting an
            entire graphic.
            • 3. Re: Export slice with transparency
              Level 7
              Doug Gordon wrote:

              > That doesn't change the behavior at all.

              It should.

              > Does the GIF format support
              > alpha transparency?

              The GIF format doesn't, but Fireworks understands what you want when you
              use it and will export it correctly. :-)

              You created the problem when you used a transparent canvas. Fireworks
              default index color is white, so it reverts to using it on export if you
              haven't set a canvas color. It does so because it needs a color to
              anti-alias the images to. So, if you use a canvas color that matches the
              background color of your page, and then use Index transparency, you get
              a graphic with a transparent background that is anti-aliased to your
              page. If you use a transparent canvas, you need to use Alpha
              transparency and select a matte color that matches your page background
              color.

              Another option would be to use PNG files, but I'm
              > not sure if they're supported by all the browsers that people might be
              > using.

              8bit PNG files would be OK in any browser. 24bit PNG files are OK too,
              but they don't support transparency. 32bit PNG files with full, variable
              transparency are not displayed properly in Internet Explorer 5 & 6, but
              are OK in IE 7.

              > Also, there seem to be fewer options for specifying the export
              > characteristics of individual slices than there are when exporting an
              > entire graphic.

              You can set different export values for every slice.

              Here's a tutorial for an older version of FW, but the info is still useful.

              http://www.projectseven.com/tutorials/images/fw_optimize/index.htm


              --
              Linda Rathgeber - Adobe Community Expert
              http://www.adobe.com/communities/experts/members/8.html
              --------------------------------------------------------------
              • 4. Re: Export slice with transparency
                Level 7
                Linda Rathgeber wrote:
                >
                > You can set different export values for every slice.
                >
                > Here's a tutorial for an older version of FW, but the info is still
                > useful.
                >
                > http://www.projectseven.com/tutorials/images/fw_optimize/index.htm
                >
                >
                Thanks, Linda. That clarifies a number of things for me. I never did
                understand what that "Matte Color" setting was for. I did have better
                luck when setting the canvas non-transparent, and now have some pretty
                good images for the web.

                One other thing, though. Even using the "GIF 256-Color Adaptive" option,
                FW did not do a very good job at the GIF export. My graphic happened to
                have a smooth gradient in it, which as you know means that there are a
                lot of colors since each succeeding pixel is slightly lighter along the
                gradient. I expected FW to optimize this into all 256 available color
                indeces, but it created a graphic with a lot fewer then 256 colors in
                the pallette, and as a result the gradient had a definite "banded" look
                to it.

                My solution, kludgey as it may be, was to export the slices as flattened
                PNG files, then import them into PhotoImpact, and from there export a
                GIF with transparency for the background color. PhotoImpact used all 256
                pallette slots and the results were excellent, with a very smooth gradient!
                • 5. Re: Export slice with transparency
                  Level 7
                  Doug Gordon wrote:

                  > One other thing, though. Even using the "GIF 256-Color Adaptive" option,
                  > FW did not do a very good job at the GIF export. My graphic happened to
                  > have a smooth gradient in it, which as you know means that there are a
                  > lot of colors since each succeeding pixel is slightly lighter along the
                  > gradient. I expected FW to optimize this into all 256 available color
                  > indeces, but it created a graphic with a lot fewer then 256 colors in
                  > the pallette, and as a result the gradient had a definite "banded" look
                  > to it.
                  >
                  > My solution, kludgey as it may be, was to export the slices as flattened
                  > PNG files, then import them into PhotoImpact, and from there export a
                  > GIF with transparency for the background color. PhotoImpact used all 256
                  > pallette slots and the results were excellent, with a very smooth gradient!

                  Can you post a link to the original PNG file?

                  --
                  Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                  http://www.communityMX.com/
                  ---
                  .:Adobe Community Expert for Fireworks:.
                  http://www.adobe.com/communities/experts/members/206.html
                  ---
                  • 6. Re: Export slice with transparency
                    Level 7
                    Jim Babbage .:CMX:. & .:Adobe Community Expert:. wrote:
                    > Doug Gordon wrote:
                    >
                    >> One other thing, though. Even using the "GIF 256-Color Adaptive"
                    >> option, FW did not do a very good job at the GIF export. My graphic
                    >> happened to have a smooth gradient in it, which as you know means
                    >> that there are a lot of colors since each succeeding pixel is
                    >> slightly lighter along the gradient. I expected FW to optimize this
                    >> into all 256 available color indeces, but it created a graphic with a
                    >> lot fewer then 256 colors in the pallette, and as a result the
                    >> gradient had a definite "banded" look to it.
                    >>
                    >> My solution, kludgey as it may be, was to export the slices as
                    >> flattened PNG files, then import them into PhotoImpact, and from
                    >> there export a GIF with transparency for the background color.
                    >> PhotoImpact used all 256 pallette slots and the results were
                    >> excellent, with a very smooth gradient!
                    >
                    > Can you post a link to the original PNG file?
                    >
                    Jim, this is probably not all that important an issue in the grand
                    scheme of things, but you're welcome to take a look. I wasn't sure how
                    well it would work to download a complete Fireworks PNG in a browser, so
                    I put it in a ZIP file: http://haze.wdgordon.com/images/Haze2.zip. The
                    canvas background is not the actual background of the target web page,
                    but you can toggle on the Background layer to see what that looks like.
                    Using the hints from Linda and the tutorial, I was able to configure the
                    slices to export as GIFs with transparency.

                    However, if you compare the FW output, e.g. "frametop.gif" with the
                    image that I'm actually using at
                    http://haze.wdgordon.com/images/frametop.gif, you'll find that the
                    latter has much better quality in the gradient area. It's hard to see it
                    in these thin slices unless you blow them up to 400% or so in FW, but
                    the difference definitely shows when displayed as the column background
                    on the finished web pages. The live site has the better-looking images
                    at http://haze.wdgordon.com.

                    - Doug G
                    • 7. Re: Export slice with transparency
                      Level 7
                      Doug Gordon wrote:
                      > Jim Babbage .:CMX:. & .:Adobe Community Expert:. wrote:
                      >> Doug Gordon wrote:
                      >>
                      >>> One other thing, though. Even using the "GIF 256-Color Adaptive"
                      >>> option, FW did not do a very good job at the GIF export. My graphic
                      >>> happened to have a smooth gradient in it, which as you know means
                      >>> that there are a lot of colors since each succeeding pixel is
                      >>> slightly lighter along the gradient. I expected FW to optimize this
                      >>> into all 256 available color indeces, but it created a graphic with a
                      >>> lot fewer then 256 colors in the pallette, and as a result the
                      >>> gradient had a definite "banded" look to it.
                      >>>
                      >>> My solution, kludgey as it may be, was to export the slices as
                      >>> flattened PNG files, then import them into PhotoImpact, and from
                      >>> there export a GIF with transparency for the background color.
                      >>> PhotoImpact used all 256 pallette slots and the results were
                      >>> excellent, with a very smooth gradient!
                      >>
                      >> Can you post a link to the original PNG file?
                      >>
                      > Jim, this is probably not all that important an issue in the grand
                      > scheme of things, but you're welcome to take a look. I wasn't sure how
                      > well it would work to download a complete Fireworks PNG in a browser, so
                      > I put it in a ZIP file: http://haze.wdgordon.com/images/Haze2.zip. The
                      > canvas background is not the actual background of the target web page,
                      > but you can toggle on the Background layer to see what that looks like.
                      > Using the hints from Linda and the tutorial, I was able to configure the
                      > slices to export as GIFs with transparency.
                      >
                      > However, if you compare the FW output, e.g. "frametop.gif" with the
                      > image that I'm actually using at
                      > http://haze.wdgordon.com/images/frametop.gif, you'll find that the
                      > latter has much better quality in the gradient area. It's hard to see it
                      > in these thin slices unless you blow them up to 400% or so in FW, but
                      > the difference definitely shows when displayed as the column background
                      > on the finished web pages. The live site has the better-looking images
                      > at http://haze.wdgordon.com.
                      >
                      > - Doug G

                      Thanks Doug. I'm interested to see if I can reproduce the issue, or if
                      there is a step missing that forces the poor quality result. It's one of
                      those little things, that for an app that is supposed to specialize in
                      screen graphics, should not be an issue.

                      --
                      Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                      http://www.communityMX.com/
                      ---
                      .:Adobe Community Expert for Fireworks:.
                      http://www.adobe.com/communities/experts/members/206.html
                      ---