17 Replies Latest reply: Mar 4, 2012 11:48 AM by Noel Carboni RSS

    small icon shapes become fuzzy

    Eric Greenfield Community Member

      I download the twitter bird icon and I wanted to make a tiny little icon for a web page.

      sounded easy except that i cant get it to look good.

       

      Even though its vector, it comes out fuzzy and terrible.

      I played with the grid settings but it still does not look right.

        • 1. Re: small icon shapes become fuzzy
          Trevor.Dennis CommunityMVP

          Just wondering why you think it is a vector graphic?  Because it sound slike it is a bitmap.   If you go back to Google Images, and click on Large, I bet you'll find no shortage of big fat Twitter Birds.

          • 2. Re: small icon shapes become fuzzy
            Noel Carboni Community Member

            I don't know how small you're making it, but it's not uncommon for tiny icons to become difficult to read simply because of a lack of resolution (display monitors are mostly about 100 ppi give or take).  Maybe one day we'll have displays with the resolution of iPhone's Retina display, but not yet.

             

            Compare this graphic with my avatar over on the left.  Them's the limits of the medium.

             

            PSAvatarBig.png

             

            -Noel

            • 3. Re: small icon shapes become fuzzy
              Eric Greenfield Community Member

              its an eps file...its 100% vector

              i brought it in to ps and it loses its edges and becomes feathered

              my only alternative was to export from illustrator

               

              but its weird, why would it get all blurry in ps?

              • 4. Re: small icon shapes become fuzzy
                Chris Cox Adobe Employee

                If you place an EPS file in a Photoshop document, it gets rasterized at the resolution of that document.

                If you create vector shapes in Photoshop, they get rasterized at the resolution of the document.

                When you change the resolution of the document, then you can get more precise edges, but they will still have antialiasing.

                • 5. Re: small icon shapes become fuzzy
                  Noel Carboni Community Member

                  Everything in the above image is vector as well.  But nothing - I repeat NOTHING - gets displayed on your screen without being rasterized.  Computers only know how to display pixels.

                   

                  -Noel

                  • 6. Re: small icon shapes become fuzzy
                    RenéG Community Member

                    Eric Greenfield wrote:

                     

                    but its weird, why would it get all blurry in ps?

                    Upload that image so we can see better what's happening.

                    • 7. Re: small icon shapes become fuzzy
                      Eric Greenfield Community Member

                      ok so I dont know why or how but when I copy pasted the vector bird from illustrator to photoshop a second time it went much nicer.

                       

                      if computers only know to display pixels, why in illustrastor is there no anti aliasing or feathering on shapes i create?

                      and why in photoshop is there?

                      • 8. Re: small icon shapes become fuzzy
                        Noel Carboni Community Member

                        You WANT jaggies?  Because that's what you get when there is no antialiasing.

                         

                        Please put some images up here to show what you're seeing if you really want to take this discussion further.  You may be having a bona fide problem, but without being able to compare with what we know it's just guesswork.

                         

                        -Noel

                        • 9. Re: small icon shapes become fuzzy
                          Eric Greenfield Community Member

                          Screen Shot 2012-03-02 at 1.57.20 PM.png

                          here is a vector eps screenshot

                          below, its in photoshop via copy and paste from illustrator.

                          its much better today. yesterday it was really bad. I think by changing the grid units it made it better but im not sure. still its a bit jagged...

                           

                          Screen Shot 2012-03-02 at 3.52.53 PM.png

                          • 10. Re: small icon shapes become fuzzy
                            Chris Cox Adobe Employee

                            You pasted into a very low resolution document, and it looks like you zoomed in after that.

                            If you zoomed into the pixels of your original screen shot, it would look just as bad..

                            • 11. Re: small icon shapes become fuzzy
                              Noel Carboni Community Member

                              To further what Chris has said, you've defined your Photoshop document to have a particular pixel count (horizontal x vertical) as well as a pixels/inch setting in its metadata.  The image transfer process is taking those into account.  What are they?  Use Image - Image Size to find out.

                               

                              -Noel

                              • 12. Re: small icon shapes become fuzzy
                                Eric Greenfield Community Member

                                it was for the web so it was 72 ppi

                                the image size was 1400 by 1000px

                                and i zoomed in to 200%

                                 

                                but at 100 you can still see some zigzag because a pixel cant be halfed... but somehow a vector can be half a pixel?

                                • 13. Re: small icon shapes become fuzzy
                                  arc fixer Community Member

                                  Hi Eric.

                                   

                                  As you know, vectors are mathematical descriptions of paths that are assembled to create an image. To see the image, the equations must be rendered. For screen, they will be rendered as pixels. That is, rasterized. To do this, Ps overlays the path on the pixel grid. At the perimeter, the path might intersects the pixels only partially. Where this happens, the path is aliased. (If ant-alias isn't selected.)

                                   

                                  What is aliasing? In general, aliasing is the conversion of a continuous signal into a non-continuous signal. Generally, it refers to electromagnetic or acoustic signals. It is used to adjust the original signal to avoid interference or unwanted resonances. A smoothly curving sine wave will be converted into one with steps. (More or less.) In our case, the continuous signal is the path. It must be converted into a non-continous signal, the pixel grid. In the case of electromagnetic and acoustic alias, which are done by choice,  a desired result is achieved. But in our case, we alias by necessity, because half a pixel won't render. The result is the jaggies.

                                   

                                  Why the jaggies? Where the path only interects part of a pixel, Ps must decide how to render it. It has 2 options. Render it or not render it. (We're still talking about aliasing here, not anti-aliasing.) Ps decides by calculating the intersection area of the path and the pixel. Less than half, not rendered. More than half, rendered. The result being a stairstep of fully opaque pixels on anything but vertical or horizontal perimeters. The jaggies. We don't want this. So we anti-alias.

                                   

                                  What is anti-aliasing? A way to minimize, not eliminate, the jaggies. How is it done? As in the aliasing above, Ps first calculates the area of intersection of each perimeter pixel. But instead of a straight thumbs up or thumbs down, Ps assigns an opacity to the pixel proportional to the area of intersection. If the path intersects 50% of the pixel, Ps will assign an opacity of 50% to that pixel. It can't render half a pixel, so it renders a full pixel at half opacity. Pixels fully within the path are rendered at 100% opacity. It's as simple as that.

                                   

                                  Below, the diagonal limb of the path intersects 50%  of each pixel. And each pixel is rendered at 50% opacity, yielding the RGB value indicated. The light pixels aren't actually less blue than the others. They are less opaque, and the white showing through yields the lighter value. (129/255=.5) And if you look at very high magnification, you will still see jaggies. But that's as good as it gets.

                                   

                                  AA.JPG

                                   

                                  Below, the diagonal limb crosses each pixel at a different place. Each intersection area is different, and each opacity is different. And the greater the intersection, the higher the opacity. If you do the math on the RGB values of the pixel indicated by the arrow, 165/255=.65, which gives the transparency, or an opacity of 35%. Judging by eye, this is a pretty good match for the area of intersection. If you look really close, you will still see jaggies, but not as obvious as in the above case, because they fade.

                                   

                                  AA1.JPG

                                   

                                  The moral of the story is, if you look close enough, you're gonna see some jaggies. No matter what. Aliased or anti-aliased. The disadvantage of square pixels in a curved world. (One exception: where the shape is a rectangle or square snapped to the grid.)

                                   

                                  If you create the above triangle with the Polygonal Lasso tool and a fill, the shape is a vector when you are drawing it. But as soon as you click the mouse to close the path, it is rasterized, anti-aliased, and converted to a selection. (And maybe saved as a hidden channel until you fill it or delete it.) The vector path is gone (or at least inaccessible). The anti-aliasing is baked in. It's all pixels, and if you scale it up, you scale up the baked in anti-aliasing, which still has a degree of jagginess. The jagginess becomes more visible. The bane of pixel image editing.

                                   

                                  If you create the same triangle with the pen tool, it works just like the Polygonal Lasso Tool until you click to complete the path. Once again, it is rasterized and anti-aliased, but the path is not discarded. It shows up in the Paths palette and the Layers palette and it's live. Now if you scale up (or reshape), the vector path is scaled, not the pixel rendering, and the anti-aliasing is reapplied to the path at the new size. The jaggies aren't scaled up as in the previouse example. The advantage of vector graphics.

                                   

                                  One final note. A shape may anti-alias differently dependent on how it's aligned to the pixel grid at the time it's rasterized. Some results are noticably better than others. This is most obvious when placing a shape from Illustrator or other vector apps into Ps. Ps now has a Snap to Pixel Grid option, which mitigates this, but the final results will still depend on the actual shape and it's potential for conforming to a square grid.

                                   

                                  I'm not an Adobe engineer by a long shot. But I have done my homework. Most of the above info came from observing the behaviour of Ps. And I'm quite confident that some of it may be correct.

                                   

                                  Whew!

                                   

                                  Peace,

                                  Lee

                                  • 14. Re: small icon shapes become fuzzy
                                    Eric Greenfield Community Member

                                    thanks a lot.

                                     

                                    but I have one question. How is the screen able to show a perfect curve in illustrator when the screen is made of pixels?

                                    the software might be a vector software, but the screen is a pixel based screen.

                                    I thought everything on screen gets rasterized?

                                    but somehow in illustrator its crisp and clear -on screen

                                    • 15. Re: small icon shapes become fuzzy
                                      Noel Carboni Community Member

                                      Answer:  It's not perfect.  The pixels are so small (on the order of 100 per inch) that you're not perceiving them.

                                       

                                      You're sensing the difference in how Photoshop represents images vs. how Illustrator represents them.  Photoshop is fundamentally a photographic image manipulation application, and shapes are rasterized to the pixel dimensions you have defined.  Illustrator represents them as vector objects, always rasterized to the pitch of your display, rather than to the resolution of your image..

                                       

                                      Notice that Photoshop does NOT pixelate the paths themselves, no matter how closely you zoom in.

                                       

                                      -Noel

                                      • 16. Re: small icon shapes become fuzzy
                                        Eric Greenfield Community Member

                                        ah... I see.

                                        so when I zoom in in illustrator its redrawing as well as changing the ppi?

                                         

                                        while photoshop zoom in just blows up whats there already, no redraw

                                        • 17. Re: small icon shapes become fuzzy
                                          Noel Carboni Community Member

                                          Essentially yes.

                                           

                                          Though if you were to look under the covers you'd find that Photoshop does actually does redraw each image pixel as a rectangle comprised of multiple monitor pixels.  When zoomed in sufficiently closely and the Pixel Grid is selected, it even draws lines around each rectangle.  I only mention this because another way to zoom in would be to smoothly mix the pixel colors, which would just make things look fuzzy.  Photoshop is specifically showing you the pixels, on purpose.

                                           

                                          -Noel