详细解析像素英寸与DPI的那些事儿

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:优设   作者:琥珀川

关键词

这篇科普文超级实用!如果现在让你说清楚像素英寸,Dpi 三者的区别以及关系,可以不百度回答我吗?如果这些基础的设计知识你都忘了,立刻花10分钟来学习一下。

Dpi(每平方英寸像素数目):图像细节程度的度量

Dpi 代表每平方英寸上所含“点”的数目,它决定了一副图像在细节上到底有多细(尽管并不依赖于你的视觉感受)。但是,什么是“点”?

“点”是一个模糊不清的术语。点可以指的是像素、画笔的一“点”或者是一个油墨印迹。

当你置身于一座体育场馆并放言全场之时,场内的任何一名观众都可以被试做是一个“点”。

详细解析像素英寸与DPI的那些事儿

“点”最通用的两个定义是:像素点(当你使用电脑屏幕的时候),喷墨点(当打印或印刷东西的时候)。

如果是 1 Dpi,你就会在每平方英尺上看见一个1*1的,单色的小方格。

如果是100 Dpi,这就意味着水平方向和竖直方向上各100个小方格。这就意味着,在1平方英尺上,一共有10000个小方格。

如果你能看到的小点越多,说明图像的细节就刻画得越真实。

像素:只对电脑有效

你的显示器就是由“像素”构成的,,你或许听说过显示器在72或96 Dpi下工作这样的说法,这或许在某种情况下没错,但并不是一劳永逸的说法。

如果你在制作一副只在显示屏上显示的图片的话,你可以直接忽略 Dpi 和英寸什么的,它们和你的工作毫不相关。

如果你做的图片是要印刷出来的话,你就得考虑三者之间的关系了,我们下面会谈到。

英寸:只和印刷相关

英寸就是英寸,不是吗?当你谈论印刷品的时候,这样说没错。但自从像素密度,或 Dpi 的概念出现之后,显示器之间的参数并不相同,话就不能这么说了。

详细解析像素英寸与DPI的那些事儿

我们都会用尺子,所以我不会讨论英寸是什么。但是如果你知道一幅图片在英寸上的大小的时候,你如何知道这幅图片的像素大小呢?往下看。

像素、英寸和 Dpi 如何相互关联?

当你要设计一副印刷在纸张上的图片的时候,毫无疑问,很多工作你都必须借助电脑和显示器才能完成,那么,像素、英寸和 Dpi 如何相互关联?

像素大小

比如说,我想打印一副8英寸*10英寸,300 Dpi 的图片,那么怎样设置图像的像素长宽度呢?

你只要简单地把这两者相乘就可以了,如果用方程表示,就是:

像素 = 英寸 * Dpi

所以,对于上面的情况:

宽度 = 8英寸 * 300 Dpi

高度 = 10英寸*300 Dpi

所以,这就应该是一副宽2400像素,高3000像素的图片,很简单对吗?

使用这个简单的公式,只要你有想要的尺寸和 Dpi ,就可以换算出对应的像素大小。

英寸大小

在上面那个公式,只要你知道了两个已知量,肯定就能求出未知量。

英寸 = 像素 / Dpi

在这个方程中,知道了像素和Dpi,就能知道英寸大小。

比如说,有人发给我一副网站上下载的图片,900*600像素,如果我想知道它在150 Dpi 下有多大,我就可以进行如下的换算:

高度 = 900像素 / 150Dpi

宽度 = 600像素 / 150Dpi

经过计算我就可以知道它应该是6英寸高,4英寸宽。

图像质量

大多数时候,计算像素或者是英寸,前提是你得知道 Dpi 是多少,但有时候你需要在已知英寸和像素的情况下来计算Dpi。

比如,我这有一个3600 *3600的纹理uimaker.com/uimakerdown/">素材,我想打印成12 * 12英寸大小,现在我需要知道这样弄的话打印成果会有多清楚,那我就需要计算 Dpi。

Dpi = 3600像素 / 12英寸 = 300

现在我就知道3600像素的图片,打印成12英寸的尺寸,不会造成细节的损失了。

如果我打印成6英寸见方,细节就会更丰富,因为Dpi上升到了600。

注意,人眼的视觉上限是300 Dpi,我们无法分辨过于靠近的两个像素点,所以你在600 Dpi 下和1200 Dpi 下看到额都不会有分别,除非你使用放大镜……

还有话说

详细解析像素英寸与DPI的那些事儿

如果你听到有人推销他的素材包“4000像素”或者是“300Dpi”的 而不涉及任何英寸打下的话,简直就是不知所云,因为一个4000像素图像的 Dpi 还要取决于你想打印的图像大小。

我就经常收到这样的来信,咨询我:“这些纹理的 Dpi 咋样?我想把它们用到我的作品中去,所以我想知道它们是否足够清楚。”

如果你了解了它们三者的关系,你就会知道这取决于你要打印出来的图像的大小。

如果你过去纠结于这三者的联系,我想现在你应该完全理解了。

如果你起初很混乱,但是通过介绍给你的公式,你现在应该能轻松换算出你想要的参数了。

 收藏