想想图标绘制也是有历史的,从刚开始ps用面切法利用布尔运算去切,有时候线条也是用面切面得到。
随着线性图标的火爆和遍及,开始放弃面切法,转用钢笔工具直接绘制,还可以很好的掌握线的直角和圆角。
当你会利用Ps绘制图标了,换成ai你会创造更加的快捷方便。
随着Sketch软件在界面设计中有一席之地,在Sketch里快速绘制图标也是设计师须要节制的一门技能。

图标的绘制方法有面切法,钢笔绘图法,锚点法,圆切法。

下面会从Photoshop、Illustrator、Sketch三个软件去细讲基本软件工具。
绘制案例想了良久要含有基本的知识点,利用更多的工具。
末了选择的图标为齿轮、旗子暗记,个中齿轮是最经典的案例了,也是绘制图标的必修课。

实例讲解PSAISketch绘制UI图标的技巧

一、 Photoshop篇

在ps里面绘制图标利用的基本工具有小白、小黑、布尔运算、钢笔工具、锚点。

1.1 第一步打开ps,ctrl+k,勾选将矢量工具与变革和像素网格对齐。

1.2 小黑、小白二人转

1.3 钢笔工具、贝塞尔曲线

贝塞尔曲线很多写的文章太官方了,不太懂,也不知道如何下手。
我还是总结我事情利用中该当把稳哪几点。

a、锚点俩边的手柄要保持在同一水平线上。
倾斜的锚点的手柄也要保持在同一水平线上。

b、当前手柄的长度不能超越下一个锚点的水平线。

c、高下旁边最边上切实其实定是锚点存在的点,其他地方锚点的选择须要多练习才能找到得当锚点的位置。

c、钢笔绘制的时候只管即便不要让俩个锚点靠的太近,会让俩个锚点的手柄没有施展的空间。

末了如果你觉得贝塞尔曲线还是很难,可以先用Illustrator里面的钢笔工具绘制,用多了就好了。
我之前也觉得Photoshop里的钢笔工具绘制好难用,本日写教程做案例试了试还是很好用的,曲线也可以调度的很柔美。

1.4 布尔运算

布尔运算是通过绘制规则的形状进行合并、减去、相交、打消等办法得到新的形状。

1.5 主题图标面板绘制

在主题设计的时候大神们的底板用的都很有特色。

1.6 齿轮、旗子暗记案例演示

二、Illustrator篇

在ai里面绘制图标利用的基本工具添补、描边、钢笔、路径查找器、形状生产器、对齐、锚点圆角、扩展。

2.1 cc2015自带直角变圆角。

2.2 路径查找器的形状模式等同于ps的布尔运算(上面已讲),路径查找器下的6个工具在平时利用较少以是就忽略,感兴趣的自己研究下。
钢笔锚点和ps利用是一样的。

2.3 路径描边可以通过扩展让线变成面,但是在绘制线性图标时不要把线进行扩展,由于放大缩小不会改变线的粗细,扩展成面会随着放大缩小而发生变革。
有时候我们在绘制线性图标不好做的曲线,可以考试测验把这个形状画出来,然后再变成描边就ok了。

2.4 在绘制对称图标的时候,有时候我们只须要绘制一半,通过镜像复制,然后通过对齐-垂直或水平分布间距就可以很好的闭合在一起。
( 对齐-显示选项-对齐关键工具-垂直或水平分布间距 )

2.5 形状生产器工具,直接可以绘制有闭合可能的所有形状。

三、 Sketch篇

在sketch里面绘制图标利用的基本工具编辑、旋转、钢笔、剪刀、布尔运算、形状、变平。

四、 Ai制作好如何转到Ps和Sketch?

4.1 Ai制作好转到Ps,在Ai复制备份一个,然后工具-扩展,ctrl+c复制,ctrl+v粘贴到Ps里面选择形状图层,不要选择智能工具。
再用小白工具调度细节,让每个锚点都和像素网格对齐。

4.2 Ai制作好转到Sketch,ctrl+c复制,ctrl+v粘贴到Sketch,调度参数尽可能是偶数整数。
由于大量存在小数点的问题。
改变数值还是要看下一图标整体觉得。

五、 如何达到视觉平衡?

很多人刚开始不会说按照规范来,紧张在固定大小里面绘制就好了,实在这样也可以,但是终极还是个别微调图标达到视觉上的统一。

比如在5656px固定大小的区域绘制好全部图标,不要超出这个范围。
然后整体看哪些视觉比重大须要缩放,缩放因此2的倍数放大缩小。

56-2的倍数 比如56px,54px,52px…

六、 如何定义规范?

比如在一定大小内,如何制订出一像素?

以4848大小为例。
看似留了一像素,高下旁边还是俩个像素,跟上面的视觉平衡是一样的,都因此2像素为一个基准。
这种规范大一点的尺寸也是适用的比如8888px。

七、 如何统一风格?

图标的风格我在《如何系统学习功能图标》基本都概括出来了,可以剖析总结每个风格的特点,快速的制作,也有不少人发我看他们绘制的图标,会用到俩三种风格同时用到图标上面,还有便是总结出来的还没考试测验学会就开始自己去考试测验新风格,只管即便还是不要先去考试测验新的风格,之前整理的该当够用了。

总结虽然讲的都是大略的基本教程,但是也是必须要节制的,节制上面根本教程不单单只适用于图标,在插画,图形绘制中都可以用到。