最美UI

ai教程!手把手教Illustrator创建一组机器人头像

1.设置新文档

假定您已经启动并运行Illustrator,我们创建一个新文档(文件>新建 控制-N),并使用以下设置进行设置:

画板数量: 1

宽度: 800像素

身高: 600 px

单位:像素

然后从高级选项卡:

颜色模式: RGB

栅格效果:屏幕(72 ppi)

将新对象与像素网格对齐:勾选

2.设置自定义网格

由于Illustrator允许我们利用其强大的网格,我们将使用尽可能最低的值进行设置,以便我们可以完全控制我们的形状,确保它们完全捕捉到底层像素网格

步骤1

我们感兴趣的设置可以在Edit> Preferences> Guides&Grid子菜单下找到,并且应该按照如下方式进行调整:

网格线: 1 px

细分: 1

第2步

一旦我们设置了自定义网格,我们需要做的就是确保我们的形状看起来很清晰,可以在视图菜单下找到对齐网格选项,每当您进入像素预览时  就会转换为对齐像素模式。

3.设置图层

一旦我们有了我们的文档,我们可以参与分层我们的项目,这将帮助我们一次关注一个图标,从而保持稳定的工作流程。

因此,使用图层面板,共创建五个图层,我们将重新命名如下:

层1>参考网格

第2层>共同的背景

第3层>前夕

第4层>墙-e

层5> mo

4.创建参考网格

参考网格(或基地电网)是一组精确的界定参考面,这让我们专注于规模性和一致性,以建立我们的图标。

通常,网格的大小决定了实际图标的大小,一旦你开始一个新项目,它们应该是你做出的第一个决定,因为你总是希望从最小的尺寸开始, 。

现在,在我们的例子中,我们将只使用一个尺寸创建图标包,更确切地说是128 x 128像素,这是一个相当大的尺寸。

步骤1

