Sketch切图保存透明底的完整指南278

在设计过程中，经常需要将Sketch中的设计稿导出为图片，用于网页、APP或其他平台。而保留透明背景对于许多设计元素，例如图标、logo或装饰性图形来说至关重要，它能保证设计元素在不同的背景下都能完美融合，不会被多余的白色或其他颜色干扰。那么，如何在Sketch中正确导出带有透明背景的切图呢？本文将详细介绍几种方法，并针对常见问题提供解决方案。

方法一：使用“Make Exportable”功能

这是Sketch中最便捷的导出透明背景切图的方法。 “Make Exportable”功能允许你批量导出不同尺寸的图片，并支持设置不同的导出格式，包括PNG（支持透明背景）和JPEG（不支持透明背景）。

具体步骤如下：
选择图层：选中你需要导出的图层或艺术板（Artboard）。
打开“Make Exportable”面板：点击右边的“Export”按钮，或者使用快捷键`⌘ + ⌥ + E` (macOS) / `Ctrl + Alt + E` (Windows)。
选择导出格式：在“Format”下拉菜单中选择“PNG”。
设置导出尺寸：根据需要设置导出尺寸，可以添加多个尺寸。确保你的图层本身已经设置好正确的尺寸，否则导出后可能会出现变形。
设置缩放比例：如果需要不同的缩放比例，可以在此设置。
点击“Export”按钮：导出你的切图。切图将会保存到你在Sketch偏好设置中指定的导出路径。

注意：如果你的图层包含背景，即使选择了PNG格式，背景也可能会被导出。为了确保透明背景，你需要确保你的图层本身没有填充任何颜色或背景。

方法二：使用“Export”功能逐个导出

如果你只需要导出单个图层，或者需要更精细的控制，可以使用Sketch的“Export”功能。

具体步骤如下：
选择图层：选中你需要导出的图层。
打开“Export”面板：点击菜单栏的“Make Exportable” 或者使用快捷键`⌘ + ⇧ + E` (macOS) / `Ctrl + Shift + E` (Windows)。
选择导出格式：选择“PNG”。
设置导出尺寸：可以手动输入尺寸或使用预设尺寸。
点击“Export”按钮：导出你的切图。

这个方法的好处在于可以更直接地控制单个图层的导出，但对于批量导出多个图层则效率较低。

方法三：使用第三方插件

一些Sketch插件可以提供更强大的导出功能，例如批量导出、自动命名等。例如，一些插件可以让你一次性导出所有具有透明背景的图层，并根据图层名称自动命名文件，从而提高工作效率。你可以在Sketch的插件商店中搜索“export”或“slice”来查找合适的插件。

常见问题及解决方案

问题1：导出PNG后仍然有白色背景

这通常是因为你的图层下方存在填充了颜色的图层，或者你的图层本身设置了背景颜色。请检查图层面板，确保目标图层下方没有其他图层，并且目标图层本身没有填充任何颜色或背景。可以使用“Layer > New Artboard from Selection”创建一个新的艺术板，只包含你需要的图层，然后导出。

问题2：导出图片模糊

这可能是因为你的Sketch文件的分辨率过低，或者在导出时缩放比例设置不正确。请确保你的Sketch文件分辨率足够高，并且在导出时选择合适的缩放比例。一般建议使用1x, 2x, 3x 等比例导出以适应不同分辨率的屏幕。

问题3：导出路径问题

请检查Sketch的偏好设置，确保你已经正确设置了导出的文件保存路径。你可以在Sketch的偏好设置中找到“Export”选项卡来设置。

总结

掌握Sketch切图保存透明底的方法对于设计师来说至关重要。通过以上几种方法和问题的解答，相信你已经能够熟练地在Sketch中导出带有透明背景的PNG切图，提高你的工作效率，制作出更精美的设计作品。