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

主要内容：

• Sketch切图技巧

• PS切图技巧

• Adobe XD切图技巧

• 在摹客中自定义切图尺寸

Sketch切图技巧

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

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

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

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

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

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

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

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

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

PS切图技巧

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

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

  
  

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

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

  
  

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

Adobe XD切图技巧

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

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

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

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

插件下载地址：

摹客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

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

https://www.mockplus.cn/