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.
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.
-Noel
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.
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
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
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.
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.
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
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
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
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
North America
Europe, Middle East and Africa
Asia Pacific