PS 完成切片之后,不能直接用普通另存为,正确方式是使用存储为 Web 所用格式功能,把所有切片批量导出成 jpg 格式,这个功能专门针对网页切片优化,支持统一设置压缩品质色彩等参数,是切片导出最标准的操作。很多新手会误点文件另存为,这种方式只会保存整个 PS 源文件画布,并不会单独输出每一块切片,也就达不到切片拆分导出图片的目的,核心原理就是依靠切片工具把画布划分成多个独立区域,导出时软件识别每一块切片边界,单独生成对应的图片文件。
前期准备确认
在导出之前,先检查切片状态,避免导出出错。
1 确认已经使用切片工具完成画布划分,切片边界显示正常,没有错位重叠
2 检查是否存在自动生成的多余切片,多余切片可以选中之后按 Delete 删除
3 确认图层没有隐藏错误,需要保留的内容全部可见,不需要的内容提前隐藏
详细导出操作步骤
1 顶部菜单栏点击文件,找到导出选项,选择存储为 Web 所用格式,旧版本 PS 直接在文件菜单可以直接看到该选项
2 在弹出窗口右上角,格式下拉菜单选择 JPEG
3 设置 JPEG 相关参数,品质数值范围 0 到 100,数值越高图片越清晰,文件体积越大,网页常用 60 到 80
4 勾选优化选项,根据需要选择连续,连续可以让图片加载时渐进显示
5 点击窗口左侧切片选择工具,可单独点选某一个切片,单独调整它的品质参数,不需要统一全部切片同品质就可以单独设置
6 全部参数确认完成之后,点击存储按钮
7 在保存窗口,选择保存位置,保存类型选择仅限图像,切片选项选择所有切片
8 确认之后点击保存,软件会自动生成 images 文件夹,所有切片 jpg 文件全部保存在这个文件夹内
单独导出单个切片的补充方法
如果不需要全部切片,只想要其中某一块切片的 jpg
1 同样打开存储为 Web 所用格式窗口
2 使用切片选择工具,点击选中目标切片
3 切片选项这里改成选中切片,再选择 JPEG 格式设置品质
4 点击存储,就只会导出当前选中这一张切片 jpg
常见报错与注意事项
| 问题 | 解决办法 |
|---|---|
| 导出之后没有 jpg,只有 html 文件 | 保存窗口切片选项没有选择所有切片,或者保存类型选错,要选择仅限图像 |
| 切片导出图片模糊 | JPEG 品质设置过低,重新导出把品质调高 |
| 切片名称乱码 | 保存路径不要带中文特殊字符,更换英文路径重新导出 |
| 新版 PS 找不到存储为 Web 所用格式 | 新版 PS 该功能迁移到导出为,或者可以通过旧版恢复插件调出,也可以用导出为功能,格式选择 JPEG,勾选导出切片 |
完成全部设置保存之后,打开目标文件夹就可以查看每一张独立的切片 jpg,后续可以直接用于网页素材,电商详情页等场景,需要调整的话返回 PS 修改切片边界或者画面内容,再重复导出流程即可。
【常见问题】
问题 1 ps 切片后保存 jpg 可以批量导出吗
回答 1 ps 切片后保存 jpg 是支持批量导出的,在存储为 Web 所用格式里选择所有切片,一次性导出全部切片的 jpg,不需要一张一张单独保存,适合大量切片素材输出。
问题 2 ps 切片后保存 jpg 为什么画质很差
回答 2 ps 切片后保存 jpg 画质差一般是 JPEG 品质参数设置太低,JPEG 属于有损压缩格式,重新打开导出窗口,把品质数值调高,同时不要多次重复导出,多次压缩会持续降低画质。
问题 3 ps 切片后保存 jpg 找不到 images 文件夹怎么办
回答 2 ps 切片后保存 jpg 之后,images 文件夹是自动生成在你选定的保存目录里面,如果找不到,优先确认保存路径,同时检查保存类型是否设置为仅限图像,如果导出类型是 html 和图像,除了 images 文件夹还会附带网页文件。
【免责申明】 本教程基于 Photoshop 常规版本操作演示,不同 PS 版本菜单名称和功能位置存在差异,操作效果会受软件版本系统环境影响,仅供学习参考。


