1.2测量 取色

1、获取信息

打开设计稿 获取信息

尺寸信息——测量 width：200px；

颜色信息——取色 color：#ffcc00；

哪些要测量？

所有的数字都要测量，具体包括

标签的宽度、高度

内边距、外边距

边框

定位

文字大小

行高

背景图位置

测量图工具：矩形选框工具&信息面板

测量的时候要把画布放大 这样可以减少误差

然后用矩形选框工具画一个框 就可以在信息面板看到需要的信息、

对于测量图来说，有的小图标的边侧角落都要测量（我的妈呀 我不会量整整一天图吧）

测量文字工具：文字大小的测量

1、文字是单独的图层 点击文字工具 再点击文字 可以在选项面板看到大小

2、文字和背景图融为一体，采用测量图的方法，挑选最大的字画一个框

测量行高：

1、文字是单独的图层，在选项面板最右边有一个键，点开是字符和段落 第二行右边那个是行高

2、文字和背景图融为一体，用矩形选框工具，从第一行的字的最下面开始到第二行的字的下面画一个框，就是行高

测量 选区

矩形选框工具 的选项面板 可以设置选区为

新选区

添加到选区:按住shift

从选区减去：按住alt

与选区交叉：按住shift+alt

即测量时，完全可以先选择一个很大的区域 然后再用选区的工具alt把多余的区域减掉 如果去掉的太多 就可以用shift加回来

测量工具的巧用：如果要选择一个比较大的区域 首先在左侧画一个小的矩形框 然后把滚动条滚动到右侧 按住shift键 在右侧再画一个矩形框 这个时候看到信息面板的宽度 即为左右两个小方块加起来的宽度 即这个区域的宽度

取色（所有颜色都要取色）（疯了。。）

边框色

背景色

文字色

用拾色器&吸管工具

1、获取图颜色

点开拾色器 点一下要取色的区域 在最下面#框里面有一串字符 就是他的颜色 写到css中就可以了

2、获取文本颜色

如果文字是单独的图层，点一下文字工具，在选项面板里有一个长方形的黑色的框框 点一下就是拾色器

如果文字和背景图融为一体，按照获取图颜色的方法吸色，如果不好吸，就放大画布

边框也要吸色，这个时候放大画布即可

如果文字是单独的图层，但是吸色之后发现和实际看到的颜色有所不同，这是因为他的图层下还有很多别的效果，这个时候，我们使用获取图颜色的方法，点击文字中颜色最深的地方进行吸色

取色工具的巧用：确定背景是否为纯色

点开拾色器，不停点击取色背景区域，如果颜色不停变换，说明并不是纯色

确定是否是线性渐变：魔棒工具

先用矩形选框工具选择图层 然后设置容差为0 用魔棒工具点击 出现的区域说明此区域的颜色相同 在图示例子中x轴的颜色是相同的，y轴有颜色的变化