Macromedia Fireworks :: Transparent Canvas appearing opaque


	Transparent Canvas appearing opaque 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 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 -----------------------------------------------Reply----------------------------------------------- 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/ -------------------------------------------------------------- -----------------------------------------------Reply----------------------------------------------- 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. [q][i] 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 -- [/q] 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 -----------------------------------------------Reply----------------------------------------------- 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/ -------------------------------------------------------------- -----------------------------------------------Reply----------------------------------------------- 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