初识Sketch：设计师的工具箱_我爱热可乐
初识Sketch：设计师的工具箱
来自 ituring.com.cn作者：Jean-Marc Denis
上次去旧金山参加WWDC 2013时，我有幸会见了来自世界各地的大牛，他们热心致力于创建更好的工具，为设计师们提供更多方便。（仅Mac版）在一年前刚刚发布的时候我就试用了。因为它当时功能还不完善，加上难以改变的工作习惯，让我又回到了Photoshop。尽管如此，在设计师社区里仍然可见对这款软件的狂热。这促使我安排专门的时间，一本正经地研究它，我自学了Sketch基本操作。我想要评估一下，Sketch是否能够在某些方面有效地代替Photoshop。今天，我80%的设计工作是在Sketch里完成的。切换软件所花的时间不到一个月，而至今我仍然觉得切换对了。下面就是我的理由：Photoshop有什么不好呢？当我们对品质、效率和协作的要求越来越高时，就越来越会发现，我们用着残缺的工具。出于诸多原因，本文不再讨论Fireworks（主要是因为Adobe自己都砍掉了这个产品）。并非为我们打造最初开发Photoshop，是用来做数字图像处理的。贝塞尔（Béziers）曲线和矢量工具在第二版才开始出现。如果仔细看看它的版本升级记录以及最近的更新，UI设计师明显地没有列入这款软件的目标用户。我们已经忘了，人们其实是在“破解”着用它，我们在它主要用途之外进行着操作。我们其实需要一款更简单的软件，完成更简单的事情。Photoshop是高射炮打蚊子了。不适合移动时代如果需要将图形导出为多种分辨率，你就遇到麻烦了。即使采用sprite技术，你也不得不花大量的时间，把所有的图形都对齐网格。有很多节约时间的工具都来自第三方插件，iOS屏幕和图标模板、网格布局和符号。老气的引擎因为Photoshop悠久的历史和面向图像处理的传统，它内部的运算引擎要消耗大量的资源。即使在Adobe工程师团队已经做了惊人的努力来对性能进行优化，各项功能还是慢到让我们心烦。即使是“同时移动多个组合”这样基本的功能，每次也都要等沙漏。这也不能怪工程师，他们要做跨平台支持已经够累了。年事已高你还记得视网膜屏幕发布之后，大家盼望Photoshop更新，等了多久么？还有虚线笔触、动态圆角？太久了。我都能理解，不是挑刺儿。巨型团队通常动作缓慢。但这不能改变事实，我们对那些还不存在的功能的急切期待：良好的文本渲染、多重混合选项、实用的智能辅助线，等等。自动保存和版本管理你也是 ?+s 存盘强迫症患者？现在有治了！Sketch能够自动存盘，而且允许你恢复文件以前的历史版本。（译者注：这是现代Mac OS X的系统内置功能，很多Mac软件都支持。）可以按下 ^P 来进行“矢量”和“像素”两种视图切换智能辅助线你是喜欢用xScope软件，还是用选区工具来测量尺寸？“智能辅助线”可以帮你处理所有元素的对齐、调好内外边距，非常方便，帮我省了很多时间，让我心情大好。这是对我来说最实用的功能之一。动态尺寸堪称大杀器形状连接可以方便地对不同的形状进行合并，来产生新的形状，并选用联合、相减、相交、差异运算。这些都在意料之中，但你要知道，真正牛的在于，所有参见运算的子形状都可以即时编辑。你可以单独选中他们，进行修改层次等操作，而不会造成麻烦。不用为图形前后次序纠结了。这就为创建和管理更复杂的形状提供了可能。多达4层填充，无限的边框和阴影。向最近的像素边框边缘“向最近的像素边缘取整”功能可以让图形或图层靠拢最近的边缘，例如一个某形状的尺寸是5.3px，可以取整为5px，不会再有小数值。我为这个功能设置了快捷键，确保我所有的形状都是像素级精确。比起将矢量点逐个对齐到网格的操作，这种方法快速而有效。使用链接样式，你可以方便快速地修改所有的文字效果。导出作品对作品进行切片和导出，常常是最痛苦的一步工作，即使 Photoshop 有专门的切片工具。 Sketch 支持矢量图像，而且对导出功能进行了精心设计，可以一键导出多种不同的尺寸，并支持不同的格式（ pdf 、 eps 、 svg 、 png 、 jpg 、 tiff ）。当然这用不着插件和第三方应用程序，而是内置功能。在处理内容布局，例如排列图像时非常有用网格（Grid）是由一组水平、垂直轴交叉组成二维结构，用来对内容进行结构化。使用网格，设计师可以将文字和图像以一种合理的、吸引人的方式组织到一起。你一定要用用网格，它是伟大的工具。文本以最佳方式进行渲染CSS 样式如果你的工作是网站开发，或者与网站工程师一起工作，这个功能将会把你的混合选项转换为 CSS 代码。目前还不支持边框渐变旋转副本一个小工具，又可以大量节省你的时间。changelog 可以看出，每一次更新都带来新的功能。我建议你
，自己经历频繁的版本更新。有赖于聆听用户的声音，Sketch正在变得越来越好。要报告问题和提交新功能，
是一处极佳的场所。当然 Sketch 远未完美，如果能加上这些我喜欢的功能，我就永远不必再打开 Photoshop 了：
基本的位图编辑，例如剪切和删除像素（译者注：此功能最新版已包含）
为组合设置滤镜，例如高斯和移动模糊（译者注： Sketch 已经实现了更强大的背景模糊）
对组合进行 3D 变换，例如倾斜、变形、透视
导出/导入设置和预设值，这样团队可以共享配色方案、渐变、文字样式等
以不同倍率导出作品（而不仅仅是 @1x 和 @2x ）
实现类似 Fireworks 的符号功能，可以加快工作进程，而链接的符号效率更高。更新其中任一，将反映到其他各处。
改进状态管理，我至今用过最好的状态管理就是 Fireworks 。
https://medium.com/design-ux/1


