5 Replies Latest reply on Jan 11, 2010 1:03 PM by tigressa303

    Optimizing Graphics




      I have a button graphic that consists of a rounded corner square, four thin rectangles, and about twelve lines (1px stroke). Each of the thin rectangles and lines were the same width in Illustrator, with even space vertically, and centered within the square. The lines were grouped separately from the rectangles and everything was within its own layer. I imported this button with the rest of my mock-up into Catalyst.


      Every time I try to optimize the graphic, something shifts either 1px up or down. It also changes the width of the lines randomly - 1px. I changed the widths to be equal, and attempt to align the horizontal centers, but everything still looks way off. I tried using a guide and aligning the centers of all the shapes, and it still is really inconsistent.


      I've also grouped the objects differently, then optimized, then created the button, but every time, something shifts.


      Any troubleshooting ideas would be greatly appreciated!

        • 1. Re: Optimizing Graphics
          acath Level 4



          Can you post before and after screenshots? That will help us figure out what's going on.



          • 2. Re: Optimizing Graphics
            tigressa303 Level 1

            It looks like I have a .25pt stroke in Illustrator instead of a 1px stroke. But even if I try to realign them, it never aligns flush on the left and right.



            • 3. Re: Optimizing Graphics
              acath Level 4

              Hi Tigressa,


              You're probably running into what we call "pixel alignment" issues.


              AI supports very precise sub-pixel object placement because it can output to print (where pixels don't really matter). However, these objects look blurry when displayed on a computer monitor (where pixels do matter). You can see this simply by drawing a rectangle in AI at 100% zoom. Objects in FC must be aligned on pixel boundaries because it exclusively outputs to a computer monitor. When you import and manipulate artwork, FC automatically aligns it to pixel boundaries. This is good because your blurry rectangle will become not blurry, but it's not so good because small fiddly objects don't look exactly right. That's probably what's happening to you.


              The best method for maximizing fidelity is to ensure that all objects are aligned on pixel boundaries in AI. This has some subtleties, so you'll probably have to experiment to be able to do it reliably. The most obvious pitfall that I know of is that AI aligns rectangles from the center of their strokes, while FC aligns them to the edge of the stroke. So if you have a 1px stroke, you may have to place it 0.5px off of where AI would naturally place it.


              Good luck!



              • 4. Re: Optimizing Graphics
                Tvoliter Adobe Employee

                Here is a great video that covers pixel alignment in Illustrator as well as other tips on prepping artwork for import into Catalyst:

                http://tv.adobe.com/watch/max-2009-design/structuring-ui-design-comps-for-use-in-flash-cat alyst



                1 person found this helpful
                • 5. Re: Optimizing Graphics
                  tigressa303 Level 1

                  I'll need to realign things to a grid in Illustrator to ensure more accuracy.


                  Our team wanted me to play with Catalyst and see if it will be viable for our Flex development. I like the application so far - I just really wish it was out of Beta. I am running Vista 64bit, and with this comp, Catalyst takes a whole gig of memory. Optimizing graphics seems the best way to go.


                  Thank you for your help!


                  Lauren ^__^