Sketch导出带栅格的图像：完整指南374

Sketch是一款强大的矢量图形编辑软件，深受设计师喜爱。然而，许多设计师在导出图像时，需要将设计稿与栅格化图像结合使用，例如在网页设计中将图标或按钮导出为PNG格式，以便在不同分辨率的屏幕上都能清晰显示。本文将详细讲解如何在Sketch中导出带栅格的图像，涵盖各种场景和技巧，助您轻松掌握这项技能。

Sketch本身是一个矢量图形编辑器，这意味着你的设计由数学公式而非像素点组成。这保证了在任意缩放比例下都能保持清晰度。但是，最终在网页或APP中展现的图像通常需要是栅格化的，也就是由像素点组成的图像文件，例如PNG、JPEG等。因此，你需要将Sketch中的矢量图形导出为栅格图像。

一、直接导出为栅格图像

这是最简单直接的方法。在Sketch中，选择你要导出的图层或Artboard（画板）。然后点击菜单栏的“Make Exportable”按钮（或快捷键Cmd+Option+E / Ctrl+Alt+E）。 这将打开一个“Export”面板，让你选择导出设置。 在这个面板中，你可以：
选择导出格式：PNG、JPEG、SVG、PDF等。PNG通常是首选，因为它支持透明背景。
设置分辨率：以像素为单位指定导出的图像大小。你需要根据目标平台（例如，网页、Retina屏幕）选择合适的DPI（每英寸点数），通常为72 DPI（网页）或144/288 DPI（Retina屏幕）。更高的DPI意味着图像文件更大，但质量也更高。
选择导出尺寸：可以选择导出整个Artboard，或者只导出选中的图层。如果你只导出部分内容，确保勾选“Scale to size”选项以获得最佳效果。
设置文件名和保存路径。

点击“Export”按钮，即可导出栅格化图像。 记住，一旦导出为栅格图像，你就无法再进行矢量编辑了。

二、使用插件导出带栅格效果的图像

Sketch拥有丰富的插件生态系统，一些插件可以帮助你更便捷地导出带栅格效果的图像，例如模拟阴影、光效等。 这些插件通常提供更精细的控制，让你自定义导出参数，实现更专业的视觉效果。 例如，一些插件可以让你轻松地生成不同尺寸的图片，一次性导出多套不同分辨率的资源，极大提高效率。

需要注意的是，插件的质量和功能各不相同，选择插件时需要谨慎考虑，阅读插件说明，并根据自身需求选择合适的插件。有些插件可能需要付费才能解锁全部功能。

三、利用导出设置批量导出

如果你需要导出多个Artboard或图层，逐个导出会非常耗时。Sketch允许你批量导出，大大提高效率。在“Make Exportable”面板中，你可以一次性设置多个导出选项，例如导出不同尺寸的图片，甚至为不同设备生成不同分辨率的图像。你可以通过勾选“Export slices”来导出切片，每个切片作为一个单独的图像文件导出。

四、关于分辨率和DPI的思考

选择正确分辨率至关重要。低分辨率的图像在高分辨率屏幕上会显得模糊，而高分辨率的图像会占用更多存储空间。 你需要根据目标平台和显示设备选择合适的DPI。 一般来说：
网页：72 DPI 通常足够。
Retina屏幕： 144 DPI 或 288 DPI 可以获得更好的视觉效果。
打印： 300 DPI 或更高，以确保打印质量。

记住，在导出之前，仔细检查你的设计稿，确保所有图层都处于正确的位置和状态。 如有需要，可以进行一些调整，例如添加阴影或调整颜色，以优化最终的图像效果。

五、进阶技巧：利用Export Options面板

Sketch的“Export Options”面板提供了更高级的导出设置，可以根据需求自定义导出参数，例如压缩级别、颜色深度等。善用这个面板，可以更好地控制导出图像的质量和文件大小。 例如，你可以通过调整JPEG的压缩质量来平衡图像质量和文件大小。 对于PNG，你可以选择使用无损压缩或有损压缩。

总结：

掌握Sketch的导出技巧，特别是导出带栅格图像的技巧，对于设计师来说至关重要。 通过本文介绍的方法和技巧，你应该能够轻松导出高质量的栅格图像，满足各种设计需求。 记住，选择合适的导出设置是获得最佳效果的关键，请根据你的具体需求进行调整。

2025-06-16

上一篇：Sketch文件高效转换PSD格式的完整指南

下一篇：Sketch组件文字修改详解：高效提升设计效率