教你导出视觉大小一致的切图

当我们根据参考线把图标视觉大小调整一致时，导出的切图大小很有可能是不一致的。就像这样：

此时，如果前端工程师对这些图标大小使用同样的CSS规格，那么结果就会变成这样：

于是乎，我们就会听见前端工程师说：“你能导出大小相同的切图吗？”。 这句话听似云淡风轻，实则暗藏杀机。

如果切图的大小不一致，那么工程师将需要手动调整每一个图标的尺寸，而且很难调整至视觉统一。

如果设计师想要安全下班，就得学会如何导出相同大小的切图。下面便是Sketch切图的操作步骤。

素材填满整个切图：

在Sketch中选中需要切图的图层或编组；

点击右下角的Make Exportable，上传至iDoc即可。（如何上传至iDoc？）

无需再设置多种切图倍率，iDoc将自动生成不同倍率的切图。

素材周围带空白区域：

在Sketch中选中需要切图的图层或编组，点击右下角的Make Exportable；

再点击“切刀” 工具，对外框大小进行调整即可。（快捷键是S，按住S直接绘制外框。

如果切图下方是有背景的，如何让背景透明？方案如下：

将切片图层 和需要切图的图层编组，选中切图图层；

勾选右侧属性面板上的Export group contents only。

通过上述操作可以保证切片在有背景的情况下也是透明的。

在设计协作平台iDoc中也可以快速生成带空白区域的切图。（强烈推荐）

在Sketch中点击右下角的Make Exportable后，直接上传至iDoc；

在iDoc的开发模式下选中切图，勾选“自定尺寸”，填充模式选为“居中”；

接着设置好需要的切图尺寸，一键下载即可；

此时下载下来就是带空白区域的切图。（注：当设置尺寸大于素材本身的尺寸时才会出现空白区域。）

iDoc不仅能够帮助你快速切图，它还有更多强大功能帮你节省沟通时间，提升工作效率。准点下班不是梦～

附上传送门：http://idoc.mockplus.cn