用AI制作一组时髦的扁平风格图标是怎样的体验
UI设计
Andrei
pixel grinder
14人收藏 8641次学习

用AI制作一组时髦的扁平风格图标是怎样的体验

今天我将给大家展示如何用AI创建一套扁平化的网站常用图标。 
我们将主要用到AI中的矩形工具和路径查找器和一些方向选择器来制作我们的图标。

下图就是我们要学到的成果。

1.创建文件

首先,我们需要在建立文档之前开始构建自己的图标。假设你已经在Illustrator中创建了一个新文件(文件—>新建),并使用以下这些设置:

画板数:1

宽度:600像素

身高:500像素

单位:像素

从高级选项卡(可以通过点击左侧的右向箭头):

颜色模式:RGB

栅格效果:高(300 PPI)

对齐新对象像素网格:已检查

小提示:这里我们选择了300个ppi的效果,如果在纸上印刷出来,用内发光和其他类似的效果看,这个设置会影响到阴影方式。在数字显示屏上看你的作品,不管是使用72还是300 ppi质量都保持不变。

 

 

2.设置网格

我们想要一切看起来越干脆越好,就需要改变Illustrator的网格设置的东西。所以,去编辑—>首选项—>指南和电网和调整设置如下:

网格线间隔:1像素

行政区划:1

这些小的变化将允许精度的最高水平,但只有当对齐网格选项被选中。为了实现这一目标,简单地去查看—>对齐网格。

小提示:当文档预览模式设置为像素预览,对齐网格将自动更改为捕捉到像素,这是创造像素完美的艺术品更精确的方法。

 

 

3.组织规划好图层

下面我们到图层面板,并创建五层,它们命名如下:

背景

文件

电子邮件

书写工具

设备

这是现在的结构。将我们的工作方式,通过每一层建立我们的图标,并确保锁定所有其他层不在焦点。

4.添加背景

