很多程序员都知道前端除了代码还要跟设计师对接，从他们提供的psd里面扣出需要用到的小图标等等。下面就讲讲切图的各种姿势
首先来一个很傻瓜的也很常用的一个方法，对于少量图标适用：1.将你想要扣出来的图标复制一遍（command+c）
2.新建图层（command+n），通常来说默认的大小就是你剪切板里复制的图的大小
3.粘贴图层（command+v）
4.保存为网页格式（command+option+shift+s）或者直接导出（command+option+shift+w）
进阶一点：
直接选中要导出的图层，右键导出为，然后选择保存的格式，位置…
使用这种方法的话要注意，如果你的设计师给出的图层是带有蒙版带有或者有大片的透明背景，就会发现的想要的和导出的可能并不太一致了。
更进阶一点：
随着时间的更新，ps cc之后提供了快速导出功能，默认快速导出为png。这样就不用每次选格式大小了，一次配置到处使用。
盘点切图的各种姿势
配置的更改：preference（首选项）>Export（导出）
可以修改默认的导出格式，如果懒的话还可以设置直接把文件导出到当前psd文档位置的assets文件夹下面，就不用每次都要选择保存的位置了。
设置完成之后，就可以通过文件->快速导出为xxx或者选中图层右键->导出为xxx的方式导出图标
快速切片法
再说说切片，应该也是大家很熟悉的一个方法，需要导出多个图标的时候比较好用。
选择切片工具，把背景隐藏了，开始框选想要的内容，然后保存。
这样子一个两个还好，多了每次手动拉的大小并不一定贴边，而且对于多个需要大小一致的icon来讲，每次都刚好拉到一样大，臣妾做不到啊。因此我们需要快速切片的方法：
通过参考线切片
选中切片工具之后，可以看到工具栏上方有一个使用参考线切片的按钮，因此我们可以考虑把想要切片的形状都用参考线给包围起来，然后就可以一键导出
那么如何快速的新建参考线呢，command+r打开标尺然后手动去一根根的拉太浪费时间了。这里提供一个比较少人用到的知识，view（视图）->New Guide From Shape（通过形状新建参考线）。
身为一个懒人，首先可以设置一个快捷键，Edit（编辑）->keyboard shortcuts，找到通过形状新建参考线这一栏目，随便设置一个顺手的且不冲突的，比如我这里设置的是Shift+command+1
接下来你就可以选中图层，按下快捷键，参考线就服服帖帖的生成了（配合自动选择食用味道更佳喔），放张动图欣赏下：
最后点击切片工具上面的使用参考线切片的按钮，选择你需要的切片导出就好了。
通过形状新建参考线最然很酷，但是对于不需要贴边切的情况，例如刚才所说的切出多个大小相同的图标，还需要进一步探索。方法还是很简单的：
首先需要新建一个标准大小的模版，例如我这里随便画了个正方形，表示以后切片的大小。
按ctrl+j复制该图层并将其铺到你想要切的图下面
然后选中这些图层，并点击layer（图层）->New Layer Basic Slice（新建基于图层的切片）
最后说点切片工具使用的注意事项，注意把没用的信息都隐藏了，特别是切icon时背景啊旁边的小字体什么的。例如上面的演示理论上都是不合格的拉～
录制动作
身为程序汪，每次都让你重复一样的动作，就像写重复的代码，肯定是不爽的。此时我们就可以写一个函数来封装一下自己的动作，ps也提供了录制动作的功能。
window->Actions或者快捷键option+F9调出录制动作面板
输入动作的名称以及快捷键之后，就可以进行你想要录制的操作，比如点击将图片导出为png格式：复制当前图层，新建文件，粘贴，保存为png格式。接着点击最左边的停止按钮，你的动作就录制好了。
tips：快捷键也会被记录，所以可以放心大胆的时候用。不过*一次性做完你想要的动作，不然多余的动作也会被记录速度可能会慢点。
然后选中你新建的动作，或者输入快捷键，动作就运行了。比如我刚刚创建的动作，选中图层按shift+F6之后，图片就保存在你设置的文件夹里面了。（动作完成之后并没有提示，直接去文件夹看吧）
自动切图（含WebP、SVG格式）
截止到这里，上面的还是是要手动拖拖拽拽各种设置，而且还是很麻烦，这里就介绍一下ps新出的黑科技，自动生成图像资源。
版本要求：ps cc
首先command+k打开Preferences(首选项)，点击Plug-Ins(增效工具)，确认Generate（生成器）->Image Assets（图像资源）为启用状态
然后点击菜单“文件->生成->图像资源”，确认该菜单项已被勾选；
接下来只需要将图层命名(如icon.png)，文件就会乖乖的躺在在**psd文件所在目录下的“文件名-assets”**的目录下了(∩´・ω・｀⊂)
tips：
1.文件夹也可以喔
2.2x Retina图片的输出，在图层前添加200%即可，如200%logo 2x.png;
更多信息可参考官方文档
如果要生成svg或者webp的格式需要在用户的根目录~下新建一个文件夹，名为generator.json，内容为
{"generator-assets":{"svg-enabled":true,"webp-enabled":true
}
}
其他小技巧
复制css
对于一些图片有圆角阴影之类的效果，很难用眼睛去评估具体大小，这时候复制css样式的功能就很有用。选中图层点击右键copy css，在编辑器里粘贴就可以看到你复制的内容。
tips：
1.智能对象暂不支持”复制CSS”功能，可以栅格化该图层再来使用。
2.对于多个图层的批量获取，请选择多个图层，执行Ctrl+G，将所选图层转为图层组。然后在该组上右击，选择”复制CSS”，即可批量获取CSS代码。
打开关闭所有其他组
大多人都知道：点击图层/组前面的小眼睛可以显示关闭该图层/组
还有一个功能来打开/关闭所有其他图层：按住option再点击，效果如下
在测量间距的时候，智能参考线就可以大限身手了。
view(视图)->show(显示)->smart guides(智能参考线)
查看图层之间的距离：选定某个图层后，在按住Cmd键（Mac）或Ctrl键（Windows）的同时将光标悬停在另一图层上方，就可以看到他们之间的距离。
当你的光标悬停在形状以外时候，Photoshop会显示与画布之间的距离。
更多使用方法参见：网格和参考线
sketch
这里直接上一官方教程：
写在最后
因为本文写作场景是在mac下且Photoshop为英文版，所以本文的快捷键大多都是基于mac的，如果使用windows系统需要做相应的转换。以及，一些操作的命令主要为个人根据印象翻译，如果有不准确请见谅。
