8 Replies Latest reply on Oct 3, 2006 9:26 AM by Newsgroup_User

    Why does white color turn transparent?

    Saratoga_Sam
      Hi -

      I'm confused by a Fireworks behavior.

      I created a new document with a transparent canvas and added a red square in the center. In the Optimize Panel I have GIF selected with index transparency. When I view the red square in the Original View, I see it clearly surrounded by the gray-white checkerboard transparency color. When I view the red square in the Preview View I see the same thing. So far so good.

      Now, I change the red square to a white square in the Original View. I see the white square surrounded by the transparency color. However, when I go to the Preview View, the white square disappears - apparently the white color has been changed to transparent.

      Why does this happen?

      Thanks,

      Jeff
        • 1. Re: Why does white color turn transparent?
          Level 7
          Saratoga Sam wrote:

          > Now, I change the red square to a white square in the Original View. I see the
          > white square surrounded by the transparency color. However, when I go to the
          > Preview View, the white square disappears - apparently the white color has been
          > changed to transparent.
          >
          > Why does this happen?

          Fireworks default canvas color and index color is white. By selecting a
          transparent canvas, you have instructed fireworks to make white the
          transparent color in your GIF image. Use a canvas color that matches the
          background color of your page, or use Alpha transparency and set the
          matte color to match the background color of your page.

          --
          Linda Rathgeber [PVII] **Adobe Community Expert-Fireworks**
          --------------------------------------------------------------
          http://www.projectseven.com
          Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
          CSS Newsgroup: news://forums.projectseven.com/css/
          Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
          --------------------------------------------------------------
          • 2. Re: Why does white color turn transparent?
            Saratoga_Sam Level 1
            Linda, thanks.

            What happens when the background color of your page is not a solid color but is a pattern - as is in my case. I think I need the transparent color to allow the patterned background to show through.

            What I'm trying to do is round the corners of a webpage that sits on top of a gray-patterned background. The north-east corner of the webpage is white and this is where I'm having touble. The other three corners of the webpage are maroon and I've had no difficulty rounding out those corners.
            • 3. Re: Why does white color turn transparent?
              Level 7
              Saratoga Sam wrote:

              > What I'm trying to do is round the corners of a webpage that sits on
              > top of a gray-patterned background. The north-east corner of the
              > webpage is white and this is where I'm having touble. The other three
              > corners of the webpage are maroon and I've had no difficulty rounding
              > out those corners.

              Can you upload a copy of your image to your Website? That way we'll be
              able to advise you about the best way to do this.


              --
              Linda Rathgeber [PVII] **Adobe Community Expert-Fireworks**
              --------------------------------------------------------------
              http://www.projectseven.com
              Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
              CSS Newsgroup: news://forums.projectseven.com/css/
              Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
              --------------------------------------------------------------
              • 4. Re: Why does white color turn transparent?
                Saratoga_Sam Level 1
                Sure -

                Here you go:

                An example of a top left banner piece with a rounded corner is located here. This example is maroon but I would like it to be white.

                This is the background image that the banner piece will sit on top of: here
                • 5. Re: Why does white color turn transparent?
                  Level 7
                  Saratoga Sam wrote:
                  > Sure -
                  >
                  > Here you go:
                  >
                  > An example of a top left banner piece with a rounded corner is located
                  > http://www.marshacjones.com/images/banner_top_left.gif. This example is maroon
                  > but I would like it to be white.
                  >
                  > This is the background image that the banner piece will sit on top of:
                  > http://www.marshacjones.com/Assets/body_bg.gif

                  I'm guessing that the background tile is subtle enough to be able use it
                  behind the image in Fireworks. To do that, draw a rectangle the size
                  of the canvas and choose Pattern fill. Open the pattern fill menu and
                  scroll down until you see the word Other. Browse to your tile. When you
                  close the open dialog box the pattern will tile in the rectangle. Export
                  the image with a bit of the background included.


                  --
                  Linda Rathgeber [PVII] **Adobe Community Expert-Fireworks**
                  --------------------------------------------------------------
                  http://www.projectseven.com
                  Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
                  CSS Newsgroup: news://forums.projectseven.com/css/
                  Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
                  --------------------------------------------------------------
                  • 6. Re: Why does white color turn transparent?
                    Saratoga_Sam Level 1
                    Ok, thanks. That sounds like it should work.

                    Although, I think that with some patterned backgrounds this trick may not work if the background included with the image does not "match up" with the tiled background of webpage.

                    • 7. Re: Why does white color turn transparent?
                      Level 7
                      Saratoga Sam wrote:
                      > Ok, thanks. That sounds like it should work.
                      >
                      > Although, I think that with some patterned backgrounds this trick may not work
                      > if the background included with the image does not "match up" with the tiled
                      > background of webpage.

                      Yes, that's right.

                      --
                      Linda Rathgeber [PVII] **Adobe Community Expert-Fireworks**
                      --------------------------------------------------------------
                      http://www.projectseven.com
                      Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
                      CSS Newsgroup: news://forums.projectseven.com/css/
                      Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
                      --------------------------------------------------------------
                      • 8. Re: Why does white color turn transparent?
                        Level 7
                        Another way is to fill in the average color grey behind your corner and use
                        that grey as your transparent color. Pick that grey for you matte also in
                        the optimize panel. This method will not mess with any whites, will give
                        you a truly transparent gif, and will not be dependent on the background.

                        HTH,
                        Tony

                        "Linda Rathgeber **Adobe Community Expert**" <lightly@sc.rr.com> wrote in
                        message news:efhgnj$k5v$1@forums.macromedia.com...
                        > Saratoga Sam wrote:
                        >> Sure -
                        >>
                        >> Here you go:
                        >>
                        >> An example of a top left banner piece with a rounded corner is located
                        >> http://www.marshacjones.com/images/banner_top_left.gif. This example is
                        >> maroon but I would like it to be white.
                        >>
                        >> This is the background image that the banner piece will sit on top of:
                        >> http://www.marshacjones.com/Assets/body_bg.gif
                        >
                        > I'm guessing that the background tile is subtle enough to be able use it
                        > behind the image in Fireworks. To do that, draw a rectangle the size of
                        > the canvas and choose Pattern fill. Open the pattern fill menu and scroll
                        > down until you see the word Other. Browse to your tile. When you close the
                        > open dialog box the pattern will tile in the rectangle. Export the image
                        > with a bit of the background included.
                        >
                        >
                        > --
                        > Linda Rathgeber [PVII] **Adobe Community Expert-Fireworks**
                        > --------------------------------------------------------------
                        > http://www.projectseven.com
                        > Fireworks Newsgroup: news://forums.projectseven.com/fireworks/
                        > CSS Newsgroup: news://forums.projectseven.com/css/
                        > Design Aid Kits: http://www.webdevbiz.com/pwf/index.cfm
                        > --------------------------------------------------------------