因为大多数的图标将使用白色稍微暗的阴影,我们必须从我们的实际画板区分它们(默认情况下也是白)。我们将通过创建偏红(#F77C7C)使用矩形工具(M),其中,我们将然后在居中水平和垂直方向使用600×500像素的对齐面板。

一旦你在到位的背景下,锁定其层,并移动到文件之一。

5.创建的第一个文件图标

第1

使用圆角矩形工具,创建一个60×80像素形状的4 PX圆角半径。它的颜色为白色(#FFFFFF),然后使用变换面板位置:

X:167像素

Y:126像素

第2

在圆角矩形工具的帮助下,创建一个具有2像素圆角半径452×4像素的对象。上色使用#ABABAB,然后彼此相距约6像素,并确保组(Control-G)和他们的位置与我们在步骤1中创建的对象的上侧的距离为24像素。

3

双击我们刚刚创建进入隔离模式的分组文本,然后创建一个20×4像素形状有2 PX圆角半径,定位上面的线为另一个略宽的34×4像素(与圆角半径相同的2像素值),保持它们之间距离为6像素并居中。

退出隔离模式按Esc键,然后选择这两个文件的主要形状和线条,并将它们组合在一起(控制-G)。

 

 

6.创建第二个文档图标

第1

因为所有剩余的文档图标在我们最初的一版本中被修改了,我们将其拖动到合适的时候,按住Alt键创建一个副本。一旦副本创建,只需选择它和原来的,并使用对齐面板从第一个定位约为68像素。

第2

第二个文档图标有一个折叠右上角,我们需要调整刚刚创建的副本。首先进入像素预览模式,并创建一个36×36像素形状的4 PX圆角半径。颜色则使用#E8E8E8再定位,以便文档的右上角的提示点正是其走向中间。

3

添加锚点工具(位于钢笔工具下方),然后添加两个锚点,在该文件的顶部和右侧,为小圆角方形。

4

一旦你添加了两个额外的锚点,隔离文档的主体(右键点击使用直接选择工具—>隔离路径选择),然后删除右上方锚形成的圆角。删除它们后按下Control-J联结其余的,给文档创建对角线。

第5

好了,现在我们已经调整出右侧角球,但怎么样把方形留在它的上面?我们会使用剪贴蒙版掩盖它。选择使用直接选择工具复制(Ctrl-C组合)白色文档的形状和在它上面的小方形上创建一个副本(控制-F)。选择这两个副本和方形,并右键单击—>制作剪贴蒙版。

如果你发现你需要将形状变大或变小,只需点击使用直接选择工具(A)的浅灰色部分,然后根据使用方向箭头在键盘上根据自己的喜好将其移动。

哦,别忘了使用组控制-G,这样万一你不小心移动周围的东西,它的组成形状不会影响第二文档图标的所有元素。

 

7.创建第三份文件图标

第1

正如可以从预览图像看到,第三图标基本上是第一个具有两个较小的部分堆叠在彼此的顶部上。因此,确定了第一个文档,通过同时按住Alt键拖动创建一个副本到右侧,然后确定位置与第二个的距离为68像素。

第2

一旦你确定第三个图标的位置,选择它并取消组合它的元素(右键点击>取消组合)。创建白色款的副本,并改变其宽度为52像素和它的颜色为#F0F0F0,确保在下面放置它(右键点击—>排列—>发送返回),由6 PX推动它朝顶部(右键点击—>变换—>移动并输入6像素在垂直的盒子,将水平设定为0像素)。

3

通过创建一个52×2像素的黑色(#000000)的矩形,并把它只是白色的文档部分上面添加一个小阴影。一旦你确定了它在的地方,改变其混合模式为正片叠底,降低其不透明度为10%左右。

4

添加第二个较小的页面,在我们刚创建的下方,复制白色形状一次。调整其宽度为44像素,改变颜色为#999999,然后确保将其发送给我们的其他元素的背部和朝上方移动6 PX。

5

为先前创建的形状添加第二个阴影,通过创建一个44×2像素的黑色(#000000)矩形,改变其混合模式为正片,并确保降低其不透明度为14%。最后,选择所有图标的元素和它们分组(控制-G)。

 

8.创建信封合闭的电邮图标

第1

选择圆角矩形工具,并创建一个80×56像素形状的4 PX圆角半径。使用颜色#E8E8E8,然后将它垂直对准到第一文档图标,从其底侧定位它约为66像素。

2

使用钢笔工具(P),从中心开始向外,并移动到右上角,我们将设置首先的两个锚点以创建信封的顶部。我建议你在创建锚点的时候打开像素预览以让你拥有最高精度。形状应该由1像素和由2像素的顶部朝向左侧和右侧延伸。

3

一旦你创造了信封的顶部,我们需要让周围的角落更圆。通过选择的形状,然后将影响—>风格—>圆角和输入4像素到半径字段。一旦边角调整,确保选择的对象并将其展开(对象—>扩展外观)。

4

如果你回到像素预览模式下,你可能会注意到,一旦你扩展了造型的外观,它的定位点已经跳出像素网格。

我们需要通过放大和使用直接选择工具(A)抢购他们回到纠正。

5

假设你已经正确对齐所有的锚点,移动形状下降了2像素,然后创建剪贴板(Ctrl-C组合)的副本。因为我们需要添加信封顶部折叠部分下的阴影,首先创建折叠部分,将其复制到剪贴板,然后变换折叠成实际的阴影并粘贴在原从剪贴板顶部。

现在你明白这是怎么回事,顶部形状的颜色改为黑色(#000000),然后设置其混合模式为正片叠底,降低其不透明度为10%。

6

使用直接选择工具(A),选择底部锚点和移动下来2 PX以及左右边分别向外1像素。

7

退出隔离模式和粘贴(控制-F)的信封从剪贴板顶部的副本(重复步骤5)上的阴影。

8

粘贴顶部的另一个副本,然后水平翻转(右键点击—>反射—>卧式),并确保其颜色改变为#808080,并将其调整到主信封形状的底侧。

9

因为我们需要底部的阴影和顶部较亮的部分,我们必须选择它和主要信封的形状,然后用鼠标右键单击—>排列—>发送到返回。

10

一旦有了信封的顶部,底部和阴影部分,我们要申请一个面具,这样图标的基础形状之外的部分将被隐藏。要做到这一点,我们必须首先复制(Ctrl-C组合),并粘贴(控制-F)的基础形状的副本到上述三个部分。一旦复制到位,只需选择它,我们需要掩盖和命中右键单击—>创建剪贴蒙版的三个部分。

小提示:因为较大的对象是在我们最需要掩盖件的表面,我们要放大角落,并使用主要形状区域以外的选择部分。

第11

选择电子邮件图标,并把它们组合在一起使用控制-G的所有元素。

9.创建信封开启的电邮图标

第1

由于第二封电子邮件图标是基于我们刚刚创建的,将原有图像简单复制到约48像素的右侧。

2

取消组合的对象(右键点击—>取消组合),然后进入隔离模式(双击信封折叠的顶部或底部),削减(控制-X)的顶部,退出隔离然后将其粘贴在其他一切之上(控制-F)。

3

选择折叠的顶部,然后水平反映它,使尖端现在的指向朝上。

4

选择反映对象,然后将它朝上方26像素。要做到这一点,只需右键单击—>变换—>移动并在弹出框中输入垂直-26像素和水平0。

5

改变对象的颜色为#E3E3E3,然后创建一个76 x62的白色(#FFFFFF)矩形的4 PX圆角半径。从顶部折叠部分的前端定位新的形状,约8像素。

6

由于信和顶部折叠需要被掩蔽,我们使用直接选择工具(A)复制底部折叠,将其粘贴在其它元件之上,水平地反映它,然后将其对准顶端部图标的主体。

7

我们希望面具来隐藏我们的文字和顶部折叠的特定部分,必须首先删除顶部中心,对顶部左侧和右侧锚点进行调整。首先双击形状进入隔离模式,然后使用直接选择工具(A)选择,然后按Delete键删除指定的锚。

8

仍处于隔离模式,使用钢笔工具(P),然后点击右上角的锚点,并开始绘制去所有的方式对折的尖的形状。使用像素预览,这样你可以有轨迹的更精确的视图,按住Shift键,同时增加锚,这样行将笔直结束。

9

选择我们刚刚创建的形状,顶部折叠和文字部分,然后用鼠标右键单击—>制作剪贴蒙版。你也可以使用直接选择工具(A)摆脱信对象下的阴影将其删除,因为形状与剪贴蒙版的底部折叠对象是一样的。

10

现在,重复步骤6,然后形状的颜色改为#C7C7C7。此副本将作为我们深入探究的这封信。

11

因为袋需要适应我们的信的内表面,所以需要使我们的信封顶部的主形状的重复剪切蒙版适用于它,然后选择他们两个,右键单击—>制作剪辑面版。

12

我们继续之前的口袋信的背面,先复制其底部为中心,中间定位点,用它来创建内部阴影。

首先使用直接选择工具(A),点击形状,然后一旦锚点显示,选择那些我所指出的,通过点击第一个,然后按住Shift键可以选择停止。将所有东西选中,只需将它们复制到剪贴板(Ctrl-C组合)。

13

只要您创建的锚点的副本,您可以选择字母,并把它和顶级指向折到口袋的前面(右键点击—>排列—>置于顶层)。

14

双击信上的部分进入隔离模式,然后粘贴(控制-F),我们在第12步翻转复制的填充形状的行程(按住Shift键X)的固定点,然后改变它的颜色为黑色(# 000000)和其混合模式为正片叠底。然后,一定要降低其不透明度为12%,并设置描边粗细到4像素。

15

选择阴影,然后去到对象—>扩展,并检查填充和笔触。

16

仍然隔离组内,创建一个更小的20×4像素和三个更广泛的64×4像素的形状,所有的2像素转角半径,然后从另一个使用对齐面板的水平分布空间(套6距离他们PX)。组的线中(控制-G),然后水平地以信的形状对齐它们,从它的顶侧的距离为10像素。

此外,一定要使口袋阴影在文本行的前面(右键点击—>排列—>置于顶层)。

17

添加一个底部阴影将覆盖最低的两行文本的信件。这样做通过创建一个76 x37像素黑色(#000000)的矩形,有水平居中的字形对准其底侧。然后改变其混合模式为正片叠底,降低其不透明度为8%。

18

添加一个小的28×2像素的矩形在信的右上方。因为这将作为一个影子,我们需要改变其混合模式为正片,并降低其不透明度为10%。因为我们要的阴影过来正好指向上方折处,我们需要复制,并将其粘贴在上面,然后用两个选择,右键单击—>制作剪贴蒙版。

第19

为了完成我们的小图标,我们需要纠正底部折叠部分,它需要在口袋里的影子上。只需选择折,然后把它给我们的元素安排在其余之前—>置于顶层。一旦你做到这一点,只需选择所有图标的元素,并使用Control-G将它们组合在一起。

接下来的图标,我们创建的必须拥有所有的书写工具。我们将采用每个元素来建立他们。

 

10.创建橡皮擦图标

第1

使用圆角矩形工具创建一个16×32像素形状的2像素转角半径,粉红色(#FFB8C9)。底部对齐形状的第二封邮件图标,并距离这两个约51像素。

2

复制橡皮擦的主要形态,然后用矩形工具(M)创建覆盖件的上半部分的形状,并使用Pathfinder’s Minus Front选项橡皮擦提取它。更改所得到的形状,颜色为#C6B8FF,然后组合它和橡皮擦的主要形状成为一个对象(控制-G)。

 

11.创建钢笔图标

第1

使用圆角矩形工具创建一个6×80像素形状的2像素圆角半径。底对齐,橡皮擦与右边距离为8像素。

2

创建稍深(#CCCCCC)10×8像素的矩形,底部对齐到先前创建的形状,并创建笔的基础形状的副本后,选择它和暗的矩形,并使用探路者的相交函数来创建笔的底部。

3

加上我们刚刚创建的形状顶部的小型6×1像素段,并使用#B3B3B3颜色。

4

添加一个10×24像素的矩形在笔的顶部,确保使用较淡灰色(#F2F2F2)。

5

从笔的顶端侧添加一个13×2像素的矩形(#E6E6E6)约2像素,它与右侧对齐。然后创建一个6×2像素的黑色(#000000)矩形,改变其混合模式为正片和其不透明度为10%,略低于钢笔帽的位置。

6

通过加入2×22像素的形状为1像素完成笔帽,颜色使用#F2F2F2,它一个拐角半径约为1像素,然后将其对准到左边确保该圆顶端部进入帽的延伸向外约1像素。一旦你添加了这个小细节,用组控制-G笔的所有元素。

 

12.创建铅笔图标

第1

用2像素转角半径创建一个6×73圆角矩形(#E8CA8B)。将它对准于笔的底部,与其右侧的距离为6像素。

2

通过选择和删除顶部中间锚点调整笔的顶部,消除了圆角。使用直接选择工具(A)做到这一点,一旦你删除了锚打,控制-J联结剩下的一个以填补内部空白,并关闭形状。

3

创建生成的形状(控制-C—>控制-F)的副本,然后在它的上面添加一个12×67像素的对象,水平调整到我们的铅笔的顶端。对于这两个选择,使用Minus Front减去较大的上段,并获得较小橡皮擦。改变所产生的形状颜色为#FFB8C9。

4

通过加入一个6×5像素灰色(#E6E6E6)的矩形,以及一个较小的6×1像素和暗(#CCCCCC)的形状在它的上面来完成铅笔的底部。另外,增加两个1×1像素圈(#B3B3B3),它们之间有2像素的距离,然后将它们(控制-G)制组,并在垂直和水平方向将它们对齐到我们刚刚创建的更大的灰色形状。

5

使用矩形工具(M),并创建一个2×61像素的形状,使用#FFDF99然后水平对齐到我们铅笔的顶部颜色。

6

通过绘制一个6×9像素的矩形,并在主形状的顶部放置它以创建铅笔尖。使用添加锚点工具,创建的形状的顶侧的定位点恰好在中间。然后,使用删除锚点工具,删除顶部左侧和右侧锚,使针尖可以初具规模。

接下来,使用椭圆工具(L),创建一个8×6像素圆圈,用#938585,并将其定位于尖端的顶部,这样只有一小部分会与表面颜色相交。创建圆上尖的副本,然后使用剪贴蒙版圆的其余部分(包括选择的尖端和圆>制作剪贴蒙版)隐藏。一旦你这样做,创建三个较小的2×4像素的形状,并使用直接选择工具(A)删除其顶部锚点。确保所有三个对象彼此接近,只是铅笔尖下。

7

一旦你添加了提示,选择铅笔,并将它们的所有元素组合在一起(控制-G)。

 

13.创建标尺图标

第1

因此,我们的小书写工具图标的最后一部分是标尺。要创建它,我们将依靠圆角矩形工具,有了它我们将创建一个22×81像素的白色(#FFFFFF)的形状。它对齐到铅笔的底部,然后定位其距右侧8像素。一旦你确定了它的位置,降低其不透明度为40%左右。

2

通过创建一个8×33像素添加的内部圆形,以1像素为一个拐角半径和20%的不透明度水平矩形。

3

创建主标尺的形状的副本,然后将其粘贴在一切之上。然后,使用矩形工具(M),绘制一个20×81像素的对象,垂直对齐到我们刚刚创建的副本的右边。

一旦你拥有了一切的位置,只需选择副本和矩形,并使用Pathfinder’s Minus Front来创建我们所需要的侧部分。降低其不透明度为20%,然后创建另一个副本,我们将反映垂直对齐标尺的右侧。

4

要完成的标尺,只需增加约11卡的位置(空间指标)。开始用较大的4×1像素的矩形,然后是接下来的四个小的3×1像素,然后又是更大的一个,依此类推,直到你把所有11人。组合所有的选项卡在一起(控制-G),然后降低不透明度为80%。

不要忘了选择橡皮,钢笔,铅笔和直尺,并将它们组合在一起(控制-G),因为它们只是形成一个单独的图标。

14.创建 iPad mini 图标

14.创建iPad mini

我们快完成了,现在我们只有三个图标了!所以一定要确保在你的设备层上,建立这些设备。

1

在圆角矩形工具的帮助下创建一个62 x92像素的白色(#FFFFFF)形状,并确定它的4 PX圆角半径。水平对齐到电子邮件图标,有46像素的距离。

在此基础之上,再增加54 x72像素的矩形,我们将使用垂直和水平居中的更大的形状,并用#404040颜色。在上方添加一个较小的2×2像素(#404040),并朝着底部的另一个较大的4×4像素圈,使用稍微较淡(#DBDBDB)的色彩。

2

首先创建一个锯齿形状用钢笔工具(P)的帮助下,使该对象的打火机色调(#595959)添加细节到屏幕上。点击它,并使用直接选择工具(A)选择锚点形成锯齿形线。在他们之后创建重复线,着色它绿色(#76D9BF),并给它一个2像素描边粗细。

由于该行已经从屏幕的一侧去其他的,你可能需要创建较大的灰色矩形的副本,为了掩盖其部分区域之外去了到绿线位置。添加一个白色的小(#FFFFFF)8×8像素圈,一个更小的4×4像素的绿色(#6DC7AF)之上形成的价值指标,并把它放在较低的行值之上。

3

重复表示设备的屏幕较暗矩形,并且复制粘贴到所有其他元素。改变其颜色为白色(#FFFFFF),其混合模式为叠加,不透明度为16%。

使用直接选择工具(A)选择右下角,移动向上大约54像素。进入像素预览并通过拖动来移动锚,或者你可以选择它,然后点击右键—>变换—>移动—>并在垂直的输入框输入54像素,水平输入框为0像素。

 

15.创建 iPad 图标

第1

由于这个图标是基本的迷你iPad的一个稍大的版本,只需按照相同的步骤,但比给的元素稍大的尺寸。对于白色款,我们需要创建一个70×96像素的形状同为4像素角半径,同时给予62×76像素的内屏部分的尺寸。相同的顶部和底部的圈定位到第二图标,确保在水平方向对齐。

2

对于登录屏幕,创建两个24×4的矩形为1像素圆角半径。使用#404040为它们上色,然后使它们彼此距离4像素。以iPad的形状水平居中,并确保他们组合,并将它们排列在屏幕的底部。

3

按登录表单,通过右键单击顶部—>变换—>移动,垂直输入框中输入-18像素。

4

通过绘制一个22×22像素圈,我们将相同颜色值作为登录表单(#404040)创建登录图标。然后在水平方向调整到屏幕上,把它的登录字段定位在6像素。

5

对于人的背影,我们首先需要从它的顶部添加头,建立一个使用8×10像素的椭圆,朝着先前创建的形状的顶部位置,大约3像素。

然后,在1像素下面,我们将添加一个20×20像素圈,我们会掩盖的部分是较小的一个18×18像素。

6

通过添加使用完成了该设备,因为我们用于iPad mini的同一过程画面反映。复制主屏幕的形状,粘贴在一切之上,然后使用直接选择工具(A)约56像素,将其移动至右下角。改变形状的混合模式为叠加,降低其不透明度为16%。

 

 

16.创建 iMac 图标

第1

让我们开始创建iMac的显示屏。使用矩形工具(M)创建一个28×2像素形状,颜色为白色(#FFFFFF),然后在底部将其调整到iPad,约80像素的距离。

第2

通过移动来向内侧2 PX调整形状的顶部锚点。通过绘制一个24×12像素稍深(#E8E8E8)的形状,我们需要调整支架的中间部分。这一次,只需移动锚1像素。

添加一个26×2像素的黑色(#000000)的矩形将作为一个影子,水平对齐到中间支架部分的上侧。由于阴影的一面去展台的区域之外,我们需要复制(Ctrl-C组合),并粘贴(控制-F)的立场上它的一个副本,然后选择他们两个右击剪贴蒙版—>使剪贴蒙版。

3

使用圆角矩形工具,创建一个100×72像素的白色(#FFFFFF)矩形的4 PX圆角半径。这将作为我们的基本画面形状。创建它的一个副本,改变它的颜色为#595959,然后使用直接选择工具(A),移除底部中间锚点,按下Control-J团结剩余的。通过选择底部锚和朝向顶部移动它们,调整8像素的形状高度。

添加一个更暗(404040#)92x52像素形状,垂直和水平居中我们先前创建的部分。添加一个小的4×4像素圈朝屏幕底部,对于白色款的苹果标志。

4

复制较小的屏幕暗部(控制-C),并粘贴在一切(控制-F)的顶部。我们需要改变其颜色为白色(#FFFFFF),设置其混合模式为叠加,然后降低不透明度为16%。

 

 

17.图标润色

不知道你是否注意到了,我们目前为止创建的图标似乎缺了点什么。如果你仔细看一下预览图像,你就会知道我在说什么...是啊!渐变!

我们需要图标覆盖到他们的梯度,使他们闪闪发光。

添加渐变的过程是完全相同的,我只举个例​​子,你来完成它们。

1

确定你的右层(在这种情况下,文件层),并使用直接选择工具(A)选择和复制该图标的形状基础上。如果图标是由多个元素(如多文档,iMac和仪器的),选择形成的拥有最基本形状的图标并将其粘贴在上面。

接下来,使用#1B1464 颜色和#C1272D为我们创建线性渐变,确保设置角度为60°。

2

一旦你创建了渐变,只需将其混合模式为叠加,降低不透明度为52%。你可以完成不透明度水平,也许你会发现,较高或较低的值效果更好。

就是这样!

我希望你已经设法按照教程,重新创建这些好看的图标,但最重要的是,我真的希望你已经学到了一些新的东西。下次见!

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部
课程交流
lilu
2015-05-19

@Peran 的确,这篇文章的翻译的孩子是个新手。

Peran
2015-05-19

很好的教程,跟着练了一遍很有收获...就是翻译实在是太不忍直视,有些词句根本就是机翻的吧→_→ 机翻完至少也校对一边嘛...