了解Sketch的导出选项功能

从您的设计中导出资产是一项常见任务。您首先创建和准备图形，然后选择导出格式，设置其属性，然后您就完成了。sketch 3 中的导出工具是其最佳功能之一。事实上，Sketch 3 以多种不同的方式帮助我们导出内容，我相信您将通过阅读本文来改进您的工作流程。

如果您在大量设计工作中使用 Sketch，您可以通过使用Envato Market 上的一些Sketch 模板来节省时间。您可以下载包含最常用 UI 元素的预制、可定制版本的 Sketch 文件，以便您可以快速调整它们以适应您自己的需求，而不是每次都从头开始。

草图模板

1.出口基础

步骤1

打开草图。我们的画布上需要一个对象，所以让我们创建一个矢量形状。转到“插入”>“形状” ，然后选择一种可用工具。对于这个例子，我将使用插入 > 形状 > 矩形 (R) 创建一个300x300 像素的正方形。

请记住，您可以通过Inspector 面板 绘制一个随机矩形并调整其属性 。

第2步

现在转到 文件菜单。您应该看到“ 导出”选项已被激活。在工具栏中，您也可以单击“导出”图标，因此请继续单击它。您会注意到画布、图层列表和检查器面板中的一些变化。发生了什么事？

在图层面板中，Sketch 自动创建了一个新切片 ，其尺寸和位置与我们在画布上的对象相同。切片是允许我们将画布上的区域导出到文件的特殊层。切片定义区域内的所有内容都将包含在该文件中。您可以使用“插入”>“切片 (S) ”选项拥有任意数量的切片。每个切片将导出到不同的文件。

当存在时，刀图标和虚线轮廓表示所讨论的图层是切片。您可以像 Sketch 中的任何其他对象一样更改其位置、宽度和高度。您可以直接在画布上移动或缩放它们，或者使用检查器更改它们的属性。

检查员小组

谈到检查器，在选择切片的同时查看它。正如我已经说过的，我们可以改变切片的位置、宽度和高度。但我们也可以看到一些新选项：

修剪透明像素。如果您需要导出的文件从边缘修剪透明像素，请打开此选项。例如，假设您在 80x80 像素的切片中有一个 32x32 像素的图标。选中此选项将自动导出 32x32px 文件，而无需调整切片大小。草图将修剪掉透明像素。

• 仅导出组内容。这在创建具有重叠内容的复杂设计时非常有用。我们现在无法打开它，所以我们将其留给下一个示例。

• 背景颜色选项 让我们为所选切片选择背景颜色，填充导出区域内的任何透明像素。 

在导出标签旁边， 我们发现不同的下拉和输入字段：

• 如果我们需要调整将为此切片导出的内容的大小， Size可以让我们添加一个乘数。Sketch 3 带有一些预定义的选项和变量。

• 如果您想在文件名中添加一些内容以使其具有描述性，请在后缀输入中输入一些内容。例如，您可以@2x为双倍大小的图像添加后缀。

• 使用格式下拉菜单选择文件格式。Sketch 支持的导出格式有 .png, .jpg, . tiff, ,和. .pdf.eps.svg

默认情况下，草图导出选项设置为 Size=1x（100% 原始大小），无后缀和.png格式。将这些选项保留为默认值或根据需要使用它们。

提示： Sketch 支持导出为任意尺寸，所以如果您需要 100x 导出或 1.75x 导出之类的东西，请不要担心。您还可以键入像素值，然后输入w表示宽度和h表示高度，以导出任意大小的资产。例如，在导出工具中输入60w，Sketch 将以 60px 宽导出您的资源并相应地缩放高度。同样，如果您键入60后跟h ， Sketch 将以 60 像素的高度导出您的资源并按比例缩放宽度。 

第 3 步

现在，请记住选择切片，看看检查器面板的底部区域。您会在它旁边看到一个大按钮和一个较小的按钮。第一个将向您展示最终的导出步骤。另一个为您提供了一些额外的选项，可将您的文件直接附加到不同的应用程序。随意单击按钮以查看完成导出过程后会发生什么。

提示：重命名切片图层以自动为导出的内容分配文件名。 一个不错的技巧是在名称 中包含一个斜杠 / ，指示 Sketch 为您创建子文件夹。下图更清楚地说明了这一点：

重命名切片层以包含斜线/

导出该层

生成的文件夹结构

2. 指定要导出的内容

步骤1

打开export_what_you_want 我作为本教程附件提供的文件。 

注意：您需要 Sketch 3 才能打开它，但如果您使用的是旧版本，请不要担心。自己复制内容应该不会太难，但请记住，我们涵盖的某些选项可能对您不可用。请参阅下图以供参考：

