前端:“你能导出大小相同的切图吗?”

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

此时,如果前端工程师对这些图标大小使用同样的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中标记好切图,通过插件上传到摹客后,在开发模式下选中需要调整的切图;
  • 勾选“自定尺寸”,设置好尺寸大小,填充模式选为“居中”,就可以下载大小相同的切图了。

以上就是我今天为大家带来的切图小技巧。除了切图外,摹客也支持智能标注、评论审阅、复用代码、高保真设计、设计规范管理等。点击下方链接,可以下载对应的摹客插件,了解更多摹客特色功能哦~

摹客Sketch插件: https://help.mockplus.cn/p/232

摹客PS插件: https://help.mockplus.cn/p/231

摹客Adobe XD插件: https://help.mockplus.cn/p/233

Powered by Froala Editor

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章