恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
三分钟教你快速设置Sketch切图方案
0.0°
2017-12-01 原创文章 教程 举报 46005 283 135 18


Image title


      Sketch想必小伙伴们都已经用的挺熟悉的啦,在你的工作中,应该常常碰到各样切图尺寸大小的问题。陈踢缺er曾在设计App项目中也遇到过各种这样的问题,下面我来结合实际操作来分享给大家使用sketch如何更加快速完成你的切图工作,然后更安心的把剩余时间花在你的设计工作上。 


Image title



      小伙伴们的设计稿尺寸因为项目要求和开发人员协商等因素导致不同,一般的设计稿尺寸 苹果IOS的有 375*667  750*1334 320*568 640*1136等等  安卓的有 720*1280  320*480  480*800  1080*1920等等


       以下我只列出最常用的两种尺寸供大家参考为例。


Image title




Image title



        iPhone一般要求导出@2x @3x切图即可    安卓一般要求导出mdpi hdpi xhdpi xxhdpi xxxhdpi五种倍数的切图。

        基于你的设计方案尺寸导出其他尺寸切图,首先你要熟悉不同尺寸之间的换算倍数关系。


Image title


接下来是具体设置切图方案的步骤


Step1


       点击顶部菜单栏的Sketch(就在苹果图标右边)—— Preferences

Image title


        或者在画板上随便选择一个设计元素,然后点击界面右下角的Make Exportable 

        按如下图步骤也能打开切图方案选项卡 


Image title



Step2


         新建你想要的切图方案

Image title

        切图方案设置的基本介绍(这是基于375px设计稿所设置的切图方案)


Image title


Image title


        切图方案设置就可以是这样(这是基于750px设计稿所设置的切图方案)


Image title


         刚开始可能头有点晕,我再来总结一下对应关系  多看几遍就明白了(明白了你就一通百通,羽化成仙啦~)


Image title


          所以,切图方案设置的关键点在于设计稿尺寸倍数关系的换算和你最终想要导出的切图尺寸两方面的考虑。


          如果明白了以上两点,同样的思路,安卓的切图尺寸方案设置也就撒撒水啦~




   Image title


Image title


         因此列出了关系换算表那么切图方案如何设置也就非常清晰了。


Image title


 


         

          那么,我也不是针对谁…我只想说的是...还有什么切图比例不能导出呢?还有什么切图格式不能一键导出呢?


          网页?Icon? Banner?统统滴全部搞定。真正的设置三分钟,装逼一辈子有木有!!!


Image title


         然后接着套路还可以这样…


Image title


         您可以随意设置切图种类/切图的前缀后缀/切图格式/切图方案名称,突然浮现出一个画面…


Image title




Image title



         切图不仅仅是尺寸大小问题,特殊的切图还会遇到比如 统一大小icon切图,安卓的点9切图,分块切图,混合切图等情况。所以接下来后续还会告诉大家一些特殊的切图方法,当然,大前提还是要和程序猿哥哥们沟通好。


          文章如果转载请署名作者名称

          不明白的地方也可以文章留言或私信我,有空我会及时回复你,

          其中可能会有不对的地方,欢迎大家留言纠正,与大家一起成长。



关注我的公众号「 陈踢缺er 」

Image title


                                   

更新:2017-12-01

收藏

283人已收藏

  • 8

    作品

  • 397

    粉丝

  • 9

    关注

  • #三月底#的一小波佛系海报练习~
  • Sketch极速建立自己的图标库
  • 2017年末职场黑话大汇总-BOSS篇
  • Sketch你绝对应该掌握的二十个小技巧

    猜你喜欢

      2017-12-01 原创文章 教程 举报 46005 283 135 18

      三分钟教你快速设置Sketch切图方案

      0.0°

      你确定要举报三分钟教你快速设置Sketch切图方案

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年11月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      135
      283
      18

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

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

      登录

      手机号

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

      登录
      第三方账号登录