如何绘制功能性图标?来看资深设计师的全面总结! - 优设-UISDC

如何绘制功能性图标?来看资深设计师的全面总结!

2018/06/18 44610评论区

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

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

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

一、 Photoshop篇

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

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

2. 小黑、小白二人转

3. 钢笔工具、贝塞尔曲线

贝塞尔曲线很多文章写的太官方了,不太懂,也不知道如何下手。我还是总结我工作使用中应该注意哪几点。

  • 锚点两边的手柄要保持在同一水平线上。倾斜的锚点的手柄也要保持在同一水平线上。
  • 当前手柄的长度不能超越下一个锚点的水平线。
  • 上下左右最边上的肯定是锚点存在的点,其他地方锚点的选择需要多练习才能找到合适锚点的位置。
  • 钢笔绘制的时候尽量不要让两个锚点靠的太近,会让两个锚点的手柄没有施展的空间。

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

4. 布尔运算

布尔运算是通过绘制规则的形状进行合并、减去、相交、排除等方式得到新的形状。

5. 主题图标面板绘制

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

6. 齿轮、信号案例演示

二、 Illustrator篇

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

1. cc2015自带直角变圆角。

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

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

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

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

三、 Sketch篇

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

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

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

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

五、 如何达到视觉平衡?

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

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

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

六、 如何定义规范?

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

以48*48大小为例。看似留了一像素,上下左右还是两个像素,跟上面的视觉平衡是一样的,都是以2像素为一个基准。这种规范大一点的尺寸也是适用的比如88*88px。

七、 如何统一风格?

图标的风格我在《如何系统学习功能图标?来看资深设计师的全面总结!》基本都概括出来了,可以分析总结每个风格的特点,快速的制作。也有不少人发我看他们绘制的图标,会用到俩三种风格同时用到图标上面,还有就是总结出来的还没学会就开始自己去尝试新风格,尽量还是不要先去尝试新的风格,之前整理的应该够用了。

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

欢迎关注作者的微信公众号:「水手哥学设计」

图片素材作者:Laura Reen

「图标设计新手指南」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/how-to-draw-functional-icons

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch UI 转场动效 界面设计 平面设计 交互设计师 设计师 扁平化设计 排版布局 设计师专访 职场 视觉设计 设计流程 用户体验设计 素材下载 配色 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 产品设计 设计规范 设计趋势 动效设计 psd下载 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里