前端必备之切图（一、使用PhotoShop测量和取色）

一、准备工作

1.首选项设置(快捷键：ctrl + K)

    编辑 >首选项>单位与标尺（把文字和标尺的单位改为：像素）

 2.面板操作(设置工作区)

   在窗口中开启[工具 、选项、 信息(F8)、 图层(F7)、 历史记录]

 3.保存工作区（在右上角来选择）

    窗口> 工作区 > 新建工作区

二、切图常用工具

 移动工具 （自动选择：改为组） 

 矩形选框 

 魔棒工具（常用于抠图，不规则的图形） 

 剪裁工具+切片工具

 缩放工具（放大：ctrl+加号  缩小:ctrl+减号）

 取色器 （切换前景色 、背景色 ，用来吸取颜色)

三、辅助视图

在视图下开启： 对齐 

                          标尺(ctrl+R) 

  显示 > 参考线(快捷键：ctrl + ;)  注意：要选择了显示额外内容后才可以看到参考线

四、尺寸信息的测量

方法：矩形选框工具结合信息面板

注意点：把画布尽可能放的大一点，以减少误差

矩形选框工具的使用：

        添加到选区（按住shif）

                从选区减去（按住alt）

                与选区交叉（按住shift+alt）

                按住他们的时候再进行选区的操作，在测量时，选区可以大一些，然后按住alt或shift进行调整

1.字体的测量：

    1.1单独文字图层：

      选择文字工具，然后在要测量的文字图层上面点击，在信息面板中有的框中的数字就是文字的大小

      1.2合并在背景图中的文字：用矩形选框工具，选择文字，在信息面板中显示的高(H)的值就是文字的大小

2.行高的测量

    2.1单独图层的：

选择文字工具，然后在上方点击切换字符和段落面板，就可以在属性面板中读取行高

    2.2已经和背景合并在一起的：

选择矩形选框工具，从第一行文字的下方到第二行文字的下方，属性面板中的高度就是行高

 补充说明：测量区域比较大时（添加到选区的巧用）

   用矩形选框工具，在左边画一个小矩形，然后按住shift,在右边再画一个小矩形，属性面板中的宽度就是整个区域的宽度

五、颜色信息的测量

方法：取色（拾色器和吸管工具）

1.获取文本颜色

1.1独立文字

                选择文字选择工具，在属性面板中点击文本颜色即可

        1.2作为背景的文字

                拾色器 用吸管工具

2.边框颜色、背景颜色同上

        

        3.取色工具的巧用

  确定背景是否为纯色，在要测量的区域选择拾色器，不停的用吸管工具点击，看颜色的取值是否都相同，若每次取值相同，则为纯色，否则不是纯色

4.确定是否是线性渐变 （用魔棒工具）

  用移动工具选择图层，点击后，在快速选择工具中选择魔棒工具，继续往下点，若它是横着的直线，则从上往下Y轴的渐变，也就是说在X轴上颜色都是一样的