Ps：切片工具

切片工具 Slice Tool是一种专门用于网页设计和网页图像优化的工具。它允许用户将大型图像分割成较小的部分（切片），这些切片可以单独优化并用于构建网页布局。

快捷键：C

在设计网页时，可使用切片来定义和管理不同的内容区域，是一种最直白的网页布局方法，不必考虑如何去设计表格。

将大型图像切割成更小的部分，便于在网页上更快速地加载和显示，提高用户浏览页面的体验。

在创建切片之前，一般要先规划好网页的布局以及确定哪些区域需要切片。

◆  ◆  ◆

常用操作方法与技巧

1、用户切片、自动切片与图层切片。

用户切片

User slices

用户手动创建的切片，切片左上角为蓝底标识，并对应的一个顺序编号。

自动切片

Auto Slices

那些未被用户切片覆盖的图像区域被动生成的切片，切片左上角为灰底标识。

自动切片不可编辑，除非提升为用户切片：在切片上右击选择“提升到用户切片”，或者，选择“划分切片”。

图层切片

Layer Slices

基于图层的内容自动生成的切片。

Ps菜单：图层/新建基于图层的切片

New Layer Based Slice

Photoshop 会根据该图层的尺寸和位置创建切片。

图层切片适用于需要确保特定图层内容完整导出的情况，例如网页设计中的按钮、图标或其他图形元素。

图层切片紧密绑定于图层，不可手动编辑，只会随着特定图层的移动或大小调整而自动变换。

2、使用切片工具时，按住左键拖拽出一个矩形，就会出现一个用户切片。

在未松开鼠标前，可按住 SpaceBar（空格键）调整位置，按住 Shift 键则为正方形。

如果在“样式”选项中设置的是“固定大小”，则只需单击即可。

3、尽量使用自动而非手动的方式创建切片。

比如，先创建参考线版面，并基于参考线进行切片。

或者，在初始切片上右击，选择“划分切片”。

或者，使用图层切片的方法创建切片。

4、按住 Ctrl 键，可切换到切片选择工具。

切换到切片选择工具之后，就可对选中的切片进行移动、调整大小、设置切片选项等操作。

请参阅：

《Ps：切片选择工具》

也可以在切片上右击，从而选中切片并能进行相关操作。

5、临时隐藏或重新显示所有的切片。

Ps菜单：视图/显示/切片

View/Show/Slices

或者，按快捷键 Ctrl + H 以隐藏所有额外内容。

也可在切片选择工具状态下，隐藏自动切片，只显示用户切片。

6、导出切片。

Ps菜单：文件/导出/存储为 Web 所用格式（旧版）

File/Export/Save for Web(Legacy)

快捷键：Ctrl + Alt + Shift + S

在“存储为 Web 所用格式”对话框左侧工具栏中提供了切片选择工具。

可选择要导出的一个或多个切片，或者在“存储为”对话框中选择导出所有切片。

◆  ◆  ◆

工具选项说明

样式

Style

--正常 

Normal

默认选项。自由绘制切片区域。

--固定长宽比 

Fixed Ratio

在宽度 Width、高度 Height框内输入宽高比。

--固定大小 

Fixed Size

在宽度、高度框内输入数值，默认单位为“像素”。

基于参考线的切片

Slices From Guides

利用已经设置好的参考线自动生成切片，这对于按照特定布局快速创建切片非常有用。

请参阅：

《Ps：参考线》

“点赞有美意，赞赏是鼓励”