HTML5学堂-码匠 HTML5学堂

您当前位于:PhotoShop技术学习 ——> Photoshop中,“点”与“像素”如何相互转换、换算?

Photoshop中,“点”与“像素”如何相互转换、换算?

2016/03/12 22:07:39 | 作者:HTML5学堂(码匠) | 分类:PhotoShop技术学习 | 关键词:PhotoShop,点,像素,pt

揭秘PhotoShop中的点与像素

HTML5学堂:PhotoShop当中,存在着这样一个单位 —— 点。对于设计师们,估计再熟悉不过了,但是对于前端开发攻城狮们,稍有些郁闷,因为点并不会完全等于像素~!有时,前端开发们还要面对有小数点的字体大小,如10.8点。到底“点”和“像素”是个怎么关系呢?为何会出现小数点呢?我们今天一起来揭秘点(pt)与像素(px)

“点”和“像素”的关系

px = pt * DPI / 72

换句话说,在72dpi的分辨率情况下(72dpi也是网站设计中最常见的分辨率),pt(点)与px(像素)可以基本等价~!

使用px定义文字,无论用户怎么设置,都不会改变大小;使用pt定义文字,数值越大,字体就越大。

不同的分辨率下,同样点数的字体大小不同

在不同分辨率的PSD文件当中,同样点数的文字,字体大小不同。但是同样像素的文字,字体大小保持不变。一起来看比较图:

不同分辨率下,pt和px的表现

如上的三组文字,“H5”均设置的是30点;“HTML5学堂”均设置的是30像素。

网页常用的是72的分辨率大小,此处从上到下,依次是72、200、300(印刷品)的分辨率大小。

PS:为了方便比较,我将三张图片分别存储,之后又放置到了一张图当中。

设计图中字体存在小数点的原因

第一,设计师使用了px为单位进行设计,可能采用了大于72dpi的分辨率。而前端攻城狮,通常并不会对自己的PS做首选项设置(通俗的说,就是设计师的设计文件中,字体以px为单位,而攻城狮使用PS打开文件的时候,默认字体以pt为单位。是的,一定是你的“打开方式不对~~~”),当单位由px转成pt的时候,是有可能变成小数的。

第二,如果设计师使用了Ctrl+T,对文字进行了缩放处理,会出现小数点

缩放之前的字体大小

缩放中

缩放后,出现小数点

如何改变PS的文字度量单位(点或像素)

改变PS的文字度量单位(点或像素),将点改成像素,会更有利于我们进行页面的制作,能够更直观的查看每个文字的字体大小(无论哪种分辨率下)。

选择菜单中的“编辑”——>“首选项”——>“单位与标尺”

然后将文字的单位选择为“像素”即可

此时原有的点会被换算为字体像素大小哦~!如图:

改变单位之前(单位使用点-pt时)

改变单位之前(单位使用点 pt时)

改变首选项中的默认字体单位

改变首选项

改变首选项之后(文字字体单位为px)

改变首选项之后(文字字体单位为px)

本文章内容小编:HTML5学堂-利利。耗时3h~

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS