Skip navigation
Currently Being Moderated

Illustrator CS5 PDF Dimensions Incorrect - 72dpi for web

Apr 20, 2013 4:09 PM

Tags: #pdf #artboard #illustrator_cs5 #pdf_dimensions #illustrator_webdesign #pdf_72dpi

Issue in a nutshell: I'm wire-framing sites in Illy CS5 for it's snap to pixel grid features. I have my document set up to use pixels as units, raster effects at 72dpi, and RGB color. So as far as I can tell everything should be formatted correctly. The issues arise when I save the comps to PDF so I can e-mail them to clients. Two things happen, from what I can tell so far, that are most likely related. First, the PDF artboard size doesn't match the Illy artboard size. Comparing 100% zoom size side by side on each, the PDF appears to be 33% too large (i.e. they look identical when the PDF is at 75% zoom and Illy at 100%.) Second, what I thought was a separate problem originally, when placing PSD's at 72dpi they look crisp in Illy and Photoshop but appear blurry when saved as PDF (I'm assuming because of the 33% scale distorting them.) When saving the PDF I've tried using "Smallest File Size", "High Quality Print", and some custom settings (downsampling images to 72dpi) just to see if I can get anything to work. Everything comes out oversized though. Also, I know there are options to export as .png, .jpg, ect... and that you can "Save for Web and Devices." I want to avoid using these if possible because they tend to be slow, don't favor multiple artboards, generally handle text poorly, and are not as good as a PDF for emailing to clients for review.

 

In the reading I've done searching for a solution it looks like most people have their artboard or PDF preferences set up incorrectly. Usually resulting in a drastically larger or smaller image, roughly 4 times, because the file is being saved at 300dpi instead of 72dpi. What throws me for a loop is the 33% scale because I'm not seeing a direct relationship between print quality dpi and web dpi mussing things up. There must be some setting or box I'm not checking to save the file correctly, but am not sure where to go about it.

 

Thanks for all your help, and let me know if you need any more info. 

 
Replies
  • Currently Being Moderated
    Apr 20, 2013 4:31 PM   in reply to arnbly

    arnbly,

     

    You should be aware that at 100% Illy shows your Artboard/Workspace at a physical size corresponding to 72PPI divided by monitor PPI, so if the monitor resolution is 96PPI, it will be at 72/96 * 100% = 75%. To actually get 100% physical size, you should use 133%.

     

    Why? Well, in the old days, monitors had 72PPI, and the full moon was bright (at least when there were no clouds).

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 21, 2013 3:27 AM   in reply to arnbly

    arnbly,

     

    PDF is versatile, but that also means that you can freely show things at different sizes/zoom levels; there are also other uncontrollabilities, such as the ability to use the dreaded (even default) setting Enhance thin lines to uglify your carefully created beautiful text/artwork.

     

    I am afraid you can only try to eductae and instruct your clients.

     

    In any case, they can print the PDF and see the size (if your Artboard corresponds to their paper size and they abstain from funny shrink/expand settings).

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 21, 2013 8:33 AM   in reply to arnbly

    Arnbly,

     

    Forget monitor resolution. It has nothing to do with monitor resolution. Discussion of monitor resolution just confuses the issue.

     

    Comparing 100% zoom size...

     

    That's the key.

     

    You are using two different applications. (Never mind that they are published by the same software vendor.)

     

    Regardless of your monitor's specs, it's neither the monitor's dot pitch (102 PPI) nor its pixel count (1920 x 1080) that makes Illustrator's display of 1" smaller than Acrobat's on that same monitor. It's how many monitor pixels (on any size monitor) that the two programs use to render a representation of a real-world inch at 100% zoom.

     

    Illustrator always assumes 100% of one inch of actual linear measure in the document corresponds to 72 monitor pixels. In other words, at 100% zoom, it uses 72 pixels to "paint" an inch. When set to Inches, the major tickmarks of Illustrator's rulers are 72 monitor pixels apart, therefore display smaller (take up less of your monitor's space) than the rulers do in Acrobat.

     

    Reader (and Acrobat), by default, assumes 100% of one inch of actual linear measure in the document corresponds to 96 monitor pixels. In other words, at 100% zoom, it uses 96 pixels to "paint" an inch. When set to inches, the major tickmarks of Acrobat's rulers are, by default, 96 monitor pixels apart, therefore display larger (take up more of your monitor's space) than the rulers do in Illustrator.

     

    In a nutshell, it boils down to this: Zoom is just the currently-displayed ratio between real-world measure and number of monitor pixels used to paint a picture of it. Illustrator and Acrobat (by default) simply label different zoom levels to be "100%". Illustrator clings to the MacOS convention of using 72 monitor pixels to paint an inch-worth's of page content. Acrobat's default uses the Windows convention of using 96 monitor pixels to paint an inch-worth's of page content.

     

    Neither one necessarily matches physical reality. That is, even without switching between programs, if you hold a ruler up to any given monitor displaying a given application, what the software labels "1 inch" at "100%" will quite likely not match your physical ruler. Obviously, for example, if you view your PDF on a cell phone and zoom to "100", the display will measure in real-world physcial measure much smaller than the same PDF does on your laptop, which will likely in turn be smaller than when displayed on your desktop--even if all three devices have Acrobat zoomed to "100%."

     

     

     

    As you can see above, Illustrator's "72 pixels to paint an inch" uses less of your monitor's space to display an inch at 100% zoom, but shows less detail because it has fewer pixels (72 x 72) available for rendering that square inch . Acrobat's default "96 pixels to paint an inch" takes up more of your monitor's space to display an inch at 100% zoom, but shows more detail because it has more pixels (96 x 96) available for rendering the same square inch.

     

    The above screenshots, however, are of vector-based artwork. If the artwork were a raster image, display quality , not just size, would also differ between the two programs when zoomed to 100%. The display would be sharpest when the actual number of pixels contained in the scaled-to-one-inch image matches the number of monitor pixels that the program displaying it uses to render an inch. So if the above artwork were a 96 x 96 pixel raster image scaled to 1 inch on the page, its display would be better at 100% in Acrobat than in Illustrator. If its were a 72 x 72 pixel raster image scaled to 1 inch on the page, its display would be better at 100% in Illustrator than in Acrobat.

     

    So to make your PDFs display at the same size as your Illustrator documents at 100%, set your Reader (and/or Acrobat) display preferences to what Illustrator considers an inch:

     

     

     

    But understand: Pixels Per Inch means nothing to a web browser. Web browers ignore PPI. They just display image pixels to monitor pixels, 1:1. So if your client is on Windows (by far more likely than not), Acrobat's default setting of 96 PPI is going to be more representative of the size he sees your web-destined design when viewed in his web browser.

     

     

    JET

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 21, 2013 9:23 AM   in reply to arnbly

    arnbly,

     

    I am afraid you will (still) have to tell the client about monitor resolution, not least if you send the image as PDF.

     

    James is correct in saying that

     

    Reader (and Acrobat), by default, assumes 100% of one inch of actual linear measure in the document corresponds to 96 monitor pixels.

     

    I had failed to observe the change from the old Acrobat/Reader default of 72 (identical to the one Illy still uses).

     

    So it may be true in some cases that a PDF will give a better representation.

     

    However, as you say in post #2,

     

    I guess the part I'm failing to understand is why saving the artboard as a .png or .jpg displays the size is correctly (when viewed in preview), but the PDF doesn't.

    the (default) image preview, which the client will see before the image is applied to the final destination application, will correspond to the Illy default of 72.

     

    The same applies to images shown in a browser, including images (such as screenshots)  shown here in this forum, at the default zoom level have the same size as at 100% in image preview/Illy.

     

    Therefore, image preview/Illy/browser will give one size at 100%, and Acrobat/Reader will give another.

     

    Obviously, this means that either or neither size will correspond to the final application. For browser/simílar use the (new) PDF default is off.

     

    Here is a 480 x 360 pt/px screenshot which may be used for comparison using a ruler measuring the height (you may place it in Illy and take it from there).

     

     

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 24, 2013 2:03 AM   in reply to arnbly

    arnbly,

     

    A follow up on the needed client education/instruction:

     

    It is actually possible to set the "Resolution" in PDFs to 72 PPI, the same as Illy uses.

     

    The (long) way to do it is to:

     

    1) Edit>Preferences>Page Display>Resolution>Custom Resolution: 72,

    2) View>Zoom>Actual Size.

     

    This (re)solution was hinted at in post #6 in this recent thread:

     

    http://forums.adobe.com/thread/1157767?tstart=0

     

    It seems that this is a new(ish) issue that we are unuised to deal with here.

     

    And while you are at it, you may wish to include:

     

    3) Edit>Preferences>Page Display>Rendering: Untick Enhance thin lines.

     
    |
    Mark as:
  • Currently Being Moderated
    May 12, 2013 3:23 PM   in reply to arnbly

    Adobe Illustrator CS6

    Windows 7 64bit

     

    Realise this thread is a little old but rather then posting a new question since it pertains to this i thought id just ask here.

    As i've learnt from reading this and many other threads, when designing solely in illustrator (vector art), it doesn't actually matter that your screen is at say 96ppi and your doc is at 72ppi (we're assuming designing for screen, print would obviously be alot higher).

     

    However while i was looking for an answer i stumbled upon something and no matter what i google or search nothing seems to explain it adequately.

     

    File > Document Setup > Transparency > Custom:

     

    Under this what does:

     

    "Line Art and Text Resolution" and "Gradient and Mesh Resolution" actually correspond to?

     

    That is if i set these to 96ppi what do they actually do?

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 27, 2013 1:13 PM   in reply to arnbly

    Thank you JET and Jacob!!!!! I spent an hour or two trying to find the cause for this issue. I, too, submit .pdf files to my clients for website interface designs and couldn't figure out why there was no pixel correlation from photoshop to Acrobat.

     

    Your explanation was spot on and will help me moving forward!

     
    |
    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