★ 传统网页切图的两种实现办法
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文件中大量图层进行分类管理;