IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资

      还不会画图标?10个案例教你巧用AI快速绘制小图标!

      • 发布时间:
        2019-08-23
      • 版权所有:
        云和教育
      • 分享:

      图标是设计中最基础的元素,是考验一个设计师最基础的点,作为一名设计师,绘制图标是一个必不可缺的技能。

      今天,我们就通过一个简单的案例,来教大家如何制作图标。

      1、建立一个新的文件  点击【文件】>【新建(或CTRL+N)】,设置如下图:

      配图1 10个案例教你巧用AI快速绘制小图标.jpg

      2、自定义网格  建立自定义网格 点击【编辑】>【首选项】>【参考线和网格】,设置如下(注意勾选):

      配图2 10个案例教你巧用AI快速绘制小图标.jpg

      按快捷键Command+”键调出网格系统,并点击勾选AI窗口右上角的对齐到像素网格按钮。

      配图3 10个案例教你巧用AI快速绘制小图标.jpg

      3、创建参考网格  有了这个参考网格,你所制作出来的图标会更规范和精致哦!

      配图4 10个案例教你巧用AI快速绘制小图标.jpg

      双击矩形工具,画出一个56x56px的图形。图形水平垂直居中,并使用描边1px显示,调节相应的透明度,Get一个辅助图形框。

      4、创建图标  假设您已经完成了创建参考网格的工作,那我们就开始创建图标了,我们先来一个比较简单的“赞”吧。

      步骤一:先用基本的工具,将赞的形状绘制出来。

      配图5 10个案例教你巧用AI快速绘制小图标.jpg

      步骤二:使用AI的直接选择工具对圆角进行统一,最好将所有的圆角弧度都设置统一, 这里我设置的是6px,也可根据爱好实际调整。

      配图6 10个案例教你巧用AI快速绘制小图标.jpg

      步骤三:然后将图标使用形状选择器( Command+shift+F9)将形状合并一下。

      配图7 10个案例教你巧用AI快速绘制小图标.jpg

      为了让图标更有趣,我们可以在较小面积的区域上,使用别的颜色,来提升差异化。

      配图8 10个案例教你巧用AI快速绘制小图标.jpg

      图标主要考验的是造型能力,这里再展示一些简单的案例,希望能激发你的灵感,在图标设计上有更多思路。

      – 心形 –

      创建心形图标的最快方法就是使用V形三个点和一个大描边,然后通过拖拽贝塞尔控制手柄来调整心形的轮廓。

      配图9 10个案例教你巧用AI快速绘制小图标.jpg

      – WIFI –

      配图10 10个案例教你巧用AI快速绘制小图标.jpg

      可以使用几个圆圈和一些布尔运算创建一个wi-fi强度图标。Illustrator的图形组合工具pathfinder→分割你所需要的图形。

      – 链接 –

      配图11 10个案例教你巧用AI快速绘制小图标.jpg

      链接图标的元素非常相似,但是重叠链接周围的区域需要进行一些规划。

      – 放射性 –

      配图12 10个案例教你巧用AI快速绘制小图标.jpg

      有时可以不必手动去创建一个图形,比如Dashed Line功能就非常有用,特别是在需要将圆圈分成相等部分的情况下。

      – 雪花 –

      配图13 10个案例教你巧用AI快速绘制小图标.jpg

      Illustrator的外观面板可以添加实时转换,以创建对象的副本。这非常适合类似万花筒的效果,并且是一种非常快速的方法来构建可以实时编辑的雪花。

      – 盾牌 –

      配图14 10个案例教你巧用AI快速绘制小图标.jpg

      有时候就是没有偷懒的方法,你不得不拿出钢笔工具,用手画一个形状。这是我如何创建一个盾牌。

      对象→复合路径→释放用于将轮廓笔划转换为两个单独的路径。如果在查看结果时需要调整形状,则可以使用外观面板实时完成反射路径。

      – 骷髅图标 –

      配图15 10个案例教你巧用AI快速绘制小图标.jpg

      – 磁铁图标 –

      配图16 10个案例教你巧用AI快速绘制小图标.jpg

      – 一艘火箭飞船 –

      配图17 10个案例教你巧用AI快速绘制小图标.jpg

      以上是一个简单的案例,希望大家都能举一反三,多多练习。

      如果你对UI设计感兴趣,或者想深入学习更多UI设计的内容,欢迎来云和数据学UI~

      云和数据UI课程涵盖平面、网页、手绘、UI、UE、产品交互H5等多种设计,同时重点培养UI与产品交互设计能力,采用讲师全程面授,项目制实战教学,拥有“六位一体”“X+12”双重教学模式、严格科学的管理模式和一体化就业保障服务,让你快乐学习,快速上岗拿高薪!