Photoshop 批量导出切片:从切图准备到命名规则的完整实操教程

适用场景:为什么用“切片批量导出”

当你要把一张整稿一次性导出多个图层合成图(按钮、图标、Banner 模块、详情页模块)时,切片(Slice)比“逐个另存为”更稳定:可批量、可命名、可导出同一目录结构,尤其适合电商详情页、活动页、UI 组件导出。

导出前准备:统一画板与像素规则

1)确认像素单位:在 编辑 > 首选项 > 单位与标尺,标尺设置为“像素”。这样切片的尺寸不会出现小数像素导致的边缘虚化。

2)检查分辨率:Web/UI 常用 72/96 dpi,但更关键的是“像素尺寸”。不要为了追求 dpi 去改图像大小导致像素变化。

3)对齐到像素:移动工具选项里勾选“自动选择”时要小心误选;形状/文字尽量落在整数像素坐标。

步骤一:创建切片(Slice)

方法 A:切片工具手动框选

1)长按裁剪工具组,选择“切片工具(Slice Tool)”。

2)在画布上拖拽框选需要导出的区域,松开即可生成一个切片。

3)重复框选,直到所有需要的区域都变成切片。

方法 B:基于参考线生成切片(更适合规则网格)

1)先用 视图 > 新建参考线布局 或者手动拖参考线把模块划分好。

2)选择切片工具后,在顶部菜单点 基于参考线创建切片(不同版本文案略有差异)。

3)这种方式导出整齐,但需要你提前把网格规划好。

步骤二:设置切片命名规则(强烈建议做)

1)切换到“切片选择工具(Slice Select Tool)”。

2)单击某个切片,在顶部或右键菜单里找到“切片选项/切片属性”。

3)把默认的 slice_01 改成有意义的名字,例如:

home_btn_primary、icon_search_24、banner_top。

命名建议

(1)只用英文/数字/下划线,避免空格和中文(某些系统解压或协作工具会出问题)。

(2)同类资源加尺寸或状态:btn_pay_default / btn_pay_hover。

(3)导出前检查是否有重名,重名会被覆盖或自动追加编号。

步骤三:一键批量导出(导出为 Web 所用格式)

1)进入 文件 > 导出 > 存储为 Web 所用格式(旧版)(部分版本叫“存储为 Web(旧版)”)。

2)右上角预设选择:

(1)图标/透明背景:优先 PNG-24(透明边缘更干净)。

(2)照片/大图:可用 JPG(质量 60-80 通常够用)。

3)在窗口底部找到切片选项,选择 所有切片(或“选中的切片”按需)。

4)点击“存储”,选择目标文件夹,Photoshop 会把每个切片按名称导出为独立图片。

推荐参数:PNG/JPG 怎么选更省心

PNG-24:支持透明,适合 UI、图标、需要清晰边缘的元素。文件可能较大。

PNG-8:颜色少、体积小,但容易色带;适合简单扁平图标。

JPG:适合照片、渐变背景大图;不支持透明;质量建议 60-80 先看预览再定。

常见问题排查(最容易踩坑的 6 个点)

1)导出后出现白边/虚边:多半是切片边界落在了半像素。回到切片选择工具,查看切片尺寸是否为整数;必要时把切片位置/尺寸调成整数像素。

2)切片导出内容不对(切到了不该要的区域):检查是否有隐藏图层、智能对象或蒙版影响;导出前把不需要的图层关掉更稳。

3)导出的文件名变成了自动编号:说明切片名称未设置或重名。给每个切片设置唯一名称,再导出一次。

4)透明背景变成黑底/白底:导出格式用 JPG 会丢透明;改为 PNG-24。

5)导出后尺寸对不上:检查是否在导出窗口里设置了缩放(如 50%/2x),以及文档是否有“图像大小”被改过。

6)找不到“存储为 Web(旧版)”:部分新版本默认隐藏,可在 Photoshop 设置中启用旧版导出菜单;或者用“导出为…”替代,但切片批量导出稳定性通常还是旧版更好。

进阶:把切片导出变成可复用工作流

1)把命名规则写成模板:例如 页面_模块_状态_尺寸。

2)同一项目保持目录结构:/export/ui/、/export/banner/。

3)每次导出前先做“切片清点”:删除不用的切片,避免无关文件混进交付包。

小结

切片的核心价值是“可批量、可命名、可复用”。只要你把像素对齐和命名规则做好,后面的导出就会变得极其稳定,交付效率也会明显提升。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

暂无评论,快来抢沙发吧~

操作成功