教你使用AI软件设计一套网页UI图标教程

     设计教程      0      1,018
设计网站的时候需要用到一套网页UI图标,那么AI软件如何设计网页UI图标呢?下面让Boss设计教你使用Adobe Illustrator中的形状工具巧妙地组合矢量形状设计一套令人难忘的网页UI图标。
教你使用AI软件设计一套网页UI图标教程

 

今天以相机图标为案例,设计一个相机UI图标,可以用作社交媒体资料图片,以及一个链接到数字简历上的作品集的按钮。

教你使用AI软件设计一套网页UI图标教程

 

1、新建项目

启动Ai Illustrator,然后单击“创建新按钮”,或按Control + N(Windows)或Command + N(macOS)。选择“ Web”选项卡,然后在右侧输入一个大小;我们为宽度和高度输入了400像素提示:创建UI图标设计时,以正方形格式工作很有帮助。

单击创建

教你使用AI软件设计一套网页UI图标教程

 

2、绘制基本形状

首先,您将绘制相机机身。在“工具”面板中选择“矩形”工具。单击并在画板上拖动一个矩形。如图所示,绘制第二个较小的矩形,与较大的矩形的顶部重叠。 

您将使用智能辅助线排列矩形,以便它们的中心对齐。将较小矩形的中心小部件(中心的圆形)拖动到较大矩形上,直到看到垂直的品红色指示。

教你使用AI软件设计一套网页UI图标教程

 

接下来添加闪光灯

单击并按住“矩形”工具以访问其他形状,然后选择“椭圆”工具。单击并拖动一个圆圈,直到看到十字准线向导出现在圆圈中,表明您正在绘制一个完美的圆形。大小合适时松开光标。

提示:要按比例调整圆的大小,请按Shift并拖动一个角小部件。 如果需要,请拖动中心小部件以将圆重新定位在较大矩形内。

教你使用AI软件设计一套网页UI图标教程

 

3、创建镜头形状

选中“椭圆”工具后,将鼠标悬停在较大的矩形上,直到出现单词中心按Alt(Windows)或Option(macOS)并拖动从中心绘制的圆圈。寻找十字准线,并在圆的大小正确时松开光标。

在侧面画一个较小的圆圈。单击其中心并将其拖动到较大的圆圈上,直到看到单词相交中心出现。将较小的圆圈放到适当的位置。

教你使用AI软件设计一套网页UI图标教程

4、组合形状

在此步骤中,您将合并矩形形状。

按V键选择工具。单击大矩形;然后按Shift并单击小矩形以同时选择两者。选择“形状生成器”工具,并拖动一条连接两个矩形的线,如图所示。

教你使用AI软件设计一套网页UI图标教程

5、添加颜色

 现在,您将对这些形状应用填充颜色和各种笔触属性。

按V键切换到选择工具。选择相机机身后,单击“属性”面板中“外观”下方的“填充颜色”色板。选择右侧的“色板”选项,然后在“色板”面板中单击一种颜色。然后,单击“笔触”色板,然后选择“无”以删除笔触。

对闪光圈重复上述步骤:应用白色填充,并且不描边。

要为镜头着色,请首先选择外圆;然后按Shift并单击第二个圆圈也将其选中。不应用填充,白色描边。将冲程重量增加到5点。

教你使用AI软件设计一套网页UI图标教程

 

6、画龙点睛

您可以圆角形状以创建不同的外观。

选择相机机身。按A切换到直接选择工具,然后拖动圆角小部件以一次将所有角圆化。

教你使用AI软件设计一套网页UI图标教程

7、保存为Web输出

如果需要相对于画板调整图标的大小,请选择“选择”>“全部”以选择整个图标。按V键切换到选择工具。按Alt + Shift(Windows)或Option + Shift(macOS)并拖动一个角手柄以从中心按比例调整大小。最后,通过拖动图标的中心来重新放置图标。

教你使用AI软件设计一套网页UI图标教程

 

选择“文件>保存”。为项目指定一个唯一的名称,并将其保存为Adobe Illustrator(AI)格式。您可以随时在Illustrator中编辑此文件。

要保存准备好在线发布的最终版本,请选择“文件”>“导出”>“导出到屏幕”。选择一个位置,然后选择PNG格式。

提示:您可以在导出之前更改画板尺寸。在“比例”下拉菜单中选择“宽度”或“高度”,然后输入新的尺寸。

单击齿轮图标,然后在“抗锯齿”下拉菜单中选择“优化的艺术(超级采样)”。单击“保存设置”,然后单击“导出画板”。

教你使用AI软件设计一套网页UI图标教程

最后

以上就是AI软件设计网页UI图标教程,是不是很简单呢?下一次教你更多有关UI图标设计教程,关注Boss设计分享更多有关设计教程。