核心结论是 PS 切片工具主要作用是把整张大图按照需要划分成多个独立区块，之后可以单独导出每一块切片，常用于网页设计稿拆分，电商详情页拆分，它的原理就是在画布上建立分割标记，不会真正裁切原图，原图图层依旧完整保留，很多新手会把切片和裁剪工具混淆，裁剪是直接删掉画布多余部分，切片只是添加分割参考标记，理解这个核心区别之后，就能掌握切片绘制调整，设置切片选项，最后导出为网页所用图片整套流程，切片工具在左侧工具栏，和切片选择工具是一组，绘制完切片之后，还能调整编号，设置每个切片的名称链接，选择不同切片单独保存 JPG PNG GIF 格式。

一 切片工具基础位置与基础认识

切片工具在左侧工具栏，图标是小刀样式，如果当前看不到，就在裁剪工具那一组图标上长按，展开菜单就能找到切片工具，配套还有切片选择工具，用来选中已经画好的切片，移动调整大小。

切片分为两种类型

第一种 用户切片，就是手动用切片工具拖拽绘制出来的切片，边框颜色是实线

第二种 自动切片，PS 自动生成的剩余区域切片，边框是灰色虚线，自动切片可以转换为用户切片，方便单独编辑

二 切片绘制完整操作步骤

第一步 打开需要切图的设计稿，在左侧工具栏选中切片工具

第二步 在画布上按住鼠标左键拖拽，拉出矩形框，松开鼠标就生成一块用户切片，切片左上角会自动生成编号

第三步 如果需要多块切片，继续拖拽绘制，画布剩余空白区域 PS 会自动生成自动切片

第四步 切换到切片选择工具，点击已经画好的切片，拖动切片边缘控制点，可以修改切片大小，也可以直接拖动整块切片移动位置

第五步 如果需要对齐整齐，可以调出参考线，视图菜单新建参考线，按照设计稿栅格拉参考线，绘制切片的时候自动吸附参考线，切出来的区块更加规整

三 切片选项设置

选中切片之后，双击切片，或者在顶部属性栏点击切片选项，打开设置窗口

可以设置内容

切片名称，导出之后图片文件名，建议改成有意义名字，不要默认切片 01

类型，选择图像，普通图片切片，如果是纯文字区域可以选择无图像，导出之后该区域不会生成图片

URL，网页切片可以填写链接地址，目标窗口，Alt 标记文字，做网页交互的时候才需要填写，普通切图只需要修改名称即可

四 切片导出操作

切片画好并且调整完毕之后，点击顶部文件菜单，选择导出，存储为 Web 所用格式，新版 PS 叫导出为

在窗口里面，可以单独选中每一块切片，分别设置压缩格式，JPG 适合照片，PNG 适合带透明背景图形

设置好品质颜色之后，点击存储，在保存窗口，切片下拉选项，选择所有切片，然后选定输出文件夹，确认保存，PS 就会把每一块切片单独生成图片文件

如果只想要导出其中某一块切片，就在存储窗口切片选项选择选中的切片

五 切片编辑管理

六 进阶使用要点

第一 切片边界尽量对齐像素，避免导出图片出现半透明虚边，绘制切片的时候可以开启对齐像素功能

第二 不要重叠切片，重叠之后导出容易出错，切片边界尽量不要压在文字边缘，防止文字被切残缺

第三 电商长图切分的时候，切片高度尽量统一，方便上传后台拼接

第四 如果只是单纯拆分图片，不需要网页链接，切片选项里面 URL 相关内容可以留空，不用填写

第五 老版本 PS 是存储为 Web 所用格式，新版 PS 改成导出为，功能逻辑保持一致

【常见问题】

问题 1 ps 切片工具使用方法 为什么导出之后多出很多多余图片

回答 1 ps 切片工具使用方法里面，画布空白区域会自动生成自动切片，如果导出选择所有切片，这些自动切片就会一并导出，解决办法是不需要的自动切片删除，或者导出的时候只选中需要的用户切片。

问题 2 ps 切片工具使用方法 切片和裁剪工具有什么不一样

回答 2 ps 切片工具使用方法核心特点是只添加分割标记，原图图层完整保留，裁剪工具是直接修改画布尺寸，删除画布以外内容，切片适合网页切图拆分，裁剪适合整体缩小画布。

问题 3 ps 切片工具使用方法 切片边缘有虚边怎么处理

回答 3 ps 切片工具使用方法绘制切片时，如果边界没有对齐像素就会出现虚边，开启对齐像素，拖动切片控制点对齐整数像素，导出的时候重新设置 PNG 或者 JPG 参数，就可以消除切片虚边。

问题 4 ps 切片工具使用方法 怎么把自动切片改成可编辑用户切片

回答 4 ps 切片工具使用方法中，切换切片选择工具，点击灰色虚线的自动切片，在顶部属性栏点击提升，自动切片就会变成实线用户切片，之后就可以修改名称调整大小。

【免责申明】

本文基于 Adobe Photoshop 通用版本操作整理，不同 PS 版本菜单名称存在差异，新版旧版导出入口名称略有变化，本文仅作为操作参考，切图效果受原图设计稿精度影响。