自己对图标设计的理解：分为几个大块：
图标的规范、制作技巧、审美、设计分类以及输出
图标学习脑图
最近两天在看图标课程。
购买和下载了课程，看了像素范儿和UIbang的课程，以及结合自己搜索的文章，总结了以上的脑图。
在UI里面无非是两件事，规范和样式。既要符合规范，也要样式好看。
新手做图标经常犯的错误：
一致性
规范性
视觉平衡
像素对齐
那么首先谈谈图标的制作规范：
1、采用网格系统制作图标：方形、圆形、（横）长方形、（竖）长方形
2、注意倾斜角度的统一，最好为45度（因为45度像素比较干净）
3、尺寸一般是：24*24或者48*48
4、线条粗细：2px或者2的倍数，必要的情况可以3px
5、圆角统一圆角半径或者描边的弧度，AI里描边一般采用高居中描边
（样式的问题后面自己具体设计的时候再总结。）
接下来要讲的是AI和PS里制作图标，经常用到的工具和功能以及小技巧：
AI VS PS
AI经常用来做线性图标，因为它是适量软件，用描边做完后可以直接扩展，就变成了矢量图形，而且还可以拖到PS和Sketch里面，非常方便。
PS软件做图标技巧：
1、⚠️Ps做布尔运算要注意:叠放顺序。上面的才能减去下面的，没剪好就是位置不对，叠放顺序按钮在布尔运算按钮旁边
2、要把形状ctrl+E后再去做布尔运算
3、按住小黑去复制，是在一个图形里复制，复制多个图形在一个图形里，可以用布尔运算旁边对齐去做。
4、画完一个矢量图形，按shift键不松手，在里面再画几何图形是添加，按alt键不松手再画几何图形是减去
5、小黑和小白如何快速切换，按⌘键互相快速切换
6、Shift +ctrl+⌘+t可以重复复制上一步旋转。（微信朋友圈icon的绘制）
7、⚠️ps里缩放图标的时候要点击锁链，比例缩放
8、⚠️注ps里的水平分布等对齐功能，非常好用
PS设计图标怎么规范化
如何做到像素对齐：
1、拖拽参考线的时候（ps）按住shift键，正常视图是以5为单位，放大视图的话是以1为单位
2、Ps/AI里都可以把网格打开。首选项，找到网格，设置网格和子网格
3、ps窗口菜单里把像素网格打开，这样放大的情况下也能看到像素格子
4、除了以上的操作，还是免不了会出现不能贴齐像素网格的情况：
⚠️图标的尺寸一定要取整数，不能出现半像素
⚠️图标的尺寸奇数和偶数的问题（比如：偶数圆的圆心才能在中心），一些关键部分尽量取奇数
AI做图标的技巧：
一些快捷键：
⌘+2锁定 ⌘+⌥+2取消锁定
⌘+3 隐藏所选对象 ⌘+⌥+3显示所选对象
⌘+Y 显示路径
Shift + 向右箭头键、向左箭头键、向上箭头键或向下箭头键：以用户定义增量的 10 倍移动选区
⌘+alt+shift+v，一键复制到所有画板
⌘+5 把描边变成参考线
⚠️⌘+J 连接锚点（路径连接），快速连点成线
AI的一些重要的功能：
0、实时上色工具，哪里没有颜色点哪里～so easy，按住alt键进行源目标吸色
1、快速画一个圆角矩形
可以选择圆角矩形，按键盘的方向键右键，能够达到圆角最大值
2、变化窗口下有两个选项，缩放圆角是如何缩放圆角的半径都不会变；缩放描边和效果是如何缩放，描边的粗细不边（起到类似扩展后的效果）
变换窗口下的选项
3、直线工具
用极坐标网格工具，拖住左键不松手，上下键调节晕圈数量，左右键调节直线的数量，做wifi图标
4、用锚点工具或者钢笔工具按住alt键，能够把锚点两边变直线，再结合AI的圆角按钮功能能够快速将一个圆做成坐标icon
按住alt键
5、小心心icon有3种画法
A、两个面型圆形删点，拖动描边变一点弧度，再结合圆角按钮功能调整
B、正方形+2个圆形相切
C、用粗描边绘制两端线条，选择圆滑描边。
6、AI里的默认蒙版并不好用
可以用绘图模式的三种进行icon绘制
第一种是默认的【正常绘图】
第二种是【背景绘图】，所有的图形只会出现在选中图形的后面
第三种是【内部绘图】，所有图形都会出现在图形里面，像块蒙版
调整蒙版里的图像，可以在蒙版选项里面选，释放蒙版
7、用宽度工具（shift + W）
宽度工具用来画树叶
8、定义初始形状
在AI里点选上一个形状或者描边的属性，新建后能够带上上一个的属性
9、吸管工具，可以吸属性
按住shift用习惯工具是单独吸色
10、形状生成器：不仅经常用做logo，也经常用做图标也很多还有插画
11、设置icon
1、做设置icon，先做一个圆，再做一个矩形放在圆形的上方，选中矩形，点击旋转工具，按住alt键，把矩形上的中心点放在圆形的中心，松开鼠标就可以在弹窗里设置角度，因为有6个，所以是60度，按住ctrl D，按五次，然后在形状生成器上相加。
2、用形状生成器也可以做成设置icon
3、三个元素想要以其中一个对齐，在全部框选的情况下，点击一个，它就变粗了，然后再点击对齐，所有的元素就会以它为居中对齐
旋转（复制）+重复上一步+形状生成器+渐变工具做出来的形状.
步骤：做一个渐变圆，向前复制一个圆，水平和左对齐，保证小圆在大圆的圆心外面一些，这样中心留出来的形状更大。选中小圆，按住旋转工具，点击大圆的圆心（点不中可以利用参考线），进行旋转复制，按重复上一步，5次。全选，用形状生成器做出来这个图形，如果形状生成器不好用，放大画布检查是不是没有想切。
12、徽章icon
A、AI里面也支持图层样式，把每一层拖动在图形样式面板里即可
B、怎么画出的徽章的形状，在五角星的基础上按住鼠标不同，键盘上下键调节边数，出现三角形的时候，按住cmd键则可以一键画出徽章外形。
C、路径>偏移路径，可以向前复制一个不规则图形的，向里复制or向外复制。
偏移路径的另一种用途👆
11、超级椭圆
效果<变形<膨胀，第一个调节钮，往左调节。
12、用网格工具可以做出渐变壁纸
13、飘键画出逼格的几何图形
14、混合工具
线的混合
面的混合
替换混合轴
AI设计图标怎么规范化：
首先注意：用AI做图标，用居中描边，因为外描边断点后会变成居中描边，尺寸发生变化！！
1、打开像素网格，如果要做64*64像素的，就设置成网格64和子网格64。
2、在视图里，打开像素视图模式，来验证图标是不是出现像素不对齐的情况（打开后能像PS里看到像素虚边）
⚠️像素的虚边是因为视图的近！它本身是不虚的！矢量图形出现了虚边不要紧张，回到100%视图就妥了。
3、打开像素对齐模式，右上角的小按钮，点击小按钮后软件能够自动把一些没对齐的像素对齐。
像素对齐按钮
打开像素预览模式，放大看有没有虚边，用小白工具手动调整。
5、在AI里面绘制栅格
另一个用AI做图标的方法：一个画板是一个图标的尺寸，绘制一个外框和内框，选1像素的描边，然后快捷键，⌘+alt+shift+v，一键复制到所有画板，⚠️按ctrl+5能够把描边一键变成参考线！！！！！！
网友评论