AI软件教程,如何绘制UI图标设计

注:此教程为英翻教程,软件操作不娴熟的小伙伴儿,谨慎尝试哦。翻译不足之处,自行脑补哦。

AI软件教程,如何绘制UI图标设计插图1

1.创建新文档并设置网格

Ctrl-N创建新文档,如图设置。

AI软件教程,如何绘制UI图标设计插图3

2.创建主形状

步骤1

选择矩形工具(M)并专注于工具栏。从笔画中删除颜色,然后选择填充物,并将其颜色设置为R=127 G=63 B=152。移动到您的艺术板,只需创建一个90 x 40px的矩形。专注于这个新鲜形状的底部,切换到直接选择工具(A)。选择左侧锚点并向右拖动15px,然后选择右侧锚点并向左拖动15px。最后,你的紫色矩形应该变成一个简单的梯形,如第二张图片所示。

AI软件教程,如何绘制UI图标设计插图5

步骤2

将填充颜色设置为R=28 G=117 B=188,选择矩形工具(M),创建一个120 x 75px形状,并将其与第一张图片中显示完全相同。关注这个新形状的顶部,切换到直接选择工具(A)。选择左侧锚点并向右拖动35px,然后选择右侧锚点并向左拖动35px。最后,情况应该会像第二张图片。

AI软件教程,如何绘制UI图标设计插图7

步骤3

将填充颜色设置为R=39 G=170 B=225,选择矩形工具(M),创建一个180 x 35px形状,并将其与第一张图片中显示完全相同。关注这个新形状的顶部,切换到直接选择工具(A)。选择左侧锚点并向右拖动30px,然后选择右侧锚点并向左拖动30px。最后,情况应该会像第二张图片。

AI软件教程,如何绘制UI图标设计插图9

步骤4

重新选择两个蓝色梯形,打开路径查找器(窗口>路径查找器),然后单击减去按钮。确保选择了结果的形状组,只需点击Shift-Ctrl-G来取消分组。关注生成的形状,并将现有的填充颜色替换为下图所示的颜色。

AI软件教程,如何绘制UI图标设计插图11

步骤5

选择直接选择工具(A),选择第一张图片中突出显示的十个锚点,移动到控制面板,专注于角落部分,只需在该白框中输入5px。最后,情况应该会像第二张图片。

AI软件教程,如何绘制UI图标设计插图13

3.添加颜色和一些光滑的高光

步骤1

启用智能指南(Ctrl-U),将填充颜色设置为白色(R=255 G=255 B=255),并选择钢笔工具(P)。

将鼠标悬停在顶部,右锚定蓝色形状,直到您将收到一条锚文本。只需单击该位置,然后移动到蓝色形状的底部,当您获得交叉智能指南时,只需单击它。

继续使用钢笔工具,单击蓝色形状的底部右侧锚点,然后返回顶部锚点并关闭路径。最后,您应该有一个简单的白色三角形,如第四张图片所示。

AI软件教程,如何绘制UI图标设计插图15

步骤2

确保您的白色三角形仍然被选中,打开渐变面板(窗口>渐变),只需单击渐变缩略图即可添加默认的黑色到白色线性渐变。

确保您的形状保持选定状态,并专注于梯度面板。将角度设置为0度,然后聚焦于渐变颜色。选择左渐变滑块,将颜色设置为R=117 G=76 B=41,然后选择右渐变滑块,将颜色设置为R=139 G=94 B=60。重新选择钢笔工具(P),添加第二个三角形,如第二张图像所示,并用相同的线性梯度填充它。

AI软件教程,如何绘制UI图标设计插图17

步骤3

禁用智能指南(Ctrl-U),然后转到编辑>首选项>通用,并确保键盘增量设置为1px。选择您的蓝色形状,并在前面复制两个副本(。

选择顶部副本,只需使用键盘上的向下箭头按钮向下移动1px。重新选择此步骤中制作的两个副本,然后单击路径查找器面板中的减按钮。

确保结果形状保持选择状态,并专注于外观面板(窗口>外观)。将填充颜色设置为白色,然后只需单击空心文本即可打开透明面板。将不透明度降至30%,并将混合模式更改为柔光。

AI软件教程,如何绘制UI图标设计插图19

步骤4

重新选择您的蓝色形状,并在前面再复制两个副本。

选择顶部副本,只需使用键盘上的向上箭头按钮向上移动1px。重新选择此步骤中制作的两个副本,然后单击路径查找器中的减按钮。

确保结果形状保持选定状态,将其带到前面(Shift-Ctrl-]),并专注于外观面板(窗口>外观)。将填充颜色设置为黑色(R=0 G=0 B=0),将其不透明度降至10%,并将混合模式更改为柔光。重新选择您的蓝色形状,只需将填充使用的平面颜色替换为最终图像中显示的线性渐变。

AI软件教程,如何绘制UI图标设计插图21

步骤5

选择左侧橙色形状,并在前面复制两个副本。

选择顶部副本,只需使用键盘上的向下箭头按钮向下移动1px。重新选择此步骤中制作的两个副本,然后单击路径查找器中的减按钮。

确保结果形状保持选择状态,并专注于外观面板(窗口>外观)。将填充颜色设置为黑色,将其不透明度降至20%,并将混合模式更改为柔光。向右移动,橙色形状,重复左侧使用的技术。

