画过不少图标，也总结了很多大神的方法，在此归纳一下简单的图标画法，希望对大家有帮助。作为一名 UI 设计师，必须要重视 icon 的作用，首先是需要大量地练习，其次是尽量不要一遇到画图标的时候就随便在网上下载，而是结合产品调性创造属于这套产品的图标。一、图标在 UI 中的应用在本文中所说的图标，是指界面中的 icon。icon 增加了界面的趣味性，也提高了识别性，是界面中不可或缺的部分。1. icon 在界面中的分类icon 在功能上来说，分为不可点击的展示图标和可点击的按钮图标：详见图1.1.1以及1.1.2中红框部分：△ 好享瘦 app 中的界面2. icon 的尺寸icon 的尺寸一般选择4的倍数，这样有利于在成倍缩放的时候，不会造成半像素的情况。例如48×48的 icon，缩小2倍的时候是24×24；而34×34的 icon，缩小2倍的时候是17×17。在图标中应尽量避免出现单数。3. icon 的风格时下流行的图标可以归纳为：线性图标、面性图标、线面结合图标。至于 mbe 风格、断线风格、色块风格、渐变风格、半透明风格、双色搭配风格等等，都是基于以上三种来进行风格设计。图1.3.1为在 dribbble上看到一些比较好看的 icon 设计，作者 ID 均备注在右下角，在此仅供参考。除了在 dribbble、站酷、花瓣、优设、iconfont 等找好看的图标以外，还可以参考市面上主流 app 中的图标。二、如何画图标1. 画图标的软件常用的画图标软件有三个：AI、PS、sketch。AI 的好处是矢量，网格比较规范，容易处理图标的线面转换，其中直角一键转圆角功能非常好用，缺点就是调色非常的难用，操作不便，只能处理普通色块，复杂的色彩会耗费很多时间。PS 的好处是调色功能强大，形状剪切中规中矩，缺点是做线性图标的时候需要用布尔运算，描边功能操作起来没有 AI 方便。Sketch 的好处是矢量，调色十分智能，并且现在做界面多数用 sketch，应用起来十分便捷，缺点是它的造型没有 AI 和 PS 严谨，一些转角的位置不够流畅，小图的时候不易察觉，放大后就能看到不流畅的线条。我通常是三者结合来画图标：首先用 AI 构造基本的形状。如果是要发作品做展示，就拉到 ps 里面进行调色和展示；如果是放在界面中使用，就拉到 sketch 调色使用。2. 参数设置与参考线的绘制在这里演示的是用 AI 画图标的方法。参数设置方面：首先在首选项 – 参考线和网格，网格线间隔10px，次分隔线10，勾选显示像素网格；然后在画布框内点击鼠标右键，显示网格；更后在视图中打开「对齐网格」「对齐像素」「对齐点」。图2.2.1为参数设置步骤。参数设置完毕后，新建画布，我一般新建800×600（dribbble 的展示尺寸），图标应小而精致，不宜建过大的画布。参考线是为了规范图标而存在，一般有两种参考线画法（复杂规范与简单规范），它们原理都是一样的，习惯哪种就用哪种。不要纠结参考线的大小应该是多少，根据你图标使用的位置来确定图标大小（也就是参考线的范围），有的朋友知道了 46px 的参考线怎么画之后，又纠结 88px 应该怎么画，其实就是一样的原理。你可以根据自己的感觉来微调，稍微大点小点无所谓，重要的是不要出现单数的像素大小就可以。在此以44px大小的图标为例子。复杂规范画一个44×44的正方形，颜色调为灰色，描边选择0.25pt（在此补充一个知识点，72ppi下的1pt是等于1px的，具体请自行百度），然后画一个42×42的正方形居于其中。这个42×42的界线为安全界线，图标不要画超过这个界线，避免在给开发切图的时候贴边切，导致图标出现不自然的边界。图2.2.2详细展示画参考线的步骤。那么，以上的参考线应该怎么使用？我们画图标的时候，物体会有长有扁，有圆有方，在统一体量感的时候，就需要用到里面的一些参考线。但是记住，参考线是死的，人眼是活的，画完以后，要靠感觉微调，直至视觉上体量感达到一致。请看下图2.2.3分析：△ 图标是 iconfont 比赛里第二名的商务计划书图标，我临摹了一遍，在此用以示范，原作者 回忆的沙漏2003简单规范用复杂规范的参考线画到熟练的时候，就可以用比较简单的参考线去限制图标范围，因为你已经十分熟悉体量感的控制了。简单的画法是只需要画三个正方形，同样线性选择颜色是灰色，描边选择0.25pt。这里有个小口诀：长物体上下超左右不超、扁物体左右超上下不超、方物体要比圆物体小。下图2.2.4详细展示画简单参考线的方法。3. 如何在 AI 建立参考线来复用？在画布中用描边 0.25pt 来画好参考线，然后选中参考线，右键 – 建立参考线。详细请看图2.3.1。4. 各种形状的图标如何在参考线中统一前面说到，参考线是为了限定图标的大小，从而达到整体的美观与规范。在画了很多图标之后，我总结出两个小诀窍：5. 绘制过程中要注意的点画图标的时候要对齐网格，改变图标大小的时候，注意是不是两边同时缩放，有没有造成半像素，有的话就手动拖动图标对齐网格。可以使用内描边来进行线性图标的绘制，这样更容易对齐网格，但是内描边只要使用钢笔加点来断点的话，就会自动变成居中描边。那么使用内描边的时候怎么进行断点？可以把描边进行对象 – 扩展，转为形状，然后用布尔运算来剪切。由于太麻烦，我一般使用居中描边（不推荐居中描边是因为在手机界面中的线性图标一般是3像素，居中描边怕出现半像素，影响清晰度），但经过检验，只要注意把线拖动对齐网格，不会影响清晰度。补充一个知识点：手机界面中的图标，线性一般是用3像素，因为2像素太细，4像素又显得太笨重；当2倍图的时候用3像素，3倍图的时候就会变成4.5像素，所以3倍图的时候要手动把4.5调成4或者5像素。6. 什么是图标的统一性和差异性在这里的统一性不是指所有的图标里面都要用一模一样的元素，而是图标的线粗细、断点的距离、元素的大小、切割的距离、同样的色调、风格的一致。当所有的图标在里面都使用一样的元素，会造成辨认困难。下图2.6.1，一眼看过去，一模一样的笑脸降低了识别率。差异性是指在统一的风格下，通过造型能力，进行图标的区别，增加辨识度。三、线性图标画完后如何创造风格1. 多彩底色线性图标风格2. 同色调线面结合风格图标的造型塑造都是一样的原理，关键是风格的形成，需要不断的尝试。前期可以在 dribbble、站酷、花瓣、各位大神的作品展示平台多看看，学习一些优秀的图标造型塑造方法、风格、配色，通过大量练习和尝试，慢慢就可以找到属于自己的那套画法。四、图标的导出及展示上面说过，我在 AI 中造型完毕，会拉到 sketch 或者 PS 里面修饰。我常用的图标展示方式之一：五、创建属于你的个人图标库阿里的图库 iconfont 是国内非常强大的图标库，不仅图标风格众多，还有代码可以调用，十分方便。个人还可以上传到图标库里给别人使用，并且现在 sketch、axure 里面都有 iconfont 的插件，可以随时调用。本文转自：https://www.uisdc.com/draw-a-set-of-linear-icons}

