在上一篇的sketch教程中《初识与改变-APP设计利器sketch教程(01)》，“静design”带我们认识了一些基本功能，这节课一起来上手操作，第一步把自己的工作区域弄的舒舒服服，让各种工具随手拈来。然后，绘图、对齐……神奇的体验开始了~
上一篇教程中,静电和大家一起认识了sketch能为我们带来的惊喜之处。那么这一节的设计教室中，大家一起来认识一下我们的新朋友。 相信在经过这一节的教程，大家都能轻松上手了。上一节的教程后，很多朋友跟我反馈说：sketch已经有了，就差mac了。其实，对于操作系统，静电一直认为适合大家就好。mac有mac的优势，windows有windows的便利。 但非常遗憾的是，sketch现在没有windows版本，但没有mac的朋友也不必失望，我们可以通过装虚拟机的方式体验下sketch。相信万能的度娘和google一定可以解决大家这个问题。
首先我们打开这个美丽的宝石。主界面如下，我们看到，顶部是工具栏，一大堆的按钮。下边默认分三栏，左边是页面，图层等等的操作。 中间是空白的工作区（画布），右侧是属性栏，我们可以在这个界面中调节元素的各种属性。
这个时候有人可能会问，我的工具栏不是这个样子的，空空如也！你是怎么做到的？ 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与静电一起进步。
原文地址：站酷
作者：静design
评论0