传统切图与精准切图

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

     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)