前端切图4

传统切图

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

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

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

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

精准切图

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

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

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

自动切图

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

抽出资源

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

复制CSS

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

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