Participant

Question

CS5 export to transparent png - not working

Forum|Forum|14 years ago
November 5, 2011
5 replies
32727 views

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

This topic has been closed for replies.

M

Marcus Turtle

Participant

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

Participant

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

Inspiring

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?

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.
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.

A

AsChi75

Participant

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...

M

Mr Martineau

Participant

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

A

Anonymous

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

smartwebby

Participant

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

Linda Nicholls

Participating Frequently

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded