Illustrator绘制卡通风格的太阳系行星图标(2)

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

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

(12)添加一个微妙的亮点,复制(Control+C>Control+F)一个我们刚刚创建的圆形,然后应用一个-2像素的偏移量(对象>路径>偏移路径>-2像素),选择生成的形状和复制的圆形,减去顶层(路径查找器>减去顶层),将其颜色变为白色(#FFFFFF),将其混合模式更改为柔光,将其不透明度更改为80%。

Illustrator绘制卡通风格的太阳系行星图标,PS教程,思缘教程网

(13)添加高亮部分后,通过使用4像素偏移量(选择黄色形状 对象>路径>偏移路径> 4像素),将圆形投射到外部阴影。(#000000),将其不透明度降低到10%。

完成后,选择所有三种形状(阴影,黄色和高亮),使用Control+G键盘快捷键对其进行分组。

Illustrator绘制卡通风格的太阳系行星图标,PS教程,思缘教程网

(14)直接选择工具(A)选择左上角的圆角矩形,复制一个副本(Control+C),将其移动到顶层(Control+Shift+])。

选中副本和圆形组合,鼠标右键单击建立剪切蒙版。

Illustrator绘制卡通风格的太阳系行星图标,PS教程,思缘教程网

(15)选择底部的圆角矩形,并创建一个圆24 x 24像素(#d8ca8b),使用相同的过程添加高光和阴影,然后镶嵌到底部圆形矩形内。

Illustrator绘制卡通风格的太阳系行星图标,PS教程,思缘教程网

(16)使用椭圆工具(L),创建一个“空白”伪行星,绘制一个68 x 68像素的圆(#d0d0d8),行星是主要焦点,确保将其放置在中心。

Illustrator绘制卡通风格的太阳系行星图标,PS教程,思缘教程网

(17)选中空白伪行星,通过三次连续的4像素偏移量得到圆,将其颜色设置为黑色(#000000)并将其不透明度降低到10%,将三个透明的圆组合(Control+G)。

Illustrator绘制卡通风格的太阳系行星图标,PS教程,思缘教程网

(18)选择后面的所有圆角矩形,复制副本置于顶层,双击删除里面的圆。全选副本圆角矩形,然后转到对象>复合路径>建立(Control+8),然后按住Shift加选不透明圆组合,鼠标右键单击建立剪切蒙版。

Illustrator绘制卡通风格的太阳系行星图标,PS教程,思缘教程网

(19)选中所有形状,鼠标右键变换>移动,(水平:178像素、垂直:0像素、角度:0°,点击复制按钮)。再按两次(Control+D)得到水平四个空白伪行星。

选中四个行星,鼠标右键变换>移动,(水平:0像素、垂直:178像素、角度:0°,点击复制按钮)。再按两次(Control+D)得到垂直四个空白伪行星。

Illustrator绘制卡通风格的太阳系行星图标,PS教程,思缘教程网

温馨提示:可以在每个行星下面加上名字,以便继续我们的工作。

我们将重命名如下:

水星

金星

地球

火星

木星

土星

天王星

海王星

(20)由于我们不希望所有的图标看起来都是一样的,所以我们可以选择第二个,第四个,第六个和第八个,并且水平翻转(鼠标右键单击>变换> 对称>垂直>确定),这样画面更真实丰富。

Illustrator绘制卡通风格的太阳系行星图标,PS教程,思缘教程网

我们终于完成了创建空白图标,这意味着我们现在可以继续添加其中每一个的细节。

STEP2 创建行星图标细节

创建水星图标

(1)由于水星的表面具有大量的陨石坑,我们可以通过创建一堆可变尺寸的圆圈来轻松地反映在我们的图标中,我们将使用稍微较暗的灰色(#aaaab2)进行着色。

Illustrator绘制卡通风格的太阳系行星图标,PS教程,思缘教程网

(2)接下来,我们将创建一个戒指般的亮点给水星。

首先,选择主灰色并创建一个副本(Control-C> Control-F),然后对该副本应用-2像素偏移量(对象> 路径>偏移路径)。

选择所得到的偏移量和副本,鼠标右键建立剪切蒙版(#FFFFFF),其混合模式为柔光,将其不透明度降至70%。

Illustrator绘制卡通风格的太阳系行星图标,PS教程,思缘教程网

完成后,选择所有图标的元素使用Control+G键盘快捷键编组。

创建金星图标

金星上可谓火山密布,表面反映了它的暴力历史;金星是一个有趣的星球,因为它的云层主要是由二氧化硫和硫酸组成,完全覆盖整个进行表面,这给它带来了有趣的纹理。这让我们的图标脱颖而出,只需要几个细节。

(1)选中第二个空白行星,讲圆形的颜色从灰色改变为泥泞的黄色(#d8ca8b)。

Illustrator绘制卡通风格的太阳系行星图标,PS教程,思缘教程网

(2)使用钢笔工具(P),创造性地绘制一个稍微弯曲的部分,朝向行星的中心,我们将使用它来进行着色(#bcaf75)。

Illustrator绘制卡通风格的太阳系行星图标,PS教程,思缘教程网

 收藏