网站首页网站地图google地图百度地图学习库RSS在线PSPS联盟素材下载  PS视频教程专题 PS爱好者教程网www.psahz.com PS教程自学网QQ群

UI图标手绘基础入门教程:学习如何从零开始绘制漂亮的线性图标

时间:2015-09-06 18:43 来源:教程资料 作者:UI图标手绘基础入门教 阅读:

PS手绘基础入门教程:学习如何从零开始绘制漂亮的线性图标,今天的教程除了一枚线性图标的操作演示,更重要的是帮同学们领会UI设计师必备的化繁为简,抽丝剥茧的能力。初学图标绘制的同学,绝对可以在这里学到不少东西。

几何

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

UI图标手绘基础入门教程:学习如何从零开始绘制漂亮的线性图标

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

UI图标手绘基础入门教程:学习如何从零开始绘制漂亮的线性图标

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

UI图标手绘基础入门教程:学习如何从零开始绘制漂亮的线性图标

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

UI图标手绘基础入门教程:学习如何从零开始绘制漂亮的线性图标

界面图标

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

UI图标手绘基础入门教程:学习如何从零开始绘制漂亮的线性图标

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

1、选择圆角矩形工具

UI图标手绘基础入门教程:学习如何从零开始绘制漂亮的线性图标

2、拖拽鼠标,画出形状

UI图标手绘基础入门教程:学习如何从零开始绘制漂亮的线性图标

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

UI图标手绘基础入门教程:学习如何从零开始绘制漂亮的线性图标

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

UI图标手绘基础入门教程:学习如何从零开始绘制漂亮的线性图标

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

PS笔刷下载 PS滤镜下载 PS形状下载 PS样式下载 PS动作下载 PS图案下载
相关教程