前端工程师必备的PS技能——切图篇(笔记)

新建设置

自定义：（可存储为预设）
宽度 1920像素
高度 2000像素（可改）
分辨率 72像素/英寸
颜色模式 RGB颜色
背景内容 透明

视图设置

视图-显示-智能参考线
视图-标尺
窗口-关闭库、颜色
窗口-信息、字符

移动工具

选中某图层后，可用来移动图层。

勾上自动选择，并选中图层，可更加方便移动已有图层。

按住ctrl键，在图层上单击鼠标左键，可直接定位到选中的图层。

选中一个图层后，按住ctrl键，可再选中其它图层，这样，同时选中多个图层，利用属性栏中的设置进行设置。

矩形选框工具

ctrl+shift+alt+e：盖印可见图层。

工具的操作都是针对选区的内部。

选中矩形选框工具后，按住shift键，再点击鼠标进行选区，可使区域变为正方形。
选中椭圆选框工具后，按住shift键，再点击鼠标进行选区，可使区域变为圆形。
（一定要先放开鼠标，再放开shift键才成立。）
鼠标放在一点处，按住alt键可确定圆心再选择椭圆区域或圆形区域。（选中椭圆选框工具+alt+shift，便可得到确定圆心的圆形区域。）

已经选中一个区域之后，按住shift键，再用鼠标进行选区，会自动默认为增加选区。（先放开鼠标，再放开shift键。）
按住alt键，再用鼠标进行选区，便是减掉选区。（通用）

按住shift键，再按m，会在矩形选框工具的扩展中轮流切换。

套索工具

ctrl++：放大
ctrl+-：缩小
按住空格键，鼠标可拖动图片。

可进行不规则形状的选区。

多边形套索工具：通过鼠标单击来确定多边形的每条边。在多边形没有闭合之前双击鼠标，便可自动使其闭合。
磁性套索工具：在选区时，它会根据颜色来进行一定的判断，会尽量把选区的线吸附到颜色的色差之间。（对于抠不规则图形比较方便）

快速选择工具

单击时，它会把相同颜色的部分选择出来（可拖动）。

左右中括号或大括号可缩小放大工具。

选中区域后，右击-填充-使用：内容识别-确定，便可使选中区域消失。

裁剪工具

框中某区域后，点击属性栏中的对勾符号，（或者直接按回车键)便可使界面中只剩下框出来的部分。

用选区工具选中一定区域之后，再单击裁剪工具，会围绕选区选出一个最小的矩形（可包含选区内的所有像素的最小矩形)。

关闭盖印图层，用选择工具选择图层，再用鼠标单击所在图层目录部分，便可直接选中像素，此时已经有选区，再用裁剪工具裁剪完成后，按住alt键，单击图层目录部分的眼睛，会把其他图层全部隐藏，只留下单独一个图层的显影模式。

吸管工具

单击图片某处，便可查看该部分的前景色。

污点修复画笔工具

在盖印图层当中进行。

可直接抹掉不想要的部分。

修复画笔工具：直接点的时候，会要求我们找一个圆。按住alt键，在图片某部分单击之后，再放开alt键，移动鼠标，便会发现在圈内会有刚刚选中的一小部分，将画笔放大，点击鼠标移动便可复制圈内那一小部分所属的图层，但松开鼠标后，会给颜色一个羽化值，与原图并不是完全相同。

修补工具：
将要抹掉的部分框起来（可用上面的选区工具），然后按住鼠标左键，往某个地方拖动，便可很融合的将要抹掉的部分用所拖动到的地方的图补掉。

画笔工具

可设置前景色，用画笔涂成所需要的颜色，此时画出的边缘是融合的。
属性栏中可调节画笔的大小的硬度，当硬度调为100%时，画出的边缘就是很生硬的。

仿制图章工具

按住alt键，在想要复制的图层的中心单击，然后在按住鼠标左键画，便可复制成功，这里的复制，松开鼠标后会与原图完全相同。

图案图章工具：图案就是ps中的一个库，在属性栏中可进行选择。

历史记录画笔工具

对一张图进行一定处理之后，历史记录面板当中就会有一个个的历史记录。
将画笔的源记录到处理的某一步，再回到一开始的那一步，然后用历史记录的画笔开始抹，画过的地方都会进入到刚才历史记录画笔源的那一部分，没有画到的地方就会保留之前的那一部分。

橡皮擦工具

顾名思义。
背景橡皮擦工具：可以把背景图擦掉。
魔术橡皮擦工具：可以一下子擦掉一整块。

渐变工具

在属性栏中可以取颜色，修改渐变方式。

渐变的颜色顺序是顺时针的，把反向勾上就可改成逆时针。

模糊工具

将图变模糊，更多用于照片修复。

锐化工具：会将图变得很干燥。

涂抹工具：例如，在睫毛上涂抹，可使睫毛变长。

减淡工具

将颜色减淡。
加深工具：将颜色加深。
海绵工具：相当于把颜料泼在了图上，用海绵去吸。

传统切图

点击裁剪工具下的切片工具，选中一部分，便可使整个画布变成两个切片，可将切片拖动形成新的切片。
灰色部分是被动的切片，蓝色的是我们主动拉出来的切片。
切片选择工具：选择已有切片，拖动切片。可做一些细调。

选中移动工具，可增加参考线，可选中图层，拖动参考线的时候，会自动吸附上去。添加完参考线之后，再选择切片工具，点击属性栏中的，基于参考线的切片，就会自动变成切片，可将不需要的切片删除。

可先用裁剪工具裁剪出来，再进行切片。

切好之后，导出：文件-存储为web应用格式，就会生出一个模型，可选择导出哪种类型的图片（用的比较多的是PNG-24），点击存储，保存，窗口消失就说明已经导出完成。再去查看导出的文件夹，就可以看到导出的所有切片。

精准切图

利用Photoshop的脚本，可进行一种计算机自动运算来切图（自动化切图），尺寸更加精确。

文件-脚本-将图层导出到文件，可选择不同的文件类型，并且勾上透明区域，交错，裁剪图层。单击运行，就可以自动裁剪图层并导出。

打开文件夹可以查看，会保留下阴影，每个裁剪下的图层会自动命名，名字刚好就是图层的名字。

自动切图

编辑-首选项-增项工具，勾上启用生成器（更改在下一次启动Photoshop 时才会生效）。
文件-生成-图像资源，会多出一个文件夹。选中某块图层后，给logo重命名，若要导出jpg格式的图片，就在文字的后面.jpg，（jpg会默认为最佳品质，jpg8是80%的品质，以此类推）此时再去打开刚刚多出的那个文件夹，就会发现我们需要的那一部分已经出现了，而且会把阴影那一部分全部裁剪出来。

抽出资源

首先找到logo。然后文件-抽出资源，可以找到我们所需要的图层，自己选择想要抽出的格式。

复制CSS

外部引用的对象不能被复制。

图层-复制CSS。打开sublime，新建，粘贴，便可将图片的CSS代码复制过来。