自己对图标设计的理解:分为几个大块:
图标的规范、制作技巧、审美、设计分类以及输出
最近两天在看图标课程。
购买和下载了课程,看了像素范儿和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
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能够把描边一键变成参考线!!!!!!