必须使用“存储为web所用格式(旧版)”并规范切片命名与类型,才能批量导出命名准确、格式匹配、文件完整的独立切片图像。

如果您已完成Photoshop中多个切片的创建,但导出时仅得到单张图或命名混乱、格式错配、文件缺失,则很可能是未正确配置切片类型与导出路径。以下是批量分别保存切片的详细操作步骤:
一、规范切片命名并统一设为“用户切片”
未经命名的切片在导出时将被自动编号(如slice01、slice02),导致资源难以对应;混合使用“自动切片”与“用户切片”会触发嵌套覆盖,使部分区域无法独立导出。必须确保每块切片具备唯一英文名称且类型明确。
1、选择左侧工具栏中的切片选择工具(快捷键Shift+C),按住Shift键框选全部需导出的切片区域(避开灰色“自动”切片)。
2、右键任一切片,在弹出菜单中选择“切片选项”,在对话框中输入不含空格与中文的英文名称,例如banner_main、icon_cart、footer_copyright。
3、确认“类型”下拉菜单中选择用户切片,“样式”设为“无”,点击确定;对所有切片逐一执行此操作,不可跳过任意一块。
二、使用“存储为Web所用格式(旧版)”执行结构化导出
Photoshop的“导出为”或“导出切片”命令不支持按切片命名控制输出文件名,也无法生成带HTML索引的完整资源包,仅“存储为Web所用格式(旧版)”可保障切片名称→文件名的一一映射及目录结构完整性。
1、执行菜单命令文件 → 导出 → 存储为Web所用格式(旧版)(快捷键Alt+Shift+Ctrl+S / Alt+Shift+Command+S)。
2、在弹出窗口左上角“预设”下拉菜单中选择仅限所选切片;右侧取消勾选“翻转GIF动画”与“预览”,保留“优化”勾选。
3、在“设置”区域:对含透明区域的切片(如按钮、图标)选择PNG-24;对无透明需求的大图(如Banner、背景)选择JPEG 高;分别点击“存储”旁小箭头,将两种设置保存为独立预设(如PNG24_clean、JPG_High_NoAlpha)。
三、分格式导出并提取独立图像文件
Photoshop不支持单次导出多种格式的切片,但可通过两次调用“存储为Web所用格式(旧版)”,分别指定PNG与JPEG预设,并在导出结果中提取images子目录下的对应文件,实现格式分离与命名保真。
1、完成命名与预设设置后,点击窗口底部“存储”按钮。
2、在保存对话框中,“保存为类型”设为所有文档,文件名填写project_export,保存路径选择一个全新空白文件夹。
3、在后续弹出的“存储为Web所用格式”面板中,勾选切片、HTML、图像三项,取消勾选“层”与“注释”,点击“存储”。
4、进入目标文件夹,打开同名HTML文件,右键检查各图像链接路径是否指向images/xxx.png;进入images子目录,确认每个文件名与原始切片命名完全一致,无数字追加、下划线替换或大小写变更。
四、通过动作+批处理实现多图批量切片导出
当需对多个PSD源文件(如不同页面的详情页PSD)执行相同切片导出逻辑时,手动逐个操作效率极低。录制标准导出动作后,配合批处理可全自动完成切片识别、格式设定与文件落地。
1、打开一张已规范命名切片的PSD,点击窗口右下角“动作”面板,点击底部“新建动作”,命名为“Slice_Export_PNG_JPG”。
2、点击“记录”,依次执行:文件→导出→存储为Web所用格式(旧版)→设置为PNG-24→存储→关闭该窗口;再次执行存储为Web所用格式(旧版)→设置为JPEG高→存储→关闭。
3、停止录制后,点击文件→自动→批处理,在弹窗中选择刚录制的动作,指定源文件夹(含全部待处理PSD)、目标文件夹(建议为空),勾选覆盖动作中的‘存储为’命令,取消“包含所有子文件夹”,点击“确定”。
五、使用切片选择工具+快速导出为PNG替代方案
若仅需PNG格式且无需HTML索引与路径管理,可绕过Web导出流程,直接利用切片选择工具结合图层可见性控制,实现轻量级单切片快速输出,适用于临时调试或小范围切图。
1、确保当前文档中仅保留需导出的切片对应图层可见(点击图层前小眼睛图标控制)。
2、使用切片选择工具单击某一切片区域,使其边缘出现虚线高亮。
3、右键该切片,在弹出菜单中选择快速导出为PNG,在保存对话框中手动输入文件名(将自动继承切片名称),选择路径后保存。
4、重复步骤2–3,逐一切片执行,每张图均以独立PNG文件落地,无HTML或额外子目录生成。











