在 PS 里面使用切片工具，核心就是用切片工具把整张大图切割成多个独立区块，之后通过存储为 Web 所用格式，把每一块切片单独导出成图片文件，这个功能最早主要服务网页设计，用来把整版网页效果图拆分成按钮 背景 图文模块，现在也经常用于电商详情页 长图拆分 批量导出小图，很多新手容易混淆切片工具和裁剪工具，裁剪是把画布多余部分删掉，切片是保留整张原图，只是划分多个导出区域，还能给每个切片单独设置导出格式 品质 链接，理解切片分用户切片和自动切片两种类型，掌握对齐 划分 编辑切片的操作，就能熟练完成切图工作，不会出现切片错位 导出缺图这类常见问题。

核心原理

切片本质是在画布上叠加的参考划分标记，不会真正修改原图图层，只是标记导出边界。切片分为两类，用户切片是你手动绘制出来的切片，边框是实线，自动切片是 PS 自动填充剩余空白区域，边框是虚线，当你新增或者移动用户切片，自动切片会跟着重新计算。每个切片都可以单独设置名称 导出格式 JPG PNG GIF 品质 透明属性，还可以添加网页链接 替代文本，导出的时候所有切片会按照序号自动命名，存放到独立 images 文件夹里面。切片还支持基于参考线生成，适合排版规整的网页稿，比手动逐个拖拽绘制精度更高。

详细操作步骤

第一步 调出切片工具

打开 PS，在左侧工具栏，找到切片工具，它和切片选择工具是一组，如果没有直接看到，长按裁剪工具组，在弹出菜单里面切换出切片工具，图标是带切割标记的方块。

第二步 手动绘制切片

选中切片工具之后，在画布上按住鼠标拖拽，拉出矩形选区，松开鼠标就生成第一个用户切片，切片左上角会自动显示编号，继续拖拽可以绘制多个切片，画布剩下的区域会自动生成虚线的自动切片。绘制的时候按住 Shift 可以拉出正方形切片，按住 Alt 是从中心向外绘制切片。

第三步 使用参考线精准生成切片

如果是规整网格排版，先拉出水平和垂直参考线，然后顶部菜单点击切片，选择基于参考线的切片，PS 会自动沿着参考线全部交叉位置生成切片，这个方法适合整版网页 表格类大图，精度远高于手动拖拽。

第四步 切换切片选择工具调整切片

长按切片工具，切换到切片选择工具，这个工具用来选中已经做好的切片，可以拖动切片边缘控制点修改大小，拖动切片整体移动位置，还可以在顶部属性栏调整切片堆叠顺序，设置提升为用户切片，把自动切片转成用户切片，也可以删除不需要的切片。

第五步 切片划分与设置

选中单个切片，在切片选择工具顶部属性栏点击划分，能够把当前选中切片横向或者纵向再拆分成多份，实现等均分块。在切片上右键，选择编辑切片选项，可以修改切片名称，填写 URL 链接，设置目标窗口，添加 Alt 替代文本，网页用途才需要填这些参数，单纯导出图片可以不用填写。

第六步 导出切片文件

全部切片调整完成，点击顶部菜单文件，选择导出，旧版本叫存储为 Web 所用格式，在弹窗里面，可以统一或者单独选中切片，设置每个切片的格式 品质 透明度，确认之后点击保存，选择输出文件夹，PS 会自动创建 images 文件夹，把所有切片图片批量导出。

进阶补充说明

常见误区

很多新手以为切片会把原图图层切开，实际上切片只是导出标记，原 psd 文件图层不会发生任何改动，就算删除全部切片，原图依旧完整。还有人导出之后找不到图片，是因为 PS 默认把切片图片放在 images 子文件夹，主文件夹只会生成网页 html 文件，如果不需要 html，可以在导出设置里面取消勾选生成 html，只导出图片。大尺寸长图切分的时候，切片边缘如果和像素不对齐，导出之后会出现半像素模糊，绘制切片的时候建议对齐像素网格。

掌握切片工具这套操作之后，就可以把整张大效果图拆分导出，不管是网页切图还是电商长图分段导出，都可以快速完成批量出图，搭配参考线可以大幅提升切图精度，减少手动调整的工作量。

【常见问题】

问题 1 ps 怎么使用切片工具 导出之后为什么会多出 html 文件

回答 1 ps 怎么使用切片工具，在导出存储设置里面默认勾选生成 html 网页文件，如果只需要图片，导出窗口取消勾选生成 html 选项，就不会额外生成网页文件，只会导出切片图片。

问题 2 ps 怎么使用切片工具 虚线自动切片能不能单独设置品质

回答 2 ps 怎么使用切片工具，虚线自动切片可以单独设置导出品质，也可以在切片选择工具选中自动切片，执行提升到用户切片，之后就可以像普通用户切片一样编辑切片选项。

问题 3 ps 怎么使用切片工具 切片可以是不规则形状吗

回答 3 ps 怎么使用切片工具，原生切片工具只支持矩形切片，不能直接制作圆形或者异形切片，如果需要异形导出，需要使用导出为或者蒙版，不能依靠切片工具实现异形切图。

问题 4 ps 怎么使用切片工具 保存 psd 之后切片标记会丢失吗

回答 4 ps 怎么使用切片工具，切片标记会保存在 psd 工程文件里面，下次重新打开这个 psd，之前绘制的切片标记还会保留，不需要重新绘制切片。

【免责申明】

本教程基于 Photoshop 常规版本操作讲解，不同 PS 版本导出菜单名称存在差异，新版 PS 已经把存储为 Web 所用格式调整到导出菜单内，操作效果受画布 参考线 像素对齐影响，教程仅供学习参考，不保证所有版本界面完全一致。