恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见
前端:“你能导出大小相同的切图吗?”
59.7°
原创文章 / 教程 / / 举报
10252 116 42 20

2020-08-03

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



此时,如果前端工程师对这些图标大小使用同样的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


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


https://www.mockplus.cn/



Powered by Froala Editor

切图SketchpsUI设计插件

创建于:2020-08-03
收藏

116人已收藏

推荐人:

UI中国

摹客产品协作设计

设计+协作的一站式云平台。

  • 467

    作品

  • 676

    粉丝

  • 6

    关注

  • APP设计实例解析,深色模式为什么突然就火了?
  • 焦虑求职季又至:2020UI设计师作品集如何准备?
  • 原型交互设计很复杂?你只是缺少一件趁手的“兵器”
  • 摹客专访|专访腾讯高级交互设计师WingST

猜你喜欢

    摹客产品协作设计

    摹客产品协作设计

    设计+协作的一站式云平台。

    “劳模勋章”之扁担勋章“劳模勋章”之锄头勋章诲人不倦身经百战小有名气
    • 676

      粉丝

    • 483.4

      人气

    • 9403

      颜值

    作品

      摹客产品协作设计

      点赞:42

      收藏:116

      评论:20

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

      你确定要举报前端:“你能导出大小相同的切图吗?”

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年08月03日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      账号或密码错误

      发送验证码 120s 验证码错误

      登录