图标学习的课程笔记1

自己对图标设计的理解:分为几个大块:

图标的规范、制作技巧、审美、设计分类以及输出

图标学习的课程笔记1_第1张图片
图标学习脑图

最近两天在看图标课程。

购买和下载了课程,看了像素范儿和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 连接锚点(路径连接),快速连点成线

图标学习的课程笔记1_第2张图片

AI的一些重要的功能:

0、实时上色工具,哪里没有颜色点哪里~so easy,按住alt键进行源目标吸色

1、快速画一个圆角矩形

可以选择圆角矩形,按键盘的方向键右键,能够达到圆角最大值

2、变化窗口下有两个选项,缩放圆角是如何缩放圆角的半径都不会变;缩放描边和效果是如何缩放,描边的粗细不边(起到类似扩展后的效果)

变换窗口下的选项

3、直线工具

用极坐标网格工具,拖住左键不松手,上下键调节晕圈数量,左右键调节直线的数量,做wifi图标


图标学习的课程笔记1_第3张图片

4、用锚点工具或者钢笔工具按住alt键,能够把锚点两边变直线,再结合AI的圆角按钮功能能够快速将一个圆做成坐标icon


图标学习的课程笔记1_第4张图片
按住alt键


图标学习的课程笔记1_第5张图片


5、小心心icon有3种画法

图标学习的课程笔记1_第6张图片

A、两个面型圆形删点,拖动描边变一点弧度,再结合圆角按钮功能调整

B、正方形+2个圆形相切

C、用粗描边绘制两端线条,选择圆滑描边。

6、AI里的默认蒙版并不好用

图标学习的课程笔记1_第7张图片

可以用绘图模式的三种进行icon绘制

第一种是默认的【正常绘图】

第二种是【背景绘图】,所有的图形只会出现在选中图形的后面

第三种是【内部绘图】,所有图形都会出现在图形里面,像块蒙版


图标学习的课程笔记1_第8张图片


调整蒙版里的图像,可以在蒙版选项里面选,释放蒙版

7、用宽度工具(shift + W

图标学习的课程笔记1_第9张图片

宽度工具用来画树叶


图标学习的课程笔记1_第10张图片

8、定义初始形状

在AI里点选上一个形状或者描边的属性,新建后能够带上上一个的属性

9、吸管工具,可以吸属性

按住shift用习惯工具是单独吸色

10、形状生成器:不仅经常用做logo,也经常用做图标也很多还有插画

11、设置icon


图标学习的课程笔记1_第11张图片

1、做设置icon,先做一个圆,再做一个矩形放在圆形的上方,选中矩形,点击旋转工具,按住alt键,把矩形上的中心点放在圆形的中心,松开鼠标就可以在弹窗里设置角度,因为有6个,所以是60度,按住ctrl D,按五次,然后在形状生成器上相加。

2、用形状生成器也可以做成设置icon


图标学习的课程笔记1_第12张图片

3、三个元素想要以其中一个对齐,在全部框选的情况下,点击一个,它就变粗了,然后再点击对齐,所有的元素就会以它为居中对齐


图标学习的课程笔记1_第13张图片

旋转(复制)+重复上一步+形状生成器+渐变工具做出来的形状.

步骤:做一个渐变圆,向前复制一个圆,水平和左对齐,保证小圆在大圆的圆心外面一些,这样中心留出来的形状更大。选中小圆,按住旋转工具,点击大圆的圆心(点不中可以利用参考线),进行旋转复制,按重复上一步,5次。全选,用形状生成器做出来这个图形,如果形状生成器不好用,放大画布检查是不是没有想切。


图标学习的课程笔记1_第14张图片

12、徽章icon


图标学习的课程笔记1_第15张图片

A、AI里面也支持图层样式,把每一层拖动在图形样式面板里即可


图标学习的课程笔记1_第16张图片

B、怎么画出的徽章的形状,在五角星的基础上按住鼠标不同,键盘上下键调节边数,出现三角形的时候,按住cmd键则可以一键画出徽章外形。

C、路径>偏移路径,可以向前复制一个不规则图形的,向里复制or向外复制。


图标学习的课程笔记1_第17张图片

偏移路径的另一种用途

11、超级椭圆



图标学习的课程笔记1_第18张图片

效果<变形<膨胀,第一个调节钮,往左调节。

12、用网格工具可以做出渐变壁纸


图标学习的课程笔记1_第19张图片

13、飘键画出逼格的几何图形

14、混合工具

线的混合


图标学习的课程笔记1_第20张图片

面的混合


替换混合轴

图标学习的课程笔记1_第21张图片

AI设计图标怎么规范化:

首先注意:用AI做图标,用居中描边,因为外描边断点后会变成居中描边,尺寸发生变化!!

1、打开像素网格,如果要做64*64像素的,就设置成网格64和子网格64。

2、在视图里,打开像素视图模式,来验证图标是不是出现像素不对齐的情况(打开后能像PS里看到像素虚边)

⚠️像素的虚边是因为视图的近!它本身是不虚的!矢量图形出现了虚边不要紧张,回到100%视图就妥了。

3、打开像素对齐模式,右上角的小按钮,点击小按钮后软件能够自动把一些没对齐的像素对齐。

像素对齐按钮

打开像素预览模式,放大看有没有虚边,用小白工具手动调整。


5、在AI里面绘制栅格

另一个用AI做图标的方法:一个画板是一个图标的尺寸,绘制一个外框和内框,选1像素的描边,然后快捷键,⌘+alt+shift+v,一键复制到所有画板,⚠️按ctrl+5能够把描边一键变成参考线!!!!!!

你可能感兴趣的:(图标学习的课程笔记1)