sketch做出来的页面怎么切图

介绍Sketch

Sketch是一款Mac平台上的矢量图形编辑软件，主要用于UI设计。它具有丰富的工具库和强大的插件生态，可以帮助设计师创建出漂亮的界面设计。在这篇文章中，我们将会讲述如何在Sketch中制作出来的页面进行切图的步骤。

准备工作

在切图之前我们需要完成以下准备工作：1. 确定你要切图的页面；2. 了解你使用的各种图层类型和旧版切图技巧；3. 选择合适的导出选项，如PNG和SVG；4. 系统和软件要求：MacOS X 10.12.2或更高版本，Sketch 40.3及以上的版本。

图层导出

首先，我们需要检查我们的设计文件中所有的图层是否都已经被命名，并且所要导出的图层是否已经分组。这是非常关键的一步，因为如果你导出的所有组件命名不当，那么在后续的开发过程中会非常困难。导出之前我们还要确保所有的文本都已经被转换为路径或是导出为字体。在导航栏中单击"Export"按钮即可进入导出页面，你可以选择你要导出的图层类型，并选择希望导出的文件夹位置，最后单击"Export"即可完成导出操作。

使用插件

在Sketch中，还可以使用插件来帮助我们更快速地导出图层，这里介绍两款经验值较高的插件：1. Slicer：它可以帮助你快速导出多个图层，只要你将它们放在同一个Artboard上即可；2. Zeplin: 它是一款Sketch插件，用于将设计转化成CSS和HTML代码，同时它能够将图层中的颜色值、尺寸对应至代码中，非常实用。这些插件不仅能够帮助我们提高效率，而且还减少了出错的可能性。

代码编辑

在导出了所有的图层之后，我们需要将它们放到相应的HTML代码中。在此过程中，我们需要确保所有的样式和尺寸都已经匹配正确，并且我们需要为图层添加相应的类和id属性。同时我们还要确保在SVG图片中添加了相应的标签。在图层导出之后，我们需要将它们重新排版并且调整所需的修改。在这个过程中，我们还应该注意尽可能地使用CSS Sprites来减小网站的大小。

总结

在本文中，我们讲述了如何在Sketch中将所做的界面切成页面。首先，我们完成了相关的前期准备工作，包括熟悉Sketch软件、选择适当的导出选项、检查图层、分组和命名。然后，我们介绍了如何利用Sketch提供的导出功能或是其他第三方的插件来加快切图的流程，同时我们也详细了解了如何将切好的图层添加到HTML和CSS的代码中。在此之后，我们还介绍了合理使用CSS Sprites的技巧来减小网站的大小。希望本文对设计和开发工作有所帮助。