前端工程师使用photoshop进行的大量工做其实是测量。本文是photoshop巧用系列第二篇——测量篇前端
在网页制做中须要使用photoshop测量的信息分为两类,分别是尺寸信息和颜色信息前端工程师
【1】尺寸信息工具
尺寸信息主要经过矩形选框工具配合信息面板进行测量,共包括如下项目:字体
一、宽度、高度spa
二、内边距、外边距3d
三、边框blog
四、定位图片
五、文字大小ci
六、行高table
七、背景图位置
[注意]测量时,画布放得尽量大,这样结果才相对更准确
【2】颜色信息
颜色信息主要经过取色器来进行测量,共包括如下项目:
一、边框色
二、背景色
三、文字色
接下来,经过几个实际测量来详细说明使用photoshop测量的要点
【测量图片宽高】
一、测量普通图片宽高
先用矩形选框工具选择一个大的区域,而后再按住alt键,减去多余的部分
![]() |
![]() |
![]() |
二、测量超过1屏的大区域的宽高
先用矩形选框工具在最左边画一个小矩形,按住shift键,在最右边画一个小矩形,信息面板上的宽度信息就是要测量的该区域的宽度信息
![]() |
![]() |
![]() |
![]() |
【测量文字大小、行高及文字颜色】
一、当文字是单独图层
经过选项面板上的几个面板能够分别获得文字大小、行高及文字颜色信息
![]() |
![]() |
[注意]若文字颜色面板选出的颜色与显示的颜色不相符时,多是由于文字颜色被加入了其余效果的处理,这种状况仍是须要吸管工具来吸收颜色
![]() |
![]() |
二、当文字已经合并在图层中时,则状况较复杂些
a、字体大小
对于不一样字体的文字,字体大小多是不同的。通常选择一行中最大的文字进行测量,结果相对较准
[注意]文字右方或下方有时会有1像素的间隙
b、行高
行高的测量实际是一行的测量,从第一行的下面到第二行的下面
c、字体颜色的获取
用吸管工具吸收时要注意,文字放大后有不少锯齿,要吸收颜色较实的部分
![]() |
![]() |
![]() |
![]() |
【量字母、数字、符号大小】
敲一个字母对比来看。而后将行高和字体大小设置成一致,看字母和上下到底空几格,而后再设置行高
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
【设置加粗】
设置加粗后,字母会多一个像素,但仍然按照原来的字体大小计算。加粗以后,原来1个像素的竖线变成2个像素
![]() |
![]() |
【肯定颜色】
一、肯定纯色
当肉眼没法肯定一个区域是否是一个纯色时,能够用取色工具帮助。打开取色工具,按住鼠标不松开并移动,当取到的颜色值有变化时就不是纯色
![]() |
![]() |
二、肯定线性渐变
先用移动工具选择图层,再用魔棒工具点击,若出现的都是横向的长条,则为纵向颜色变化的线性渐变
![]() |
![]() |
![]() |
【1】量图的时候量到的内容区的宽度,若是有padding,要减去padding的值
【2】当字体类型为字体时,空格为文字大小的一半
【3】中文字符的标点占一个字符的大小,英文字符的标点占半个字符的大小
【4】1个像素的冒号点是宋体英文状态,4个像素的冒号点多是宋体中文、微软雅黑的中英文
【5】若是两个字符挨得太近,甚至发生重叠,颇有多是letter-spacing为负数
【6】若拉参考线精度不高时,先拉出参考线,鼠标不要松,而后按住ctrl键,可让参考线以0.1px移动