5 Replies Latest reply on Jun 2, 2007 9:25 AM by Magicalwonders

    Transparent Canvas appearing opaque

    Magicalwonders
      I'm not sure what I'm doing wrong here. But although I'm using a transparent canvas for a graphic I've created, the canvas appears as solid white when viewed against a coloured background in DTP package or browser!

      I've created the graphic using the rounded rectangle tool on a transparent (Grey & White check) canvas. After clicking "Fit Canvas" the corners of the canvas remain visible as the graphic is rounded at the edges. It is these edges that become visible as a white background when saved as jpeg or gif.

      My first solution was to simply change the colour of the canvas to that of the background. However, the background I'm using is #E7E7E7 (light shade of grey) and Fireworks won't allow me to apply that colour to the canvas. I assume this is because it is not considered web safe?

      So, if anyone can advise on how I can stop the corners of the canvas from being displayed, I would be grateful.

      Many thanks,

      Myles

        • 1. Re: Transparent Canvas appearing opaque
          Magicalwonders Level 1
          I think I've managed to sort this. I realise now that a transparent canvas won't be possible with a jpeg!

          It seems I was missing out a step in creating the appropriate gif file!

          One thing that still puzzles me is that the resulting Gif file is actually bigger than the file saved as a jpeg! Not sure what that's about? Can I compress it?

          Myles

          • 2. Re: Transparent Canvas appearing opaque
            Level 7
            Magicalwonders wrote:
            > I think I've managed to sort this. I realise now that a transparent canvas
            > won't be possible with a jpeg!
            >
            > It seems I was missing out a step in creating the appropriate gif file!
            >
            > One thing that still puzzles me is that the resulting Gif file is actually
            > bigger than the file saved as a jpeg!

            If you export a photographic image in GIF format, you are guaranteed to
            get a larger file size than if you had exported it in JPEG format. You
            have two choices for exporting a high quality image with the rounded
            corners transparent. The first is to export in 32 bit PNG file format,
            though you will need to apply the MS Alpha Image Loader filter to get it
            to display properly in I.E. 5 & 6. Here's some info about that:

            http://www.playingwithfire.com/test/pngbehavior/demo.html

            The other option is to export the image from FW in SWF format, and then
            set the background to transparent. Here's more information about that.

            http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_14201

            Here is an example of a JPEG exported and treated that way. Note that
            using either a PNG 32 or SWF enables you to add a nice translucent drop
            shadow to the image.

            http://www.playingwithfire.com/star.html

            --
            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/
            http://www.adobe.com/communities/experts/
            --------------------------------------------------------------
            • 3. Re: Transparent Canvas appearing opaque
              Magicalwonders Level 1
              Thanks Linda for taking the time to advise & post links.

              Option 1 seems staightforward, although the resulting file size at 13K is a bit higher than I would like.
              quote:


              The other option is to export the image from FW in SWF format, and then
              set the background to transparent. Here's more information about that.
              http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_14201

              Here is an example of a JPEG exported and treated that way. Note that
              using either a PNG 32 or SWF enables you to add a nice translucent drop
              shadow to the image.
              http://www.playingwithfire.com/star.html
              --


              I'm a bit confused with the second option. The link seems to refer to creating a Flash Movie with a transparent background.
              I've tried exporting the png graphic as a swf onto my desktop, but it completely changes the image and becomes unrecognisable.

              So I'm not sure how to get from png to jpg whilst retaining a transparent background? I must be missing something. (Probably the necessary grey cells!)

              Myles

              • 4. Re: Transparent Canvas appearing opaque
                Level 7
                Magicalwonders wrote:


                > I'm a bit confused with the second option. The link seems to refer to creating
                > a Flash Movie with a transparent background.

                Yes. You'll be creating a static Flash movie, as I showed you in the
                example I posted the link to. The SWF format can display static images
                too. It doesn't have to be an animation.

                > I've tried exporting the png graphic as a swf onto my desktop, but it
                > completely changes the image and becomes unrecognisable.
                > So I'm not sure how to get from png to jpg whilst retaining a transparent
                > background?

                Create your image on a transparent canvas. To export it from Fireworks,
                click on the Quick Export link at the top right corner of the document
                window and choose Flash > SWF. Import the SWF file into your HTML
                document and apply the wmode transparency thing. The background will
                look white until you preview it in your browser.

                --
                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/
                http://www.adobe.com/communities/experts/
                --------------------------------------------------------------
                • 5. Re: Transparent Canvas appearing opaque
                  Magicalwonders Level 1
                  Thanks for the help Linda.

                  Although I now understand how to create the graphic as a swf, I've reverted to using a jpeg on this occasion. The graphic is a link to an opt in list, so I want to make sure that every visitor can view it. I appreciate that most people would be able to see it O.K., but I need 100% for this function.

                  I've managed to sort out the colour of the canvas so that it matches the colour I want for my background.

                  Thanks again for your help.

                  Myles