当前位置:首页 >教程首页 > U I 设计 > AI+UX设计大师班 >Sketch如何快速切图?三分钟教你掌握切图方案

Sketch如何快速切图?三分钟教你掌握切图方案

发布时间:2019-03-13 11:31:40

相信有相当一部分的设计同行在工作中碰到各种各样切图尺寸大小的问题,针对Sketch如何快速切图这个问题,今天小编特意出了一篇有关sketch切图尺寸教程的文章,学会了包你三分钟之内掌握设置切图方案的技巧,然后更安心的把剩余时间花在你的设计工作上。

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

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

切图尺寸教程1.png

iPhone一般要求导出@2x @3x切图即可,安卓一般要求导出mdpi hdpi xhdpi xxhdpi xxxhdpi切图

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

切图尺寸教程2.png

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

Step1

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

切图尺寸教程3.png

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

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

切图尺寸教程4.png

Step2

新建你想要的切图方案

切图尺寸教程5.png

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

切图尺寸教程6.png

切图尺寸教程7.png

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

切图尺寸教程8.png

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

切图尺寸教程9.png

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

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

切图尺寸教程10.png

切图尺寸教程11.png

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

切图尺寸教程12.png

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

网页?Icon? Banner?统统滴全部搞定。

切图尺寸教程13.png

切图尺寸教程14.png

然后接着还可以这样…

切图尺寸教程15.png

切图尺寸教程16.png切图尺寸教程17.png

您可以随意设置切图种类/切图的前缀后缀/切图格式/切图方案名称

切图不仅仅是尺寸大小问题,特殊的切图还会遇到比如 统一大小icon切图,安卓的点9切图,分块切图,混合切图等情  况。所以接下来后续还会告诉大家一些特殊的切图方法。

本文原创作者:陈踢缺er

 

学员作品赏析
  • 2101期学员李思庭作品

    2101期学员李思庭作品

  • 2104期学员林雪茹作品

    2104期学员林雪茹作品

  • 2107期学员赵凌作品

    2107期学员赵凌作品

  • 2107期学员赵燃作品

    2107期学员赵燃作品

  • 2106期学员徐正浩作品

    2106期学员徐正浩作品

  • 2106期学员弓莉作品

    2106期学员弓莉作品

  • 2105期学员白羽新作品

    2105期学员白羽新作品

  • 2107期学员王佳蕊作品

    2107期学员王佳蕊作品

专业问题咨询

你担心的问题,火星帮你解答

微信扫码在线答疑

扫码领福利1V1在线答疑

点击咨询
添加老师微信,马上领取免费课程资源

1. 打开微信扫一扫,扫描左侧二维码

2. 添加老师微信,马上领取免费课程资源

×

同学您好!

您已成功报名0元试学活动,老师会在第一时间与您取得联系,请保持电话畅通!
确定