这是初级设计师经常混淆的几个概念。以下是“基本概念、容易混淆的点、从问题开始、总结”四个方面:px、PPI;Dot、dpi;Sp、DP;Pt那些东西。
本文由番茄设计师(公众号)
一、px、ppi;Dot、dpi;Sp、DP;Pt的基本概念
1.px:像素
1像素实际上是颜色点,因此也称为像素点。由于多个不同的颜色点构成一个图像,因此图像的默认单位是像素px(没有比像素更精细的单位)。
像素主要用于表示图像大小和显示分辨率(例如1920*1080px)。因为像素本身的物理尺寸没有固定,所以物理尺寸没有意义,有意义的是它的数量。
为什么像素的实际大小不固定?
像素本身不是物理标准的单位,而是相对的单位,大小可以很小。在高密度屏幕上,像素更小,显示屏更清晰。由于“像素量px=像素密度PPI x屏幕大小in”,1英寸屏幕也是如此。密度越高,像素越多,单个像素的实际大小就越小。
都是图片相关信息。图片体积和像素之间有什么关系?
通常,100KB的图片表示图片的体积。储存第一个影像时,说明每个像素点的颜色资讯、位置和数量。这些描述数据是图像的体积。像素越多,自然图像的体积就越大。如果一张图片全部是一种颜色,则在保存时图像会被压缩,仅存储像素点的颜色信息,因此图像体积会小得多。大卫亚设,Northern Exposure(美国电视))因此,像素点越多,颜色越复杂,图像体积越大。
为什么我们要买高像素相机?
每天我们说的几百万像素的摄像头,这几百万像素,是指在拍摄最大像素量照片时,处于图像宽度高位置的像素量的乘积。(约翰f肯尼迪,《美国电视剧》)如果像素量很大,以后打印或在显示器上查看时,1英寸有足够的像素显示器,像素密度增加,图像会更加清晰。所以我们更喜欢买高像素相机。
摘要:像素px通常用于描述图像大小和显示分辨率。
2.PPI:像素密度(pixel per inch)
1英寸屏幕上显示的像素量、密度单位。确定图片的物理显示大小只有在与显示相关的情况下才有意义。值越大,显示得越精细。
计算公式:ppi=屏幕对角线的像素量px/对角线长度inch=(屏幕水平像素2屏幕垂直像素2)/对角线长度。
Ppi为什么决定图片的物理大小?
手机的显示决定了工厂中PPI的值,PPI越大,显示的画面就越高清。图片的物理大小=PPI * Px,一般来说,一幅图像的Px决定,PPI越大,物理大小越小。那么为什么我们在高PPI的手机上人眼看到的图像比低PPI的图形小呢?在设计行业,为PPI高的手机设计更大像素的图像也是一个道理。
每天说的分辨率有两个概念,一个是指显示器的分辨率,另一个是指图像的分辨率。显示器分辨率,显示器能显示的像素数量(1920px*1080px)越多,显示器能显示的像素越多,屏幕就越精细。因为屏幕大小越固定,分辨率越高,像素密度越高。显示器分辨率全部用(1920px*1080px)表示,清晰度必须与屏幕尺寸计算相结合。图像分辨率是单位英寸中包含的像素点数,例如在Photoshop中创建新画布时设置的图像分辨率72ppi,定义得更接近分辨率本身的定义。
注意:
在同一显示屏上看图片,像素越多,图片大小就越大。
如果显示器分辨率恒定,则显示器越小,图像越清晰(例如MacBook);相反,如果显示器大小固定,则显示器分辨率越高,图像越清晰。
对于设计师来说,像素密度很重要,所以要根据像素密度裁剪和拟合图片,要理解像素密度的含义,理解几倍图片之间的关系。
3.dot:油墨点
打印输出的最小单位表示与px类似的打印颜色点,只有相对大小用于印刷行业。
4.dpi:打印分辨率
仅用于1英寸打印的油墨点数、密度单位和印刷业;值越大,打印越精细。
注意:
和安卓的DP完全没有关系。
印刷行业相关单位是dot、dpi。打印大小(英寸)=打印墨水点数(dot)/打印机密度(dpi)。
照片的清晰度由打印机分辨率决定。因此,一张照片的像素越多(需要拍摄高像素相机),DPI打印机就能打印出清晰的照片。如果照片像素的数量为px,则打印机的dpi越高,打印大小越小。您可以在此处设定dot=px
5.pt:点(打印)
大小为1/72英寸=0.35毫米,单位为英寸,是实际长度单位
,大小固定,绝对单位。源于活字排版时代,photoshop里的字体单位就只这个。公式:1pt= (PPI / 72) px。
当photoshop中新建画布的分辨率为72ppi,由公式,则1pt=1px。当分辨率为144ppi时,1pt=2px。
注意:这里指印刷行业的pt哦!
6. pt: 点(iOS)
iOS系统开发单位,是独立像素的意思,长度固定,不随屏幕像素密度ppi变化而变化。
苹果公司规定:普屏时1px=1px,而普屏的ppi=163像素/英寸,那么pt=1/163英寸=0.16mm(固定值)。普屏1px=1px,高清屏1pt=2px。
用固定长度pt作为开发单位的好处是,这样可以保证同一张图片在不同设备上显示大小一样,因为pt值是固定的。高清屏上1pt等于更多的像素px,因为像素在高清屏上变小,所以pt还是固定的。
7. dp:长度(Android)
(Density-independent pixel) 是安卓开发用的长度单位。
根据不同的屏幕分辨率,与px有不同的倍数关系。规定:1dp等于屏幕像素密度为160ppi时1px的长度,因此dp在整个系统大小是固定的。公式:1dp=(屏幕ppi/ 160)px。
1dp等于屏幕像素密度为160ppi时1px的长度,即,在mdpi时,1dp = 1px。 以mdpi为标准,这些屏幕的密度值比为: ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3。android中清屏1dp=1px,高清屏1dp=1.5px,超清屏1dp=2px。
做设计时以xhdpi为模板, xhdpi条件下1dp=2px,标注长度的时候,将长度像素除以2即为dp值,这样方便和开发沟通。
8. sp:大小(Android)
(scale-independent pixel) 安卓开发用的字体大小单位。
注意:dp和sp都是安卓开发的单位,dp是长度单位,sp是字体单位。一般情况下可认为sp=dp。
二、易混淆的点
px和dot
都是点的概念,px应用在电子显示设备上,是显示图像的基本单位。dot应用在印刷行业,是打印图片的基本单位。
ppi和dpi
ppi和dpi无关系,互不影响 。 ppi影响图像的显示尺寸,dpi影响图像的打印尺寸。打印时可以让数量上px=dot,则设计时在photoshop里设置的ppi大小,可以认为是dpi大小。
很多技术人员经常把ppi和dpi画等号, 其实他们的物理意义不一样,但是因为混淆的人多了,所以在电子屏幕显示中提到的ppi和dpi我们可以认为是一样的。
pt和dp
iOS系统的pt和Android系统的dp概念是相似的。
三、从问题入手深入理解概念
1.设计印刷品时,为什么说在ps里设置的ppi没有实际意义,但还是要设置呢?
首先我们要明白,打印的分辨率dpi是由实际的打印机决定的,所以在ps里设置分辨率根本没有意义。但是我们可以预期打印效果,比如多大的分辨率和尺寸,有了这两个值就能确定像素量px,即,只要像素量满足要求,就能打印出预期的效果。所以ps里设置分辨率ppi是为了让ps计算出像素量大小。
2.photoshop里,高ppi和低ppi画布的显示差别?
Photoshop里的显示大小只和图像的像素量和显示器分辨率有关。显示器是确定的,所以像素量越大,显示尺寸越大。
3.photoshop里, 相同像素的图像,高ppi图像拖入到低ppi图像里,高ppi的图像变小, 为什么?
因为拖入后,高ppi的文档分辨变小,photoshop把图像的像素按照ppi变小的比例变小。这样里体现了不同ppi的图像在photoshop里的转换关系。
4.photoshop里,相同像素的图像,低ppi图像拖入高ppi图像里,低ppi的图像无变化,为什么?
因为拖入后,低ppi的文档分辨变大,photoshop把图像的像素按照ppi变大的比例变大,这样就超过了画布尺寸,photoshop按照置入图片的原理显示,即按最大边匹配。
5.使用软件的方式,增加图像的像素px,或者提高图像的像素密度ppi,对图像有什么影响?
软件增加图片像素,图片会变模糊,因为增加的不是有效像素,所谓高清图是指包含有效像素多的图片。显示清晰度由显示器本身决定,图片的ppi没有意义。
6.100*100px的图片,ps改变它的ppi,会怎样?
像素是确定的,即不会影响显示,也不会影响印刷。
四、总结
1.手机设计稿
因为手机屏幕的ppi和英寸确定,那么像素可计算出来,即px确定,只需设置ps的画布像素px相同就可以了,ps里设置的ppi对手机设计稿而言并没有什么意义,可以随便设置;手机只关注图片的像素够不够,因为是按照手机1:1的像素设计。所以,适配高ppi手机的设计稿,修改ps的ppi是没有用的,而应该按照高ppi的像素修改设计稿。
2.打印设计稿
打印尺寸和打印分辨率300dpi确定, 但ps以px为单位,由公式dot=英寸*dpi,px=英寸*ppi,英寸相同, dpi=ppi=300,那么数量上可以dot=px。ps的英寸和ppi确定, px也确定,但不能直接得出px数量,但是ps可直接设置厘米cm, 那就只需要设置宽高的厘米和分辨率300ppi=118.11像素/厘米,就可以间接设置所需的像素量,这就能保证300dpi清晰度和打印尺寸。(设置300dpi时ps会自动转化为118.11像素/厘米)