前端——ps 快速切图

快速切图方法

工具：Photoshop cc 2015

参考资料：慕课网  前端工程师必备的PS技能——PS扩张知识介绍

关键步骤：

单个资源的切图

准备：编辑——首选项——增效工具——打开生成器

1.文件——生成——图像资源

2.在之前的文件夹中可找到 新生成的“XXX-assets”文件夹，内只有“error”文本;

3.选中所要切的图，对其文件名进行更改，如加 后缀名 ".png",".png8",".png24"(png24的较8更为精准)；

4.在“XXX-assets”文件夹内出现了文件名更改过的切图，即我们所需的切图；

5.若要在该文件夹内删除已存在的切图，在图层内把文件名改为原来的名字即可。

多个资源查看设置

步骤与上述相似，只需在图层中选中所要栏，对其文件名进行更改，如加 后缀名 ".svg" 。

用sublime打开新生成的"XXX.svg"，可看到相关设置，并对其进行更改。

出现问题：

用IE浏览器打开svg文件会循环出现“文件下载”，无法显示。

解决方法：

可用Firefox、Chrome打开，正常显示。

CC2014开始，新加功能图层——复制CSS，挺好用的。

注：task 1-7