26 Replies Latest reply on Mar 22, 2010 7:58 PM by pixlor

    Ugly anti aliasing in Fireworks CS3

    Vovka_Solovev
      Fireworks has a bad method for creating anti aliasing.

      There two problems:
      - only 4 colors to paint the edge of the object
      - extra pixels on the acute edge

      The image of both problems

      How to solve these problem now, and whether they would be resolved in the future though?
        • 1. Re: Ugly anti aliasing in Fireworks CS3
          pixlor Level 4
          Try making your object 2 or 4 times larger than you ultimately want, then reduce it to the right size. See if that gives you a more satisfactory result.

          • 2. Re: Ugly anti aliasing in Fireworks CS3
            Timusco
            pixlor is right.. You need to fix the size ...

            Troy
            http://dominor.com
            • 3. Re: Ugly anti aliasing in Fireworks CS3
              Vovka_Solovev Level 1
              With reduction I will lose image quality and details mess up in pixel grid.
              • 4. Re: Ugly anti aliasing in Fireworks CS3
                pixlor Level 4
                If you want your final image to be 25 pixels, and you make it 100 pixels then reduce by a factor of 4, then the result is 25 pixels. Your pixel grid stays just fine.

                Before you claim you'll lose image quality, TRY it.

                You asked for a way to solve the problem. This is a way.
                • 5. Re: Ugly anti aliasing in Fireworks CS3
                  Vovka_Solovev Level 1
                  Of cource I try it. And I got a bad result.
                  Maybe You can show me an example?
                  • 6. Re: Ugly anti aliasing in Fireworks CS3
                    pixlor Level 4
                    Okay....

                    I set "Pix" in a script font, which is about the worst thing you can do. I made two copies. One at 25 pt and one at 100 pt, which is 4 times larger. The 25 pt string is 20 pixels high and the 100 pt string is 80 pixels high. I exported the image, reduced it to 1/4 of its size, and added it back into the original image for comparison.

                    Here are two screen captures, one at 300% and one at 100%.
                    font alias test at 300%
                    font alias test at 100%
                    The reduced graphic is shown with a drop shadow. As you can see, the reduced version of the 100pt string exactly lines up with the guidelines for the 25pt string. It also is a better reproduction of the font characters.

                    (Note that I would never use this font at this size.)

                    As long as you reduce by the same factor you increase by, your math will work out.

                    Here's another example I found in my Photobucket account when I saved these examples for you: doubling and halving Arial text
                    • 8. Re: Ugly anti aliasing in Fireworks CS3
                      Hamoth
                      This solution isn't helping me at all with the exact same problem.

                      I have a drawing of a palm tree that looks fine at any size in illustrator, but when imported (at ANY size) into FireWorks, still shows what I call pixel "dingleberries" at the ends of acute angles. For a palm frond this gets ugly fast.

                      I've done a work around by taking a screen shot in illustrator and then using that, but it seems like a less than ideal situation.

                      Here is a link to an image that showcase my similar problem.
                      http://www.techism.com/images/online_resources/fireworks_antialiasing_illustrated.gif
                      • 9. Re: Ugly anti aliasing in Fireworks CS3
                        JoeDaSilva Level 4
                        If I don't need a vector version of the file anymore (not saying that's the case for you), I just export the Illustrator file out at 300DPI as a Photoshop PSD, then import that into Fireworks.

                        You can also try downsaving your Illustrator file in the version 8 format, then importing that into Fireworks.
                        • 10. Re: Ugly anti aliasing in Fireworks CS3
                          Hamoth Level 1
                          Thanks for the quick reply!

                          Converting isn't a problem, since it's bringing the vectors in perfectly. It's just rendering the vectors that I am having problems with.

                          Like I said, the screen shot worked for my current project, but I keep butting heads with FW Anti-aliasing issues and am hoping to foster a deeper discussion that can produce some answers to my ongoing problems on this front.

                          I love FireWorks and don't even have Photoshop anymore. All the more reason for me to figure out what's going on with the anti-aliasing and make some noise about this.
                          • 11. Re: Ugly anti aliasing in Fireworks CS3
                            pixlor Level 4
                            Oh wow! How strange!

                            I see that it isn't on all the apexes....apexi?...er...palm frond points. Is it possible that you have multiple nodes at the end of those points? When you zoom in tight, and delete a single node, does the palm frond point disappear?

                            What vector format are you exporting in? (Fireworks does better with .ai than .eps.)

                            It doesn't fix the problem, but can you import the vector file, make a large image, export that to a bitmap format, import the bitmap and resize the bitmap smaller with good visual results?
                            • 12. Re: Ugly anti aliasing in Fireworks CS3
                              Hamoth Level 1
                              These are single nodes on the ends...


                              My method to bring in the vectors is to copy from Illustrator and to paste into Fireworks. This flawlessly copies the shape if not the color information.

                              Here's a link showing the two compared:
                              http://www.techism.com/images/online_resources/fireworks_illustrator_compared.jpg

                              Here's a vector .png for you see for yourself:
                              http://www.techism.com/images/online_resources/tree.png
                              • 13. Re: Ugly anti aliasing in Fireworks CS3
                                Level 7
                                Hamoth wrote:
                                > These are single nodes on the ends...
                                >
                                >
                                > My method to bring in the vectors is to copy from Illustrator and to paste
                                > into Fireworks. This flawlessly copies the shape if not the color information.
                                >
                                >
                                > Here's a link showing the two compared:
                                >
                                > http://www.techism.com/images/online_resources/fireworks_illustrator_compared.jp
                                > g
                                >
                                > Here's a vector .png for you see for yourself:
                                > http://www.techism.com/images/online_resources/tree.png
                                >
                                >
                                Can you supply a link to the original AI file as well?

                                --
                                Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                                http://www.communityMX.com/
                                CommunityMX - Free Resources:
                                http://www.communitymx.com/free.cfm
                                ---
                                .:Adobe Community Expert for Fireworks:.
                                Adobe Community Expert
                                http://tinyurl.com/2a7dyp
                                ---
                                See my work on Flickr
                                http://www.flickr.com/photos/jim_babbage/
                                • 14. Re: Ugly anti aliasing in Fireworks CS3
                                  pixlor Level 4
                                  quote:

                                  Originally posted by: Newsgroup User
                                  Can you supply a link to the original AI file as well?
                                  --
                                  Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.



                                  Yes, please.

                                  I still think there may be something funky about the nodes that have the "dingleberries," because they don't all have them. If they were on all the nodes, then I'd be concerned it was a program problem. Since the artifact only appears on some of the nodes, I think it's something with the node. For instance...if the nodes aren't angle nodes, but have short handles and the direction is backwards, you'll get a tiny loop. If that's the case, then maybe Fireworks attempts to show that loop and you get a single pixel on those nodes no matter what resolution.
                                  • 15. Re: Ugly anti aliasing in Fireworks CS3
                                    Hamoth Level 1
                                    The ones with DingleBerries have a more acute angle - that's the difference.
                                    I provided a link to the vector PNG above so you can inspect the outlines yourself.

                                    All the same, here's an illustrator file to compare to...

                                    The Illustrator File

                                    But that file is unnecessary:
                                    I can replicate this without using illustrator at all. In the file below, I just drew a sharp triangle with a long small angle, and whala. Instant dingleberry.

                                    Try it yourself, replicate a shape like this one using your pen tool. The more acute the more likely the pixel dangler appears.


                                    The Triangle Test
                                    • 16. Ugly anti aliasing in Fireworks CS3
                                      pixlor Level 4
                                      Hmm.

                                      I've been looking carefully at the Illustrator shape. Not all the sharpest angles result in dingleberries and there's a dingleberry on an angle that is less sharp than many others that do not have them. For example, the cutout shapes in the interior? The one with the sharpest point doesn't have a dingleberry, but there's a dingleberry on one of the others.

                                      It's very curious.

                                      Later...some points with dingleberries do, in fact, have tiny loops on the end. But not all.

                                      I'm still playing around with your file, though....
                                      • 17. Re: Ugly anti aliasing in Fireworks CS3
                                        pixlor Level 4
                                        Well...I've examined your vector file in a fair amount of detail, comments referenced to this image.

                                        For most of your points, I don't know why you have the dingleberries (light blue highlighting). Yes, most of them are on sharp points, but there are a few points that are equally sharp that do not have dingleberries (green highlighting) and there are a few non-sharp points with dingleberries (purple highlighting).

                                        You do, however, have a number of places where you have loops off the points and where you have such sharp lines that they are unlikely to register on a Web-sized graphic or render well in print (orange highlighting). These should probably be cleaned up.

                                        Your shape is composed of 28 sub-paths. I copied the composite path to a new layer, decomposed it, removed the objects that make up the fronds and the spaces between them, and found there were 14 objects left (black lines). These small and unnecessary shapes should probably also be cleaned up, as well...especially as some of them do contribute to the dingleberry population.

                                        As for the remaining dingleberries, I think you'll find that, if you round the tips of the palm fronds very slightly (zoom in to maximum magnification in Illustrator), you won't have problems in Fireworks. I played with this a bit and it'll just take some experimentation.

                                        Good luck!
                                        • 18. Re: Ugly anti aliasing in Fireworks CS3
                                          Hamoth Level 1
                                          First, I want to say that I appreciate the attention this thread has been getting from all of you.

                                          While I know that any graphic can eventually be coached around the bug, I think it's undeniable at this point that this is a very clear bug in the software, right? I mean...there's a problem with the anti-aliasing algorithm.

                                          While it's true that any given vector graphic can be coached into a display eventually, this is still a real problem - especially for people working on deadlines and who deal with a lot of vector drawings...With roughly 60 artifacts in my version, this is pretty time consuming, now realize that this is one of dozens of drawings that I was hoping to add to my assets for just one single project.

                                          Still, if I can move forward with this project by only having to fix 14 vertexes, then great!

                                          Unfortunately when I tried this, it didn't seem to work for me. I cleaned it up and removed all compound paths, all extraneous shapes, and left it as a single outline. At two web appropriate sizes, I still see around 60 errors in rendering. Further, When I scaled the object again, which points showed problems changed! It seems that how the point lays on the pixel grid may have something to do with this.

                                          I also could not locate any of these loops. I opened the file you linked to, but it was flattened already. I looked at the areas marked orange, and some had handles, but these were not inverted to form loops.

                                          Given that when I draw a triangle at an acute angle 100% of the time, this effect is produced, I am confident that removing all curves and handles would not fix this problem or significantly reduce it.

                                          It looks to me like this is just plain buggy anti aliasing...This could probably be patched pretty easily, or maybe an extension could fix it?

                                          A file complete with vectors that you can examine in Fireworks is attached IN THIS LINK.

                                          In the end, you can see the two small copies have different places where this shows up. It's nearly impossible to predict which points will have this problem, leaving the artist with the sole option to round the tips of all sharp corners which is kinda silly and produces a different nuance when reduced (edges will look fat instead of whispy).

                                          Thoughts?
                                          • 19. Re: Ugly anti aliasing in Fireworks CS3
                                            pixlor Level 4
                                            I agree...there's more to the issue than just the few "real problems" I could find in your illustration.

                                            To make it work in Fireworks, even after you fix the "real problems," you'll have to spend quite a bit of time tweaking, and that isn't a great option. Plus, the appearance (or not) of the dingleberries isn't predictable based on some threshold angle. At least, I couldn't find one.

                                            • 20. Re: Ugly anti aliasing in Fireworks CS3
                                              Hamoth Level 1
                                              I think our ideal next step is to see if there's a way to trick Fireworks into anti aliasing the object correctly, and to see if Adobe knows this bug.

                                              I'll piddle around with this and see if I can come up with any work around.

                                              Does anybody here know if there's a public bug list, or a way to see if Adobe knows about this?
                                              • 21. Re: Ugly anti aliasing in Fireworks CS3
                                                Level 7
                                                Hamoth wrote:
                                                > I think our ideal next step is to see if there's a way to trick Fireworks into
                                                > anti aliasing the object correctly, and to see if Adobe knows this bug.
                                                >
                                                > I'll piddle around with this and see if I can come up with any work around.
                                                >
                                                > Does anybody here know if there's a public bug list, or a way to see if Adobe
                                                > knows about this?
                                                >
                                                >
                                                http://www.adobe.com/cfusion/mmform/index.cfm?name=wishform

                                                --
                                                Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                                                http://www.communityMX.com/
                                                CommunityMX - Free Resources:
                                                http://www.communitymx.com/free.cfm
                                                ---
                                                .:Adobe Community Expert for Fireworks:.
                                                Adobe Community Expert
                                                http://tinyurl.com/2a7dyp
                                                ---
                                                See my work on Flickr
                                                http://www.flickr.com/photos/jim_babbage/
                                                • 22. Re: Ugly anti aliasing in Fireworks CS3
                                                  Level 1
                                                  Wow, the things that happen while I was on vacation....sheesh. :P

                                                  We fixed this nasty bug in updater 1 (Build 1213) for Fireworks CS3. Can you please verify the build number you are currently using? You can find this out by going to About Fireworks on Mac or on PC, go to: Window > About Fireworks...
                                                  • 23. Re: Ugly anti aliasing in Fireworks CS3
                                                    pixlor Level 4
                                                    Ah. Mine build is 1188 (version 9.0.0.118).

                                                    When I first arrived on this forum, there were many posts about the update breaking Fireworks, so I set the Adobe updater so it would NOT update Fireworks. So far, I've been okay in my own work. Guess it kept me from helping another user though.... My apologies, Hamoth!

                                                    Every once in a while the updater tries to update something else....but all the updates have failed. The updates are usually for apps in the suite I don't use, though, so I haven't worried about it. Maybe I'll give it a try this weekend.

                                                    Thanks Alan. :)
                                                    • 24. Re: Ugly anti aliasing in Fireworks CS3
                                                      Hamoth Level 1
                                                      Ahah. I am on version 8.

                                                      Lol.


                                                      • 25. Re: Ugly anti aliasing in Fireworks CS3
                                                        ManticoreDentist

                                                        I have this same problem, and am just trying to rotate text 90 degrees counter clockwise.

                                                         

                                                        My goal is to have an Arial 11 pt. font displaying facing to the left.  This used to be very easy in Fireworks MX.  Now it's darn near impossible. 

                                                         

                                                        Formerly I would:

                                                         

                                                        1. Create Arial 11 pt text string with No Anti-Alias
                                                        2. Select text and convert to paths and/or flatten it
                                                        3. Rotate it

                                                         

                                                        It would display with precision and clarity once rotated.

                                                         

                                                        ...Now I've tried a whole host of things.

                                                        • attaching it to a path
                                                        • converting to paths
                                                        • flattening
                                                        • making it very large point, then shrinking it down, as recommended in this thread

                                                         

                                                        Has anyone else figured out the secret of clear, No Anti-Aliased rotated text?

                                                         

                                                        p.s. I am ver 9.0.1 of FW CS3

                                                        • 26. Re: Ugly anti aliasing in Fireworks CS3
                                                          pixlor Level 4

                                                          I tried it. That's really weird!

                                                           

                                                          However, I exported the straight text as a .gif, opened that file, and that seemed to rotate okay.