编辑:小莫    发布日期:2020-10-28 00:00:00

UI设计师你知道这个快速Sketch切图技巧吗?速度超乎你的想象。

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

 

小伙伴们的设计稿尺寸因为项目要求和开发人员协商等因素导致不同,一般的设计稿尺寸 苹果IOS的有 375*667  750*1334 320*568 640*1136等等  安卓的有 720*1280  320*480  480*800  1080*1920等等以下我只列出最常用的两种尺寸供大家参考为例。

 

iPhone一般要求导出@2x @3x切图即可    安卓一般要求导出mdpi hdpi xhdpi xxhdpi xxxhdpi切图基于你的设计方案尺寸导出其他尺寸切图,首先你要熟悉不同尺寸之间的换算倍数关系。

 

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

Step1

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

 

或者在画板上随便选择一个设计元素,然后点击界面右下角的Make Exportable。按如下图步骤也能打开切图方案选项卡。

 

Step2

      新建你想要的切图方案

 

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

 

—————————————————————————————————————————————

 

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

 

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

 

所以,切图方案设置的关键点在于设计稿尺寸倍数关系的换算和你最终想要导出的切图尺寸两方面的考虑。如果明白了以上两点,同样的思路,安卓的切图尺寸方案设置也就撒撒水啦~

 

 

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

 

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

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

 

然后接着还可以这样…

 

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

 

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

 

原文链接:站酷

作者:陈踢缺er

 

 
inkling sketch manager for Mac inklingsketchmanagerforMac不是在数位板,而是真正地在纸上绘画,你画下每一笔都会被感应器记录下来。inklingsketchmanagerforMac对于习惯用纸笔起稿,或者经常在外需要随时随地记录灵感的人来说是相当 ... 简体 · 50.00 MBM ·

热点资讯

更多
英特尔正与台积电接洽,虑将部分芯片生产外包给台积电 外媒报道称,英特尔正在与全球最大的芯片制造商台积电(TSMC)接洽,准备将自己的芯片制造业务外包出去。
苹果iPhone 12国行上季度热卖:拿下20%份额 销量达1800万 根据外媒报道,上季度中国大陆地区iPhone 12销量达到1800万,苹果拿下20%智能手机市场份额。
高通斥资约90亿收购芯片公司NUVIA 前苹果芯片架构大神加盟 据外媒报道,高通公司1月13日以14亿美元收购芯片初创公司Nuvia。
大公司晨读:B站计划3月港股上市;苹果斥资1亿美元力促种族平等 B站确定已在港提交上市申请;英特尔CEO 斯旺将于2月15日辞职。

相关教程

更多
Sketch带你玩转3D球体   Hello!大家好啊~我是John,今天带着大家一起来玩Sketch,顺道做个小练习,希望大家喜欢!   Step1:创建画板+镂空球体 1.快捷键A,创建画布800*600 2.快捷键O,绘制一个直径为340的圆形,Fills为径向渐变填充,色值为(#E2CFFF-#84739D-#403055),如下图:     3.快捷键O首先绘制一个椭圆形(160*112),旋转角度5
史上最全Sketch App设计资源合集:模板、UI套件、插件、线框图 Sketch,凭借轻量,易用的特性,这款矢量设计工具已经受到越来越多的设计师的青睐。很多设计师也在平台上分享Sketch设计资源,借助这些免费好用的设计资源,设计师的效率更是又上一个新台阶,今天我就Sketch设计资源做了一个大总结,涵盖了Sketch线框图设计资源,Sketch UI设计资源,Sketch插件等等,希望对你有所帮助。   Sketch线框图资源 1. Liberty Mobile Wireframe Kit
一分钟搞定精美图案和插画【Sketch教程】   你是否为设计Banner而焦头烂额?你是否还在为找素材而苦苦挣扎?那么,请看这里!今天我要为大家介绍的一款神器之Sketch插件Looper,它可以通过重复的缩放/复制、旋转和透明度等创建一些有趣的几何图案和狂野的视觉效果,真的是谁用谁知道!反正我最爱~~~   插件下载地址: 官网下载:http://sureskumar.com/looper/     安装好的Looper
sketch插件自动调整文字行高 你是否也曾被Android”惨不忍睹”的实现界面搞得焦头烂额,一度怀疑安卓开发小哥的能力是否不及格,几乎都快要对安卓无望了。从现在开始无须担心,这篇文章一定会让你对安卓重拾信心,配合开发做到安卓界面完美还原。(插件下载,见文章最底部。) 一、起因 每一次接过安卓测试机验收安卓的实现界面,都怀着无比忐忑的心情。不出意外每次都被“随性”的界面所折服,然后花上N次的加班时间来一点点的调整。在近期项目结束后打算找到每个“随性”界面的问题所在。终

相关软件

更多
  • 友基Rainbow 170数位板驱动Mac版 简体. 21.00 MBM · 友基Rainbow170数位板驱动Mac版是Mac电脑上的一款友基Rainbow170数位板驱动程序,友基Rainbow170数位板驱动Mac版是适用于友基Ra ...
  • 友基Rainbow160数位板驱动Mac版 英文. 21.00 MBM · 友基Rainbow160数位板驱动Mac版是Mac电脑上的一款适用于友基Rainbow160数位板的驱动程序。友基Rainbow160数位板驱动Mac版是友基R ...
  • 友基绘影绘画屏Y160F驱动Mac版 简体. 21.00 MBM · 友基绘影绘画屏Y160F驱动Mac版是Mac电脑上的一款适用于友基绘影绘画屏Y160F的驱动程序。友基绘影绘画屏Y160F驱动Mac版是友基绘影绘画屏Y160F ...
  • 友基EXRAI Pro 24数位屏驱动Mac版 简体. 21.00 MBM · 友基EXRAIPro24数位屏驱动Mac版是Mac电脑上的一款适用于EXRAIPro24数位屏的驱动程序。友基EXRAIPro24数位屏驱动Mac版是友基EXR ...