小白教程!如何从零开始绘制一枚线性图标(实战篇) - 优设-UISDC

小白教程!如何从零开始绘制一枚线性图标(实战篇)

2015/09/04 34112评论区

head-first-design-line-icons-1

编者按:今天的教程除了一枚线性图标的操作演示,更重要的是帮同学们领会UI设计师必备的化繁为简,抽丝剥茧的能力。初学图标绘制的同学,绝对需要里边提到的这个方法~

几何

对于初学者来说,我们可以这样理解,任何东西都可以用这四种图形组合而成:

shapes

当我想要用图标来表现一个物体时,我会先仔细观察,然后尽可能将其拆分为最简单的形状。譬如,水滴可以用一个三角形和一个圆圈组成。

drops

心形图标可以由两个圆圈和一个三角形组成。

heart

我通常会使用Adobe Illustrator来制作这些图形。矢量图形的线条粗细、节点以及图形之间的关系都非常易于控制。在Illustrator中,图形和线条间的互相转换也非常便捷。这些信息也许非常基础,但却是我制作大多数,甚至是复杂图标的方法。下面这个例子细节略多,是我最近为bill of rights所做的图标,其中,我也完全使用了相同的方式。

billofrights

界面图标

我最近正在为一款超赞的iPhone应用Parker Planner制作一组图标。我很喜欢这个项目,这组用户界面图标的要点是在易于理解和功能性强的同时,具有美观性,帮助用户在这款略为复杂的应用中进行导航。

parkerplanner

下面,让我们来细看一下这些图标,并且分析我的制作步骤。我们就以垃圾桶图标为例,它就是由三个圆角矩形和三根线条组成的。

1、选择圆角矩形工具

rectangle

2、拖拽鼠标,画出形状

draw

3、根据所需调整线条粗细

stroke

我通常会在整套图标中选用一到两种粗细的线条。

thickness

这样可以保持所有图标的整体性和一致性。

4、画出另一个圆角矩形,作为盖子。

lid

5、再用一个圆角矩形画出盖子的把手。

handle

6、擦去把手底部的半个圆角矩形。

erase

7、现在,在桶身上绘制三条直线。

3lines

8、好啦,一个垃圾桶图标就此诞生!你可以根据所需,调整颜色和线条粗细。

adjustment

另有一些有用的工具,对制作图标很有帮助——路径查找器:可对各类形状进行切割、组合以及合并。

pathfinder

线条/填充工具:形状的线条色和填充色之间的转换。

stroke-fill

再有我最爱的工具——线条面板:将图形转折点由直角转为圆角。

how-to-create-effective-icons-17

当完成一整套图标设计后,我通常将它们肩并肩放成一排,来检查是否有哪个特别奇怪,随之进行调整。

set

最后,我会将它们置入应用进行检验,看看它们是否作用良好。

review

总结一下,制作优秀图标不止是学习Illustrator的使用诀窍,当然,熟练掌握软件也是必不可少的。更重要的是,你要练习将所见的事物分解为简单的图形。这项关键技能是助你成为图标设计大师的秘诀!加油!

【信息图达人的必由之路】:

再来一波工具:
《拿走不谢!21款超实用的酷炫「数据可视化工具」》

设计方法在此:
《超实用!四个方法帮你搞定数据可视化界面设计(附神器)》
《当红设计趋势!揭秘信息可视化图表的设计方法》

原文地址:Awwwards
译文地址:doo-plus

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量100万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

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

发表评论 加载中....

评论加载中....

uisdc

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

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

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

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