7 Replies Latest reply on Mar 17, 2010 10:58 PM by pixlor

    Fireworks Text and Vectors Blurring

    azmatswabi Level 1

      I always have this issue to think about text and vector handling of adobe fireworks....Look at these images


      this text on the left has beeen compressed at jpeg settings of 80...and the other one at 90...text in the first image looks blurry and if zoomed in ,,one see some dark blurry shades or something....same is the case with the borders on the red rectange ....With the 90 compression...result is much better but image size increases a lot...Also there are times when the same shades appear around the edges of rectangles etc also...

      I read this article
      http://kb2.adobe.com/cps/217/d6f2172a.html.... so is it of any help in this regard?

      and text in photoshop at even 70 compression look better than in fireworks...Adobe claims to be using photoshop like text engine in fireworks cs4 but i am having this problem in cs4 version as well...I hope some gurus out here will help me out.

        • 1. Re: Fireworks Text and Vectors Blurring
          pixlor Level 4

          What you're seeing has nothing to do with the article you linked to.


          JPEG stands for Joint Photographic Experts Group. The file format was designed for photographs or images where the luminance and color information varies slowly from one pixel to another. The compression technique represents the luminance and color information as a mathematical function, but it throws out the detail terms, according to the level of compression. The more compression/lower quality, the more detail representation is thrown out. This is why the format is called "lossy." You lose information when you save to this format. The less you compress an image (higher quality), the less information is lost, but the larger the file is. There's no one optimal compression level, each image must be optimized according to its own content.


          In CS4, Fireworks is using the Photoshop text engine, but this is not the same as the export engine.


          The design you have is not a photograph and the information does not vary slowly from one pixel to another in the essential areas. In fact, you have hard edges - around the text and at the borders. The JPEG compression scheme is not good at edges, unless you set the compression low/quality high.


          In general, a graphic (non-photographic) image, is better off as a .gif or .png. Given that you have a gradient background behind your text, you might try a PNG24. Be careful when you export that you don't use the same name as your Fireworks source file. (One tip I picked up from this forum is to name my working Fireworks documents with.fw.png and then use the plain .png for the flattened, exported files.)

          • 2. Re: Fireworks Text and Vectors Blurring
            azmatswabi Level 1

            Pixlor Thank you very much for such a detailed reply...I was badly awaiting for it....but still i have to ask again.....if compression levels of a non photographich image(containing text) on photoshop and fireworks are the same...i.e 80...so then why is their more compression and loss in fireworks which makes things blurry  , than in photoshop...?What i always have intended to get is a cool crispy layout in fireworks but lagged behind...though i can do it in photoshop....here is a link towards a great article regarding that Polish in webdesign..http://psd.tutsplus.com/tutorials/designing-tutorials/elements-of-great-web-design-the-pol ish/   which is for photoshop infact.

            If i try to do it in fireworks....things will still improve but not the fullest....I hope you understand what my concerns are...We dont have to think much about the image quality and filesize tradeoffs in photoshop than we do it in fireworks because what i have noted is...that to bring about same image quality in fireworks as it is in photoshop....file sizes shoot up alarmingly.




            • 3. Re: Fireworks Text and Vectors Blurring
              pixlor Level 4

              When you export anything to a jpeg, you do need to concern yourself with the trade-off between quality and file size. Always. The JPEG format is lossy; every time you save to that format, you lose data. There's no getting around it. It's the math that is expressed in the code.


              I didn't say they PS and FW were the same. I have the CS3 suite and Photoshop exports jpgs with quality from 0-12. Fireworks exports with quality from 0-100. They're clearly different. What is true is that

              1. the lower the quality value the more the compression technique will be visible, in either program
              2. your graphic image is not well-suited to the JPEG format


              If you want crisp graphic images, export as a PNG24. There will be no loss in detail, no JPEG artifacts, and no color shift.


              Your a80.jpg is 12.5k. If I open it in FW and export it as a PNG24, I get a file that's slightly over 10k. From your original source, a 24-bit .png would be smaller than the 80 quality .jpg and there would be zero loss of quality. Web graphics is always a trade-off. You need to understand when one format is better-suited for a given purpose and what the advantages and disadvantages are.

              • 4. Re: Fireworks Text and Vectors Blurring
                daaave Level 2

                have you tried the preset "jpeg - better quality" setting in fireworks? (check via the little arrow on the top right the optimise panel and see that sharpen jpeg edges is ticked)

                • 5. Re: Fireworks Text and Vectors Blurring
                  azmatswabi Level 1

                  Thanks you very much pixlor again for your replies.Yes i also tested it and PNG seems to be the better option and i hope it has got no browser issues.

                  One more thing i want to ask.It is about the paste inside command. I have a rectangle and want to paste inside into it a featured white ellipse for the shining purpose.I am able to do it.But then if i change opacity of the ellipse inside that gray rectangle after selecting it....the opacity of the whole rectangle gets changed rather than the ellipse contained in it..The following images shows what i am trying to achieve.




                  So what is the better way of doing this thing?so that just the opacity of the insided ellipse is changed.Or is there PS like way of controlling the spread of the feature of an object using the marquee tool.SO THAT the spread of my ellipse doesnt flow out of the boundaries of the gray rectangle.Should i flatten the featured ellipse first in order to achieve it?

                  • 6. Re: Fireworks Text and Vectors Blurring
                    daaave Level 2

                    did you try the preset "jpeg - better quality" setting in fireworks?  (check via the little arrow on the top right the optimise panel and see  that sharpen jpeg edges is ticked)??

                    • 7. Re: Fireworks Text and Vectors Blurring
                      pixlor Level 4

                      The PNG24 format is fine in browsers (except really old ones). It's the transparency of the PNG32 format that can cause trouble.



                      As for your ellipse, you can probably accomplish the same effect in more than one way. Given the way you've stated what you're trying to do, you might try making a mask:

                      • Make a white rectangle that is the same size as the rectangle you have
                      • In the Layers panel, make sure the white rectangle is above the ellipse (and aligned with your original rectangle)
                      • Select the white rectangle and your ellipse
                      • Go to the menu: Modify > Mask > Group as Mask


                      Now you can vary the opacity of your masked ellipse independently from the underlying rectangle.


                      Where a mask is white, the masked object will be visible. Where a mask is black or transparent, the masked object will be transparent. (Where a mask is grey or semi-transparent, a masked object will be proportionally semi-transparent.) Masks can be vector or bitmap objects.