这⼀次要帮你彻底搞明⽩px、ppi、dot、dpi、sp、dp、pt
这是初级设计师经常弄混淆的⼏个概念,下⾯我以“基本概念,易混淆的点,从问题⼊⼿,总结”四个⽅⾯来聊⼀聊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的图⽚指的就是图⽚的体积,⾸先⼀张图像在存储时,会描述每个像素点的颜⾊信息、位置、数量,这些描述数据就是图像的体积,如果像素越多⾃然图像体积越⼤。假如⼀张图⽚都是⼀个颜⾊,图像在保存时就会压缩,只存⼀个像素点的颜⾊信息,这样的图像体积会⼩很多。所以,像素点越多,颜⾊越复杂,图像体积越⼤。
为什么我们要买⾼像素的相机?
⽇常我们所说的⼏百万像素的相机,这个⼏百万像素指的是拍摄最⼤像素量照⽚时,图像宽⾼位置上像素量的乘积。如果像素量⼤,将来印刷或者在显⽰器上查看,在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:打印分辨率 (dot per inch)
1英⼨上打印的墨点数量,密度单位,只⽤在印刷⾏业,值越⼤,印刷越精细。
注意:
•
与安卓的dp完全没关系。
•
•
印刷⾏业相关的单位是dot,dpi。印刷尺⼨(英⼨)=打印墨点数(dot)/打印机密度(dpi)。
•
照⽚的清晰度,是由打印机分辨率决定的。所以⼀张照⽚包含的像素越多(需要⾼像素照相机拍摄),⾼dpi打印机就可以打印出清晰的图⽚。如果照⽚像素量px⼀定,打印机的dpi越⾼,则打印尺⼨越⼩。(这⾥可设置为dot=px)
•
5. pt:点(印刷)
⼤⼩为1/72英⼨=0.35mm,单位是英⼨,是物理长度单位,⼤⼩固定,绝对单位。源于活字排版时代,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。
ps切图尺寸变小⽤固定长度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像素/厘⽶)
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论