您会看到一些分组对象、画板和其他元素直接放置在画布上，画板外部。 

第2步

转到文件 > 导出。或者，您可以单击工具栏中的导出图标。

当您第一次单击“导出”时，Sketch 将假定您要导出您的画板，并使其自动导出，丢弃画板外的所有对象。您还会注意到图层列表中没有可用的切片图层。 

Sketch 3 中的画板可以直接导出，无需添加额外的切片。如果您将新画板添加到文档，只需单击检查器面板中导出标签旁边的+图标，即可将导出大小添加到这些画板，同时保持画板处于选中状态。下次单击“导出”图标时，Sketch 也会包含这些画板。

第 3 步

让我们回到我们的文件。现在我们要导出一个单层。直接选择蓝色方块，或通过图层列表。看看检查器面板的底部：您会看到一个新选项 Make exportable。 点击它。

检查器将更新以向您显示您将以 1x（原始大小）导出一个没有后缀的图像，默认情况下是.png格式。  

查看图层列表并注意列表中蓝色方形图层的图标已被赋予小刀图标。这是为了表明该图层是可导出的。下次您转到“文件”>“导出”或单击工具栏中的“导出”时，这个新的可导出图层也将显示在您的常规切片图层中。

第4步

将注意力集中在紫色方块上。这次我们不会使用Make exportable选项，我们将自动创建一个切片。 

转到插入 > 切片。 请注意当您在画布上的对象上方移动时光标如何变化。还记得那个刀图标吗？点击紫色方块。将出现一个具有相同位置、宽度和高度的新切片！

提示： 按照相同的方法，您也可以为整个组创建切片。对于组内的单个切片，将鼠标悬停在要切片的对象上时按Command键。

第 5 步

好的，我们已经使用了切片和Make exportable选项。我们已经看到了当我们拥有画板时会发生什么……但我们还没有看到“ 仅导出组内容” 选项会发生什么！

转到插入>切片并将光标移动到橙色和绿色方块上方，这些方块已经分组。单击它们。您刚刚为组创建了一个新切片。 

第 6 步

将切片图层移动到组orange + green。

如果您在选择切片时查看检查器，您会看到现在可以选择Export Group Contents Only选项。但不要检查它！

在程序的这一点上，检查图像预览以查看哪些内容将包含在我们的文件中非常有用。 

第 7 步

选中仅导出组内容选项。

看到不同？红色椭圆已从预览中删除。 

选中Export Group Contents Only时 ， 切片将仅导出其自身组内的图层，丢弃其外的任何内容。该组后面的图层也将被丢弃。对于具有大量重叠对象的大型设计，这是一个非常有用的选项！ 

提示： 如果您的图层列表中有很多切片并且不想被它们打扰，您可以使用图层列表底部的小刀按钮暂时关闭它们。

正如我们所展示的，我们可以通过多种方式导出内容。你应该选择哪一个？嗯，这取决于你需要什么。例如，Make exportable选项对于导出图标或单个图层非常有用。我建议您在导出整个文档时创建切片或画板（但这只是一个建议）。

3. 一次多次导出

使用 Sketch 3 时要考虑的一项重要功能是您可以一次导出多个图像。我并不是说您可以从不同的切片或画板导出不同的图像（尽管这是可能的）。我的意思是您可以从单个层或切片中同时导出不同的版本。

步骤1

从绿松石方形添加一个切片，或使其可通过检查器面板导出。无论您做什么，它最终都应该在检查器面板中具有具有默认值的新导出设置。

第2步

单击格式下拉列表上方的+图标。您实际上只是告诉 Sketch 您需要两个不同的导出文件，来自一个图层！根据需要多次单击图标以获得所需的每种尺寸或格式。

现在，您可能认为我们已经涵盖了有关 Sketch 导出选项的所有信息，但还有更多！以下是一些额外的提示：

5. 直接出口

将列表中的任何图层拖到桌面或任何其他应用程序中，将自动以.png格式为您导出。 拖出时按住选项 (⌥)键可更改为 PDF 格式。

6.草图生成器和草图命令

我们已经讨论过 Sketch 中的原生特性，但是那里有一个非常活跃的社区一直在开发插件。 例如， Sketch Generator是一种使用 Sketch 导出内容的全新方式。如果您之前尝试过photoshop CC的 adobe Generator 功能，您应该看看这个插件 。

草图命令 是脚本命令的集合。其中一些与导出任务有关，因此这是我建议您查看的另一个扩展

结论

我在本教程中介绍的所有内容都将使您具备充分了解如何在 Sketch 3 中导出内容的技能。如果您对导出或 Sketch 有任何疑问，请在下方发表评论。我很乐意提供帮助！