Sketch设计教室！从零开始学APP设计利器Sketch（二）

上篇介绍完Sketch令人惊喜的功能后，同学们纷纷表示：Sketch已经有了，就差Mac了。今天除了提醒大家可以用虚拟机外，直接上作者的新教程，让同学们迅速轻松掌握Sketch的工具使用，有Sketch的同学赶紧动手吧！

@JingDesign ：上一篇教程中，静电和大家一起认识了Sketch 能为我们带来的惊喜之处。那么这一节的设计教室中，大家一起来认识一下我们的新朋友。 相信在经过这一节的教程，大家都能轻松上手了。上一节的教程后，很多朋友跟我反馈说：Sketch已经有了，就差Mac了。其实，对于操作系统，静电一直认为适合大家就好。Mac有Mac的优势，Windows有Windows的便利。 但非常遗憾的是，Sketch现在没有Windows版本，但没有Mac的朋友也不必失望，我们可以通过装虚拟机的方式体验下Sketch。相信万能的度娘和Google一定可以解决大家这个问题。

上篇教程戳：《SKETCH设计教室！从零开始学APP设计利器SKETCH（一）》

首先我们打开这个美丽的宝石。主界面如下，我们看到，顶部是工具栏，一大堆的按钮。下边默认分三栏，左边是页面，图层等等的操作。 中间是空白的工作区（画布），右侧是属性栏，我们可以在这个界面中调节元素的各种属性。

这个时候有人可能会问，我的工具栏不是这个样子的，空空如也！你是怎么做到的？ ok，要有一个舒服的工作流程，首先我们要把自己的工作区域弄的舒舒服服，各种工具随手拈来。

第一步：定义sketch的工具栏

在有图标的空白地方点击右键，在弹出的菜单中点击“customize toolbar”，在弹出的对话框中，我们会看到很多很多工具。 如果你英文不好，但估计关系也不大，我们来认一下。 钢笔工具，铅笔工具，文字工具，图像工具，切片，artboard（这个随后讲），直线工具，箭头工具，图形库，矩形，圆角矩形，圆形，三角形，多边形，星型，元件，有格式的文本，组合，解除组合，结合路径，接下来这三个就是两个矢量图像进行组合，挖空等等，接下来的forward，backward-这是对图层进行上一层，下一层的操作，tools（工具），变形，平面化，剪刀，图形排列，编辑路径，旋转，字符格式，描边，缩放，蒙版，view（内有标尺显示等等的工具），显示标尺，显示网格，显示布局，显示像素，导出，创建元件，mirror（一款类似于psplay的在手机上预览效果图的工具，另收费），缩放，制作网格，颜色，字体，空白，分隔空间（其实就是在toolbar上显示一条线。）

好了，经过上边的翻译，相信大家已经可以在自己的头脑中找到某些类似软件的影子了。现在，选择自己常用的工具，拖动到下方的框中或者直接拖动到工具栏上。这样就ok了！

第二步：使用artboard来绘图

自定义工具栏后，我们就可以开始小试牛刀了。那么底下这块空白区域就是我们可以绘制的“画布”。 有人会问，我不能自定义画布的大小吗？恩，刚开始静电也有这样的疑问，但试过刚才图标栏目下的artboard后，你就这样这样的操作是多余的了。 好的，我们选择artboard或者insert，选择插入一个artboard。这个时候鼠标变成了十字型，我们可以自己拖动鼠标画一个“画布”了，然后选择右侧的属性区域，精确定义“画布”的大小和位置。对了，在sketch中，我们最好不要把这个东西叫做“画布”，它是artboard（艺术板）。我们可以在同一个界面中创建多个artboard，非常方便，就如下图所示。左侧会出现artboard的名字，我们在图层名字上双击，即可修改artboard的名字了。