这篇教程主要是向脚本之家的朋友分享Illustrator绘制一组线条干净的扁平化线性图标方法，教程绘制出来的效果非常漂亮，难度不是很大，值得大家学习，一起来看看吧线性风格一直是很多网页和插画师的最爱，在这篇教程里，我们将教大家绘制一组造型明朗，线条干净且风格简洁的线性图标，比如洁面乳、指甲油、眼影、口红和香水等，赶紧来练手吧。一、观察和草图当我们要将一个物体绘制成为线条的时候，我们第一件事是需要观察物体本身。比如，在本例中运用几个平时日常化妆品作为创作对象，我会打开天猫，分别在搜索框中输入这些物品。先列出一个所绘制对象的小清单。每个物品我们都要找到它的共同点，比如第一个洗面奶，其实有各种包装样式，但你需要从中提取出某一类的共性，而不能以偏概全。这是观察进入分析的第一步，接下你需要概括这个样式，去掉各种复杂细节，再保留那些能明显突出物品特征的线条细节。观察物品的时候要学会化繁为简，把最本质的造型线条给表现出来。二、绘制第一个图标STEP 01打开AI，新建文档，文档的参数可以参考下图所示STEP 02你可以打开网格，在网格的辅助下进行绘制，或者也可以打开智能参考线。总之如果你是初学者，最好能有一个辅助的工具对绘制的对象有所控制。我的做法是做好每个图标的大小控制，因为你的图标不可能制作到刚好占据整个版面，所绘制的对象到边缘需要一个视觉缓冲。但这纯属一种心理偏好。实际操作中，也有越过参考范围的情况也有。很多人很好奇，AI既然是矢量软件应该就不会有大小之别，因为它可以任意缩放的啊。的确，这是一个值得说明的问题，但比例上你还是遵守一定的秩序，否则你做出的图标在比例上的失衡会影响整体的美观。STEP 05第一个所绘制的对象是洁面乳。虽然我们说是用线条来表现，但是实际绘制中我们并不会直接用到直线工具，而是在绘制中突出表现线条。线条所起的是视觉上的强调作用。了解这一点后，让我们开始画一个瓶身，瓶身用矩形来表现。如果你的AI不是旧版本，那应该就会知道直角的矩形可以直接可以拖动角内的圆点变为一个圆角矩形。如果是旧的版本那就需要运用圆角工具来处理。矩形的描边设置为4pt，描边为黑色，填充为白色。这一步并不需要考虑色彩。为了方便你随时缩放图形大小时，描边大小都保持不变，请进入【编辑>首选项>常规】，去掉“缩放描边和效果”这一栏的勾选。STEP 06接下再运用矩形画上瓶身的上部，这些矩形都要居中对齐。在瓶身的上部，由于并不是一个几何图形，因此你需要运用不同的几何图形进行相互合并或增减。比如梯形是调整了矩形下方两个锚点的位置后得到的，能得到最终的图形的方法有很多，你可以尝试出最适合自己的方式。STEP 07再增加一些装饰性细节，装饰性线条与原有线条保持同样粗细。这里是一个比较随意的创作步骤，你完全可以自由发挥。STEP 08产品的初次印象是美在包装，对包装的装饰需要增加一些丰富的细节，比如增加图案和文字。你可以先画一个圆，给这个圆增加一个瓶身的形状作为矢量剪切蒙版。剪切蒙版的含义即用上面的“形”去显示下面的“内容”，根据这个原理，你只需要复制瓶身并粘贴于最上层，再选中这个复制层与你所画的圆，进入【对象>剪切蒙版>建立】即可。再增加花朵的装饰，先画一片花瓣，再采用旋转工具就很容易组成一朵花形。文字应该选用线性无衬线字体，线条粗细都能尽量靠近图形本身的线条粗细。三、其他几个图标的画法STEP 09按照我们上一步对瓶身的形状组合，指甲油的瓶身是很容易做到的事。关键是对包装的装饰细节上的考虑，作为一个图标，你没有办法去穷尽所有的细节，因此需要抽取更多装饰的特征。最好的方法，是把自己当作一个包装设计师，并搭配着一整套图标的风格特征进行思考。STEP 10眼影盒的结构比较简单，但需要注意的地方是矩形间的间隔尽量保持一致，这样从视觉上看起来效果更好。矩形间的间隔也不应该太紧密，否则当图标缩小时就会“连成一片”STEP 11口红的画法更简单，构建基本的造型即可。但需要注意一点就是口红的涂抹的部分带着圆角，且有倾斜，当我们要处理倾斜的形状时，直角是比圆角更容易处理的。因此，即使要转为圆角，也先安排好倾斜的形状再转为圆角。STEP 13最后我们画出香水的图标，基本上绘制这类图标有种组合形状的乐趣，因此怎样将形状通过增减拼凑进行组合也是值得往下钻的问题，我的画法可供大家参考如下先画好基础形状，再增添装饰细节我们的基础外形绘制完成。四、色彩在我们对这组图标上色前，我们需要有一个总体规划，这里的意思就是说有个方向，比如我们可以给大致的色彩基调定一个方向，即以白色为主，搭配一些清新的色调。我们做的线性图标中的线条是保持为黑色，因此填色的部分只是内部填充，形状里的描边并不需要改变。STEP 14你可以先做一组色板，这样可以让整个图标保持色彩风格上的统一。但请注意，这个色板只是参考，因为涉及到具体的物品里的某一种特定的色彩选择保持原来色调为好，比如，口红的颜色必然是红色较好，这样能体现出图标的“共性”概括的特征。即使你的色板中没有红色，也无需一定要偏执某一个特定的色彩。此外注意冷暖色彩的搭配。STEP 15洁面乳的部分，因为瓶身大量使用冷色，因此利用红色来平衡视觉。瓶身所使用的两类色彩差别并不大，体现清爽之感。STEP 16指甲油的包装部分，其中瓶身的设想是一个玻璃，因此保持白色填充。一个图标最好不要超过三种颜色。STEP 17眼影的画法，因为眼影本身就有许多不同的色彩，但其实只要围绕一个色彩做一些特别临近的变化即可。STEP 18口红填色相对很简单，红色的唇膏体部分我们直接选用色板里的颜色。STEP 19香水的瓶身和指甲油一样为玻璃特质，因此保留白色，甚至让它有透明感，即留一条线条压过本身的香水液体的部分。填色的部分完成后，我们可以说整体的绘制就结束了。后记矢量的绘制是很精确的，因此对锚点的处理最重要在于精简，懂得控制锚点来塑形，恐怕这其中还需多加实践才能逐步领会。网页插画可能和书籍、海报的插画有所不同就在于，它需要更加简洁的形式来减少加载时间，因此，选用最为简洁的线条来表达物体本身，这需要结合日常的观察力和自身对生活的体会和领悟。}

画过不少图标，也总结了很多大神的方法，在此归纳一下简单的图标画法，希望对大家有帮助。作为一名 UI 设计师，必须要重视 icon 的作用，首先是需要大量地练习，其次是尽量不要一遇到画图标的时候就随便在网上下载，而是结合产品调性创造属于这套产品的图标。一、图标在 UI 中的应用在本文中所说的图标，是指界面中的 icon。icon 增加了界面的趣味性，也提高了识别性，是界面中不可或缺的部分。1. icon 在界面中的分类icon 在功能上来说，分为不可点击的展示图标和可点击的按钮图标：不可点击的展示图标，是为了辅助后面的文字内容，侧重点在于文字，通常尺寸为24x24、28x28、32x32。在小尺寸内为了便于辨认图像，也不要在界面中太抢眼，建议可以使用简单的线性或者面性图标。
可点击的按钮图标，常用于导航栏、操作栏、标签栏，通常尺寸为44x44、48x48、56x56、64x64，这类图标可以结合产品调性进行富有趣味性的设计。
详见图1.1.1以及1.1.2中红框部分：△ 好享瘦 app 中的界面2. icon 的尺寸icon 的尺寸一般选择4的倍数，这样有利于在成倍缩放的时候，不会造成半像素的情况。例如48x48的 icon，缩小2倍的时候是24x24；而34x34的 icon，缩小2倍的时候是17x17。在图标中应尽量避免出现单数。3. icon 的风格时下流行的图标可以归纳为：线性图标、面性图标、线面结合图标。至于 mbe 风格、断线风格、色块风格、渐变风格、半透明风格、双色搭配风格等等，都是基于以上三种来进行风格设计。图1.3.1为在 dribbble上看到一些比较好看的 icon 设计，作者 ID 均备注在右下角，在此仅供参考。除了在 dribbble、站酷、花瓣、优设、iconfont 等找好看的图标以外，还可以参考市面上主流 app 中的图标。二、如何画图标1. 画图标的软件常用的画图标软件有三个：AI、PS、sketch。AI 的好处是矢量，网格比较规范，容易处理图标的线面转换，其中直角一键转圆角功能非常好用，缺点就是调色非常的难用，操作不便，只能处理普通色块，复杂的色彩会耗费很多时间。PS 的好处是调色功能强大，形状剪切中规中矩，缺点是做线性图标的时候需要用布尔运算，描边功能操作起来没有 AI 方便。Sketch 的好处是矢量，调色十分智能，并且现在做界面多数用 sketch，应用起来十分便捷，缺点是它的造型没有 AI 和 PS 严谨，一些转角的位置不够流畅，小图的时候不易察觉，放大后就能看到不流畅的线条。我通常是三者结合来画图标：首先用 AI 构造基本的形状。如果是要发作品做展示，就拉到 ps 里面进行调色和展示；如果是放在界面中使用，就拉到 sketch 调色使用。2. 参数设置与参考线的绘制在这里演示的是用 AI 画图标的方法。参数设置方面：首先在首选项 - 参考线和网格，网格线间隔10px，次分隔线10，勾选显示像素网格；然后在画布框内点击鼠标右键，显示网格；最后在视图中打开「对齐网格」「对齐像素」「对齐点」。图2.2.1为参数设置步骤。参数设置完毕后，新建画布，我一般新建800x600（dribbble 的展示尺寸），图标应小而精致，不宜建过大的画布。参考线是为了规范图标而存在，一般有两种参考线画法（复杂规范与简单规范），它们原理都是一样的，习惯哪种就用哪种。不要纠结参考线的大小应该是多少，根据你图标使用的位置来确定图标大小（也就是参考线的范围），有的朋友知道了 46px 的参考线怎么画之后，又纠结 88px 应该怎么画，其实就是一样的原理。你可以根据自己的感觉来微调，稍微大点小点无所谓，重要的是不要出现单数的像素大小就可以。在此以44px大小的图标为例子。复杂规范画一个44x44的正方形，颜色调为灰色，描边选择0.25pt（在此补充一个知识点，72ppi下的1pt是等于1px的，具体请自行百度），然后画一个42x42的正方形居于其中。这个42x42的界线为安全界线，图标不要画超过这个界线，避免在给开发切图的时候贴边切，导致图标出现不自然的边界。图2.2.2详细展示画参考线的步骤。那么，以上的参考线应该怎么使用？我们画图标的时候，物体会有长有扁，有圆有方，在统一体量感的时候，就需要用到里面的一些参考线。但是记住，参考线是死的，人眼是活的，画完以后，要靠感觉微调，直至视觉上体量感达到一致。请看下图2.2.3分析：△ 图标是 iconfont 比赛里第二名的商务计划书图标，我临摹了一遍，在此用以示范，原作者 回忆的沙漏2003简单规范用复杂规范的参考线画到熟练的时候，就可以用比较简单的参考线去限制图标范围，因为你已经十分熟悉体量感的控制了。简单的画法是只需要画三个正方形，同样线性选择颜色是灰色，描边选择0.25pt。这里有个小口诀：长物体上下超左右不超、扁物体左右超上下不超、方物体要比圆物体小。下图2.2.4详细展示画简单参考线的方法。3. 如何在 AI 建立参考线来复用？在画布中用描边 0.25pt 来画好参考线，然后选中参考线，右键 - 建立参考线。详细请看图2.3.1。4. 各种形状的图标如何在参考线中统一前面说到，参考线是为了限定图标的大小，从而达到整体的美观与规范。在画了很多图标之后，我总结出两个小诀窍：当你总结出你要画的物体形状时，只要不影响辨识度，可以适当改变一下形状，把高的或者扁的物品，画成比较饱满的样子（图2.4.1的铅笔为例）；
当物体形状不适合画得饱满时，可以尽量上下或者左右撑满，然后旋转45度，以增加画面的饱满感（图2.4.2的刀为例）。
5. 绘制过程中要注意的点画图标的时候要对齐网格，改变图标大小的时候，注意是不是两边同时缩放，有没有造成半像素，有的话就手动拖动图标对齐网格。可以使用内描边来进行线性图标的绘制，这样更容易对齐网格，但是内描边只要使用钢笔加点来断点的话，就会自动变成居中描边。那么使用内描边的时候怎么进行断点？可以把描边进行对象 - 扩展，转为形状，然后用布尔运算来剪切。由于太麻烦，我一般使用居中描边（不推荐居中描边是因为在手机界面中的线性图标一般是3像素，居中描边怕出现半像素，影响清晰度），但经过检验，只要注意把线拖动对齐网格，不会影响清晰度。补充一个知识点：手机界面中的图标，线性一般是用3像素，因为2像素太细，4像素又显得太笨重；当2倍图的时候用3像素，3倍图的时候就会变成4.5像素，所以3倍图的时候要手动把4.5调成4或者5像素。6. 什么是图标的统一性和差异性在这里的统一性不是指所有的图标里面都要用一模一样的元素，而是图标的线粗细、断点的距离、元素的大小、切割的距离、同样的色调、风格的一致。当所有的图标在里面都使用一样的元素，会造成辨认困难。下图2.6.1，一眼看过去，一模一样的笑脸降低了识别率。差异性是指在统一的风格下，通过造型能力，进行图标的区别，增加辨识度。三、线性图标画完后如何创造风格1. 多彩底色线性图标风格2. 同色调线面结合风格图标的造型塑造都是一样的原理，关键是风格的形成，需要不断的尝试。前期可以在 dribbble、站酷、花瓣、各位大神的作品展示平台多看看，学习一些优秀的图标造型塑造方法、风格、配色，通过大量练习和尝试，慢慢就可以找到属于自己的那套画法。四、图标的导出及展示上面说过，我在 AI 中造型完毕，会拉到 sketch 或者 PS 里面修饰。导到 sketch 里面的方法（即导 svg 方法）：把单独的图标扩展，然后编组，每个图标是独立的一个编组，拉到「资源导出」那里，选择导出 svg 格式，直接就可以拖到 sketch 里面用。
导到 PS 里面的方法：选择单独图标，复制粘贴到 PS 里面，再进行美化。
我常用的图标展示方式之一：五、创建属于你的个人图标库阿里的图库 iconfont 是国内非常强大的图标库，不仅图标风格众多，还有代码可以调用，十分方便。个人还可以上传到图标库里给别人使用，并且现在 sketch、axure 里面都有 iconfont 的插件，可以随时调用。iconfront 网站链接：http://www.iconfont.cn我的个人图标库：http://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.9&manage_type=myicons&icontype=collections&keyword=六、总结只有少数人是天才，大多数情况下我们都要通过大量的练习，才能促成质变。一开始画不好不要气馁，只要勤奋，明天的你永远会比今天的你要进步得多。不要偷懒套用别人的图标，设计师最不应该丢的是自己的创造能力。如果我的文章能给你提供一点帮助，是我的荣幸。欢迎关注作者微信公众号：「牙线小姐」「超全面的图标设计总结」《超全面的图标基础知识总结》
《腾讯设计师：如何系统地设计界面图标？》
《用品牌基因法，三步帮你搞定图标设计！》
================明星栏目推荐================优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。设计导航：国内人气最高的设计网址导航，设计师必备： http://hao.uisdc.com}