AI教程!教你做渐变风格扁平图标

时间:2020-02-11
类别:AI教程
水平:入门
观众:3.1w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

img

原图作者:Jenson Z.

教程作者:软件基础营44-A78-Nini

教程指导:如如酱w

交作业:#优设每日作业#

关于教程

本教程详细讲解了如何运用Adobe Illustrator绘制系列主题图标的方法,这类插画风格的主题图标多用于UI界面,增加界面的丰富感和用户体验感。这次临摹的主题图标颜色丰富对比强,有很高的识别度,以上三种图标分别为;“价值定位”、“数据统计”、“专家指导”。

备注:原图共6共图标,本教程以其中三个图标为例讲解,其余图标做法类似。

三个图标均为同一底色加不同的形状组合。我们的临摹步骤为:1.创建文档 -> 2. 创建参考线统一图标大小 -> 3.绘制各个图标并填充颜色 -> 4. 调整背景颜色 -> 5.导出文件,下面将进行分步详细说明。

你也想做出这么漂亮的图标吗?戳链接让如如老师手把手教你→点我学习制作AI图标

想要来「优优交流群」和其他小伙伴一起学习分享吗?搜索 QQ 群:282706954 进群暗号:优优的忠实观众

教程步骤

步骤 1:创建文档

打开Adobe Illustrator,创建一个800px X 600px的文档,因为是用作界面的主题图标,所以颜色模式选择为RGB模式(若文件为印刷目的,则需要选择CMYK模式)

AI教程!教你做渐变风格扁平图标

步骤 2:创建参考线(界定框)

制作参考框,目的是为了统一所有图标大小,使图标看起来整齐统一。

绘制一个正方形-取消填充-添加红色描边-在描边面板中勾选虚线设置-调整虚线大小-Ctrl+C-Ctrl+F原位置复制一个正方形-按住Shift+Option拖动鼠标,以同一中心进行缩小-缩小虚线间隔,完成一个参考线框之后全选两个正方形进行编组-选择编组-按住Option+Shift对齐复制拖动一个同样的参考线框-Command+D重复上一步即可获得第三个参考线框。

三个参考线框置于同一图层下,并命名图层为“参考线”。

AI教程!教你做渐变风格扁平图标

步骤 3:绘制各个图标并填充颜色

3.1 使用钢笔工具(快捷键P)绘制一个图标底部形状,并填充颜色为#ffeedd,shift+option复制出两个同样的形状,放入参考网格2和网格3中心对齐。

AI教程!教你做渐变风格扁平图标

3.2 绘制一个80px x 55px的矩形,将圆角设置为3px,填充渐变颜色,色号如图。

AI教程!教你做渐变风格扁平图标

3.3 在矩形中分别绘制一个圆形,和一个三角形(圆角1px)并填充渐变颜色,色值#ffffff(调节渐变颜色时,将右边色块的不透明度调整为0,得到图形逐渐消失的效果)

AI教程!教你做渐变风格扁平图标

3.4 使用多边形工具、矩形工具绘制出钻石的各个面,可使用直接选择工具(快捷键A)单独调整锚点,使形状互相贴合,完成钻石形状的描边。

AI教程!教你做渐变风格扁平图标

3.5 填充钻石中的各个形状,取消描边,填充渐变颜色,色值如图(钻石的不同面需要使用渐变工具调整渐变方向,并调整渐变过度范围,使画面更符合光影规律)

AI教程!教你做渐变风格扁平图标

3.6 绘制一个圆形,使用节点工具点击圆形下方的锚点转换为尖角,直接选择工具下拉尖角锚点不断延长,再用选择工具压缩性状至线条状(如图所示),做好形状后填充白色渐变(渐变中作用在底部的色块-更改不透明度为0,达到渐变消失的效果),最后将做好的形状调整角度及长短,制作钻石的高光部分。

AI教程!教你做渐变风格扁平图标

3.7 接下来绘制锤子的手柄,矩形工具画一个60px x 12px的矩形,直接选择工具将矩形的一端两个圆角拉到最大,另外一段的两个角的圆角调整为2px,并向内缩进一点,填充渐变颜色,色值如图。之后使用矩形工具绘制手柄的抓手部分。最后为手柄添加层次感,绘制一个小一点的矩形,填充颜色后,模式改为柔光效果并降低透明度。

AI教程!教你做渐变风格扁平图标

3.8 下面用钢笔工具绘制锤子的头部,可分为两部分绘制,并填充渐变颜色,色值如图,最后再增加高光效果。

AI教程!教你做渐变风格扁平图标

AI教程!教你做渐变风格扁平图标

3.9 接下来绘制金币,画一个34px的圆并填充渐变颜色并复制,再绘制一个40px的圆,与刚刚复制的校园中心对齐,使用路径查找器-减去顶层,得到一个圆环。将圆环剪裁为两部分。

AI教程!教你做渐变风格扁平图标

3.10 再次复制一个小圆,使用直接选择工具删除锚点并选择两个端点-Command+J闭合路径,制作出一个半圆,将半圆填充渐变颜色,一端色块的不透明度改为0,调整颜色过渡。

AI教程!教你做渐变风格扁平图标

3.11 选择圆环的一半,填充渐变颜色,渐变工具调整简便的角度及位置。再选择另一半圆环填充渐变颜色,同样调整角度和位置。

AI教程!教你做渐变风格扁平图标

AI教程!教你做渐变风格扁平图标

3.12 单独复制两个小圆,使用路径查找器-减去顶层制作两个阴影部分。

AI教程!教你做渐变风格扁平图标

3.13 使用矩形工具绘制出钱符号形状(顶部两个外斜矩形用直接选择工具移动锚点位置可得),填充渐变颜色。并用钢笔用具绘制出高光部分,填充渐变。

