Skip navigation
Currently Being Moderated

small icon shapes become fuzzy

Feb 29, 2012 12:23 PM

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.

 
Replies
  • Trevor Dennis
    5,925 posts
    May 24, 2010
    Currently Being Moderated
    Feb 29, 2012 12:43 PM   in reply to Eric Greenfield

    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.

     
    |
    Mark as:
  • Noel Carboni
    23,523 posts
    Dec 23, 2006
    Currently Being Moderated
    Feb 29, 2012 2:06 PM   in reply to Eric Greenfield

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 29, 2012 9:16 PM   in reply to Eric Greenfield

    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.

     
    |
    Mark as:
  • Noel Carboni
    23,523 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 1, 2012 4:43 AM   in reply to Eric Greenfield

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 1, 2012 6:15 AM   in reply to Eric Greenfield

    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.

     
    |
    Mark as:
  • Noel Carboni
    23,523 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 2, 2012 12:41 PM   in reply to Eric Greenfield

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 2, 2012 1:09 PM   in reply to Eric Greenfield

    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..

     
    |
    Mark as:
  • Noel Carboni
    23,523 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 2, 2012 2:17 PM   in reply to Eric Greenfield

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 3, 2012 11:36 PM   in reply to Eric Greenfield

    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

     
    |
    Mark as:
  • Noel Carboni
    23,523 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 4, 2012 10:48 AM   in reply to Eric Greenfield

    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

     
    |
    Mark as:
  • Noel Carboni
    23,523 posts
    Dec 23, 2006
    Currently Being Moderated
    Mar 4, 2012 11:48 AM   in reply to Eric Greenfield

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points