【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

相关推荐

  • APP设计:那些打动人心的设计点(4)

    你好,这是2017年的第12篇文章。自从写了这个系列,每天除了吃饭睡觉工作,其余的时间都在用各种APP,观察各种产品。在同质化越来越严重的今天,这些产品的微交互,是用户喜欢或讨厌一个产品的重要原因,不容被忽视。

    2017-05-04
  • 2018年用户体验设计趋势

    作者| Anthony Miller译者| 耳洞审校| 郑几块编辑| Ella全文共 5963 字 31 图,阅读需要 14 分钟———— / BEGIN / ————2017年就要过去了,让我们预测一下2018年的用户体验演变趋势。本文将回顾2017年数字世界中的显著变化,并将展望2018年在设计和开发领域让我们继续保持领先的那些趋势。一、更简单的导航导航体验是2017年设计师中的热门话题。设计师殚精竭虑,拿出熬秃少年头的精神,就是为...

    2018-02-02
  • 场景是如何应用到交互设计的?

    我想在互联网领域,大家对“场景”这个概念并不陌生,但组成场景的关键因素有哪些?场景是如何应用到交互设计的?在工作之余,整理下相关知识,相信对大家的产品日常工作有一定的帮助,感谢大家抽出时间阅读,欢迎批评指正。1.场景的基本概念场景是指用户在一定的时间、地点等特定的情景下为了满足某种需求而触发的使用某种方法解决需求的行动画面。其关键因素包括用户、情景、需求、方法。产品的应用场景就是用户使用产品来解决需求的实际应用场景,比如上班族小张在午餐...

    2018-03-02
  • iOS 9人机界面指南(三):iOS 技术 (下)

    文章索引译者注:本 文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。译文首发于ISUX博客,如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。后续章节会 陆续更新,敬请期待。

    2017-05-30
  • 聊一聊常见的登录交互方式

    现在市场上面的APP种类繁多,而登录注册的方式也有很多,下文就简单来分析一下各种登录的交互方式,谈谈自己对这些方式的见解。

    2017-05-26
  • 交互体验设计的新思路——聊天机器人(Chatbot)

    本文作者将阐述了他眼中聊天机器人的优势所在。用户将更多的时间放在通信app中(比如微信),而不是社交app中(比如微博)。通信app逐渐变成一个平台,聊天机器人的介入则帮助聊天用户触达更多的服务。

    2017-04-30
  • APP动效交互|切换动画设计

    功能性的动画微妙,清晰,逻辑清楚,能够减轻用户认知负担,建立更好的人机交互体验。而且,它还可以赋予界面生命力。

    2016-07-14
  • 设计一个快速提升用户体验度的网站架构

    点击上方“公众号”可以订阅哦渔哥服务☆ 网站建设:网站结构、网站功能、关键字策划、网站SEO、设计与开发。☆ 整合营销:品牌形象文案策划、产品销售概念策划、产品销售文案策划。☆ SEO优化:SEO排名优化、论坛营销、口碑营销、公关活动等病毒传播。☆ 托管服务:市场分析、受众分析、品牌与产品分析、全网整合营销推广。☆ 微信运营:微信公众号开发、朋友圈广告、微信运营活动、微商城搭建。☆ 定制培训:专业施教团队、完整课程体系、实际项目操作、低...

    2018-04-08
  • UI交互设计只需掌握这3点

    说到交互设计,就不能不提需求,因为所有的交互设计的工作都是基于需求,这也是交互设计的第一个着力点。因此,只有深刻理解需求以后,才有可能做出好的交互设计。举一个饱含血泪的例子:在做一个项目的过程中,有一个需求是要将一个应用的数据展示做一下调整,使之能够查看在三个月之内的该数据。当时,自以为已经很了解需求,只是将时间限制放开到三个月,同时,数据的展示限制在一个月内。也就是说,可以查看三个月内任意小于三十天的时间段。优点是:1)满足了需求;2...

    2018-02-27
  • 十种正确的可用性度量方法(上)

    现在大家在做产品、谈需求、讲体验时,都说不能拍脑门儿要用说数据说话。好,那问题来了,针对不同的问题我们要什么样子的数据来说话呢?这确实需要我们好好思考,下文将通过一些小栗子为大家做一个简单的梳理。

    2017-05-28