一、遇到的问题以及答案预览

Q1. 如何制作大小统一的图标：运用网格以及进行视觉矫正

Q2. 如何制作风格统一的图标：只使用一种风格的图标、技巧，采用相同的大小，元素，颜色。

Q3. 制作的流程、方法是怎么样的：AI 用于创建基本的形，PS用于设定样式

二、学习的材料

一站式图标设计指南
http://www.zcool.com.cn/article/ZNDY1MTM2.html#
高阶技巧！聊聊LOGO 设计中的视觉矫正法
http://www.uisdc.com/logo-visual-correction-method
没掌握图标的绘制规范之前，别说自己会画图标了
http://www.uisdc.com/icon-design-rules
从零基础到合格，我总结了这5个图标设计实战方法
http://www.uisdc.com/5-useful-icon-design-method
超实用！聊聊图标设计流程及小技巧
http://www.uisdc.com/icon-design-flow-skills

三、材料的解码融合

Q1.如何制作大小统一的图标

3.1 网格

最重要的就是所有的图标都要能够适应同一个大小的正方形画板

网格的使用场景：

一：图标组有超过50个图标的时候；

二：为已有一套网格系统的图标继续画东西的时候。

三：日后有人会继续接手你的图标组的时候。

3.2 视觉矫正

3.2.1 overshoot

有时候一些图形看起来会比另外一些大，比如数值上等大的正方形和圆形，在视觉上正方形会更大（本人测试，距离越远效果约明显，但是也有阈值）。

解决方法：把正方形缩小一点点。(正方形缩小可以参考圆的描边宽度，而描边大小参考下文4.1.2)

放小了看会有差别的，别看只有这2个像素的差别，往往就是这两个像素决定了你的图标统一美观性，设计大牛们一定是能扣到这种细节的

3.2.2 放射现象

在制作反白图标时，一般大部分人只是将图标的颜色反过来，改为白色就大功告成了，然而，反白的图标看起来会更“肥”一些，这就是放射现象

解决方法：在设计 logo 的反白版本时，可以在原logo加上细细的描边，使描边内侧对齐，并取消颜色填充，将其扩展成图形，再复制一个原图形，用AI的路径查找器来把它删除，得到一个相对小的原图形。

具体要去除多少，就要由你的双眼来决定了，在视觉上看起来和黑色版本精确相同就行。

Q2.如何制作风格统一的图标

3.3 制作风格统一icon 的要点

1. 只使用一种风格的图标。

2. 使用同一种风格化的技巧。即使都是线性图标，也有不一样的做法。所以要保持风3. 格元素的一致，比如用多粗的线条，用多大的圆角等。

4. 大小：不光是要在一样大小的矩形里面，而是要让他们视觉上的大小保持一致。

5. 适当使用网格

6. 使用一样的元素：比如等大小的圆。

7. 颜色统一：使用同一套色板。

要强调：永远不要为了图标的一致性牺牲了图标的识别性。识别性才是让图标的关键。

3.4  选择正确的主题

选择一个主题，根据主题来选择风格，既然是一套图标，那必然是风格一致的，否则也不能称之为“一套”了

3.5 选择什么图标来画

如果你在做你自己感兴趣的主题的话你应该能很轻松知道选择哪些最具有代表性。

根据的选择的主题来脑暴关键词，用纸笔记录下，要把每个词都用进入你脑海的第一个印象画下来。同时你也可以去一些图标网站找点灵感。

3.6 找到每个图标的最佳语义符号

图标最重要的作用就是信息的表达，所以要找出每个图标的最佳语义，这是一个优秀图标的第一要素。当你遇到不知道怎么选择正确的语义符号来传达你想要传达的信息的时候，你可以寻求互联网的帮助。

3.7 草图

不要直接上软件开画，先粗略的画一画草图。

注意，这不需要你有多好的绘画基础，只要画你自己能看得懂的草图就可以了，毕竟不是让你直接出成品。（当然草图画地越好，后期的工作也就相对轻松）

草图画好以后，可以进行多次修改，等你确定好就这一稿了的时候，再可以上软件开画（我一般是把草图拍个照，再传到电脑上描摹）

画草图，推荐大家使用网点本。

