跳过导航

导入与导出

上次更新时间:2024 年 9 月 17 日
7 分钟阅读

使用 Sketch,您可以轻松导出预设、切片、导出 CSS 和 SVG 代码从任何浏览器,以及导入其他文件。

导入图像

将文件导入 Sketch 的最快方法是将其拖放到 Dock 图标上或直接拖放到画布上。 您可以导入

  • PNG、JPG、GIF、TIFF 和 WebP 位图图像
  • Figma 文件 (.fig)
  • SVG 文件
  • SVG 代码(复制代码并粘贴以创建图层)
  • PDF 文档(每页都将作为单独的画板导入)
  • AI 和 PSD 文件(有限的支持,仅作为平面图层)

如果您要导入动画 GIF 或 WebP 图像,Sketch 将仅导入第一帧。 请注意,由于 Apple 在 macOS Sonoma 中取消了对 PostScript 文件的内置支持(包括 EPS 文档),因此 Sketch 不再支持 EPS 文件

导出画板和资源

在 Mac 应用程序中导出

观看课程

要以不同大小或格式导出画板或资源(并允许其他人一次性从 Web 应用程序导出所有资源),选择它们并单击检查器底部的 设为可导出 面板。 然后,按 导出所选 按钮。

注意:开发者可以在 Mac 应用程序中导出单个图层,而无需进行任何设置。

或者,在菜单栏中选择 文件 > 导出,或按 E 以打开“导出”对话框。 选择要导出的项目,然后单击 导出 以打开 MacOS 保存对话框。

您可以选择在将项目保存到 Mac 之前要导出的项目

Sketch 导出您的资源后,您将在画布底部看到一条 X 个文件已成功导出 确认消息,其中 X 是已创建文件的数量。 如果您只导出一个文件,您将看到其文件名。

单击确认消息中的箭头以打开保存项目的文件夹。

将图层导出为 PNG

要将一个或多个图层导出为 PNG,请从图层列表将它们选中并拖到桌面上(记住首先通过检查器使它们可导出),或选择您的图层并按 E

您可以通过将图层拖到桌面上来快速导出它

您可以复制任何图层或画板,并将其作为图像直接粘贴到另一个应用程序中。 如果您要粘贴到的应用程序支持矢量数据,则您粘贴的图层将保持为矢量,您可以安全地放大它。 如果该应用程序不支持矢量数据,则 Sketch 将以 2 倍的分辨率粘贴您的图层。

您可以直接从 Sketch 复制和粘贴高质量的图像

以 PDF 格式导出画板和图层

要将图层导出为 PDF,请在图层列表中选择它们,然后按住 并拖动您的图层。

要将选择的(或全部)画板导出为 PDF,请选择 文件 > 导出 > 画板到 PDF 并选择您的画板。 然后,您可以选择包含画板标题、将它们渲染为位图或包含画板注释(仅限工作区文档)。 您还可以通过转到 文件 > 导出 > 注释到 CSV,以 CSV 格式导出工作区文档中的注释。 要选择画板的导出顺序,请转到 设置中的“图层”面板。

如果您想从任何浏览器下载资源和检查设计,请访问我们的开发者交付文档

导出文件格式

位图

位图图像是在 Mac 应用程序中导出的任何内容的平面版本,因此它们将在其他应用程序中作为单个图层打开。 Sketch 可以导出为 PNG、JPG、HEIC、TIFF 和 WebP。

根据您选择的文件格式,您可能还会看到更多导出选项

  • 为 Web 保存: 从某些图像中删除其他文件数据,例如 EXIF 元数据和颜色配置文件。
  • 隔行扫描 PNG: 在 Web 上,隔行扫描的 PNG 会尽快以其完整大小加载,并下载更多数据,直到它们达到完整质量。
  • 渐进式 JPG: 与隔行扫描的 PNG 类似,渐进式 JPG 在开始加载时是模糊的,并逐渐变得清晰。
  • 质量: 对于 JPG 和 WebP 图像,较低质量的图像将具有较小的文件大小。

矢量

矢量图像格式保留图层和路径,因此它们易于编辑和无限缩放。 Sketch 支持 SVG、PDF 和 EPS 矢量格式。

并非所有文件格式都支持某些效果,包括 PDF 中的透明渐变以及 SVG 中的内部和外部边框。

打印画板或切片

选择 文件 > 打印 并选择要打印的画板。 如果您还没有任何画板,您可以改为打印切片。

使用导出预设

默认情况下,Mac 应用程序以其实际大小 (1x) 将所有内容导出为 PNG,但您可以从检查器中的 导出预设 面板分配不同的导出设置

An annotated image showing image export options in the Inspector

检查器中的图像导出选项

  1. 大小 — 从下拉菜单中选择大小,或通过直接在“大小”字段中键入来创建您自己的大小。 您可以无限放大(2x、3x 等)和缩小(0.5x、0.25x),或者以像素为单位定义特定的高度或宽度(分别为 128h 或 128w)。
  2. 前缀/后缀 — 如果您以不同的比例导出同一图像,则可以使用 前缀/后缀 下拉列表在每个图像之间添加前缀或后缀以进行区分,并在文件名字段中添加自定义文本。
  3. 格式 — 从下拉菜单中选择文件格式
  4. 删除预设 — 单击 X 以删除导出预设。
  5. 添加预设 — 单击 + 以为此图层添加到导出设置的另一个预设。
  6. 预设集 — 单击值滑块以选择一组预定义的预设。 您还可以创建新的预设集并从此处删除它们。
  7. 创建切片 — 单击创建切片以在您选择的图层上使用您设置的导出预设直接创建切片。
  8. 导出所选 — 单击以使用上述预设导出特定图层。
  9. 预览 — 显示您的图层在导出时的外观。 您还可以将此直接拖放到您的桌面或另一个应用程序中以进行快速导出。
  10. 共享 — 单击以获取通过邮件、消息、AirDrop 等共享的标准选项。
  11. 裁剪透明像素 — 根据您的选择,您可以删除包围您导出的组或切片中内容的透明像素。

使用切片

切片可导出是一种您可以在画布上绘制的图层类型,它将导出其中的任何内容作为图像。 您可以像其他图层一样选择、调整大小、移动、隐藏和组合切片。

插入切片

选择 插入 > 切片,或按 S。 然后,单击并拖动画布上的任意位置以绘制一个新切片,或单击任何图层以在其周围创建一个切片。

如何插入切片

值得在“图层”列表中为切片指定一个描述性名称,因为 Sketch 会将其用作您创建的任何导出的文件名。 如果您在其名称中包含 /,则 Sketch 会将您在其之前编写的任何内容用作文件夹名称,并将之后的任何内容用作该文件夹中的文件名。

与其他图层一样,您可以为切片设置多个导出预设

自定义切片

当您选择一个切片时,您会在检查器中找到一些额外的选项。

选中 裁剪透明像素 将删除切片内容边缘周围的任何空像素。

如果您将切片放置在一个组中,选中 仅导出组内容 将确保导出仅包括该切片组内的内容。

最后,您可以选中 背景颜色 并选择一种颜色以将背景颜色应用于您的切片导出。

导出 CSS 和 SVG 代码

在您的文档中选择一个或多个图层,按住 Control 键单击并选择 复制 CSS 属性 以将样式信息作为 CSS 代码复制到您的剪贴板。 这是一个简单形状的 CSS 样子的示例

/* Rectangle: */
background: #6dd400;
border-radius: 5px;
/* Rectangle: */

复制 SVG 代码的方式类似。选择一个形状图层,按住 Control 键点击它,然后选择复制 SVG 代码