Sketch高效制作@2x图详解：尺寸、导出设置及实用技巧196

在UI设计中，提供不同分辨率的图片，特别是@2x（两倍图）是至关重要的。@2x图能够确保在Retina屏幕等高像素密度设备上显示清晰锐利的图像，避免模糊和像素化。Sketch作为一款流行的UI设计软件，提供了多种方法来创建和导出@2x图片。本文将详细讲解如何在Sketch中高效地设置和导出二倍图，并分享一些实用技巧，帮助你提升设计效率。

一、理解@2x图的原理

在Retina屏幕等高像素密度设备上，像素密度更高，例如，一个物理尺寸为1x1英寸的区域，在普通屏幕上可能只有100x100像素，但在Retina屏幕上可能达到200x200像素。为了在高像素密度屏幕上保持相同的视觉尺寸，我们需要提供更高分辨率的图片，这就是@2x图的由来。一个@2x图的尺寸是其在1x屏幕上显示尺寸的两倍。

二、在Sketch中创建@2x图的两种主要方法

方法一：直接使用两倍尺寸画布

这是最直接和简单的方法。在创建新的Sketch文件或图层时，直接将尺寸设置为目标尺寸的两倍。例如，你需要一个在1x屏幕上显示为100x100像素的图标，则在Sketch中创建该图标时，画布或图层的尺寸应设置为200x200像素。这样，导出时无需任何额外的缩放操作，直接导出即可得到@2x图。

优点：简单直接，避免了缩放带来的质量损失。

缺点：需要精确计算目标尺寸的两倍，容易出错，且在设计过程中，界面元素可能显得过大，影响设计体验。

方法二：使用1x尺寸设计，然后导出@2x图

这种方法更灵活，适合在设计过程中使用1x尺寸的画布进行设计，最后再导出@2x图。Sketch提供导出设置，可以方便地将1x尺寸的图层导出为@2x图。

步骤：
在Sketch中按照1x尺寸设计你的图标或界面元素。
选择需要导出的图层或画板。
点击菜单栏中的“导出”或使用快捷键“Cmd + Shift + S” (macOS) 或 “Ctrl + Shift + S” (Windows)。
在弹出的导出窗口中，选择合适的导出格式，例如PNG或JPG。
关键步骤：在“缩放”选项中，选择“2x”。
点击“导出”按钮，Sketch会根据你的设置导出@2x图。

优点：设计过程更直观，更容易控制设计尺寸，适合习惯使用1x尺寸进行设计的用户。

缺点：需要额外设置导出缩放比例，如果忘记设置，则会导出1x图。

三、导出设置中的其他重要选项

除了“缩放”选项外，在Sketch的导出设置中，还有其他一些重要的选项需要关注：
格式：选择合适的图片格式，PNG通常用于带有透明通道的图片，而JPG则适用于不透明的图片。根据你的需求选择。
压缩：对于JPG格式，可以调整压缩级别，以平衡文件大小和图片质量。
命名：建议使用清晰的命名方式，例如“icon@”，方便管理和查找。
输出路径：选择合适的导出路径，方便后续使用。

四、实用技巧

为了提高效率，可以考虑以下技巧：
使用画板：将设计元素放置在画板中，可以更方便地导出单个元素的@2x图。
创建导出模板：预先设置好导出参数，例如缩放比例、格式、压缩等，方便重复使用。
使用插件：一些Sketch插件可以自动化导出@2x图，提高效率。
检查像素：导出前检查图片像素是否清晰锐利，避免出现模糊或像素化的情况。

五、总结

通过掌握以上方法和技巧，你可以在Sketch中高效地创建和导出@2x图，确保你的UI设计在各种设备上都能呈现最佳效果。记住，清晰的图片是高质量UI设计的基础，选择适合你的方法并熟练掌握导出设置，将极大地提升你的设计效率和作品质量。

2025-06-08

上一篇：Sketch中文版标注文字的完整指南：从基础到进阶技巧

下一篇：Sketch插件与墨刀协同工作：高效设计流程指南