Sketch 如何快速切出背景透明且留边的切图？

大家知道，Sketch切图有几种方式，切片工具（Slice）以及Make Exportable两种。前者所选即所得，如果你在artboard上使用切片工具，切片覆盖区域都将被切出；后者则可以切出透明的图片。但是Riry有哪些优势呢？下面来看看来自宝岛台湾的Riry作者Kakaly的这篇文章，教你在Riry中轻松切出透明背景的图片。

不知道大家是否都曾对于切图这件事有过困扰？😭 不是可以切出来就好，我要更方便呐！（内心的小呼喊～）

先说结论，我觉得 Riry 切图方面的优点有：

1. 适用于不想要输出一堆切图存在自己电脑里占空间的人（需要用到图的开发人员自行去下载就好，开发人员不需要安装外挂就可以使用）
2. 不用 slice 跟要输出的内容 group 起来后，还要各别去将每个 Export Group Contents Only 勾起来（Riry 很聪明地不勾选也知道你要干麻）
3. 不用再额外去设定 Android 与 iOS 切图所需要的解析度（Riry 会自动产生各种解析度的切图）

好，开始说明了！以我自己为例，之前如果我想切一个背景是透明的 icon，做法会是先选取那个 icon，然后选择 Sketch 里面的 “Make Exportable” 功能，但是这个方式只能切出这个 icon “刚刚好”大小的图（以图1为例，会切出一个 16×16 大小的 icon），如果我想要 icon 的边缘有留 10px 的透明区域，那这个方式就行不通了。

图1

那么，如果想要 icon 边缘留 10px 又是透明背景的切图还可以怎么做呢？大家应该就会选择 “Slice” 工具。这个方式虽然可以调整切图范围的大小，但是在输出时却会连同 icon 下面的图层一起切出来（无法切出透明的背景）。如图2所示，只能切出背景是绿色的 icon。

图2

说到这里就得介绍一下 ✨ Riry ✨ 方便的地方啦，接续刚刚上一个步骤用 slice 工具切好范围之后，只需要 “直接” 把这个 Artboard 上传到 Riry，切图就都帮你处理好囉！（也就是背景是透明留边，而且提供好五种解析度mdpi/hdpi/xhdpi/xxhdpi/xxxhdpi，当然如果你是选择iOS的专案，也会帮你产生三种 ＠1x @2x @3x 的图)！

💟 这里有个温馨小提醒：在使用 slice 工具时候，需要先点选 slice，接着将鼠标移至你想切的物件上，待物件上出现一把刀子形状后，点选该物件，之后便可以根据需求调整切图范围大小。💟

之前有人反应失败，原因是因为他点选slice之后，直接去拉出所需要的范围（没有先选取物件）😅

接着，如图3、图4，打开 Plugins 选择 Riry，并且上传你的 Artboard（前提当然是你记得先去下载 Riry Plugin，安装很方便滴，下载后解压缩，点两下就自动安装好哩。

图3

图4

上传完成后，前往 Riry 网站就可以看到你的设计稿规格，以及切图囉！

开发人员直接在Riry上，下载切图即可！（把专案分享给你的开发伙伴，让他们自己去网站上就可以下载切图，不用再输出一堆切图存在自己电脑里占空间💃💃💃）

可以在这张 Artboard 右边的图档区下载这张 Artboard 里的切图。锵锵～你看是背景透明的切图呦(图5所示）！🎉🎉🎉

图5

也可以在整个专案的 Assets 区域下载全部 Artboard 所有切图（目前我只上传一张 Artboard，切图也只有一个），如图6。

图6

下载后解开压缩档，就可以看到所有解析度的切图囉！而且都是有透明留边 10px 的，简单吧！👏

小结
我觉得 Riry 切图方面的优点有：
1. 适用于不想要输出一堆切图存在自己电脑里占空间的人（需要用到图的开发人员自行去下载就好，开发人员不需要安装外挂就可以使用）
2. 不用 slice 跟要输出的内容 group 起来后，还要各别地去将每个 Export Group Contents Only 勾起来（Riry 很聪明地不勾选也知道你要干麻）
3. 不用再额外去设定 Android 与 iOS 切图所需要的解析度（Riry 会自动产生各种解析度的切图）

备注：Riry 是一款 Sketch 的外挂工具，一个设计师与开发人员协作的平台，主要功能是自动标注设计稿规格👈👈👈其实这才是重点所在，可以为设计师们大大地节省标注规格与输出图档的时间与心力。 👍