3.8 提取最简洁的图标造型

图标应该看起来超级简洁，但是简洁不是一件容易的事。

图标越小，细节应越少。但是你应该在减少细节的过程中小心不要做过火。

Q3.制作的流程、方法是怎么样的

3.9 规格

图标样式和线条粗细有助于规格的制定，因为许多图标都必须有一条中线。

也就是说，如果一个图标的宽度为偶数，那么中线的宽度便不能为奇数。

当你使用的线条宽度为偶数时，图标尺寸应为：偶数（宽）x 偶数（高）。

同理，奇数也一样，不过建议大家都用偶数，避免用奇数。

4.0 选择使用的软件

什么软件都行，我用的是AI 用于创建基本的形，PS用于设定样式

4.1 从 Illustrator 开始

4.1.1 对齐网格设定以及网格的使用方法

勾选“视图→对齐网格”，关闭对齐新对象到像素。（对齐新对象到像素可在新建文档或变换面板中可找到）

方法一：

勾选“视图→ 显示网格”，然后在“首选项”的“参考线和网格”中可以对网格进行设置

方法二：

采用IOS的图标参考线

食用方法：
1. 这几条黑线为主要参考线，图标都画在正方形和圆形内。
2. 如上文所说的，要避免正方形和圆形在等大时出现的视觉误差，所以要缩小正方形的范围（正方形缩小可以参考圆的描边宽度，而描边大小参考下文4.1.2）

3. 对角线是用来确定不规则图标（除正方形和圆形，比如长方形）的大小，使其限定在淡蓝色的矩形之内


具体使用方式可以看我的图

也建议大家看看原文http://www.uisdc.com/icon-design-rules
规则不是死的，小伙伴们随机应变

4.1.2 将你图标中的所有元素完美对齐（敲黑板，因为是重点，所以按照原文没多改）
区分图标的好与坏的一个重要因素就是元素的对齐和间距。

使用一致的间距和对齐的重要原因是：
保证了一套图标的一致性 你的图标看上去更加专业 平衡的图标看上去更有吸引力

这个图标根据64px的网格来制作，同时是用了4px的描边。这样做的原因是这样也可以把它变成最小的图标。（16px）

在可能的情况下，总是根据你要使用的最小间距单位来选择你要在图标中使用的元素的大小。

举个例子，那个磁条的宽度是最小间距的三倍，所以信息的那个条的宽度也是三倍。那个mastercard的元素的宽度是五倍，所以信息条下面的那条的宽度也是五倍。

当你开始画第一个图标的时候，就开始为剩下的图标准备规则。比如对于同一种元素用4px的间隔
对于不同组的元素用8px的间隔（2倍）。再强调一下，这些规则不是死的，要灵活变通。

4.1.3 多用布尔运算
在做图标的时候，能用基本图形进行布尔运算的时候，尽量不要使用钢笔，这样做的好处有如下几点：
1. 让你的图标更加规范

2. 对图形结构理解更加深刻

3. 后期更改形状更加方便

4.2 着色与技巧
取决你想要的风格你可以使用单色系列，使用一个颜色的不同色度。
或者选择一个配好不同颜色的色板，这是用来创作扁平图标的常用方法。
建议是在整套中使用2-5种颜色
详见色彩方面的文章和书籍，如配色设计原理

4.3 完成前的最后润色
首先要说的是你不太可能一次性就完成你的第一套图标。在你完成所有的图标后，就是你微调和
修改他们的关键时刻了。你需要让他们看起来很平均并且一样漂亮。

这是根据我的需求来写的，所以如果你心中的问题还没有解决的话，可以去看看大神们的文章。

一站式图标设计指南
http://www.zcool.com.cn/article/ZNDY1MTM2.html#
高阶技巧！聊聊LOGO 设计中的视觉矫正法
http://www.uisdc.com/logo-visual-correction-method
没掌握图标的绘制规范之前，别说自己会画图标了
http://www.uisdc.com/icon-design-rules
从零基础到合格，我总结了这5个图标设计实战方法
http://www.uisdc.com/5-useful-icon-design-method
超实用！聊聊图标设计流程及小技巧
http://www.uisdc.com/icon-design-flow-skills

                                                                                    - END -