当前位置: 沃微圈 > 互联网 > 产品设计 >

UI Design Icon设计

来源:转载

 

        我给大家介绍的是UI即User interface用户界面)设计中Gui(Graphics User Interface 图形用户面)

  有时也称为WIMP=Window/Icon/Menu/Pointing Device 窗口、图标、菜单、指点设备中的Icon设计和心得。

Icon是界面不可缺少的重要组成部分,用可识别的图标来代表软件功能及相关信息。在制作Icon前首先要对你所制作的Icon功能有详细地了解,对其基本的可识别和表达的含义要有一个广泛性的识别概念!这里以Windouws的窗口图标为例

 

   以图表搜索功能为例!大家可以看到是一个放大镜。这个形状已经成为人们很容易识别的方式。所以在制作这样的图表时对其表现方式不能有很大的变动,否则再已经习惯使用的用户面前很难识别。不过你可以从几个方面招收制作!比如形体,颜色,质感,合同类型比较!例如

                      

以Window为标准   在形体和颜色上的改变 质感上的改变 同类型的变形。

不过在制作图表的过程中形体要简单整体!应为图标主要是为应用而创作,如果32x32像素以上,形体可以表达更多和复杂!但是要用于16x16像素或24x24像素那末形体就要简单明了对比要强,色彩归纳要好!

简而言之就是“简单的形体加上完美的细节”。

例如观赏图表:  

                              

            这类图表缩小之后会影响其效果。自身花纹会看不见甚至模糊。

例如:

                                     花纹模糊消失

                64x64      32x32   24x24 16x16

 

实用行Icon要根据其实用性制作,如果有必要的话16x16这种尺寸要重新用像素点画。

         例如:                            这种图标失真情况较少

                         64x64      32x32   24x24 16x16

        

16x16点画图表要求更为严格点画要清楚!识别力要强。

        

例如:                        在使用的软件里多用这种图表。

 

《图标画法》

绘画图标我主要用illustrator和photoshop这两种软件,当然如果你精通其它软件也可以使用。首先illustrator这种失量软件造型能力比较高我一般用它来造型和做透视,然后再导入photoshop上色!这是因为illustrator上色交干!如果能用它表达较好也可以直接上色!

例如 :

用钢笔勾出所画物体形状,要注意透视,角度不要过大!否则会影响识别性!

   

然后上色,我用的都是渐变颜色当然您也可以用photoshop上色。

然后做高光,高光一般用白色勾好的形体降低透明度。高光大小因个人而议。我一般降到36%。

最后用Axialis IconWorkshop 转化成图标文件和尺寸!但在之前要存成png128x128。

 

效果:                            

 

最后一点,很强的透视不适合作16x16的Icon

 

以上就是我制作Icon时的一点心得,希望能给大家带来制作时的方便。

分享给朋友:
您可能感兴趣的文章:
随机阅读: