超详细的icon图标正确绘制方法AI教程！手把手教你一组清新简约微

前言

盼望通过这组简单的小图标绘制方法抛砖引玉来帮助到计划新人们用规定化的方法去完成图标计划。

获取更多学习教程 323计划网-计划师的必备帮助站点 丰富的视频教程与软件素材等你来下载

一、设置AI首选项

不管是在生活中还是在工作中，在初次上手某个软件时，我都嘻歡先去看看软件的设置界面，一来是可以用过设置面板快速理解软件的一些功能，还可以本性化的定制自己的需求。设置存在的目标也就是为了方便差别用户针对差别的需求去设置软件。

回到正题，我们都知道AI是基于矢量的画图软件，对于像素点的对齐并不在意，而图标的绘制都是基于像素点去绘制的，需要精准的掌握像素点以防备在界面中出现虚边的环境，以是我们去设置首选项都是为了让我们的画图创建在像素的底子上。

键盘增量
依次打开菜单-编辑-首选项-常规：键盘增量选择1px（保证我们在通过方向键进行精准操作时能保证每次移动间隔为1个像素）；去掉勾选缩放描边和效果（保证缩放时描边保持稳定）

单位
全部设置为像素（保证全部元素都是在像素尺寸进行）

新建文档设置
画布尺寸单位选择像素，高级-预览模式选择像素（让画面的渲染基于像素而不是矢量）

老版本的新建文档设置界面需要勾选【使新建对象与像素网格对齐】。

新版的这个选项，在进入新建文档后软件界面的右上角勾选即可。

二、工欲善其事必先利其器

路径查找器
路径查找器的外形模式一共有四种分别是联集、减去顶层、交集、差集，使用好这几个功能，我们可以组合出很多的图形。

1.联集
将全部选择的物体归并为一个外形，假如这些物体颜色不一样，则统一用最上面的物体的属性。

2.减去顶层
最下面的物体作为被减去的对象被上面的物体减掉，得到一个新的外形。

3.交集
只有全部物体都重叠的部分才会保存下来，假如这些物体颜色不一样，则统一用最上面的物体的属性。

4.差集
和交集相反，删掉物体重叠的部分，保存没有重叠的部分，假如这些物体颜色不一样，则统一用最上面的物体的属性。

直接选择工具+剪刀工具
直接选择工具可以选中单独的锚点，剪刀工具可以把路径进行分割。
使用剪刀工具裁剪路径，然后使用直接选择工具选中要删除的路径，即可对路径进行断线。

旋转工具
使用旋转工具，按住alt键选择中心点弹出窗口，设置旋转角度，选择复制，按住ctrl+d一连复制，根据选择的差别中心点可以复制出差别的图形。

三、你必须知道的图标绘制规定

没有规范不成周遭，我们必须让图标计划创建在规定之中，这样才能保证图标计划出来的具备规定性和统一性。

我们都知道两个相同大小的圆和正方形，虽然它们两个的大小参数是一样的，但是它们在视觉上并不是一样大的，正方形看上去会比圆形要大，我们对这两个图形做个重叠相减，可以发现多出来的视觉面积正是导致正方形比圆形看上去要大的缘故。

通过得当缩小正方形的大小，我们在对他们两个进行重叠，这时间会看到两个多出来的面积恰好形成了视觉互补，这时间正方形和圆形的大小恰好看上去保持同等。

也就是说，两个图形的视觉大小是否同等，是由两个图形的面积是否相同决定的，也就是说只要可以或许保证两个图形的面积基本上相同，这两个图形的视觉大小就能保持基本相同。

通过以上分析我们可以绘制出系统图标栅格来作为我们绘制图标的基本骨架

Tips:这里有苹果官方的系统图标栅格，大家可以在文末下载。

四、图标计划

自行车小人
计划工具：剪刀工具+椭圆工具+钢笔工具
1.使用椭圆工具画出布局
2.使用添加锚点工具和直接选择工具增删锚点，绘制出弧形
3.最后用钢笔工具绘制出人手
4.肯定要掌握比例布局

小齿轮
计划工具：旋转工具
1.新建矩形，使用旋转工具旋转60°，一连复制（ctrl+d）两次
2.新建一个圆形，使用外形模式中的联集将这几个外形归并
3.新建一个圆形，使用剪刀工具剪出断点

聊气候泡框
计划工具：矩形工具+多边形工具+路径查找器
1.用矩形和三角形画出气泡框
2.按住alt移动复制一个矩形，再使用外形模式-减去顶层
3.剪刀工具构筑路径
4.选中需要连接的锚点右键-连接（ctrl+j），将路径连接

照相机
计划工具：剪刀工具+椭圆工具+矩形工具
1.新建两个矩形，绘制大概布局，再使用直接选择工具做出梯形
2.外形模式-联集，再使用剪刀工具断线
3.加上圆形

路由器图标
计划工具：剪刀工具+椭圆工具+剪切蒙版
1.画出两个同心圆，然后画一个正方形，全选然后对其进行剪切蒙版（ctrl+7）
2.使用剪刀工具和钢笔工具画出断点
3.归并

五、绘制事项

1.确保像素准确没有小数点
2.尽大概保证旋转角度45°
3.重要布局的线条描边粗细、端点、边角样式保持同等

方法有许多种，这里抛砖引玉，盼望能对计划新人有所帮助，从规定化的方法去绘制图标，少走弯路。

六、写在最后的话

对想自学要么是盼望进步计划技能的小伙伴，我们提供海量的计划视频教程以及素材插件等学习资源，这里给到我们的一个学习网址 323计划网 。下面的图片为网站首页：

趁便也提供一个计划资讯阅读及文章教程学习的小程序——计划导读，现在已上线。

察看更多更多计划案例请点击 造极品牌项目顾问 。

编者按：今日这组气势派头统一的图标难度不高，作者特意挑了两个操作本领偏多的图标，而且附上两款经典的 神器 案例（已打包），新手训练绝对能大涨一波知识，直接开工咯。

教程中的案例归原 计划师 全部。

作者微信订阅号：六层楼那么高，欢迎关注唷。

教程中用到的全部工具：路径查找器面板，选择工具（V），直接选择工具（A），添加删除锚点（+，-），对象>路劲>偏移路劲，变更操作，表面面板， AI圆角工具 （xtream path）， RoundAnyCorner 。

我是个快捷键控，能快捷键找到的，鼠标绝对不会移动两下。但也不是如今立马就要记着全部，用到哪些记那些，多用频频就很自然了。以是在写步骤的同时也会放快捷操作，以为有效的就试试吧。

初始设置，简化工作

新建文档（Ctrl+N），大小随意，这里是700*700px，RGB，辨别率72，新建对象与像素网格对齐不勾选。

下面设置网格线，网格线在AI中是个对于低级和老手都很有效的工具，对于需要留意大小和比例等这些地方方便许多，还省去添加帮助线的麻烦。

编辑>首选项>参考线和网格，设置如下。网格大小根据详细计划要求设置。

视图>表现网格，对齐到网格。这些都设置好会大大简化工作。

计划之前先定好一个大抵规定，这方面是个初学者，不会，自己琢磨的，有履历的可以留言教教哈。

这是一个大概的预设图。圆半径为80整个圆恰好占用五个32px网格。图形总元素基本尺寸（单位：px），矩形椭圆宽：20，40，70. 长：60，80. 描边大小：2，4，6 圆角：2，4，6

全部图形尺寸都是基于以下图形的框架。

2. 该设置的设置好了，下面就开始第一个图标吧。

呐，第一个小图标一开始都是由矩形和线条构成的。详细摆放另有比例问题自己调治。简单说下做这个图标用到的重要步骤。

首先用到的工具快捷键的切换：选择工具（V），直接选择工具（A），矩形工具（M），椭圆工具（L），Xtream path圆角矩形工具，RoundAnyCorner（之前的微盘有下载）

A：矩形，圆形对齐

关于对齐的问题：在对齐面板的右上角可以选择表现选项，就会出现如图所示的选项，对齐所选对象，对齐重要对象，对齐画板。若要使几个对象的隔断指定命值，可使用分格间距功能。

tips：当要将两个物体对齐，盼望以此中一个对象为基准对齐择两个对象一起选中，再次左击选择基准对象，对齐，就可以了。

B：制作圆角

Xtream path这个插件中最常用的也就直边转半圆角和圆角工具。使用很easy，就不介绍了。

而对于图中所示的锚点，一边直角一边曲线的就有点难搞。用AI自身的圆角功能和Xtreampath都不是很好实现，最少我没有发现什么完美的方法。这里有别的一个工具RoundAnyCorner（屌丝的外表，功能强盛~），可以对任意角度曲线化~真棒~

选择其他脚本弹出窗，找到RoundAnyCorner的位置打开即可 （Ctrl+F12）

简单的输入数值就可以了。

对于直线转圆角，直接在表面面板>描边，点击描边选项，弹出框点选择圆角端点就OK。

直线转曲线，直接选择工具（A），选中要转换的锚点点击上图中的曲线按钮。假如只想调整锚点曲线手柄一边的曲率按住Alt，调整手柄。

问题：但是，当我们把做的icon缩小时，就会出现以上左边icon的样子，描边设置的大小没有随着缩放而主动缩放。

解决：

方法1

扩展直线段对象要么

方法2

在编辑>首选项>常规，缩放描边和效果选项勾选。

3. 第二和第三个icon留意事项个方法不再重复，都是上面介绍过的用法。下面讲第四个图标。

上图为weak图标初始构成对比。下面剖析讲。有效到相同方法的地方就不罗嗦了。

顶部直线变半圆，下部矩形框底部的两个锚点各向中心点移动八像素。

选中对象在路径查找器面板选择联合

选中底部需要变圆角的四个直角点，使用RoundAnyCorner工具制作2像素的圆角。

下面用瓶子的表面制作瓶子的液体。选中对象，对象>路径>偏移路径（此功能是复制一份原对象再偏移路径，也就是说会有新的路劲出来）设置-4px的偏移

偏移路径之后原来的圆角会变成直角，需要重新选择变成圆角。

删除半圆顶部的锚点变成直线变。下移10像素。

制作液体的波浪。使用一个10像素的椭圆如图所示放置，而且路径查找器下归并路径。

再画一个10像素的椭圆，选择路径查找器面板减去前面。

微调路径。

下面说画水滴的方法。

将椭圆极点的锚点换成直角

选中顶部锚点，上移把像素如图所示。

调整顶部锚点手柄变油滑。再实验挑中中部左右锚点手柄的上部是过分自然。

别的部分都是之前用到的本领不用再啰嗦了。

【优设七月高人气教程合集】

《我是歌手》总决赛超赞海报教程！
《PS合成教程！手把手教你创建《我是歌手》总决赛的宣传海报》

本性另类的波普气势派头人像教程！
《AI教程！手把手教你绘制波普艺术气势派头人像》

炎天专属西瓜字效AI教程！
《AI进阶教程！手把手教你创建清冷适口的西瓜字效》

作者： 六层楼那么高

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================ 关于优设网 ================
“优设网 uisdc.com “是国内人气最高的网页计划师学习平台，专注分享网页计划、无线端计划以及PS教程。
【特色建议】
计划师需要读的100本书 ：史上最全的计划师图书导航： http://hao.uisdc.com/book/ 。
计划微博 ：拥有粉丝量97万的人气微博 @良好网页计划 ，欢迎关注获取网页计划资源、下载顶尖计划素材。
计划导航 ：环球顶尖计划网站建议，计划师必备导航： http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取计划教程、履历分享和种种意想不到的”福利”吗？
添加 良好网页计划 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：

心形是一种很漂亮的外形，它代表了爱与包涵，想要绘制一款带故意形的礼品土包，该怎么绘制呢？下面我们就来画一画心形的图标，从中学习一下心外形的精致体现方法，另有光芒明暗的计划本领，具体请看下文介绍。

软件名称：

Adobe Illustrator CC(AI软件) 2018 v22.0.0 简体中文安装版

软件大小：

797.2MB

更新时间：

2017-09-26 立刻下载

1、先用 矩形工具 画出一个圆角的矩形路径，我们用灰白色的 渐变添补 ，再用红棕色的渐变添补这个矩形上面的封套路径，我们通过 含糊滤镜 做出阴影效果。

2、复制 封套的路径 ，我们用灰黑色的渐变添补，并设置成 正片叠底 的效果，通过改变 渐变色的角度 让封套的边沿出现 暗光效果 。

3、继续使用 钢笔 画出修饰彩带的路径并用红棕色的渐变添补，彩带的阴影用 正片叠底 的灰黑色的渐变来实现，我们做出两个彩带的 阴影 。

4、使用 钢笔 画出心形的路径让其位于两根彩带的中间位置，我们用红棕色的渐变添补，复制这个心形的路径并缩小到95%，我们用差别角度的红棕色的渐变添补，让其与原来的心形对齐。

5、接着，我们再画出心形下方的两根彩带的路径，用之前的填色方法进行添补， 再用线条勾勒出彩带的内部表面 ，我们用黄色进行 描边 。

6、最后，我们用 钢笔 画出心形的高光地区并用 滤色状态的黑色添补 ，设置 透明度为50% ，再复制一次心形的路径并缩小到95%并添补白色，完成心形图标计划。

以上就是ai绘制心形图标的教程，盼望大家嘻歡，请继续关注脚本之家。

相关建议： ai怎么计划听音乐的按钮图标? ai怎么绘制简笔画效果的日历图标? ai怎么画薯条矢量图标? ai薯条插画的画法