本文仅用于学习和交流目的，不代表图灵社区观点。非商业转载请注明作译者、出处，并保留本文的原始链接。
一枚GUI要不要学Sketch？——Sketch使用体验 - 简书
一枚GUI要不要学Sketch？——Sketch使用体验
Sketch作为一个为UI设计而生的工具，全矢量、轻量级、像素级精准，非常适合做移动端应用类的界面设计和简单的扁平图标设计。他轻巧 优雅 高效，三点相辅相成 。出道至今已经强力地占据了一片设计师市场，经常被拿来跟PS对比。下文是我通过一段时间的使用，对比PS，梳理了Sketch对我们而言的优点和痛点，探讨了下Sketch对提升工作效率是否有帮助，文末还附带了一些延伸阅读。PART1 #Sketch的8大优势1.小清新颜值高
简洁高效 抗干扰界面简洁美好，功能清晰。无悬浮面板，选择一个对象/图层（objects）就会展示对应检查器（inspectors），不会有PS中处理大文件时各种开关窗口情况。
软件截图（全屏）：左侧栏为图层区；右侧栏为检查器区
2.使用畅快易上手2.1 无限画布&画板-自由度高不管有多少画布（pages）都被包含在同一个文档中，还可以在程序内部进行搜索，便于管理大型项目在一个画布中可以平铺无限个画板（Artboard），这样的全局视野，规划自由度高，也利于思考界面元素关系和维护界面设计的一致性，方便各种check
示意文件截图（局部）：右侧为随意摆放的4个画板
说明：Sketch文档&Page&Artboard&Layer
在一个Sketch文档中可以建立多个画布（Page），画布中可以自由放置画板（Artboard）。
而每个元素/对象都作为一个图层（layer），以图层或组（group）的形式安置在artboard中。
2.2 无冷启动时间-运行快
0启动时间，也就是没有类似于PS的启动画面，节省了等待时间由于多是矢量文件，因此体量小，运行快。2.3 简化操作-交互体验好
操作人性，各种贴心设计 ，使眼与手在界面设计过程中更加轻松高效完成工作，上手指数超高。方便选择上文提到的Sketch中不同面板位置是固定的，选中某个对象才会显示对应的检查器，不用在众多属性窗口中苦苦寻觅鼠标掠过画布中元素的时，左侧图层栏会出现蓝色框对对焦到选中的元素左侧分栏可以看到矢量图形的的缩略图，不用仔细阅读面板信息即可准确选择
选中右侧元素”BHBH“，左侧蓝色框自动对焦图层
简而言之，不懂PS/AI的小白上手sketch完全无碍3.像素级精准
3.1像素级对齐Sketch中在编辑路径时，可以选择三种对齐方式——Don't round to nearest pixels 不自动对齐像素：编辑路径时可以随意移动节点Round to half pixels 以半像素为单位对齐：可能出现半像素Round to full pixels 以1像素为单位对齐像素：锚点全部像素对齐，避免锯齿，可以节省设计湿大量微调时间。
三种对齐方式
三种对齐方式的说明图
3.2数值化编辑
矢量软件的一大优势就是可以编辑精准，Sketch中可以实时调节形状的半径/数量等各个参数，数值化编辑让设计更加精准和专业。基于公式运算的变形PS中的标尺和矢量工具都很笨重，比如建立倍数关系的东西、按黄金分割分配比例、做菲波那切数列图标什么的都很纠结。而在sketch中甚至可以直接完成简单运算：
像 100 * 1.6 + 60 这样的运算可以在 Sketch 中进行
*Sketch让设计师更加关注数值，更理性有逻辑的去编排布局，而不是随意拖拽元素。4.非破坏性编辑随时调节形状的半径/数量在PS中如果需改变已建图形的半径就要重新建立形状，而sketch则可以随时编辑。
圆角变形就是辣么简单
*随时编辑的布尔运算跟PS和AI一样，sketch也有联合、相减、相交、差异这些布尔运算。更方便的地方在于参与运算的子形状都可以即时编辑。每个路径都可以随时修改运算方式和层次等操作，方便管理复杂的形状组合。比PS中的合并形状更具自由度，也更容易理解层级关系。
每层与下一层发生布尔运算
九宫切片自动化导入位图文件后可以调整九宫节点，直接实现九宫变形，节省了人工完成的时间。
可视化渐变调节由于是矢量文件，所以实现了参数可视化，在图形可以看到直观效果
图形上方即有渐变操作杆直接调节
复制旋转可以方便地建立旋转图形及编辑中心点
总觉得有点酷炫
图层样式可无限累加可逐层设置的多种混合模式，也就是说可以加外描边的外描边的外描边的外描边……并可以任意调节各层样式。另外，描边宽度也可以加锚点改变哒（同AI）5.可调用的嵌套样式Sketch的明星功能符号（Symbol）和共享样式(Shared style：layer styles&text styles)：
符号（Symbol）就是共享元素，一次编辑，所有共用的地方全部生效，就像是 Photoshop 里的智能对象，且生效范围仅在每一个 .sketch 文件中。不同之处在于Sketch中改变一个元素副本大小所有都同步，PS中智能对象的大小是独立的；且Sketch的符号中文本是可以单独编辑的。符号被运用的最广泛的地方可能是按钮这样的基本 UI 元素，举个栗子，在PS中建立两个文字不同的图标需要新建智能对象或者文字与按钮分离，编辑时需要打开一个或两个智能对象……Sketch中编辑就轻松很多。
共享样式(Shared style：layer styles&text styles)图层共享样式PS中也能复制黏贴，然文字样式的编辑和共享PS中并没有。共享文字样式等同于直接在软件中调用文字规范，非常有用的功能~
紫色文件夹即应用了符号（来源：官网）
6.原生测量利器十分好用的标尺工具如果需要查看两个元素之间的距离，在选中第一个元素后按住Alt然后将光标指向第二个元素即可。此时如果按住Alt并移动元素，便能在移动过程中时刻看到元素之间的距离变化
对齐也变得非常容易
布局网格和参考线面板参考线是PS CC前版本比较渣的点，只能一条条来，不支持参考线面板（按比例建立多条），做界面设计时基本要借助第三方插件而在sketch中就很方便啦
参考线批量一键设置
7.灵活的切图和输出批量输出爽爆，还可以自动画出切片大小（slice），切片输出直观方便 （包括上文提到的九宫变形）可以导出 0.5x、1x、2x、3x、512W 和 512H 的版本，同时还可以自定义不同尺寸的后缀。
一键导出多种尺寸和格式
8.前景好迭代快手机端配套支持自带的Sketch Mirror支持同步手机端，时时查看效果。ios友好ios各种支持的好，且内置的ios模板 （artboard），各种文档尺寸不用手动输
CSS友好Sketch是写码的设计师最爱，可能是代码调用方便（？）以下是Avocode（号称是连接设计师与码农的桥梁）做的调研报告《》中关于软件使用比例的截图。可以理解会有不少创业型小团队将sketch作为主力设计工具。
Sketch的使用比例快要赶上PS
社区繁荣插件多Sketch由于备受追捧，社区的活跃度高，各种插件、资源查找方便。小团队迭代快作为为设计师存在的软件，据说非常愿意倾听设计师意见，响应迅速、更新迭代快。PART2 #Sketch的3大痛点1.弱爆的位图处理能力位图处理就在两个地方：简单的投影和模糊（4种模糊方式）位图编辑功能：两个选区工具（魔术棒和选择工具）、反选、裁剪、矢量填充和直接填充。当然并没有画笔、滤镜种种且图层样式只有四种：填充、描边、投影、内阴影（没有常用的内外发光 斜面浮雕）所以说不适于做拟物类界面设计，用Sketch挑战绘图向设计很低效2.格式支持局限，难以团队协作不支持psd和ai文件，部分支持eps/svg支持：除图片文件jpg/png/tiff/pdf外，可以导出eps/svg(可以与AI对接)3.平台和语言限制Sketch在官网上的定位就是——首先需要Mac，且只有英文系统 (可能会有中文字体支持问题)如：无法方便地为一段中英混合的文字指定中英文字体（一个知乎上看到的槽点）“比如说「你好Hello」这几个字，在PS下可以先设为冬青黑，再设为Avenir Next，它就是冬青黑的中文+ Avenir Next的英文。但Sketch不支持这样的操作，为大段文字设置不同的中英文字体就是灾难。”
补充1：字体行高诡异
不同字体的实际行高也不一样，做列表类界面的时候特别麻烦
另外 Sketch 的行高很有问题，我随手找过几个字体对比过，比如在行高设为 88px 时，每个字体的行高都不一样，行高设为自动时不同字体文本框 padding 也是不同的。排版对齐很麻烦：
Photoshop 的文字有分「段落文本（Paragragh）」和「点文本（Point）」，Sketch中 对应的则是「Fixed」和「Auto」，看上去 Auto 对应的是 PS 里的 点文本，但是 Sketch 的文本框上下会留出一些留白间距，而 PS 则是没有留白间距的处理，这样一来，对齐的时候 PS 感觉会更精准一些
任意三种字体上对齐的结果
补充2：拼界面无明显优势
运行超快的Sketch能否拿来拼（位图）界面？
导入了一套约18M的文件，其中包含jpg和png文件。移动位图过程中有明显卡顿，九宫切图因为自动化所以会比（ps）较快，但无法做常用的位图编辑，总体交互操作相较PS也没有太多优势。
18M输出文件
PAET3 #结论：不妨一试
诚然Sketch对位图编辑是非常不友好的，完全不能与ps相提并论，因此现阶段Sketch一定不是必要工具。当然它的卖点本来就无关位图，其针对UI设计的操作、交互模式大大提高工作效率。不过就像大家知道AI做矢量比PS高效，但就是不移步AI一样（实际工作中位图处理多过矢量)，软件切换多少有心理成本。另外还涉及到团队协作问题，Sketch现如今在我司还如此孤立无援，且还要多背一台MacBook。但是Sketch非常适合扁平化设计，顺应了设计理念：数值化编辑像素级精准等等， 而且矢量化设计也是一种趋势。好玩好用，上手成本低，值得一试。作为一枚GUI总结一下，Sketch在以下几方面可能有所助益：1. 移动端APP和响应式网页设计利器全局化视野 精准的自动对齐 符号和共享样式…显然就是为此而生2. 简单的矢量化图标 通过布尔运算能处理的图标都适合在Sketch中操作，输出也快速方便3. 简易形（几何组合造型）尝试
Sketch的数值化编辑、非破坏性编辑使得图形组合的自由度非常高4. 游戏界面风格稿前期设计也就是刻画之前的各阶段：色彩搭配、布局调整、样式设计有利于聚焦在设计过程、界面逻辑，而非细节。即避免失控（设计点偏离）以及在丰富的材质中迷失。*文件再导入PS会比较繁琐：除非png等位图格式，不然中需要ai做中转Abobe的反击以上归纳的很多点sketch优势实际上PS CC 2015都已经有相应跟进，只不过同样因为团队协作等问题（大部分同事还是用PS 6乃至更原始版本），没有去开发新功能。1.多画板设定想到PS CC也可以平铺很多画板的，可能由于我们处理的文件体量比较大，并没有太多人用新建画板有三种方式：直接新建、根据图层新建、根据组新建*从属关系：ps文档&画板&组&图层2.参考线面板（Photoshop CC 2014.2）通过形状新建参考线功能，可以一键创建参考线还可以新建参考线面板，即可以快速建立成套参考线，Adobe还给出了四种参考线预设：8列、12列、16列、24列3.快速切片功能 新建基于图层的切片，快速导出png。选中图层右键“快速导出png”即可。4.图层样式叠加 （PS CC 2015）最多可以叠加10个，缺点是由于样式名字相同，设置多层则不容易区分
*图片来源：移步5.共享段落样式、字符样式 （待测试）通过添加样式可以快速改变字体， 类似于PPT，不过只支持文件内部共享，不能导出。6.原生移动端支持原厂出品移动端同步：Adobe Previewcc，不用再用PSplay什么的，更加高速稳定。7.设计空间（Design Mode）新推出的设计师模式操作模式，看上去也是萌萌哒。据说稳定性和性能总体体验一般，期待更新版本。
Design Mode
*8.云端素材库（）搜集资料的过程中还发现了CC鲜为人用的功能 （附）
看图秒懂，就是可以各种调用：色板、sketch的共享字体样式、常用图片是不是都在这里了 。还包含了云端Adobe图库（）的调用。可能可以真正实现一次修改，到处同步了，团队协作神器。
*来源：官网
9.庞大的插件后宫发展至今PS的插件、动作、材质、形状的众创规模之巨大已经不用赘述。比如插件Corner Editor可以实现圆角的编辑功能，相当于Sketch中针对圆角形状的非破坏性编辑。这些都是PS的定制型增效工具，按需手动添加即可。对比Sketch和PS带来的反思1.设计是核心：厘清设计思路很重要两家都是用来实现设计想法的工具，最关键的还是设计和想法，sketch中的很多功能都是帮助设计师关注设计流程、把控层级的2.主动优化流程PS CC后有很多有意思的功能和冷知识可能因为以前的使用惯性等原因没有去开发以及培养好的使用习惯，比如图层管理、资源整理也许偶尔花点时间去优化流程会是一大助力新东西不妨尝试看看，让自己的系统更加flexible，多多自我迭代。对Sketch和PS的研究都尚浅，欢~迎~吐~槽~&戳一戳 ·（见最高票回答）···&下载链接
欢迎使用 Sketch 3 的用户手册，这个手册的内容同时适用于新手和熟练用户。如果你对于这个手册的内容有任何想法和疑问，请通过邮箱
随时联系我们。我们会不断的完善本手册。 介绍Sketch 是一款适用于所有设计师的矢量绘图应...
本书讲了什么 Sketch3基本操作介绍。 作者什么来头 郑成云，社会化媒体营销实践者，专注网络社交领域。从业6年，涉及社区管理、网络营销,以及移动产品设计工作。曾就职于金山、新浪、海尔、巧贝科技等公司，后加入微博，任高级产品经理。 第1章Sketch介绍（Introduc...
Sketch 3 简介 “Sketch 3 是一款适用于所有设计师的矢量绘图应用”，“但除了矢量编辑的功能之外，我们同样添加了一些基本的位图工具，比如模糊和色彩校正。 “在 Sketch 中，画布将是无限大小的” Sketch 3 快捷键 The Interface 界面 ...
注意：这是一篇译文，如果你够装逼，完全可以浏览原文：Sketch Tutorial for iOS Developers如需转载，请注明出处。谢谢！！！转载地址：http://www.rockerhx.com//-Sketch-Tut...
【前言】 上一篇说过，Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页，图标以及界面设计的最好方式。但除了矢量编辑的功能之外，Sketch同样添加了一些基本的位图工具，比如模糊和色彩校正。 对于绝大多数的数字产品设计，Sketch 基本能替代 A...
太阳 永远看不到 夕阳 晚霞
在和樱妈的聊天中，她一针见血的说：“不能逃避。” “逃避”一词如当头一棒，把我敲醒。 是的，在娃的教育中，我的确选择逃避。对体制内教育的深深恐惧，让我一直想带着娃一起逃。可是经过樱妈的这次对话，我重新思考了，并和先生有了自娃出生以来第一次就教育问题的愉快交流。 之前我一直在...
今天喷了一个看不惯很久的人，很舒服，吃份美美的麻辣香锅，世间没有解不开结，顺其自然生活。 这两天在简书上写日记的状态，感觉像酒后胡言，整个人醉醉的，说着些想说的话，完全是说给自己听的，
今天上床很早，写完就睡，睡得也很早，明天想早点起去吃皮蛋瘦肉粥，今天起晚了没吃成，床...
炖蛋也就是蒸蛋羹，是把蛋和其他材料混合再隔水炖制而成。是个简单，鲜美，富有营养的居家必备良菜。但是，要炖好一碗蛋，炖的又滑又嫩也不是很容易的，经过一段时间实践，我觉得要炖好蛋需要注意以下几点： 1.搅拌均匀后再放盐 2.把盐冲成盐水放入蛋液中 3.蛋液与水的比例不低于1比1...
那天花开 你，在我身边 伴随着沁人的清香 慢慢的入我心怀 那天花败 你，渡向潮海 孕育出不尽的思念 浅浅的距离隔待 想，是不用怨念 “我走了” 含着无奈 一些朦胧的情感 不敢说出的 我爱你大江东去，浪淘尽，千古风流人物。一切重头来过！
给iOS开发者的Sketch入门教程
注意：这是一篇译文，如果你够装逼，完全可以浏览原文：
如需转载，请注明出处。谢谢！！！
转载地址：
作为一名iOS开发者，我经历过几个没有设计师的项目，结果就是，痛苦的一逼。
做这种类型的项目，设计是非常重要的，特别是迭代设计。
在每个项目最开始的时候，客户其实并不知道自己想要什么。直接堆码之前我们还是有点小小的设计知识更有助于你跟客户撕逼的时候占上风，其实我们只是想更完美，难道不是吗？
这里我更推荐的做法是，迭代原型，而不是先堆码，这才是一个合格码农该做的。
但是怎样才能在没有设计师的前提下设计原型，那就必须用到这货。是创作Logo和Iconfeel倍儿爽的工具。它是基于矢量图形的，这意味着你在调整图形大小的时候可以不用担心丢失画质。它包含iPhone设备尺寸的画板和一个内置的UIKit模板，你也可以用Sketch来创建迭代设计原型。另外，Sketch还是一个让程序汪能快速上手的工具。
在本教程中，你可以学到：
使用UIKit模板创建一个模型。使用矢量工具创建Icon。通过组合基本形状制作Icon。为Xcode导出图片素材资源。
而最重要的，你能以开发者的身份来学习这份教程。准备好就可以升级了您的设计技能！Let's do it！
首先第一件事情，你需要。在14天试用版。购买激活需要$99，要什么版本自己看着办。
一旦你已经安装了Sketch，打开Sketch，坐下来，放松，吸气，呼气，放屁，然后就可以开始一场盛大之旅了！
在下面的章节中，我将指导里在Sketch中挑战各种UI元素来制作图标。请注意，这些都只是出于学习目的，等你自己上手后，完全可以让其狗带，毕竟本教程后面已经不需要这些东东了。
正所谓，能动手就憋逼逼，那就不瞎逼逼了，直接开整。
模板 - Templates
iOS的界面设计模板包含一套矢量格式UIKit组件集合。它有一个标签栏，导航栏，表视图，以及更多。您可以使用它创建一套设计原型。
操作路径File\New From Template\iOS UI Design，你会看到以下内容：
注意这个菜单里也可以选择Android的Material Design设计模板。
打开之后你会看到一个包含各种iOS的UI组件的巨大模板。你可以通过在画布上拖拽选择各个控件，你可以通过按住Command，并使用鼠标滚轮进行画布缩放。
画板 - Artboards
你可以在Sketch这个无限大的画布上绘制你想要的任何图形，如果你要展现多个App屏幕的内容，那就要通过画板这个东西。画板组织一个固定的画布图层。当你导出画板，所有的图层将会合并成一个单一的文件。这里可以把它看做成Xcode里一个Storyboard的控制器场景(ViewController
通过执行以下步骤来创建一个新的画板：
拖动画布，移动到一个空白区域。从左上方第一个功能按钮Insert，单击选择Artboard。在出现的右窗格中，选择iPhone6尺寸。
注意：你看到的这个教程的UI模板可能会低于你所使用的版本，某些UI控件或者元素的位置可能会有不同，但这并不影响本教程的学习。
创建之后你应该能看到一个叫做iPhone6的空白画板。默认情况下，新创建的画板将把它周围自由浮动的元素也都包含进去。这样肯定就煞笔了，所以我们还是按照上面的步骤，把默认的模板滚到别的地方，中间留出空白区域用于创建我们所需要的画板。
只要你爽，画板你想添加多少都行。Sketch有iPhone，Apple
Watch，甚至iPad Pro的尺寸。如果你点错或者不想使用这个画板，选择删除即可，不用想太多。
注意：如果你想要任意大小的画板，你可以Insert\Artboard，随便选择一个画板，任意拖动大小即可，至于命名，在左边的文件组织列表栏里把画布所在的分组栏重命名即可。
复制，粘贴
现在，你已经有了一个画板，从UIKit模板中拖动这几个控件。一个Navigation Bar，Tab
Bar和Table View Cell。
虽然你可以复制和粘贴?C和?V，但这很难预测粘贴后控件出现的位置。所以还是老实点，按住Option键拖动一个控件，在你想要粘贴的地方松开鼠标左键即可。
提示：如何使用快捷键?D重复前面的动作。使用Option拖拽粘贴与?D创建多个副本：
选择一个控件直接按住Option键拖拽Cell到合适位置。接着使用快捷键?D创建剩下的Cell。
如上图演示一样，你有没有吃精呢？
基础形状 - Basic Shapes
首先，新开个文件或者在画布上找个空白的地方插入一个画板：Insert\Artboard
接着，我们来搞个图形玩玩，Insert\Shape选择一个可用的形状。
实际上，我们可以使用快捷键来插入新的形状。使用快捷键O再按住鼠标左键拖拽即可插入一个椭圆，同样使用快捷键R可以插入一个矩形。下面，罗列出一些常用的图形插入快捷键：
L：插入直线快捷键O：插入椭圆快捷键T：插入文本快捷键R：插入矩形快捷键
有了这些，你可以自己动手画个机器人玩玩（过程中你可能需要调整下字体来达到相同的效果）。
注意：在插入的时候你可以按住Shift来保证图形绘制成圆形和正方形。
制作图形 - Styling a Shape
基础的形状虽然好，但是基本上不能给人留下深刻的印象，所以我们可以使用窗口右侧的Inspector栏来编辑图形的一些基础属性，比如颜色，边框半径啥的。这个东西你可以理解为Xcode的Attributes
Inspector工具栏。
下面罗列的选项你可以多试试，熟悉一下：
位置/大小 - Position/Size：对于有的图形或者画布很难拖动调整，你就可以利用这个选项调整画布，点击Size选项中间的小锁图标可以锁定比例，在调整大小的时候就会按照你想要的比例等比例缩放。半径 - Radius：这个选项应该不用解释太多应该都懂，就是调增矩形边角弧度半径的的一个滑块。透明度 - Opacity：看名字也知道了，同上，不多解释，下面会有很多示例。填充 - Fills：使用颜色选择器来改变图层的填充色，也可以取消透明填充。边框 - Borders：设置边框粗细和边框颜色，也可以完全禁用它。
小贴士：Sketch自带有色彩拾取器，快捷键是Control-C，这完全是一个内置拾取器，非常方便。
有了这些，你可以跟着下面的动态图做学习下药丸的制作：
使用快捷键R创建一个矩形。通过调整矩形边角半径Radius到100让其看起来像药丸。
就如刚才说的一样，你可以自己试试其他的设置，提升一下熟练度。
图层列表 - Layer List
这个功能区图层列表 - Layer List 位于窗口的左边，它包含了图层列表所包含的所有图层文件。图层是重叠起来的，结构类似于Storyboard中的视图层次结构。
文件组织层逻辑，你可以把多个图层作为一个单元一起移动，你还可以使用导出把它到合并成一个单一的对象并导出成图片。在图层列表中，组的概念用文件夹图标表示。
下列是图层组管理常用的快捷键：
?G：选择多个图层拉进一个组。使用?-Shift-G键取消组合。?R：重命名选定的项目。Sketch里回车键只能展开组，不能重命名哈。?-Option-Up/Down：快速移动在组内移动图层，可以理解为iOS开发中视图的层级index的移动。?-Shift-L：锁定图层，让其在画布中不能被选择，即便是在图层列表选择也不能编辑。这个功能将在下一节使用。
提示：使用这些功能能让我们很好的组织图层结构，就如一个有洁癖的开发需要好的工程目录组织一样，快速定位和爽心悦目是必须的，比如动态图利演示的TableView和Tab
Bar一样。然后你可以使用?-Option-Up组合快捷键把图层移动到整个画板前沿，避免被其他图层挡住。这里我们尽量不要选择拖拽来排列，避免不小心拖到一个组到另一个组里去了（老版本的Xcode经常有这鸟问题，一不小心组就拖错了）。
试试加些分组到你的iPhone画板里，记得多练习下分组命名。
矢量工具 - Vector Tool
画圆啊，矩形啊，线条这些都太low逼了，限制也比较多。接下来我们就试试矢量工具来把刚才这些基本图形变变形。
用直线来画图形
您可以通过点击创建任意多边形，接下来试着做一个多边形：
1.使用快捷键V激活矢量图形工具。2.开始画梯形的边角。3.通过点击起点闭合形状。4.点击编辑按钮 - Edit，拖动各个向量指向重新定位。5.添加填充颜色 - Fill。6.删除边框 - Border。
非常爽的是，因为Sketch可以让你在事后重新定位每个矢量点，因此不需要你有很大的绘画技巧就可以使用矢量工具。当你拖拽矢量点的适合还有跟Storyboard里面拖拽控件一样，会有对齐提示，只不过这里是红色的实现。
旋转副本 - Rotate Copies
如果你以为这里就只是画个梯形简直图样，接着我们就使用旋转副本功能来搞个风车耍耍。旋转副本创建了复制图形并给你创建了一圈，看起来有木有像个花瓣（像个毛）？又在瞎逼逼了，动手试试：
1.选择菜单Layer\Paths\Rotate Copies。2.输入3，制作三份副本（算上你画的那个一个是四个）。3.拖动白点，白点位置标示圆心，旋转一圈，看看有没有像银行标志，手里剑，风车啥的。
Sketch的旋转副本功能会自动创建一个循环副本，至于组合型，我们后面会讲到。
剪刀 - Scissors
位于旋转副本功能上面有个叫做剪刀 - Scissors的菜单选项。这里我们使用它投机倒把，创建一个WatchKit活动环耍耍：
1.创建一个圆（记住，使用快捷键O并按住Shift拖动出一个圆圈）。2.取消填充Fill。3.把边框Border的值加大到25。4.选择菜单Layer\Paths\Scissors。5.剪断圆圈的左上部分。6.旋转边框Border栏，点击齿轮Gear按钮。7.在弹出的菜单里选择圆端rounded ends选项。
这里说明一下，其实一个圆就是通过四个矢量点和四条矢量路径回执而成，所以矢量路径可以随便干掉。
小提示：你可以在使用剪刀剪断矢量路径之前用编辑功能拖动任意路径。
模式和操作棒 - Modes and Handles
Sketch使用四个向量点来绘制圆。你可以画一个圆试试，然后单击工具栏中的编辑Edit看到这些向量点。
可以你会怀疑，一个长方形也有四个矢量点。 这特么到底是怎么回事？其实两者之间的区别就在于圆使用的是贝塞尔曲线 - Bezier
简单的说，贝塞尔曲线 - Bezier Curves就是是可以通过控制点弯曲的曲线线条。Sketch称这些控制点叫操作棒
- handles。每个向量点附带有控制每边弧度的两个操作棒。这意味着线的弯曲程度是通过操作棒的各个控制端做决定。听起来比较复杂，但是这里我们需要太深入了解，在Sketch中，您只需拖动操作棒，直到曲线变成你想要的样子就可以了。
Sketch方便的定义了基于在需要操作的对象上相对位置的不同的四种模式。
直线模式 - Straight：这个模式没有操作棒，意味着也没有曲线变化，那当然也就是直线了。对称模式 - Mirrored：操作棒具有相同的长度，并形成一条直线，像飞机的机翼，操作棒是相互对称的。所以使用这个模式创建的就是对称曲线。不对称模式 - Asymmetric：操作棒任是一条直线，但它们可以有不同的长度。不连续模式 - Disconnected：两个操作棒相互独立，既不对称，长度也不相同。
所以前两种模式都是对称形式，只不过一个是直线，一个是曲线。后两种模式是非对称形式，方便创造任意曲线。
实际使用中，创建曲线so easy，只需点击矢量点再选择不连续模式 - Disconnected即可。然后你就可以随便玩了，只要不会让曲线看起来断开就行。
在实践中，使曲线是非常简单的。在矢量点只需双击，然后点击断开。然后你像电视天线的兔耳每个把手futz直到曲线看起来正确。
要了解更多关于模式和操作棒，这篇可以参考。
贝塞尔曲线理论 - Bezier Curve Theory
其实你并不真的需要知道贝塞尔曲线背后的数学才能使用矢量工具 - 但是我偏不！ ：] 这里我有一个非数学的比喻，可以帮助了解计算机是怎么把这个东西画到屏幕上的。
这里原作者使用了不恰当的棒球比赛模型来来举例，里面没有裁判，我也不太了解棒球规则，就不瞎逼逼了，按照我的理解来说。
1.绿色boy要直接冲回老家全垒打。2.蓝色boy去当然要截断，冲向绿色boy，由于绿色boy是移动的，所以蓝色boy的走位就是曲线运动。3.然而下路的红色boy心急比较重，不能眼看着绿色boy被干，当然要去KO蓝色boy，所以红色boy的走位也很风骚，也是曲线。
本垒和红色boy的位置代表矢量点，绿色和蓝色boy的位置就是操作棒。这样红色boy的运动轨迹就是贝塞尔曲线。
不知道这么说你们有明白了没有，如果还没明白，这里有个，自行解决了，贝塞尔说起来没完没了。
矢量操作棒上手
接下来我们动手创建一个地图标记的图标：
1.先在画布上拉一个圆。2.边框Border设置为15。3.进入编辑状态（顶部工具条的Edit），选择底部的矢量点。4.把操作模式从对称模式 - Mirrored改为直线模式
- Straight。5.把底部的向量点向下拖动。6.拖动边角 - Corners滑块的值到35（这里根据你圆的半径自行更改，效果一样就行）。
所谓的地图标记就和上面示意图一样，点和圈之间的关系。后面的教程会对地图标记做更详细的介绍。
创建自定义图标
我们来搞个Logo，这里只是用简单的铅笔工具来画线，然后拿矢量工具来描边。
接下来我们就搞一个Ray Wenderlich的Logo耍耍。
1.是Logo的低像素版本。2.把这张Logo扔进Sketch。3.选中图片，在右侧的属性编辑栏把不透明 - Opacity属性改为20%，方便描边。4.使用快捷键Command-Shift-L把图层锁定，防止你不小心拖动了，锁定之后图层名称旁边会有小锁的图标。5.快捷键V激活适量工具。6.点击Logo里图形的每个顶点，半弧形的不用点，直接回到最开始的点来闭合矢量路径。7.在图像路径上双击即可进入编辑状态。8.重新定位没有和图形顶点重合的矢量点，我们要的就是完美（图太小了别忘了放大后再定位）。
上述步骤搞完了我们现在可以开始搞刚从忽略的弧形了。这里我们将对刚才学到的模式进行活学活用。
1.双击起始点，模式会由直线模式
- Straight改为对称模式 - Mirrored。2.但是我们不是使用这个模式，切换到不连续模式 - Disconnected。3.拉着右边的操作棒变换弧形。4.拉着左边的操作棒和第二个矢量点重合，以免第一条直线变形。5.如果第一个矢量点右边的操作棒不能完美的画出Logo对应的弧线，可以开启Logo里弧形另外一边的点，也就是倒数第二个点。6.操作比作类似第一个矢量点的步骤，这里的目的只要把弧形调整完美即可。
这里运气比较好，RW的Logo只有一条弧线，以此类推，你可以使用更多的点来描出更多复杂的曲线。有兴趣可以去下载Swift的Logo来临摹。过程中可以通过使用快捷键Tab来快速切换每个矢量点。
想必大家小时候都玩过七巧板，我们除了通过矢量工具，还可以通过使用基本图形的结合来创建独特的形状。
在编程中，有运算逻辑AND，OR和XOR，Sketch中也有类似的表达，但是叫法不同，分为融合
- Union，相差 - Subtract，相交
- Intersect，差异 - Difference。
融合 - Union
融合 - Union就是就是两个图形加起来，使用之前的药丸和圆弄个云出来耍耍。
1.使用矩形创建一个小药丸。2.创建一个圆。3.移动圆，使其和药丸重合。4.选中两个图形，点击融合 - Union按钮使其融合成一个图形。
这里是不是很奇怪，两个图形的边框直接就融合到一起了，这就是Sketch的神奇之处。
相差 - Subtract
相差是两个图形重合在一起，一个被另一个包含，所以大集合除去小集合还会有多余的，多余的就是相差的部分，如果不变理解，可以想象为数学减法，结果就是相减之后的部分。
虽然之前的地图标记图标看起来已经可以了，但是我们所谓社会主义的接班人，怎么可以这么轻易就完了呢，不行，还得在标记上戳个洞看起来才爽。那就利用刚才介绍的相差的知识这么干：
1.创建一个地图标记图标，这次不需要边框，直接取消掉。2.创建一个小圆圈，并拖入到标记里面去。3.操作左侧的图层列表，把圆圈拖动到地图标记图层重叠到一个图层下。4.展开合并生成的新图层。5.确保圆圈图册在地图标记图册上面。6.这是图层列表上地图标记图册右侧会有一个可弹出菜单。7.菜单中选择相差 - Subtract。8.选中圆圈图层，使用小箭头微调位置即可。
这里总结一下知识点：
在图层列表里可以拖拽合并生成新的图层当你合并图层的时候，你基本不用操心，Sketch会帮你搞定你想要的。对于这些过程，你只用保证孔在最前既可以，如果图形小时，重新排列图层位置顺序即可。
填充、轮廓
这个节点，本教程为你准备了必须的。打开之后应该长这样：
这套包含了单个示例和矢量图标的素材方便你随时查阅，这些素材都是在教程前后使用的。
Tab Bar的图标颜色变化是基于选中状态，但是一些图标有太多的空间，所以颜色变化太微妙。在这种情况下，推荐使用单独填充版本作为selectedImage。RWDevCon应用的样本都有各自的Tab
Bar独立版本。
在刚才下载的素描文件里，有一个被称为日历入门的画板，日历图标其中包含几个几何图形合并的而来的图标。就是一些简单的几何图形拼凑而已，前面已经很好的演示过来。
下面我们来创建日历图标：
1.打开刚才的Sketch文件，在左侧图层列表展开日历入门
- Calendar Starter画板。2.选中日历主体 - Calendar Body部分和分割线
- Separator部分。3.使用相差 - Subtract功能。4.按住Shift再选中Right
Hole图层，还是使用相差 - Subtract功能。5.同理，再把Left Hole图层也重复上述步骤。6.接着按住Shift再选中Right
Ring图层使用融合 - Union功能。7.同理，Left Ring图层也这么照做。
通过相差和融合操作，现在的日历入门的画板上就只剩一个包含了刚才所有图层的单图层了，一切都看着泛绿。如果按照上述步骤操作之后和效果图有什么出入，可以参照画板下方的实例对照。
现在，来搞一个填充的图标。是时候重新调整一下，让其看起来像示例版本了。
1.在画布上找到日历填充 - Calendar Fill。2.在图层列表里展开日历填充 - Calendar Fill。3.再展开日历主体 - Calendar Body图层，并选择分割线
- Separator图层。4.把分割线 - Separator图层高度设置为35即可。
调整分割线高度的时候，Sketch不会有明确的高度指示，所以你可以选择直接输入数值。
圆形轮廓头像
在应用中，往往用户头像都圆形边框的。为了达到这种效果，我们将使用蒙版功能，这和相差功能很类似。但是，这不是从内掏空，而是从外延切掉。
下面我们来创建一个头像：
1.在左侧的图层列表里展开Greg Before画板。2.在画板里画个圆出来，圆要足够大，大到把整张脸都能遮住。3.选择名为greg的图层和刚才创建好的圆形图层。4.确保头像在蒙版的下面。5.点击Mask按钮使用蒙版功能。6.展开新合成的图层组 - greg，然后选择蒙版图层
- Mask。7.给蒙版图层加上边框，使用四个方向键来移动蒙版位置。
跟相差功能在顶部刚刚相反，蒙版需要在图层底部。
在Sketch窗口的右下角有导图功能 - Make Exportable。
如果需要导出多个图层，有以下两种方法：
组 - Group：使用组导出，会把多个图层合并成单一图层导出。
画板 - Artboard：画板同组一样，会把多个图层导出成单一图层，图片大小根据画板的画布大小确定。
在导出之前请先确定好画板的宽高，这些参数是基于1x的图片大小。
小提示：需要缩放的话可以使用缩放按钮，点击Mask旁边的Scale按钮即可，缩放功能是等比例，不用像下面这样分别调整。
Sketch可以很容易的输出各种尺寸的图片：
1.在窗口右下方使用图层输出 - Make Exportable。2.点击加号+增加一个@2x输出。3.再点击加号+增加一个@3x输出。4.最后点击导出Export按钮把三张图片导出。
虽然每个图像都可以导出@2x和@3x尺寸的图，但是我们的Xcode早就支持矢量图像，而且还是PDF格式的矢量图形，这就好比带了图像的SVG一样。
1.在窗口右下方使用图层输出 - Make Exportable。2.保持1x尺寸。3.选择PDF格式导出。
接下来我们把PDF格式的矢量图形添加到Xcode的素材管理分类 - Asset Catalog里。
1.在Xcode里打开Images.xcassets。2.创建一个新的图片集合 - New Image Set。3.在属性检查器 - Attributes Inspector中，把缩放系数
- Scale Factors从Multiple改为Single
Vector。4.把你的PDF扔进去即可。
有了这个矢量的PDF文件，Xcode会自动生成@2x和@3x图，这样不仅省去了PNG图片还减少了图片资源众多管理，命名的麻烦，有没有很爽的样子？
Sketch的入门使用就介绍到这里，教程中所使用的工程文件可以在这里。
面对强大的Sketch，我们还有很多需要学习的地方，此后如有问题不能解决可以直接上。或者多看看这些和。
你要是喜欢我这里有些，随便下。
最后，非常感谢你们看完这边教程，要是有什么不足或者意见，欢迎大家一起留言讨论。
Sketch真的很难上手？
没有更多推荐了，}