美文网首页设计解释 学PMskill
PPI和DPI原来是一回事。

PPI和DPI原来是一回事。

作者: 鲜核桃 | 来源:发表于2015-03-12 15:01 被阅读2688次

DPI如何换算PPI,这个问题让我纠结了好几天了,以前做UI一直用72PPI的,再换了苹果电脑R屏以后,突然发现PS的预置模版分辨率不是72PPI了!


9DB0152D-141C-48BC-9A2C-FE2E0C0E82AD.png
workflow-ios-sizes-in-points.png

一时之间搞不明白了。于是开始各种恶补,几天下来,被各种显示器的密度,各种换算方式一下子就整晕了。带着疑问去跟人讨论,没人说的清楚,就说按72做没错 至于为啥也说不清楚,甚至有人直接抛个白眼给我,让我先把PS弄熟练了再来问问题...秉着知其然亦需知其所以然的念头 我执着的找啊找,找到了下面引用的文章,好了。现在终于不纠结了,做UI的话PPI和DPI原来是一回事。用72PPI也好,用更高的分辨率也好,其实都一样。机器不太慢的话,我还是建议用大于150PPI的分辨率做,因为有时候,项目上线后很久,甲方会找到你,说我要印宣传册或打印啥的,让你提供图标和界面截图给他,那时难道你重新画吗?不过这样也会导致文件过大,请慎重对待。

Pixels per inch is just a tag

Image pixel density for web and app design is often seen as a confusing topic. I’m not sure why this is — when stripped back to the bare essentials, the reality is far less complex than you might think.

Bitmap images are two dimensional grids of pixels, with a width and a height. They often also contain meta data, which may include pixel density. Pixel density is often described as pixels pixels per inch (PPI) or dots per inch (DPI).
The two names, PPI and DPI, mean essentially the same thing — the number of pixels contained within a vertical or horizontal inch. 300PPI means that there’s 300 pixels contained within each one inch row. A one inch by one inch square in a 300PPI image contains 90,000 pixels, because it is a 300 × 300 pixel square. Most displays have a fixed resolution grid, so their pixel density can’t change. A Retina iPad Air display is 264PPI, because there’s 264 elements per inch in the display that can each only ever represent one pixel.
The pixel density stored in image files is different. It’s just meta data that’s saved alongside the image data. It can be changed at any time without affecting the image data at all. It should be considered a relic from the printing industry, because in general, web and app development display all images so that one pixel in the image equals one on screen, ignoring the embedded pixel density information.
Pixels per inch (PPI) vs dots per inch (DPI) vs lines per inch (LPI)

Purists will probably use PPI to describe on screen pixel density and DPI to describe print density, but I think this is a battle that’s drawing to a close. Apple, Microsoft and Google all seem to prefer using DPI in their literature. Curiously, Apple’s iPhone 4S and iPad specs describe their displays using PPI.
For screen design, PPI and DPI are interchangeable.
For print design, DPI only exists to indicate the final size the image might be printed. It’s sometimes used to generate thumbnail images to help performance in layout apps. It can also be used to indicate optimal print size — InDesign, Xpress and others treat 100% image size as meaning “the physical size you’ve used the image in your layout matches the pixel density tag contained in the image”. That’s a great feature. If the images are set up correctly, you know how large you can make images without risking pixelation. It’s still just a tag associated with the image. A handy tag, but a tag nonetheless.
Lines per inch (LPI) is a printing-specific term that describes how close together the halftone lines are. Not all printing is 300DPI — coarser line screens, like those used for newspaper and large format printing (billboards etc), mean lower pixel density images can be used.
The history of 72PPI

The original Mac, the Macintosh 128K, featured a 512 × 342 pixel, 72PPI black and white display. Because of this, OS X has considered 72PPI to be baseline where one image pixel equals one display pixel, even though most Mac displays are far higher density than 72PPI.
OS X’s Preview can view one image pixel as one display pixel, or it can scale using the PPI tag within the file.

It’s just metadata

If you’d like to set up your Retina iPad Photoshop documents at 264PPI, be my guest. You could also set them up at 72PPI. It really doesn’t matter, as long as the final result is images with the correct pixel dimensions.
However, if you plan to use Photoshop and different pixel densities for each document, dragging layers and copying layer styles between documents scales layer styles — dragging a layer from a 326PPI Retina iPhone document to a 264PPI Retina iPad document will mean all layer styles get scaled by 20% (then rounded to the nearest integer).
And that’s probably not what you want. Also, OS X’s Preview will display 72PPI images at the exact size, no matter how you have it set up.
It is for these reasons I assign 72PPI to all my design documents, and I recommend you do the same. To change the pixel density of your Photoshop document without resizing the image data, open the Image Size dialogue, uncheck Resize Image and type in the desired pixel density.

相关文章

网友评论

  • 0e24f0bac962:我最近一直在纠结PPI和DPI的区别,刚好看到你这篇文章,一下子豁然开朗,可是我想问,APP里面的图标也用72PPI做么,我听说图标要做4个尺寸的,然后每个尺寸的都有个DPI值,我又搞不懂了,来自一年后的问题(笑)
    0e24f0bac962:@鲜核桃 啊啊啊啊,谢谢你回答我,但是我知道有4个DPI对应4个尺寸,比如100*100 160DPI的图标,我在PS新建页面的时候,是不是就要在分辨率那一栏填上160像素/英寸啊?
    鲜核桃:@tomaking @tomaking 不同的DPI对应不同的像素约等于同一个物理尺寸。比如,在不同的密度下相同的重量对应的体积不一样。四个DPI对应四个尺寸同理。

本文标题:PPI和DPI原来是一回事。

本文链接:https://www.haomeiwen.com/subject/yldbxttx.html