AI软件教程,如何绘制UI图标设计插图23

步骤6

重新选择左侧橙色形状,只需将填充使用的平面颜色替换为下图所示的线性渐变。向右移动橙色形状,并将用于填充的平面颜色替换为下图所示的线性渐变。

AI软件教程,如何绘制UI图标设计插图25

步骤7

选择您的绿色形状,并在前面复制两个副本。

选择顶部副本,只需使用键盘上的向下箭头按钮向下移动1px。重新选择此步骤中制作的两个副本,然后单击路径查找器中的减按钮。

确保结果形状保持选择状态,并专注于外观面板(窗口>外观)。将填充颜色设置为黑色,将其不透明度降至20%,并将混合模式更改为柔光。重新选择您的绿色形状,只需将用于填充的平面颜色替换为最终图像中显示的线性渐变。

AI软件教程,如何绘制UI图标设计插图27

步骤8

将您的紫色形状保密,并在前面复制,然后选择红色形状,并在后面复制(Ctrl-C > Ctrl-B)。

移动到图层面板,选择此红色副本并将其向下移动1px。重新选择此步骤中制作的两个副本,然后单击路径查找器中的交叉按钮。

确保结果形状保持选择状态,并专注于外观面板(窗口>外观)。将填充颜色设置为黑色,将其不透明度降至10%,并将混合模式更改为柔光。

AI软件教程,如何绘制UI图标设计插图29

步骤9

选择您的红色形状,并在前面复制两个副本。

选择顶部副本,只需使用键盘上的向上箭头按钮向上移动1px。重新选择此步骤中制作的两个副本,然后单击路径查找器中的减按钮。

确保结果形状保持选择状态,并专注于外观面板(窗口>外观)。将填充颜色设置为白色,将其不透明度降至80%,并将混合模式更改为柔光。重新选择您的红色形状,只需将用于填充的平面颜色替换为最终图像中显示的线性渐变。

AI软件教程,如何绘制UI图标设计插图31

步骤10

选择您的紫色形状,只需将填充使用的平面颜色替换为最终图像中显示的线性渐变。

AI软件教程,如何绘制UI图标设计插图33

4.创建背景

步骤1

选择矩形工具(M),只需单击您的画板即可打开矩形窗口。在宽度和高度框中输入610,然后单击确定按钮创建您的610px正方形。

确保此新形状仍然被选中,将其发送回(Shift-Ctrl-[),然后打开对齐面板(窗口>对齐)。设置对齐到Artboard(打开飞出菜单,如果您看不到如下图所示的对齐部分,请转到显示选项),确保选中了形状,然后只需单击水平对齐中心和垂直对齐中心按钮。最后,您的正方形应该覆盖整个艺术板,如下图所示。

AI软件教程,如何绘制UI图标设计插图35

步骤2

重新选择您的正方形,聚焦外观面板,并使用添加新填充按钮(由下图中的蓝色圆圈指向)添加第二个填充。

确保此新填充保持选择状态,将其不透明度降至30%,然后移动到渐变面板(窗口>渐变),只需单击该渐变缩略图。继续关注渐变面板,从类型下拉菜单中选择渐变,然后移动到渐变颜色。选择右滑块,将颜色设置为R=169 G=124 B=80,然后选择左滑块,将颜色设置为R=255 G=239 B=210,并将其不透明度降至0%。抓住梯度工具(G),专注于你的艺术板,并拉伸你的径向梯度,如下图所示。

AI软件教程,如何绘制UI图标设计插图37

5.添加微妙的着色

步骤1

使用矩形工具(M),创建一个66 x 6px形状,将填充颜色设置为黑色,并按第一张图片所示放置。专注于这个新鲜矩形的底部,切换到直接选择工具(A)。

选择左侧锚点并向右拖动2px,然后选择右侧锚点并将其拖动到左侧2px。确保这个黑色形状仍然被选中,专注于图层面板,并将其拖到构成框图标的所有形状下方。

移动到外观面板,选择现有填充物,只需将其不透明度降至10%。继续聚焦外观面板,确保现有填充物仍然被选中,并使用重复选择项目按钮(由下图中的蓝色圆圈指向)复制它。

选择底部填充物,将其不透明度增加到20%,然后转到效果>模糊>高斯模糊。输入一个5px半径,然后单击确定。返回外观面板,确保选择了整个路径(只需单击外观面板顶部的路径文本),然后转到效果>样式>圆角。输入一个3px半径,然后单击确定。

AI软件教程,如何绘制UI图标设计插图39

步骤2

每5px返回网格线,所以只需转到编辑>首选项>指南和网格,并在网格线每个框中输入5个。使用椭圆工具(L),创建一个100 x 50px的形状,将填充颜色设置为黑色,并按第一张图片所示放置。

关注图层面板,只需将这个新形状拖到构成框图标的所有形状下方。移到外观面板,确保您的压缩圆仍然被选中,将其空位降至15%,然后转到效果>模糊>高斯模糊。输入一个15px半径,单击确定,即可完成。

AI软件教程,如何绘制UI图标设计插图41

至此就完成了。

AI软件教程,如何绘制UI图标设计插图1

原创文章 AI软件教程,如何绘制UI图标设计,版权所有
如若转载,请注明出处:https://www.itxiaozhan.cn/2022732.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注