CS5 export to transparent png - not working

[ellebelle98]

I have tried every think I know to get a png optimized transparently though fireworks cs5. I have read prior forum post, and watched several tutorials indicating ways to do this and when i try they do not work.

I created the image in photoshop and exported it to a png file. Then i opened it in fireworks in an attempt to make the png much smaller. The image will be overlaying a patterned background on the web so needs to be totallly transparent. I've tried every combination of export option and still, when I put the image in my site there is a white background.

Ive tried png-8  with alpha transparency and changed the matte to nothing. The main window in fireworks never gets rid of the white background and when i export it's still white on my site.

I've tried png-32 with both alpha and index.

When i use the png exported from photoshop on my site it looks exactly how I want it, but the file size it too large so that's why Im putting it in fireworks  but when i export it from there it's not transparent.

help!!  - Kim

[lindan19994533]

Instead of exporting it as a flattened PNG file from Photoshop, save it as a PSD and open the PSD in Fireworks. Discard the white background that Photoshop adds, and then export from Fireworks as a PNG file with Alpha transparency. Alternatively, create the image in Fireworks instead of Photoshop.

[smartwebby]

Hi Kim,

Are you able to set and see the transparent background of your Image in Fireworks? If yes then its just an export setting you need to deal with. Check out my tutorial on using transparency in Fireworks at: http://www.smartwebby.com/free_tutorials/website-design-how-to/transparent-background.asp

- Anita

[Guest]

Can you post your image? It would be easier to suggest something if we could see what you have.

[AsChi75]

I am convinced there is something wrong with fireworks... I've been trying to do this all morning. I managed to do it 1 time with a file... I have not been able to do it since.

I've tried png 8, png 32, I know how to switch to preview mode / optimized mode and preview the transparency, it's there, it shows up. However when I save off the flattened png and I put it in my HTML, it's gone.

This is nuts, I've used the same steps, I've tried the same process over and over again and randomly it works but more often than not, it doesn't. After spending about 40-50 hours on a design in fireworks witch custom styles and libraries, I now have to recreate all this work in photoshop because photoshop at least is consistent and doesn't make me want to throw a temper tantrum because it does what it is supposed to do.

Adobe just needs to kill off fireworks if they are not going to fix this issue, I've seen it as far back as cs4 and it's still there in cs6...

[Mr_Martineau]

I think that you need to set the Canvas background to be transparent before you export. Have a look at the Properties panel.

[dokomec]

AsChi75, i am having the exact same problem. exactly how you described it. i am trying to get website exports, round edges, transparent bg, etc... i have tried all flattened png possibilities, every time i got my .png file with a white bg.

have you found any solution to this since 2012? ))

[Herbert2001]

Have tried this?

Modify > Canvas > Canvas color > Transparent

[dokomec]

of course i did... r u kidding me?
i m trying to save with alpha channel, of course canvas is transparent..
i can save fw-png format with alpha channel. however when i make flat png, background color is being added at saving process.

r u sure that u really understand my question and my problem?

because there is an unsolved issue here started at Nov 4, 2011 9:14 PM and the solution u suggest has already been suggested 3 years ago...

besides i found a solution as: just save as fw-png and import to photoshop and web-save the doc as png..

[Herbert2001]

Sorry, i was not certain about your level...

You may be interested in knowing that another tool optimizes png files beyond what Fireworks can do - and I would avoid Photoshop's abysmal png export for production. As you are probably aware of, Photoshop's web export does not allow us to save an indexed png file with full transparency - something FW was always good at.

Try Color Quantizer: http://x128.ho.ua/color-quantizer.html

It allows for png files with full transparency to be saved with limited colour palettes exceeding 256 colours!  With CQ you can optimize png files to the fullest, while still retaining an excellent visual quality, since you can optimize easily to a limited palette of, for example, 512 or 1024 (or a custom number of colours). Extremely useful.

It also optimizes the transparent areas, and will automatically remove any bitmap data from those areas (which are not visible).

