1 Reply Latest reply on Oct 8, 2010 11:15 PM by pixlor

    Trying to export html to dreamweaver but save images as pngs.

    Wil Horneff Junior Level 1

      I'm designing a floating site.  My workflow is PS=====>Fireworks====>Dreamweaver.  I made a navbar in FW with a transparent background and exported html to dreamweaver.  I inserted the fireworks htm, put it online and it looks terrible.  You can see it here:




      Don't worry about the portfolio button, I know what's going on there.  But I can't figure out why there is "stairstepping" on the logo and on all the navbar buttons.  This is the first time I've ever created a floating site.  I just put a jpeg for repeat using the dreamweaver css, and then inserted the rest in a table. I got some good replies in dreamweaver forums, but they all centered around saving the images when you export as pngs or as transparent gifs with a green matt.  How can I do this with fireworks cs3?


      Could anyone give me an idea of what I'm doing wrong?  Thanks so much.



        • 1. Re: Trying to export html to dreamweaver but save images as pngs.
          pixlor Level 4

          The GIF format supports only one value of transparency. Your text, when anti-aliased against whatever background in Fireworks (transparent?), probably looks fine. When you export, though, you lose the smooth transition. (If you zoom in, you can see the blending of text to background and that's what you're losing.)


          You have two options.


          You can still use the GIF format. Just pick a green value out of your background image and use that for your canvas. Then, when you export, set that color to transparent. Where the pixels of the text and that color blend for the anti-aliasing, you'll have opaque pixels, but they'll look all right against your background image.


          Use a PNG8, which is an indexed palette like the GIF, but it supports semi-transparent colors. When you go to export, you may want to add more colors using the eye dropper tool, as FW doesn't quite pick out all the values it might for a smooth image. See this article:




          (I like exporting through File>Image Preview, myself.)