传统切图与精准切图

★  传统网页切图的两种实现办法                       

     1.直接利用“切片工具”；

     2.设置“参考线” → “切片工具” → “基于参考线的切片”；

 

提示 为了切图的提高速度和准度，一般会将网页的psd图片分割成不同的部分，然后进行局部划分切片；

保存：制作好切片之后，ctrl + shift + alt + s （快捷键）“存储为Web所用格式”，图片保存一般选择“PNG-24”

 

★ 精准切图                               

△ 方法 1  利用“脚本”

是一种比较快捷准确的切图方法（PS CS6以上都支持），是将所有图层中的图像全部转储出来。（转储的图片格式还可以是svg，WebP等）

1，自动化切图，省时省力；2，计算机自动计算，尺寸更准确；

关键操作：文件 → 脚本 → 将图层导出到文件。。。

优点，可以一次性地批量将多图层的psd文件导出，同时可自定义的图片格式和图片名称。

 

△ 方法  2  利用“生成器”生成“图像资源”

（PS CC 开始支持自动化切图功能）

关键操作（三步走）：

    a.编辑 → 首选项 → 增效工具 → 生成器；

    b.文件 → 生成 → 图像资源； 

    c.选中目标图层 → 更改名称为“name.文件格式”就会自动在assets文件夹内生成该图层内相关图片指定格式的文件

完成操作设置以后，我们回到打开的psd文件所在的文件夹，会发现自动生成了一个assets文件，该文件就是用来存放自动切图生成的图片；

 

 ★  拓展知识                        

“文件”选项卡中的“抽出资源”实现svg图像的导出（PS CC2014以后都支持）；

选中图层，然后鼠标右击，选中“复制CSS”将自动抽取指定图像并自动复制CSS代码；（生成代码的class名称即为图层的名称）

“图层管理”可以实现对psd文件中大量图层进行分类管理；

来自为知笔记(Wiz)