【Sketch切图】系列教程之sketch切图基础教程

sketch切图效率是ps的几倍,几十倍。因为大部分公司没能给设(qie)计(tu)师(zai)配mac电脑,所以用sketch少,不然我相信大部分设(qie)计(tu)师(zai)都会转移到sketch。

先说说最基础的,在sketch中,一个项目的所有界面通常可以放在一个画布里,然后快捷键"A"创建
画板Artboard.然后一个项目的缩略图就如下图所示。

02bbe25639751f000001caeca8f0d1

一开始我是用640*1136为基础分辨率来做图的,发现那样需要一个项目ios+android需要输出至少4套
的切图。虽说sketch是纯矢量的,小图直接拖大不致于失真,但是开发贴图还原后总,往往会发现
iPhone6+的分辨率下跟iphone5分辨率下的效果差别有点大。

其实iphone6分辨率750*1334也是基于@2x(倍率)的,也就是说iphone6用的切图跟iphone5是可以
同一套的。知道这点很重要。

0222f556397520000001caec581073

sketch里也有slice切图工具,但我一直没用习惯,而是在一个sketch文件中新建一个画布或另建一个
sketch文件。然后在画布里为每个图标、控件、背景图等分别画画板Artboard.
需要注意的是1、画板的背景色(background color)需要透明的。

2、点击export最右边的“+”图标,想输出几套切图点几下“+”。

如果是基于750*1334分辨率的,一般只需输出2套,1x跟1.5x。

3、选中需要输出的artboard,点最下面的export artboards即可批量输出所有需要的切图。

02fcca56397522000001caecac54cb

这里的1.5x是怎么来的?
iPhone6+有两种显示模式,标准像素分辨率为1242*2208,放大模式分辨率为1125*2201,放大模式
分辨率刚好为iphone6的1.5倍,因此可以切1.5x的图为iphone6+使用。

同理,安卓的xhdpi(720*1280)为iphone6(750*1334)的0.96倍,严格来讲,需要为安卓xhdpi/
xxhdpi输出两套图。但是实际上,xhdpi用@2x的、xxhdpi用@3x的图是没问题的。

切图没那么难吧,在我看来,切图+标注不应该占用你工作时间1/10以上,如果有条件,请放弃用ps切图吧。

教程作者:chencqq 作者博客:www.uichen.net

 

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/11276/

(0)
iouedioued
上一篇 2015-12-02
下一篇 2015-12-03

相关推荐

  • 【案例解析】设计思维方法赋能设计落地

    作者:百度UE大讲堂   一、什么是设计思维呢? 顾名思义,设计思维就是设计师用来思考问题和解决问题的方法。如何培养设计思维?今天这篇用两个实战案例帮你一窥设计思维的奥妙。 我们先来看一个小测试:以下的方案…

    交互专题 2017-08-07
  • 实例分享|在界面排版中,需要注意的七大原则(上)

    前面的视觉体系和大家简单提到过传统平面排版的四大原则:亲密性、对比、重复、对齐。那界面排版有什么原则呢?今天菜心就来用实例分享一下界面排版中需要注意哪些原则。一、亲密原则
    二、对比原则
    三、平衡原则
    四、相似原则
    五、简洁原则
    六、封闭原则
    七、情感原则

    2017-05-08
  • 用户体验交付中心,最美不过回家路

    众意,坚持为中国高品质整装奋斗不歇!长按识别二维码即可预约体验爆款福利已经在向你挥手了戳阅读原文,报名预约抢豪礼!

    2018-03-12
  • 你如何设计交互?

    进行界面设计时,很显然我们一上来就会想着画出整个流程。但这真的是最好的方法吗? 我曾偶然进行了编写一个具有想象的人机对话,之后我再继续使用画流程的方式。 编写人机对话的方法改变了我的思维方式,我再也没…

    2015-08-12
  • 交互设计中的情感化!

    文/金雅庆UI即User Interface 用户界面的简称。UI设计是指设计人和产品或服务互动的一种机制 , 以用户体验为基础进行的人机交互设计是要考虑用户的背景、使用经验以及在操作过程中的感受,从而设计符合最终用户的产品,使得最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且是高效使用产品。交互设计是一种如何让产品易用,有效而让人方便的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理...

    2018-03-09
  • IOS面试题100问,干不干IOS先收藏了,说不定那天就转IOS了。

    作者Cameron Banga 摘要:本文作者对iOS开发者及设计师在面试时可能会遇到的问题进行了筛选与汇总。一方面,能够帮助HR在短时间内获取更多反馈信息,以甄选合适人选,而开发者及设计师在寻找相关工作时,也可作为参…

    2015-01-29
  • Sketch49交互原型新功能测评教程!

    昨天,Sketch49新版本发布,小编朋友圈又被刷了一波屏。对于该全新版本,具体有哪些新功能,以及如何使用呢?「10000个知识点」特邀讲师UIBANG-乔帮主连夜做了sketch新功能测评教程,分享给大家,希望可以给予你们帮助。深夜给大家整理了Sketch49版本更新的新功能-交互原型,希望大家能有所收获。下午在圈内微信群里,忽然看到2月28日发布了Sketch49新版本的...

    2018-03-03
  • 实战分享:核桃App界面设计及视觉规范

    因为最近做公司项目的设计规范,所以决定把设核桃的计规范也整理一份。但由于是概念稿,所以规范做的不算全面;而且每个产品也有各自的规范思路和维度,没有绝对的定性方法。这里只是提供一个大体方向,疏漏之处,希望给予批评指正。

    2017-05-13
  • “来电”性格测试的交互设计历程

    来电,是一个主打免费通话的纯语音应用。从14年7月份低调发布Lightalk1.1后,历经3个版本,终于在1.4版更名为来电并投入推广了。除了运用一些传统的渠道推广,来电也尝试在应用内嵌一个提供分享的入口,鼓励用户做…

    交互设计 2015-04-10
  • 我的设计流程|学会这3招,跟反复改稿Say No!

    设计师要想摆脱反复改稿的噩梦,自身就必须要更加专业以及见多识广,要么你能选择去跟一群专业的人共事,要么是你能用你的专业引导或配合别人按你的思路走。

    2017-05-15