前端PS切图

切图：从UI给的PSD文件中切出前端可以用的图片。

常用知识点

• 网页常用尺寸：1920px*1080px

• 快速使用工具栏工具的快捷键：先按Alt,菜单栏下部会出现短横线，然后按后面括号对应字母，会出现该菜单栏下拉菜单

• Ctrl+Tab：切换文件

Web界面设置

新建文件的设置：

红色方框中设置为Web常用设置。

移动设置：

不要勾选自动选择，后面选择图层，不要选择组。
上述设置好后，按住Ctrl在单击图层及能选中图层中的图像进行移动。

视图设置：

点击：视图-显示-智能参考线。

窗口设置：

点击：窗口，然后在需要的项目中点击，前面显示√号。
常用的可以设置在右边：

最常用的四个为：字符，信息，图层，历史记录。

编辑设置：

点击：编辑，首选项，单位与标尺。
将其中的单位栏中标尺和文字的单位改为像素。

工作区设置：

通过设置工作区，能将前述的设置保存下来，方便以后使用。

点击：窗口-工作区-新建工作区，即可设置为自己的工作区。

PS图层原理

一个图层相当于一个透明玻璃，在每个透明玻璃上绘图，然后从上往下看。

• 移动+复制图层：ALT+选中图层中图像+拖动图层；产生新的图层，新图层中有原先的图像

• 选中图层中图标：Ctrl+单击图层缩略图

• 填充选中图标颜色：Alt+Dele

• 取消选区：Ctrl+D

• 按住Ctrl在点击图像，即会选中该图像所在图层。

• Alt+选区工具：去掉选区的内容

参考线操作

• Ctrl+R：打开/关闭标尺

• 产生参考线：在标尺处单击然后拖动可出现参考线，水平或者垂直都可以。
  拉出参考线后按住Alt可切换水平竖直参考线。

• 删除参考线：选择移动工具，然后选择参考线，拖动回标尺处，即可删除参考线。

• 关闭打开参考线：Ctrl+;，不是删除，只是短时间关闭（隐藏）参考线。

传统切图

• 采用裁剪工具里面的切片工具，

其中蓝色的表示是主动的切片，灰色表示为被动的切片。
可基于参考线进行切图。
可先裁剪一个部分，再对该部分进行切图，对每个部分分别切图。

图片格式导出

• 点击：文件-储存为Web所用格式-储存。

精准切图

点击：文件-脚本-将图层导出到文件。
能将PSD中所有的图层全部切出来，输出到一个文件夹中。
优点：减少手动操作，解放双手，提高切图精确度。
缺点：耗时，脚本会将PSD文件中所有的图层切出来，许多不需要的图层也会切出来，时间较长。
为了避免切出不必要的图，以及加快切图速度，可先新建一个文件，将原文件中需要切的图层复制到新文件，然后对新文件进行精准切图。