每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
当我们根据参考线把图标视觉大小调整一致时，导出的切图大小很有可能是不一致的。就像这样：
此时，如果前端工程师对这些图标大小使用同样的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人团队可以免费使用哦！
插件下载地址：
摹客Sketch插件：https://www.mockplus.cn/download/idoc-sketch
摹客PS插件： https://www.mockplus.cn/download/idoc-ps
摹客Adobe XD插件： https://www.mockplus.cn/download/idoc-xd
点击下方链接进入摹客官网，了解更多摹客特色功能：
Powered by Froala Editor
全部评论：0条
-
-
1617374847
2020-08-28 16:28@摹客设计云: 都知道 都试过 放弃了，你们总要在自己身上找找问题。我们也不愿意用adobe 啊 windows一更新 这个崩那个崩 。重装了，还带这个方法那个方法的去试。但真的用不惯你们的慕客，蓝湖虽然收费了，但是真的省事。
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
更多作品
发表评论