PS 切片之后保存为 jpg,核心是通过导出面板把划分好的每一块切片单独输出成 jpg 图片,它和普通另存为 jpg 不一样,普通另存为只会导出整张原图,不会按照切片拆分,切片保存 jpg 的原理是识别画布上的用户切片边界,把每个切片区域单独渲染,再按照 jpg 压缩编码输出,很多新手操作失败,是因为仍然使用存储为命令,没有调用切片专属导出功能,同时还要注意 jpg 本身不支持透明通道,如果切片带有透明区域,导出 jpg 之后透明位置会自动填充白色,掌握旧版存储为 web 所用格式和新版导出为两种路径,再配合品质参数设置,就可以稳定完成切片批量导出 jpg。
两种导出方式对照表
| 导出方式 | 所在菜单 | 特点 | 适用版本 |
|---|---|---|---|
| 存储为 web 所用格式 | 文件菜单或者导出子菜单 | 经典切图面板,可以预览压缩大小,批量设置 jpg 品质 | 旧版 PS,新版 PS 保留该功能 |
| 导出为 | 文件导出导出为 | 新版优化面板,支持单独设置每个切片参数,界面更直观 | 新版 CC 系列 PS |
详细操作步骤
第一步 使用切片工具完成切片划分,切换切片选择工具,检查每一块切片边界,确认不需要的自动切片可以删除或者转换为用户切片。
第二步 点击顶部菜单栏文件,找到导出,选择存储为 web 所用格式,新版也可以直接选择导出为。
第三步 如果打开存储为 web 所用格式窗口,在窗口内点击切片选择,按住 shift 可以多选切片,也可以直接全选所有切片。
第四步 在右侧格式下拉菜单选择 JPEG,调整品质数值,品质范围 0 到 100,数值越高画质越好,文件体积越大,网页切图一般设置 60 到 85。
第五步 预览窗口查看压缩之后的图片大小,确认没有严重色彩失真,点击保存。
第六步 在弹出的保存窗口,选择目标文件夹,基础名称填写文件名,切片选项选择所有切片,确认保存。
第七步 软件自动生成 images 文件夹,文件夹内每一块切片都生成独立 jpg 文件,文件名称自动追加切片编号。
如果使用导出为面板,操作逻辑是打开面板之后,左侧列表会识别全部切片,逐个选中切片,右侧格式选择 JPG,设置品质,全部设置完成点击导出,选择输出文件夹即可。
关键注意事项
第一 jpg 不支持透明,切片区域如果存在透明像素,导出 jpg 会自动填充白色背景,这个是 jpg 格式本身限制,不是软件故障。
第二 不要直接使用文件存储为,选择 jpg,这种方式不会识别切片,只会导出整张完整大图,不会拆分切片。
第三 如果只想导出其中某一块切片,在导出窗口只勾选目标切片,切片选项设置为选中切片,不用导出全部切片。
第四 导出前确认色彩模式,jpg 支持 RGB,如果是 CMYK 印刷文件,导出 jpg 部分浏览器或者软件会出现偏色,网页项目建议提前转为 RGB。
第五 切片边界如果有抗锯齿半透明边缘,导出 jpg 之后边缘可能出现白边,可以提前调整切片边界或者优化边缘。
第六 如果后续还需要修改切片,记得单独保存 psd 源文件,psd 可以保留切片标记,导出的 jpg 只是成品图片,没有切片信息。
常见异常排查
导出之后没有拆分图片,仍然是一整张图,原因是使用了普通存储为 jpg,没有使用切片导出面板。
导出 jpg 颜色偏暗,是色彩配置文件不匹配,在导出面板开启转换为 sRGB。
切片里面有自动切片,自动切片也被一起导出,提前选中自动切片,使用切片选择工具转换用户切片或者删除自动切片。
导出 jpg 画质模糊,是品质数值设置太低,提高 JPEG 品质数值重新导出。
【常见问题】
问题 1 ps 切片后怎么保存为 jpg 为什么导出的 jpg 透明区域变成白色
回答 1 ps 切片后怎么保存为 jpg,jpg 格式本身不支持透明通道,所以 ps 切片后怎么保存为 jpg 时,透明像素会自动填充白色,如果需要保留透明,不能使用 jpg 格式。
问题 2 ps 切片后怎么保存为 jpg 可以只导出其中一块切片吗
回答 2 ps 切片后怎么保存为 jpg,是可以单独导出单块切片,在导出面板只选中目标切片,切片选项改为选中切片,执行 ps 切片后怎么保存为 jpg 的导出操作,不会导出其他切片。
问题 3 ps 切片后怎么保存为 jpg 新版 PS 找不到存储为 web 所用格式怎么办
回答 3 ps 切片后怎么保存为 jpg,新版 PS 把该功能放到导出子菜单,也可以直接使用导出为面板,同样可以完成 ps 切片后怎么保存为 jpg,格式选择 JPEG 设置品质导出。
问题 4 ps 切片后怎么保存为 jpg 普通另存为 jpg 可以拆分切片吗
回答 4 ps 切片后怎么保存为 jpg,普通另存为 jpg 无法识别切片边界,只会输出整张原图,ps 切片后怎么保存为 jpg 必须使用切片专属导出面板,才能按切片拆分输出独立 jpg。
【免责申明】
本文基于 Photoshop 主流版本讲解,不同版本菜单名称和导出界面存在细微差异,jpg 压缩效果受原图色彩和品质参数影响,本文仅作为学习参考,网页项目请提前确认图片品质 色彩空间 命名规范等交付要求,操作前建议备份 psd 源文件。


