ui图导出为html,前端：“你能导出大小相同的切图吗？”

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

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

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

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

如果设计师想要安全下班，就得学会如何导出相同大小的切图。下面为大家介绍如何使用摹客导出大小相同的切图。

主要内容：Sketch切图技巧

PS切图技巧

Adobe XD切图技巧

在摹客中自定义切图尺寸

Sketch切图技巧

我们都知道，在Sketch中选中需要切图的图层或编组，再点击右下角的Make Exportable，通过摹客插件上传，摹客就能自动生成不同倍率的切图。

那么如何能在Sketch中导出大小相同的切图呢？

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

再点击“切刀” 工具，对外框大小进行调整即可。可以按住快捷键S直接绘制外框，外框可复制粘贴，快速完成切图；

最后，使用摹客插件上传，就能导出大小一致的切图了。

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

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

勾选右侧属性面板上的Export group contents>，通过上述操作可以保证切片在有背景的情况下也是透明的。

最后再使用摹客插件进行上传即可。

PS切图技巧

使用摹客插件，可以快速在PS中标记大小相同的切图，具体操作步骤如下：

选中需要切图的图层或编组，在摹客插件上的“固定尺寸”区域，填写所需切图尺寸的数值，并点击“遮罩”，摹客会自动给图片添加一个遮罩；

如果是一个不在分组内的图层，点击“遮罩”后，摹客会自动为你添加一个遮罩图层， 并且将遮罩图层和原图放在一个新分组中。此时分组名称前方会多出一个“-m-”。

可以拖动遮罩边框调整大小，快速切出任意尺寸的切图。

最后，将画板上传到摹客平台，就可以导出和遮罩同样大小的切图了，元素的背景区域将会是透明的。

Adobe XD切图技巧

在 Adobe XD 中如何自定切图尺寸呢？

只需要绘制一个透明矩形，将矩形调整为我们所需要的切图尺寸，同时选中图标和矩形，将二者合并成组。

可以将透明矩形复制粘贴到不同元素上，快速编组。

再对分组“添加导出标记”，最后使用摹客插件上传画板，即可导出大小相同的切图了。

在摹客中自定义切图尺寸

以上方式是不是很简单呢？接下来我要为大家介绍一种更加省事的方法：在摹客中快速生成大小相同的切图。(强烈推荐)

在Sketch/PS/Adobe XD中标记好切图，通过插件上传到摹客后，在开发模式下选中需要调整的切图；

勾选“自定尺寸”，设置好尺寸大小，填充模式选为“居中”，就可以下载大小相同的切图了。

以上就是我今天为大家带来的切图小技巧。除了切图外，摹客也支持智能标注、评论审阅、复用代码、高保真设计、设计规范管理等。100人团队可以免费使用哦！

插件下载地址：

点击下方链接进入摹客官网，了解更多摹客特色功能：