假设您已锁定除参考网格之外的所有其他图层,请抓住矩形工具(M)并创建一个128 x 128像素的红色(#FF6B57)方形,这将有助于定义图标的整体大小。

第2步

添加另一个较小的120 x 120 px one(#FFFFFF),它将作为我们的活动绘图区域,从而为我们提供全面的 px填充。

第3步

使用Control-G键盘快捷键将两个方块分组在一起,然后在彼此距离为40 px的位置创建两个副本  ,确保将它们对齐到画板的中心。然后锁定当前图层,以便我们移动到背景图层。

5.创建共同背景

确保您位于正确的图层上,然后放大第一个参考网格,以便我们可以开始处理常见的背景图片。

步骤1

选择椭圆工具(L)并创建一个120 x 120像素圆,我们将使用该颜色#685E5E,然后将其放置在活动绘图区域的中心。

第2步

选择椭圆工具(L)后,通过创建几个不同尺寸的圆(2 x 2 px; 4 x 4 px; 8 x 8px)开始添加小星星,我们将使用白色(#FFFFFF)进行着色,然后调整通过使用不同的不透明度值(10%; 30%; 60%)给他们一些变化。

我建议你选择并将它们组合在一起(Control-G),以便跟踪它们更容易。

第3步

由于一些星星的位置是这样的,即一个小部分在底层圆的表面之外,所以我们必须选择并分组它们(Control-G),然后使用背景的副本作为剪切面膜将其限制在其表面。

步骤4

一旦屏蔽了恒星,使用Control-G键盘将它们和下面的圆圈组合在一起,然后在右侧创建两个副本,将它们放置在距彼此48像素的距离处  。

6.创建Eve Avatar图标

假设你已经锁定了背景图层并移动到下一个图层,再次放大第一个参考网格,让我们开始研究第一个头像。

步骤1

通过创建一个54 x 28像素椭圆(#EDEAE8),开始在Eve的头部工作,我们将垂直对齐背景,将其定位在距离当前绘图区域顶部40像素的位置。

第2步

使用直接选择工具(A)选择椭圆的顶部定位点,然后使用移动工具右击>变换>移动>垂直:-12像素)将其向外推12像素,以调整头部的形状。

第3步

通过弹出手柄来调整生成的形状的圆度,然后通过转到对象>路径>偏移路径并在偏移值字段中输入4 px来给出轮廓。

步骤4

改变大纲的颜色,#3F3535以便它可以从头部的填充部分脱颖而出。

第5步

通过使用42 x 20 px椭圆(#3F3535)绘制显示,开始在头部的前部工作,我们将通过将其顶部锚点向外推动6 px进行调整,然后使用其手柄进行调整自然曲率。

第6步

通过创建两个10 x 8 px椭圆(#7FC2DD),开始在Eve的眼睛上工作,我们将  彼此放置8 px,然后放置在之前创建的形状上,在它们和顶面之间留下10 px的间隙。

第7步

通过使用12 x 10 px椭圆(#3F3535)对它们中的每一个进行部分覆盖,添加一些表情,确保将它们分组后(Control-G)。

第8步

由于我们已经完成了头部主要形状的工作,因此我们可以开始添加一些细节。第一个将是显示屏上部的小反射,我们将通过绘制一个46 x 16像素的椭圆(#FFFFFF)来创建,我们将对齐它的顶部,然后使用全屏2 px形状的较小版本。

第9步

通过将其混合模式设置为柔光来调整反射,然后将其不透明度降低到28%,然后使用Control-G 键盘快捷键选择并分组显示屏的主要形状。

第10步

通过创建一个主要填充形状的副本,然后删除一个-2像素偏移量,然后使用白色(#FFFFFF)将其着色,从而添加一个全方位高光。

一旦添加了细节,不要忘记使用Control-G 键盘快捷键选择并将所有头部元素分组在一起。

第11步

通过创建一个54 x 8像素的矩形(#EDEAE8),开始在夏娃的身体上工作,我们将在头部下方放置一个矩形(),大小约为6像素

第12步

使用“ 变形”面板 将其顶角的圆度设置为4像素,调整刚刚创建的形状。

步骤13

通过绘制一个54 x 76 px的椭圆(#EDEAE8),创建身体的下半部分,我们将切成两半,然后将其放置在调整后的矩形的正下方,使用探路者团结形状模式将两者合并。

第14步

使用“ 偏移路径”方法 为身体提供4像素厚的轮廓,并使用它着色。#3F3535

第15步

接下来,#FF6B57使用6 x 6像素的圆圈创建红色()LED ,我们将在Eve的左上角放置一个6 px的空白空间,左上角的空白空间为10 px。 。

步骤16

创建主体填充形状的副本,然后使用-2像素偏移量创建切口,通过将其颜色设置为白色(#FFFFFF),将生成的形状变为高光。

步骤17

在Eve的身体右侧添加两个垂直高光,使用2 x 40 px矩形和另一个稍宽的4 x 40 px,将它们彼此定位为  2 px并使用白色(#FFFFFF)对它们着色。

哦,不要忘记选择和分组(Control-G)所有身体的元素,以防止他们意外分离。

步骤18

通过绘制一个8 x 8像素的圆(#EDEAE8)来创建左臂,我们将通过使用移动工具右击>变换>移动>垂直> 24像素)将其底部锚点向外推24像素进行调整。

给出生成的形状一个4像素轮廓(#3F3535),然后将其放置在主体的左侧,将其与其填充部分的顶部对齐,确保轮廓重叠。

步骤19

通过抓取左手边的一个副本(Control-C> Control-F)并将其放置在身体的另一侧来创建Eve的右手臂。

步骤20

由于此时我们已经完成了实际图标的工作,因此我们必须将所有元素选择并组合在一起(Control-G),然后使用底层背景圆的副本来掩盖它们,以便它们能够仍然局限于其表面。

7.创建Wall-E头像图标

移动到第四层,放大其参考网格,以便我们可以开始使用Wall-E头像。

步骤1

抓住矩形工具(M)并创建一个64 x 34像素形状,我们将使用该颜色#DD9F68,然后将其放置在活动绘图区域的底部,确保将其水平对齐到其中心。

第2步

使用“ 偏移路径”方法 为形状提供4像素轮廓,并使用它着色。#3F3535

第3步

通过绘制一个64 x 2 px矩形(#99918A)来创建主体的上半部分,我们将通过将其顶角的圆度设置为2 px  并随后将其赋予相同的4 px粗轮廓(#3F3535)来进行调整。

步骤4

在身体上半部分的上半部分 添加一个微妙的72 x 5像素高光(颜色:白色; 不透明度: 40%),并使用下方的形状对其进行遮盖。然后使用相同的颜色和不透明度 值在每侧添加两对垂直高光,之后选择并分组(Control-G)所有组成元素。

第5步

抓住矩形工具(M)并创建一个24 x 2像素形状(#B7AEA9),给它一个4像素轮廓(#3F3535)和一些高光,然后最终将这些形状分组并放置在主体上半部分的中心。

第6步

开始在Wall-E的手臂上创建一个10 x 12像素的矩形(#C9C3C0),并在其主体的右上角放置一个4像素轮廓(#3F3535)。

第7步

通过创建一个10 x 4 px水平分隔符(#3F3535)并将其放置在中心(1)中,开始向手臂添加细节。然后,在分隔线下面添加两个10 x 2像素高光(颜色:白色; 不透明度: 60%),另一个高光对准手部顶部(2)。

通过在垂直方向(4和5)的每一侧添加两个2 x 4 px垂直分隔符(#3F3535)和在其左侧(6)上放置一个较小的1 x 2 px分割线,完成手臂的所有操作它的元素一起(Control-G)。

第8步

通过抓取我们刚刚创建的一个副本并将其定位到身体的另一侧来创建右手臂,确保将其垂直翻转(右键单击>变换>反射>垂直)。

第9步

使用双臂时,通过创建一个10 x 12像素的矩形(#8E8680),开始在前置扬声器上工作,我们将添加一个4像素轮廓(#3F3535),将两个形状定位在左臂的右侧,距离2 px

第10步

使用矩形工具(M)向扬声器右侧(2)添加一个2 x 12像素垂直高光(颜色:白色; 不透明度: 30%),并将三个10 x 1 px垂直格栅(#3F3535)定位为  1像素在其上部(3)彼此相连。然后通过创建一个2 x 2 px圆(#FF6B57)(4)和一个2 px粗的轮廓(#3F3535)(5)来添加小红色LED ,确保将所有单元的元素分组在一起(Control-G)。

第11步

一旦完成扬声器单元的工作,使用矩形工具(M)使用具有相同4 px粗轮廓()的10 x 12 px矩形(#564D4D)创建小显示。将两个形状放在扬声器的右侧,确保其轮廓重叠。#3F3535

第12步

通过创建三个6 x 1 px矩形(#DBC66B)(2)和另一个6 x 2 px one(#DBC66B)(彼此相邻(3)的1 px)  来开始向显示单元添加细节。然后,在显示屏(4)的上半部分添加一个10 x 6像素反射(颜色: 白色; 混合模式:柔光; 不透明度: 60%),并在其顶部添加一个6 x 1像素插入(#3F3535) 5)。

与往常一样,不要忘记使用Control-G键盘快捷键选择和分组所有单元的元素。

步骤13

将三个4 x 12 px长方形(#3F3535)  放置在身体的底部,将16 px放置在身体的底部,确保组合(Control-G)并将它们水平对中。

第14步

通过在右侧添加两个垂直高光,使用白色(#FFFFFF)作为填充颜色,将柔光作为混合模式,并将不透明度设置70%,结束墙壁-E的物体。

然后,选择所有人体的构成元素并对其进行分组(Control-G),以免错误放置。

第15步

随着身体的完成,我们可以继续前进,并开始在脖子部分工作。

也就是说,抓住矩形工具(M)并创建一个20 x 4像素形状(#756E68),给它一个4像素的轮廓(#3F3535),然后将两个对象放在主体的上部。

步骤16

20 x 2 px阴影(颜色:黑色; 不透明度: 30%)添加到颈部底部的上半部分,然后将所有三个形状组合在一起(Control-G)。

步骤17

创建一个8 x 4像素矩形(#BA8152),给它一个4像素厚的轮廓(#3F3535),一个阴影(颜色:黑色; 不透明度: 30%)和一个垂直高光(颜色:白色; 混合模式:柔光; 不透明度: 70 %),然后分组(Control-G)并将形状定位在我们刚刚创建的颈部基部上。

步骤18

使用12 x 6像素圆角矩形(#BA8152)和像素圆角半径创建颈部关节,给它一个4像素轮廓(#3F3535),上半部分和垂直高光(颜色:白色; 混合模式:柔光; 不透明度: 70%),然后是2 x 6 px垂直分隔符(#3F3535),使用Control-G键盘快捷键将这些形状分组在一起。

步骤19

接下来,通过创建一个4 x 16 px长方形(#3F3535),并使用4 px厚轮廓(#3F3535),开始在颈部上部工作,我们将把它放在颈部关节上方。

步骤20

在我们刚刚创建的形状的顶部 添加一个2 x 2像素插入(#3F3535),以使其具有更强的移动性,并使用Control-G键盘快捷键将所有三个形状组合在一起。

步骤21

使用椭圆工具(L)通过绘制一个8 x 8像素的圆圈(#756E68)以及一个4 px粗的轮廓(#3F3535),然后将其组合(Control-G)并将其放置在上方脖子的顶部,使他们的轮廓最终重叠。

步骤22

通过选择圆形接缝的轮廓并对其施加4 px的偏移量,将阴影投射到颈部的顶部,我们将使用底层形状的副本对其进行遮罩,然后通过将其颜色设置为黑色(#000000)进行调整并降低其不透明度达到30%

步骤23

通过创建一个22 x 16 px矩形(#C9C3C0),开始在Wall-E的左眼上工作,我们将通过将其左角的圆度设置为8 px,将其右上角设置为2 px,并将右下角设置为10 px px

给出生成的形状4 px轮廓(#3F3535),然后将两个形状放置在圆形关节的左侧。

步骤24

逐渐添加细节,从内部阴影开始(颜色:黑色; 不透明度: 30%)(2)。接下来,将三个2 x 2 px圆(#3F3535)添加到形状的角落,如参考图(3)所示。 

使用椭圆工具(L)创建一个8 x 8像素圆(#5B4F4F)(4),我们将通过给它一个2 px厚的轮廓(#3F3535)(4),然后添加一个6 x 6像素圆#3F3535)在它上面(5)。 

最后,添加上半部分高光(颜色:白色; 混合模式: 屏幕; 不透明度: 24%)和较小的2 x 2像素反射(6),将所有元素分组在一起(Control-G)。

步骤25

抓住我们刚刚创建的眼睛的副本(Control-C> Control-F)并垂直翻转(右键单击>变换>反射>垂直),将其定位到圆形关节的右侧。

步骤26

创建一个24 x 12像素的圆角矩形(#3F3535),使用像素圆角半径,并从中剪出一个-2像素偏移量,以创建连接两只眼睛的环形部分,确保将其发回到后面(右键单击>排列>发送到后面)。

步骤27

通过选择所有元素并将其分组在一起,然后使用背景的圆圈副本来掩盖它们,结束图标。

8.创建MO头像图标

我们现在到了我们的第三个也是最后一个图标,那就是那个可爱的小Microbe Obliterator机器人。所以假设你已经走到最后一层,放大它的参考网格,让我们开始吧。

步骤1

使用带有4 px轮廓()的36 x 32 px矩形(#EDEAE8)为M-O的主体创建主要形状,我们将朝向参考网格的底部定位。#3F3535

第2步

向填充部分的顶部 添加36 x 4 px的阴影(颜色:黑色; 不透明度: 30%),并向右侧添加一对两个8 px高的垂直高光(#FFFFFF)。

第3步

使用矩形工具(M),为M-O的清洁工具创建主要形状,使用36 x 8像素形状(#5B4F4F)和4 px轮廓(#3F3535),我们将定位两个高光的结束位置。

步骤4

逐渐开始向清洁工具添加细节,方法是创建两个36 x 2 px矩形(),放置在距另一个(2)2 px的#3F3535位置  ,我们将放置在中心。然后,添加两个36 x 1像素高光(颜色:白色; 混合模式:柔光; 不透明度:80%),第一个水平分隔线(3)下方一个,另一个在工具右侧(垂直) 4)。

通过添加六个4 x 2 px矩形(#3F3535)(5)完成本节,我们将通过使用1 px圆角半径(6)对其顶角进行四舍五入来进行调整。

然后,不要忘记使用Control-G 键盘快捷键选择并分组所有工具的组成元素。

第5步

在我们创建的工具的正下方 添加一个微妙的阴影(颜色:黑色; 不透明度: 40%),使用36 x 4 px矩形,然后将所有M-O的构成主体元素分组在一起(Control-G)。

第6步

通过绘制一个56 x 46 px矩形(#EDEAE8)开始在M-O的头部工作,我们将通过将其顶角的圆度设置为4 px并将其底部的圆度设置为2 px来进行调整。使用“ 偏移路径”方法给出生成的形状4 px轮廓,然后将两个形状放置在主体的上部。

第7步

用白色(#FFFFFF)作为主色,给头部一个全方位的亮点,以及一对垂直的部分,我们要将它们从M-O身体的右侧稍微放置。

第8步

添加通常显示眼睛的屏幕截面,使用一个40 x 18像素的圆角矩形和一个像素的圆角半径,我们将使用该颜色#3F3535,然后将其定位到头部的底部,将其与其轮廓对齐。

第9步

通过创建两个10 x 4像素圆角矩形(#DBC66B)以及px圆角半径来添加眼睛,它们彼此之间定位为  4 px,然后我们将对齐显示器的中心,使其顶部留出6 px的空隙。

完成后,选择双眼和显示部分并对它们进行分组(Control-G)。

第10步

通过使用22 x 6 px矩形(#FF6B57)添加红色发光灯来完成M-O的头部,我们将通过使用2 px圆角半径对其顶角进行调整来调整。

给形状一个4px轮廓(#3F3535)和通常的亮点(颜色:白色; 不透明度: 20%),然后组合(Control-G)其所有元素,包括头部。

第11步

头部完成后,是时候处理这个小家伙的手了。

首先创建一个8 x 30 px椭圆(#EDEAE8)(1),我们将通过移除其右侧的锚点(2)来减少一半。接下来,使用 矩形工具(M)绘制一个2 x 30像素的形状,我们将其放置在调整后的椭圆的右侧,将它们合并为一个单一的形状(3)。给所得到的形状的4像素粗轮廓(#3F3535)(4)和然后添加4×10像素舍入用矩形2 PX角半径在其右下角(5)。

最后选择所有形状并使用Control-G键盘快捷键对它们进行分组。

第12步

在手臂上 添加阴影(颜色:黑色; 不透明度: 30%)和微妙的高光(颜色:白色),然后使用其翻转副本创建第二个阴影。

步骤13

通过选择并将所有元素分组在一起(Control-G),然后像使用其他所有元素一样,使用背景圆圈的副本对它们进行遮罩。

结论

这可能是一个漫长的过程,但我们终于做到了,并且因为我们的努力工作而结束了一个可爱的图标包。

和往常一样,我希望你已经发现教程容易遵循,最重要的是设法学习一些新的东西。

原文链接: https://www.xsteach.com/register?spread_id=10843865

微信公众号微信公众号:zuimeiui

扫一扫 关注公众号

0

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
APP图标:精选APP图标,看看各大app图标的设计风格提升设计感! → 猛戳这里
最美UI(zuimeiui.com)每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧!
【原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!】

上一篇
下一篇
Illustrator绘制纽约邮票图标集