ps 切片之后想要保存成一张一张独立图片,核心就是使用存储为 Web 所用格式,把已经划分好的切片批量拆分导出,每一块切片会单独生成一个图片文件,自动归类到 images 文件夹,这个功能原本是网页切图专用,原理是按照画布上的切片分割线,把大图切割成多个小图,每块切片可以单独设置 jpg png 格式和压缩品质,还可以提前给切片自定义命名,导出之后文件名就是你设置的名称,新版 PS 菜单位置有改动,部分新版本把这个旧功能调整到导出菜单里面,要区分两个概念,保存 psd 只是保留切片分割标记,并不会把切片拆成单张图片,只有执行导出操作,才能得到一张一张分开的图片,如果只需要部分切片,也可以在导出面板里面只选中目标切片单独导出,不用全部导出。
一 导出前准备
1 使用切片工具画好全部分割线,切换到切片选择工具,拖动调整每一块切片边界
2 双击切片,打开切片选项,修改切片名称,推荐提前命名,避免导出之后是默认编号文件名
3 确认画布没有多余隐藏切片,不需要导出的切片可以在选项栏设置隐藏
二 完整导出步骤
1 点击顶部 文件,选择导出,找到存储为 Web 所用格式
2 进入面板之后,使用面板内的切片选择工具,点选全部切片,或者按住多选
3 右侧对每一块切片设置格式,照片类选 jpg,透明背景选 png
4 调整品质参数,数值越高清晰度越好,文件体积更大
5 设置完成,点击存储
6 在保存窗口,保存类型选择仅图像,选择存放位置
7 确认保存,PS 自动运算,所有切片一张一张分开导出,图片全部放在 images 文件夹里面
三 关键选项对照表
| 选项 | 作用 | 适用场景 |
|---|---|---|
| 仅图像 | 只输出拆分好的单张切片图片,不生成网页代码 | 只需要单独图片素材 |
| html 和图像 | 导出单张切片同时生成 html 网页文件 | 前端网页切图项目 |
| 所有切片 | 一次性导出全部切片 | 整套切图批量保存 |
| 选中的切片 | 只导出选中的那几块切片 | 只需要部分切片 |
四 新版 PS 替代方案
如果新版 PS 找不到存储为 Web 所用格式,可以使用导出为功能替代,选中切片之后,在导出面板勾选导出切片,同样可以实现切片拆分,但是旧版存储为 Web 所用格式对切片批量压缩控制更方便,网页切图还是优先推荐这个功能。
五 常见问题排查
1 导出之后还是一整张图,没有拆分,是保存类型选错,或者没有正确识别切片分割线,重新确认切片标记正常显示
2 导出图片模糊,jpg 品质数值太低,重新导出提高品质
3 images 文件夹没有生成,保存窗口保存类型选错,重新选择仅图像导出
4 切片标记下次打开消失,是因为保存成 jpg png,切片标记只能保存在 psd 源文件,想要继续编辑切片,必须另外保存 psd 工程文件
【常见问题】
问题 1 ps 切片后怎么保存一张一张的,能不能单独导出其中某一块切片
回答 1 ps 切片后怎么保存一张一张的,支持单独导出,打开存储为 Web 所用格式面板,选中目标切片,导出范围选择选中的切片,就可以单独把这一块切片保存成独立图片,不用导出全部切片。
问题 2 ps 切片后怎么保存一张一张的,导出之后为什么会生成 html 文件
回答 1 ps 切片后怎么保存一张一张的,如果保存类型选成 html 和图像,就会附带网页文件,只想要分开单张图片,ps 切片后怎么保存一张一张的,把保存类型改成仅图像就不会生成 html。
问题 3 ps 切片后怎么保存一张一张的,png 透明切片可以正常导出吗
回答 1 ps 切片后怎么保存一张一张的,透明背景切片在面板格式选择 png,就可以保留透明通道,每一张切片独立保存,透明效果不会丢失,适合图标类切图。
问题 4 ps 切片后怎么保存一张一张的,保存 psd 是不是就等于导出单张图片
回答 1 ps 切片后怎么保存一张一张的,保存 psd 只是保留切片分割标记,并不会拆分图片,ps 切片后怎么保存一张一张的,必须执行存储为 Web 所用格式导出,才会生成一张一张独立图片。
【免责申明】
本文仅介绍 ps 切片后拆分保存操作,不同 PS 版本菜单布局存在细微差异,因参数设置错误、切片划分异常造成导出失败或者文件损坏,相关风险由使用者自行承担。


