【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

相关推荐

  • 产品经理如何有效学习产品课程?

    很多想要成为或者刚刚成为互联网产品经理的人会自己学习一些大牛分享的课程,阅读一些推荐书籍,但是学完之后经常会有好像很有收获但是却又不知道收获了什么的感觉,产品经理如何有效学习产品课程呢?以下是我自己在进行产品学习时的一些经验。1、多体验产品一个好的产品经理首先自己一定是一个好的用户,只有多体验产品,多思考产品背后的设计理念和价值,自己才能设计出优秀的产品。我们公司有个资深产品经理,他设计的产品日活已经上亿,公司当时还奖励公司员工每日一盒...

    微信热点 2018-03-06
  • Axure优雅装逼指南:开启原型高颜值形态

    作者寄语 / 一直想写的Axure小技巧分享,终于动手写了。望能对亲有所帮助,文笔粗糙请谅解。内容目录:啥是高保真原型?简单说明原型Axure可以画出什么水准的高保真?给示例,开启装逼模式特殊的技巧:核心内功:目标清晰/理解设计规范画图习惯:像素对齐/用浅色/上素材啥时候上高保真?:适用场景 and 不适用场景啥是高保真原型?啥是原型,从事互联网研发体系的同学,肯定非常熟悉,特别是产品岗同学。如果不是,那如下简单讲原型和高保真原型的:原...

    2018-04-28
  • 观点 | 交互设计在未来会多火?

    周一:AE动效 | 如何入手创作才能更加真实?周二:马克笔如何通过"叠加技法"精准调色周三:更快更好 | 手绘板也能比着尺子画!?周四:观点 | 交互设计在未来会有多火?周五:开拓视野 | 哪些用户体验很棒的APP设计好在哪里周六:如何看懂艾迪.斯理曼的Dior Homme周日:学珠宝设计我们推荐给你的必看书目交互设计是什么?对你而言,它可能还是未知数。让我们先看看大多数人如何看待交互设计这一专业:1.交互设计师是做APP的2.交互设计...

    2018-04-06
  • 交互设计 | 2个概念,梳理成熟的交互设计作品思路

    直接上干货,给大家介绍作品设计中至关重要的两个概念——storytelling 和 process。这两词不是我拍脑袋想的,是我和很多hr(包括一些美国的agency,知名大公司如amazon)聊天的时候直接问的。不仅如此,我…

    2017-08-01
  • 【转】交互设计规范总结

    前些时间正准备写交互规范,就去网上搜罗了一下交互规范的一些范本,想作为借鉴参考,但却没能找到比较满意的,找到了一些零散的内容(当然有些还是有参考价值的),所以就觉得交互规范这方面的内容比较少,就来此…

    交互设计 2016-09-05
  • 内部教程!超实用6步透视网易设计规范(附完整PDF下载)

    这是一份不可多得的网易干货资料,更是一份非常标准的设计规范准则!产品经理&视觉设计必看!

    2016-08-29
  • 微信的扫码和摇一摇,给老美好好上了一堂创新课 【UXRen译#150】

    作者: YUNNUO CHENG & RALUCA BUDIU @NNGroup |  翻译:张维钢、朱玲 ,校审:Junliang   摘要:与美国相比,在中国扫描二维码和摇一摇成为了有效沟通线上线下的交流方式,并且应用广泛。   图为中国“绝味鸭脖…

    交互专题 2017-08-07
  • 顾振宇:Ubiquitous Fun-交互设计的享乐主义未来——上海交通大学创新设计论坛-体验和交互设计分论坛

    演讲题目 Ubiquitous Fun-交互设计的享乐主义未来 在可预见的未来,随着用户数据的积累和人工智能的发展,产品“可用性”问题会逐渐淡出我们的讨论主题,同时,人们对物质的需求总是非常有限的,因此“实用性”价值空间…

    2017-01-03
  • 如何减少哑铃图中的颜色,提高用户体验?

    有奖互动话题,文末等你概述作者在 #MakeoverMonday 2018 的第 2 周的课题上,制作了一张哑铃图来比较男性与女性在寻找伴侣时所注重的特征排名。他目标是展示不同国家的男性或女性在寻找伴侣时是否都会将某一特征看作重要因素。这样让作者立即想到了哑铃图,但是他的第一份草稿存在一定的问题。Viz 中的颜色太多了,我们很难从中发现趋势。之前作者也曾遇到过这个问题,但是他觉得真正的解决办法应该是,在不减少 Viz 中数据数量的情况下...

    2018-04-19
  • 卡片式设计,并不能支撑所有的设计需求

    卡片式设计一直是以强兼容性和“百搭”的形象出现在大众的面前,但是它同样有无法满足用户需求的时候,今天的文章我们就在实战中聊聊这件事。

    2017-05-13