AI教程!教你做渐变风格扁平图标

AI教程!教你做渐变风格扁平图标

完成后的金币形状如图

AI教程!教你做渐变风格扁平图标

3.14 最后绘制星星,画一个正方形,旋转45度得到菱形,内部画一个小正方形作为参考线,大正方形的四边中心添加锚点并向内拖拽锚点至贴合参考线,得到如下图形,取消描边,填充渐变颜色,即可获得星星形状。最后调整星星在图标中的位置与大小。

AI教程!教你做渐变风格扁平图标

3.15 完成第一个图标绘制。在底部加上文字,字体“Helvetica”,字号8pt,色值# 391f77。

AI教程!教你做渐变风格扁平图标

3.16 进行第二个图标绘制。绘制三个矩形,从左到右分别为18px x 57px,18px x 70px,18px x 85px,并设置圆角为3px。 分别填充渐变如图所示色值。

AI教程!教你做渐变风格扁平图标

AI教程!教你做渐变风格扁平图标

AI教程!教你做渐变风格扁平图标

3.17 绘制矩形亮部,丰富图形层次感。绘制一个矩形,填充颜色#ffffff,不透明度调整为20%,调整矩形的角度,与三个圆角矩形相交,运用路径查找器得出形状相交的部分。

AI教程!教你做渐变风格扁平图标

AI教程!教你做渐变风格扁平图标

3.18 使用矩形工具和三角形工具拼接制作箭头形状,完成后用直接选择工具调整圆角。并使用布尔运算合并形状(除三角形外的所有形状)。分别填充渐变,色值如图。

AI教程!教你做渐变风格扁平图标

AI教程!教你做渐变风格扁平图标

3.19 之后开始绘制放大镜,画两个个35px的小圆和一个50px的大圆。选一个小圆与大圆中心对齐后使用路径查找器-减去顶层-得到一个圆环,并填充渐变颜色如下。然后将另一个小圆,填充颜色为白色渐变(#ffffff),其中一个色块不透明度调整为0,渐变工具调整渐变方向。并用钢笔工具画出反光,扩展形状,同样填充白色透明渐变。

AI教程!教你做渐变风格扁平图标

AI教程!教你做渐变风格扁平图标

使用矩形工具绘制放大镜的手柄,填充渐变颜色与放大镜圆环相同。再使用直接选择工具选择矩形底部的两个锚点,将圆角拉到最大,顶部的圆角设置为2px,复制并缩小做好的形状,放入合适的位置。填充渐变颜色如图,右侧色块不透明度改为10。并绘制一个小直角矩形作为连接的部分。填充颜色与小矩形一直,两端色块不透明度均为100.

AI教程!教你做渐变风格扁平图标

3.20 最后一步,复制上一个图标中做好的小星星,调整星星大小,放入合适的位置。如图标一相同,在图标底部使用字体“Helvetica”,字号8pt,输入名称“Statistics”,完成图标二的制作。

AI教程!教你做渐变风格扁平图标

3.21 开始绘制第三个图标,使用矩形工具绘制画板图形。大矩形为75px x 50px,小矩形为63px x 38px。画板顶部矩形为4.5px x 5.5px,并用直接选择工具选择该矩形顶部两个锚点,将圆角拉到最大。画板底部的矩形为4.5px x 21.5px,同样用直接选择工具将底部两个锚点的圆角拉至最大。右键-变换-水平翻转-复制一个图形。最后调整各个图形位置。

AI教程!教你做渐变风格扁平图标

3.22 选择大矩形,并再画一个直角矩形,填充颜色#ffffff,不透明度设置为10,按照图中的位置与矩形相交,运用路径查找器选择“相交”,得到相交图形,放入原来的矩形中对齐。填充渐变颜色,色值如图。

AI教程!教你做渐变风格扁平图标

AI教程!教你做渐变风格扁平图标

3.23 然后绘制画板图中的形状,用钢笔工具绘制折线,端点和转折点选择圆角,设置路径为5pt,在菜单中选择对象-扩展,将路径变为形状,并填充渐变颜色。复制一个形状与底部,用方向键向下移动1格,填充颜色与底部画板颜色相近,不透明度改为70,制作阴影。再用矩形工具绘制小正方形,四个圆角都拉到最大,shift+option向下对齐复制一个相同的形状,再用直线工具绘制一条直线。图形和直线均填充颜色为#ffffff。做好一个之后,shift+option向右复制一个,Command D重复复制。得到如下图形。

AI教程!教你做渐变风格扁平图标

3.24 接下来制作指示棒,绘制两个同等宽度的矩形,长矩形四个锚点均用直接选择工具拉到最大圆角,短矩形只拉底部的两个锚点,将两个矩形底部居中对齐,并填充渐变颜色如图。调整形状角度。

AI教程!教你做渐变风格扁平图标

3.25 最后将图标一种制作好的金币与小星星,复制到图标三中,调整大小与位置。并在图标下方命名“Expert Guidance”。完成图标三制作。

AI教程!教你做渐变风格扁平图标

步骤 4

最后,为制作好的图标增添一个渐变背景,丰富视觉效果,背景色值如图。

AI教程!教你做渐变风格扁平图标

步骤 5

作品绘制完成后,选择文件-导出-导出为-jpg格式

AI教程!教你做渐变风格扁平图标

最终效果

AI教程!教你做渐变风格扁平图标

你也想做出这么漂亮的图标吗?戳链接让如如老师手把手教你→点我学习制作AI图标

【优优教程网 365 打卡计划】

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。每天做练习,成长不停息!

学完这篇教程的人还在学…

>> PS教程!好看的轻拟物手机图标
>> PS教程!教你制作渐变风炫酷图标

AI教程!教你做渐变风格扁平图标

5 收藏 96

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 已发布 1

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片