And, even better, a simple quality mask brush tool assures you have maximum control over the inclusion of even tiny splotches of colour you wish to retain.

I have long left FW behind for my png optimization, because of CQ. It's brilliant, and still somewhat of a hidden gem. Try it out, you might be pleasantly surprised. And it's a free download.

[Marcus Turtle]

I'm late to the party, but in case anyone has this issue again, I made a youtube video of how to fix it.

Basically, just go to export wizard, change saved settings to PNG32 - and it starts saving them like it should.

[zorra_reed]

This video was really helpful thank you. However, I'm unable to solve one of my issues.

I made a logo to use as a web banner, business card, and watermark for my photography. I'm using the CS2 master collection and remember very little from the class I took 10  or so years ago. It's been trial and error. Frankly, what I ended up with was an accident that I'm unable to re-create and was opposite what I wanted. I love it! However, after several failed attempts to create something in photoshop besides setting my mark as a paintbrush tool, I moved on to illustrator, which I'm more familiar with, but ran into several problems that required a lot of drag and drop between the two programs. So I made my image in fireworks (first time user) and it was perfect. When I re-saved the final work and changed the format from a fireworks png to a flatten png, I lost my transparency. I have two websites, one supports png and jpeg, the other is only jpg and gif. Whenever possible, I'll use a gif instead for transparent images. For this reason, and as I've discovered the only way to satisfy the needs of all these sites and programs, still enabling me to scale the image as a vector without distortion for the uses I've outlined above, a png format was my only option. So how am I to retain my transparency when I can only save as a flatten png in order to enable other programs to read the file? Now, when I open the image, even in fireworks, there's a white canvas. I'm unable to change any of the layers, and cannot select half of the individual items to copy and paste onto a new file. What do I do? Again, i'm not going to be able to just 'remake this' and it took me three days. I tried recovering the original file but I think it overwrote the original since both said png despite one being a fireworks and one being flatten. Any advise will do. I've tried all the steps above in this form and I've tried re-saving it different ways and with different settings.

[Herbert2001]

The problem with Fireworks has always been that the original programmers at Macromedia (the previous developers of Fireworks) decided to choose PNG as their NATIVE Fireworks format.

Years ago many FW users argued that it would be best to stop abusing the PNG format as a native file format, and introduce a .fire, or .fwks extension and file format. However, Adobe bought out Macromedia, and nothing changed. And in May 2013 Adobe decided to halt Fireworks development, and drop support altogether - which means improvements will not be forthcoming anymore.

This is the reason you accidentally overwrote your original FW layered PNG file with a flattened version. It is terrible confusing that FW abuses the PNG format for its own native file format. No other design application does this - for the very reason you mention here: it is too risky and confusing.

So what can you do?

1. Did you save multiple versions? You should always save multiple versions, because you will be able to return to a previous version if required, and there is a very small chance that if you keep on working with the same file that it might become corrupted due to a power outage, or the application crashing while saving.
   Based on your post, I assume you did not save versions. Which means you cannot open a previous one.
2. Did you save your work as a Photoshop layered file, perhaps? In that case you would be able to open it with the layers intact at the very least.
   But I assume you did not.

I am afraid you lost your work. Next time, save versions while you work, and make sure not to overwrite the original FW layered version with an exported flattened one. ALWAYS save your exported versions to a different folder, for example "export". This way you will prevent overwriting your originals.

You will have to recreate your layered version.

[zorra_reed]

That leaves me a little heartbroken but now I know what's going on with the program and feel better about loosing everything. My experience has always been to change the format if I want to save an extra copy, so I assumed the same was true with fireworks. I did not expect it to overwrite my original. I didn't discover the background issue until I opened it in photoshop and made my brush. However, the image is useless as a web banner since I use a black background for my site. On the plus side, I know have a mentor who is going to teach me to do some advanced work in illustrator and photoshop next month. I'll learn the proper way to do what I was trying. Thanks for all your information and help everyone.