Skip navigation
Currently Being Moderated

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

Apr 23, 2012 12:08 AM

Tags: #cs5 #image #resolution #export #indesign #rotation #quality #dpi #ppi #pixelate

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.

 

 

Mothers Day Top Products2.jpg

 
Replies
  • Currently Being Moderated
    Apr 23, 2012 1:52 AM   in reply 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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 23, 2012 2:26 AM   in reply to KimPflaum

    try to right click the image on your library and turn the smooth property to "on".

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 23, 2012 2:39 AM   in reply 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).

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 23, 2012 5:43 AM   in reply 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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 23, 2012 6:44 AM   in reply to Bob Levine

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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 23, 2012 6:54 AM   in reply 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.

     
    |
    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