7 Replies Latest reply on Apr 23, 2012 6:54 AM by Eugene Tyson

PLEASE HELP! How do I stop pixelated edges when I rotate images?

KimPflaum Apr 23, 2012 12:08 AM

I am designing for the web in CS5 - and everytime I rotate the product images on an angle the edges go all jittery when doc is at 100% (Both when it is exported and in InDesign).

Yes InDesign is set to Highest image quality, and the images themselves are set to Highest display quality.

Yes I've used the right export options - I export at highest qualtiy - but the images are (and have to be) 72DPI because they are for web.

Yes I have the actual PPI and Effective PPI both at 72.

Images are PNG files to preserve transperancy and to be web friendly.

You can see in this shot below that the non-rotated image (Dinner Quiz) looks great, but the other angled images look awful.

Please help! I've been using InDesign for years but never had this trouble until I used CS5 I don't think.

1. Re: PLEASE HELP! How do I stop pixelated edges when I rotate images?

Peter Spier Apr 23, 2012 1:52 AM (in response to KimPflaum)

This is a fact of life with low resolution imagery or on-screen display of any edge which is not truly horiozontal or vertical.

Your screen uses rectangualr pixels for dispalying the image, and pixels are either lit or not lit, you can't have a pixel that is half black and half white, for example. Diagonal and curved lines must be represented by a series of short horizontal and vertical segments (these sements can be as short as one pixel in each direction) that look like stair steps. Imagine drawing the outline of your image on graph paper and being forced to follow the grid lines to get from Point A to Point B -- that's what you are seeing on your screen.
1 person found this helpful
Like Show 0 Likes(0)

Actions
2. Re: PLEASE HELP! How do I stop pixelated edges when I rotate images?

KimPflaum Apr 23, 2012 2:16 AM (in response to Peter Spier)

Yeah, thanks! I understand that, but what would be a way to get around it so my boss is happy with what the photos look like?
Like Show 0 Likes(0)

Actions
3. Re: PLEASE HELP! How do I stop pixelated edges when I rotate images?

angelo lapus Apr 23, 2012 2:26 AM (in response to KimPflaum)

try to right click the image on your library and turn the smooth property to "on".
Like Show 0 Likes(0)

Actions
4. Re: PLEASE HELP! How do I stop pixelated edges when I rotate images?

Peter Spier Apr 23, 2012 2:39 AM (in response to KimPflaum)

KimPflaum wrote:

Yeah, thanks! I understand that, but what would be a way to get around it so my boss is happy with what the photos look like?
The thing about facts of life is you don't get around them.

Take a look at similar images elsewhere on the web. Do they look better?

Resolution on the web doesn't exist, by the way, only pixel dimensions, so it's the number of pixels you use to make the image that counts, not a physical size at which those pixels will be represented in print (that's what resolution means).
Like Show 0 Likes(0)

Actions
5. Re: PLEASE HELP! How do I stop pixelated edges when I rotate images?

BobLevine Apr 23, 2012 5:43 AM (in response to KimPflaum)

I assume this a PDF being viewed on screen? You may have better luck rotating the images in Photoshop before placing them in ID.

Bob
Like Show 0 Likes(0)

Actions
6. Re: PLEASE HELP! How do I stop pixelated edges when I rotate images?

Peter Spier Apr 23, 2012 6:44 AM (in response to BobLevine)

OP says "designing for the web in CS5" so I don't see that as PDF, but I suppose it's open to interpretation.
Like Show 0 Likes(0)

Actions
7. Re: PLEASE HELP! How do I stop pixelated edges when I rotate images?

Eugene Tyson Apr 23, 2012 6:54 AM (in response to Peter Spier)

Well if it is a PDF then I suggest saving the images as 96 ppi - as I've found that's what Acrobat is set to display imges at by default. I may be wrong.

Usually though, for the web PDFs I do I downsample to 150ppi so they look ok when someone outputs them from their home printer.
Like Show 0 Likes(0)

Actions