sketch创作萌萌哒机器人形象(翻译)

UI / UI设计教程 / UI图标教程 /      

uimaker
UI设计师 / 江苏 南京

来源:uimaker.com   作者:Uimaker.com整理

关键词

本教程介绍的是如何在sketch中用最简单的形状、线条以及快捷键来创作机器人形象。作者创作了以下几种机器人形象。

今天的教程叫大家做的是其中的一个,究竟是哪个呢,继续往下看就知道啦~

(跟着本教程做完,会对Sketch的基本功能有所掌握,并且会更加熟练地使用快捷键。所以,即使对机器人不感冒的女生,比如我,也可以通过练习加强掌握对Sketch快捷键的使用~)

那么,下面就开始吧~~


Step 1

首先分析一下机器人的构造,通过拆解,可以发现再复杂的机器人也是由各种基本的形状通过组合、变形而得到的,所以先来看看哪些部件可以组合成我们几天要做的机器人吧~

看了这些零部件,相信你们一定知道我们今天要做的是哪个机器人啦~,all right,就是这个:


Step 2

从这里开始一步步教你完成,在这个过程中要留心并记住各种快捷键的操作哦,相信这会让你更加熟练地使用sketch,很适合初次接触Sketch的我和你~加油吧~


Step 3

首先,按住R键+shift键,画一个正方形,大小随你定,颜色也随你定或者参考原图。再按住B键,可以去除正方形的描边。


Step  4

选中正方形,按enter键,出现四个顶点,此时可以对四个顶点进行随意调节。再按住cmd键,鼠标点击正方形的边,可在中点处添加一个锚点:

Step 5

选中上边的两个顶点,按delete键删除,再按住shift键,将仅剩的中间锚点的锚杆稍微拉长一些。为了让顶部圆滑一些。

Step 6

按O键,画一个椭圆,去除描边,更改颜色,调整大小。再按R键,画一个矩形,更改颜色,调整大小。如图:

Step 7

选中刚画的矩形,在Sketch 右边的检查器中调整它的圆度(增加radius的数值)。

Step 8

然后在矩形选中的状态下,按住cmd+D两次,可复制两个矩形,一个放在底座部位,一个放在头部,分别调整它的大小至所需大小以及圆度。其中头部的矩形要记得拖到最底层。如图所示:


Step 9

O键画圆形,B键去除描边,分别画两个眼睛放置在如图位置:

Step 10

R键在头部上方画一个矩形,全部选中,cmd+G组成一个组:

Step 11

选中作为头部的上窄下宽的这个形状,按住ctrl+cmd+M,添加蒙版:

Step 12

身体已经做好。下面开始做身体上的各个零部件。首先按O键+shift键,画一个正圆。再cmd+D复制一个圆,右击——变形(transform),调整至扁扁的椭圆形。再按住cmd+D键复制这个椭圆,右击——旋转90度(rotate+90):

Step  13

将三个圆全部选中,按住F键,消除填充色,只留下描边(如果你觉得描边太细了也可以在右边的检查器中增加描边的大小):

Step 14

R键画一个矩形,B键去除描边:

Step 15

选中矩形,按住Shift+cmd+T(变形工具transform的快捷键),将矩形变成T形。将图形全选,创建为一个标志(create symbol):

Step16

按住cmd+D键两次,复制两个(前面创建symbol的目的是将来对一个进行修改,其他两个都会跟着改变,从而节省我们的时间),在右边检查器中分别将复制的两个图形的角度调整为45度及-45度。


Step 17

R键画一个矩形,颜色如图,按enter键,编辑上面的两个顶点,得到一个T形:

Step 18

将以上几个图形Ctrl+G组合为一个图形:


Step 19

从这里开始快捷键操作不一一列出,从上面的步骤都可以找到。

画一个矩形,编辑上方两个顶点使之成为如图形状。再复制一个,更改颜色,垂直翻转,两个矩形拼合在一起。

Step 20

画一个圆形,再画一个矩形,调整矩形的圆度至如图所示。完成后再复制一次,旋转90度:

Step 21

然后将做好的图形分别组合成以下的两个部件:

Step 22

画一个圆形,再复制一个,调整大小:

Step 23

全选两个圆,按住option+cmd+S,去除顶层形状:

Step 24

画一个矩形,全选圆环及矩形,cmd+option+U,组合形状:

 

Step 25

去除描边,再画一个矩形,去除描边。再复制一次,旋转-90度:


Step 26

画圆,L键画一条直线,enter键进入可编辑状态,选中上面的锚点,按住shift+left,直线向左偏转10度:


Step 27

选中直线,按住ctrl+C键,可以吸取圆形的颜色。再在右侧检查器中的描边(borders)的设置中将直线的两端选择圆弧形。复制一次,水平翻转:

Step 28

接下来制作这样一个部件:

Step 29

画一个圆,使用剪刀工具将圆形减掉一半,再复制一次:

Step 30

将各种部件组合在一起:


Step 31

画一个圆,去掉填充色,调整形状,复制四个,按相同间隔排列,将最上层的圆形描边加粗,更改颜色:


Step 32

画一条直线,拖到最底层。选中其中个圆形,按住option+cmd+C复制其样式,再选中直线,option+cmd+V黏贴样式:

Step 33

画一个矩形,调整为T形,先组合所有图形,再选中T形,ctrl+cmd+M建立蒙版:

Step 32

选中作为蒙版的T形,去除填充色:


Step 33

将所有零部件放到机器人身体的指定部位,就大功告成啦~


 收藏