13 Replies Latest reply on May 19, 2010 12:14 AM by mariannejayes

    Pixel perfect vector shapes

    cmscss Level 1

      Hi There,


      How do you get Fireworks to display/output sharp edges? I'm using a 10px x 10px grid which I'm snapping to and all my shapes are exact pixel dimensions but still don't get sharp edges.


      Is there a trick to achieving this?



        • 1. Re: Pixel perfect vector shapes
          markerline Level 4

          Although Fireworks has vector tools it is a raster-based application similar to Photoshop which takes some tools from Freehand and implements them.  Someone correct me if I'm wrong but the OP should be using Illustrator for vector-based artwork, right?

          • 2. Re: Pixel perfect vector shapes
            cmscss Level 1

            One of the reasons we're testing Fireworks for all our mockups is because we thought we could go from wireframes to finished site design in the same package. We've already tested Illustrator for this purpose but it's not pixel perfect either.


            If a document is in pixels and the elements are exact pixel dimensions, the vector to bitmap conversion wouldn't have to guess where straight edges should be as the objects are already pixel perfect.


            Anyway, it's obviously not possible to use vector elements which is a real shame for boxes with rounded corners...

            • 3. Re: Pixel perfect vector shapes
              Linda Nicholls Level 4

              Try turning off antialiasing.

              • 4. Re: Pixel perfect vector shapes
                cmscss Level 1

                But what about rounded corners on boxes?

                • 5. Re: Pixel perfect vector shapes
                  Linda Nicholls Level 4

                  Your choices are edges blended into a background color by antialiasing, or the naturally jegged edges of non antialiased edges.  The jaggies are caused by the fact that images are displayed in a matrix of square pixels, which cannot display a perfectly curved line. Antialiasing blurs the edges a little so the stepping from one pixel to another is not so obvious.

                  • 6. Re: Pixel perfect vector shapes
                    cmscss Level 1

                    Thanks for that - I don't have any trouble understanding what anti aliasing is (been doing this much longer than I'd care to mention!)


                    I was just hoping that at least one of the Adobe products would allow us to have pixel perfect straight edges when indicated and anti aliasing when required. But I don't think any of the vector to bitmap algorithms honor objects that are already pixel perfect - it's just applied to everything.



                    • 7. Re: Pixel perfect vector shapes

                      You should try setting stroke alignment to outside or inside of shape to get pixel perfect strokes and set stroke itself to full pixels. As per CSS box model borders are outside of box dimensions, but I prefer setting them to inside in Illustrator so that I can control visual dimensions of blocks.


                      I'm using Illustrator for most of my web designs and the hardest part is to get new objects to be in precise pixel dimensions. Snapping is not pixel perfect unless you turn on pixel preview and snap to pixel options. Drawback of enabling 'pixel preview' and 'snap to pixel' is that smart guides are then turned off.


                      Currently I am looking for a solution to make existing designs pixel perfect. That could be some kind of script which iterates over all selected  objects and rounds position and dimensions to full pixels.

                      It's tiresome to correct hundreds of imperfectly placed and sized objects in designs created by web-unaware designers.

                      • 8. Re: Pixel perfect vector shapes
                        cmscss Level 1

                        Hey Andy,


                        Thanks for the reply - some good tips in there. Although we weren't using snap to pixel we were creating the dimensions by the numbers to exact pixel dimensions.


                        One thing we couldn't find was how to ensure the stroke goes on the inside - is that on the Properties panel or somewhere else. We're using CS4 btw.



                        • 9. Re: Pixel perfect vector shapes
                          cmscss Level 1

                          Found it in the colour swatch popup.



                          • 10. Re: Pixel perfect vector shapes
                            Linus Lim

                            this half and whole pixel was a headache in CS4.

                            with extra stroke alignment and snap to pixels in CS5, it should iron out most of these problems

                            • 11. Floral Vectors in Fireworks CS5

                              Hi Linda,


                              I have a question about a certain thing in Fireworks and you look like the best person to ask, if you wouldn't mind...


                              Iam trying to re-create an effect from a tutorial in Fireworks for a nice floral text effect and part of the tutorial tells me to -


                              "Open the Floral Vector in Fireworks". Do yo know how I would do this? and where? Do I need to download vectors?


                              Would REALLY appreciate some help solving my problem..


                              Many thanks,



                              • 12. Re: Floral Vectors in Fireworks CS5
                                Linda Nicholls Level 4

                                Did the tutorial include a downloadable vector source file? If not, I'd guess you wouild have to download one from someplace like this: http://dragonartz.wordpress.com/2008/08/. Once you have downloaded it, choose File > Open, to open it in Fireworks. Pick a flower from the set, and then copy and paste it into your document.

                                • 13. Re: Floral Vectors in Fireworks CS5
                                  mariannejayes Level 1

                                  Thanks very much Linda!