快速Sketch切图技巧,速度超乎你的想象
Sketch想必小伙伴们都已经用的挺熟悉的啦,在你的工作中,应该常常碰到各样切图尺寸大小的问题。陈踢缺er曾在设计App项目中也遇到过各种这样的问题,sketch怎么切图给前端,下面我来结合实际操作来分享给大家使用sketch如何更加快速完成你的切图工作,然后更安心的把剩余时间花在你的设计工作上。
基于你的设计方案尺寸导出其他尺寸切图,首先你要熟悉不同尺寸之间的换算倍数关系。
接下来是具体设置切图方案的步骤
Step1
或者在画板上随便选择一个设计元素,然后点击界面右下角的Make Exportable
sketch里面切图其实非常简单,我们常用的切图有两种,一种是单独对于某个图标,或者界面里的某些元素:另一种就是把效果图也就是每个界面单独切出来给开发们,方便他们看效果图用。但无论是哪种切图,都需要用到切片工具,。
按如下图步骤也能打开切图方案选项卡
1、选中需要切图的icon所有元件,建组 2、在组中的最上层新建一个切片 3、在右侧功能区选择 export group contents only 4、上传所选画板至蓝湖即可 说明:此方法不适合用于大型项目修改,批量全部替换修改切图还是需要设置。
Step2
新建你想要的切图方案
切图方案设置的基本介绍(这是基于375px设计稿所设置的切图方案)
—————————————————————————————————————————————
第一种 整套切图 第一步:整理Icon 最好能将整个APP的Icon分组整理在一个文件中,这样可以帮助自己规范样式和尺寸,并直接在此文件中进行细节优化调整,减少因同一个图标在不同页面反复出现,需进行多次调整的情况。第二步。
切图方案设置就可以是这样(这是基于750px设计稿所设置的切图方案)
刚开始可能头有点晕,我再来总结一下对应关系 多看几遍就明白了(明白了你就一通百通,羽化成仙啦~)
所以,切图方案设置的关键点在于设计稿尺寸倍数关系的换算和你最终想要导出的切图尺寸两方面的考虑
如果明白了以上两点,同样的思路,安卓的切图尺寸方案设置也就撒撒水啦~
因此列出了关系换算表那么切图方案如何设置也就非常清晰了。
网页?Icon? Banner?统统滴全部搞定。真正的设置三分钟,装逼一辈子有木有!!!
企业回Sketch只能在Mac上使用。Windows比较好用易上手的设计协作工具可以尝试Pixso协同设计,你可以简单理解它为网页端的Sketch,不需要下载软件,用户打开网页就可以随时开始设计工作,也被人们称为中国版的Figma。可以访问 pixso.cn 看看Pixso相对于。
然后接着还可以这样…
您可以随意设置切图种类/切图的前缀后缀/切图格式/切图方案名称,突然浮现出一个画面…
本文来自于站酷作者陈踢缺er,感谢分享 !欢迎加入UI设计群一起交流587751709