然后，在artboard上尽情绘制吧。 选择矩形，原型，三角或者星星，随便涂鸦。当然，你也可以在artboard外边画一些东西。当做注释。这个时候，左侧的图层会多出一些东西，你可以拖动他们调整图层位置，或者选择锁定或者隐藏某些图层。右侧的属性面板，在选择某个元素后，可以修改一些元素的属性，比如描边，字体颜色，大小等等。和常用的ps等软件基本类似。

第三步：sketch特色——体验强大的对齐功能

我们在artboard上绘制了一些元素，这个时候，我们可能会需要让他们对齐，或居中，或居右。 这个时候我们会发现sketch的强大对齐功能了，拖动某个元素，辅助线便会显示，但比起ps智能太多了，这个功能，只有自己亲自上手体验才能感受的到。

第四步：使用rotate copies创建神奇的图形

选中刚才画的星型，选择rotate copies，接着选择要复制的步数。我这里选择30.确定，看看发生了什么神奇的事情。如果你找不到rotate copies，那么看第一步中的操作，把图标从工具库中拖到toolbar上。

第五步：使用位图和创建遮罩

有时候我们需要导入一些位图到我们的工作项目中，虽然Sketch是一款矢量工具，但对于位图的基本处理也是非常棒的。首先选择image工具，在弹出的窗口中选择一张你要导入的图片。静电在这里导入两只可爱的小猫图像，同样，右侧的属性窗口中可以调节位图的一些属性，坐标，大小，透明度，边框，投影，模糊等等，你们看，其实他的位图功能还是蛮不错的哈。

接下来，我们要把这张小猫加上圆角。我们使用圆角矩形工具画一个圆角矩形，调节圆角矩形的弧度和位置，把这个圆角矩形盖在这个位图之上，选中这两个图形， 接着选择工具栏中的mask（如果找不到遮罩工具，可以看一下步骤一中的操作，把遮罩工具拖进来，其实我们还是应该记住一些快捷键，因为toolbar的位置非常有限），遮罩形成了，我们看到了变成圆角的位图。很简单吧？

ok，到这里，我们已经熟悉了很大一部分操作了，可以说这个软件的大部分操作都非常容易上手。大家跟随静电的步骤，一步步的实验吧，相信这个对每个人来说都是无比简单的。再唠叨一下，至于说英文不好，或者没有mac这样的理由，那压根就不是理由好么，第一，静电建议大家在使用软件的时候，尽量选择英文版，刚开始可能会有一些难度，但习惯之后，你会发现，大部分的词在每一个软件中都会出现，比如什么pencil啊，rotate（翻转）了之类。实在不懂，那索性用一下，就知道这个图标或文字所代表的功能了，反正就是折腾嘛，我们多按一个键，随便拖动一下，电脑又不会爆炸。大不了从头开始来过。

嗯哼。至于mac，静电建议大家装虚拟机试用，或者买一台macmini（为什么呢？很便宜性能又好有木有？初接触mac系统的同学推荐。）还有一招，除了虚拟机，我们可以在pc上安装苹果系统，但非常耗时而且得不到官方支持，静电最初接触苹果就是从“黑苹果”开始的，这个请自行斟酌。

最后，感谢好友rongfei和rongrong在sketch上对我的帮助，rongfei提供了折扣码让我以更优惠的价格买到了正版sketch，rongrong也是sketch的簇拥，最初接触的时候，一直缠着她各种问，真是辛苦了。 总之，大家相互学习与交流，希望有更多使用sketch的设计师出现。

下一讲静电与大家一起来学习sketch的特色独有功能。 请务必要关注jingdesign与静电的设计教室。 有疑问的朋友可以关注静电的微信公众号jingdesign91与我们一起进步。

扫描下面的二维码关注jingdesign公众号.

新手从零开始学好文合集！

学完直接晋级抠图高手！
《从菜鸟到高手！PHOTOSHOP抠图全方位攻略》

超全面的设计师自学指南！
《超赞！设计师完全自学指南》

多位资深前辈经验合集！交互设计师自学指南！
《交互设计师修炼指南！教你从零开始成为优秀交互设计师》

原文地址：ui
作者：@JingDesign

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量76万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：