[UI设计基础-icon图标设计.docVIP

UI设计基础-icon图标设计 我们今天来说一下基于布尔运算下怎么绘画设计一些icon图标，作为新手我们起初不应该起点太高，先不用自己设计图标，我们可以在网上找一下大师设计的图标进行临摹，等我们熟练掌握技巧以后再开始自己设计。 我们用网上的一张icon来做事例: 就拿这张图片中的第一个小图标来演示 首先第一步:分析图标: 如图表示,图标放大后实际上是分为了两层,里边是一层外边一层,里边相对的比较简单,是一个圆环,不过在细节上我们要注意,里边的这个圆环在端口处是圆角,而不是有楞的边,外边的图形相对复杂一些,我们可以看成半圆环与正方形的结合. 这里我们要注意的:在我们设计icon的时候要先确定它的边的像素,如这个临摹图就是4像素的. 下面我们来说一下如何临摹 一,外图绘制 1,确定整体大小 我们可以看得出来,这个icon实际上是一个圆形如图所示: 我们查看它的信息,可以看到这个圆形的大小是44乘44的像素,这样我们就可以开始自己的临摹了. 2,画外图层 如图我们画一个44*44像素的圆:然后外层图形的宽当初我们看了是4像素,那么我们就可以再做一个小圆,让大圆与小圆之间的宽为4像素. 当会出外图层大致轮廓后,我们知道,最开始外图层是由几个半圆环和矩形组成的,同样是查看半圆信息,其实是直径为22像素的圆,所以我们就可以先画出一个直径为22像素的圆.然后同样的步骤我们再在这个圆形当中做一个小圆,两个圆形的差距为4像素,最终的图形结果如图所示 3,确定位置 我们看临摹的原图,查看信息可以看出,上下两个圆的圆心是在一条直线上的,然后就是打圆环与小圆环之间的距离,他们其实是没有距离的,然后在布尔运算中,我们知道,这两个圆环其实应该是一个图层,下面我们就把这两个圆环的图层合并,得出来的效果图就是这样的. 4,完成图形 这个时候为了保证图形的规范我们要用到辅助线,下面是一个圆形了,我们看原图是有6个圆形的,下面我们可以用这种方法:首先将小圆的圆心移动到大圆圆心处,然后以最新的圆心为远点复制出六个圆,效果图如下.然后把没用的部分切掉,就成了最终的图形了. 二,内图绘制 绘制步骤跟外图一样,做一个圆环如图所示: 然后就是缺口处的圆形切口,我们可以先用矩形工具绘制一个三角形,先切除一个有棱角的切口,如图所示: 然后我们画一个4像素的小圆,盖在上面就形成了 好了这个小图标基本也就完成了,从中我们将了一些特殊图形的绘制过程,当然这些过程都是在Photoshop上操作完成的,其中运用了很多布尔运算的原则,做icon图标如果我们是新手就要先从临摹别人的开始,当掌握了熟练的技巧以后再开始自己创造,这样是非常有效率的. 本文档由承辉学院原创