如何调出切片工具
调出切片工具主要有两种方法,都非常快捷。
（图片来源网络，侵删）
使用工具栏（最直观）
- 打开你的 Sketch 文件。
- 在屏幕左侧的 工具栏 中找到 矩形工具。
- 长按 矩形工具图标,会弹出一个隐藏的工具菜单。
- 在弹出的菜单中，选择最后一个选项——切片。
使用菜单栏（最快速）
- 确保你已经在画布上选中了一个或多个图层（矩形、文字、图片等都可以）。
- 点击顶部菜单栏的 图层。
- 在下拉菜单中，选择 切片。
- 想找工具图标： 长按矩形工具。
- 想快速创建： 选中图层 ->
图层->切片。
切片工具的主要用途
切片工具的核心作用是 精确地定义导出区域和导出设置，当你需要将设计稿中的某个部分（比如一个按钮、一张图片、一个图标）导出为独立的图片文件时,切片就是最佳选择。
它的主要优势在于：
- 精确导出：不受画布边界限制,可以精确框选你想要的任何区域。
- 批量导出：一次可以创建多个切片，然后一键导出所有切片,大大提高效率。
- 自定义导出设置：每个切片都可以独立设置导出的格式（PNG, JPG, SVG 等）、分辨率（1x, 2x, 3x）等。
切片工具的基本使用步骤
下面我们通过一个完整的例子来学习如何使用切片。
（图片来源网络，侵删）
目标： 将设计稿中的一个蓝色按钮和一个红色按钮，分别导出为独立的 PNG 图片。
步骤 1：创建切片
-
准备素材：在画布上画好你想要导出的图形或元素,比如一个蓝色的矩形按钮和红色的文字。
-
创建切片：
- 方法一（推荐）：用 矩形工具 框选住你想要导出的第一个按钮（蓝色矩形）。
- 方法二：直接选中蓝色矩形图层，然后使用菜单栏
图层->切片。 - 重复此操作,为红色按钮也创建一个切片。
-
识别切片：创建成功后，你会看到画布上出现了一个带有 虚线边框 和 绿色标记 的矩形区域,这个就是切片。
（图片来源网络，侵删）
步骤 2：设置切片属性
这是最关键的一步,决定了你导出图片的格式和规格。
- 选中切片：点击你刚刚创建的切片（那个绿色虚线框）。
- 打开检查器：在屏幕右侧的检查器 面板中,你会看到这个切片的所有设置。
- 进行设置：
- 名称：给切片起一个有意义的名字，
btn-blue,方便管理和识别。 - 导出格式：在下拉菜单中选择你需要的格式，如
PNG,JPG,SVG,PDF等，对于图标和界面元素，PNG是最常用的。 - 分辨率：这是 Retina 屏适配的关键。
1x：标准分辨率。2x：高分辨率，尺寸是1x的两倍，适用于 Retina 屏幕。3x：超高分辨率，尺寸是1x的三倍。- 你可以勾选多个，比如同时勾选
1x和2x，Sketch 会自动为你生成两套不同尺寸的图片。
- 背景：如果你的切片下方有其他图层，可以选择
Opaque(不透明) 或Transparent(透明)，导出 PNG 图标时选择Transparent。
- 名称：给切片起一个有意义的名字，
步骤 3：导出切片
设置好所有切片的属性后,就可以导出了。
- 导出单个切片：选中一个切片，然后点击顶部菜单栏的 文件 -> 导出... (或快捷键
Cmd + E),在弹出的窗口中确认设置后导出。 - 导出所有切片（最常用）：
- 方法一：点击顶部菜单栏的 文件 -> 导出所有切片...。
- 方法二：直接使用快捷键
Cmd + Option + E。 - 方法三：在检查器中，点击切片设置区域右上角的 “导出” 按钮。
Sketch 会自动创建一个文件夹，文件夹名称就是你切片的名称,里面会存放所有你设置好并导出的图片文件。
高级技巧：使用“切片蒙版”
切片还有一个更强大的功能，叫做“切片蒙版”，它不是用矩形去框，而是用一个形状去“裁剪”其下方的图层。
用法：
- 将你想要导出的图层（比如一张复杂的图片）放在最下面。
- 在它上面，创建一个你想要的形状（比如一个圆形、一个不规则的星形）。
- 同时选中这两个图层（先选形状，再按住
Cmd点击图片图层）。 - 右键点击，选择 使用所选形状创建切片。
这样，导出的就会是那个形状内的图片内容，而不是一个矩形切片,这对于导出不规则形状的图标或元素非常有用。
| 功能 | 操作方法 | 主要用途 |
|---|---|---|
| 调出工具 | 长按矩形工具 或 选中图层后 图层 -> 切片 |
创建切片区域 |
| 创建切片 | 用矩形工具框选 或 选中图层后创建 | 定义要导出的区域 |
| 设置属性 | 选中切片，在右侧检查器中设置 | 定义导出格式、分辨率、名称等 |
| 导出切片 | 文件 -> 导出所有切片... (快捷键 Cmd + Option + E) |
批量导出所有设置好的切片 |
希望这个详细的指南能帮助你完全掌握 Sketch 的切片工具！
