游戏图标设计--设计思路与绘制步骤

发表于2015-07-31
评论3 2.7k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏美术行业精英群

167422913
一.理论基础:

图标定义:

广义:图标是指具有明确指代含义的图形。

侠义:具有指代意义的图形符号,具有高度浓缩并快捷传达信息,便于记忆的特征。

 

图标分类

从表现上:小图标  大图标

小图标:尺寸  16*16    24*24  32*32  48*48

 

大图标:64*64   128*128  256*256   512*512

 

游戏图标的分类:

品牌图标(游戏logo)  功能图标 物品图标   装备图标 技能图标

 

品牌图标,游戏loge,游戏快捷方式,注重识别性和唯一性

功能图标,主要用于表示某一类功能或操作的图形标识,通常会有组有规律的在某一功能模块出现。功能图标强调识别性,概括性。相比单调的文字,图标的识别性更强更有趣。

 

 

 

物品图标:游戏中使用的物品的标识,通常比较具象。

 

装备图标:用于表现游戏的时装装,防具,饰品,武器的图形标识。

 

技能图标:主要是用于玩家释放技能功能性图标,他也可以分2类

主动技能,被动技能。

2.图标设计流程:

这里介绍的是一般流程,具体可以根据自身习惯来取舍。

寻找隐喻:也就是找到最能表达所要设计图标含义的具体事物。

比如搜索—放大镜    首页—房子

             

 

绘制草图:可以用纸笔画出图标的草图,根据图标实际尺寸和使用的位置来绘制,如果是功能图标,力求简约识别性强,草图可简练些。而道具或武器这类较大的图标则可以绘制更细致些。

 

 

 

确定风格:根据不同的游戏整体风格确定图标的风格。

 

写实风格:多用于写实类3D网游。如,御龙在天,笑傲江湖。

 

卡通风格:儿童游戏或手游用的较多,洛克王国,QQ飞车

魔幻风格:魔幻题材的游戏,图标相应的也会偏魔法感觉,如英雄无敌,魔兽世界。

单色风格:主要用在系统图标,偏重易用性。

 

 

绘制图标:这个时候不用拘泥于用什么软件,用自己熟悉的软件即可。

本人的图标绘制步骤:

导入草图》调整抠出草图》绘制明暗素描关系》上颜色》添加质感》调整效果》导出完成

 

 

图标绘制案例:

基于智能对象的绘制方法

Photoshop智能对象可以不损失图像质量的情况任意缩放,同时在智能对象的双画布的绘制平台上,非常有利于图标设计师的修改和快速查看图标实际使用尺寸的效果。通常我个人喜欢在智能对象中用512x512像素的画布进行绘制。

 

绘制遵循从大到小,从整体局部的原则。

1.英雄步骤图:

1.      构思/草图

我们可在纸上绘制多个方案,初步方案不用太细致,主要表达构思,和对图标的形体结构的探索。然后选择满意的方案在ps进行处理,并将满意的方案深入刻画。

  

 

 

 

 

2.具体绘制阶段

1 细化线稿 1

将绘制好的草图粘帖到智能对象中,并处理成线稿,可以填充一稍微深点的颜色,我习惯用黑色或褐色,将线稿稍微细化下。

2.      建立明暗关系:2-3

在线稿图层下一层新建图层作为明暗层,用大而湿的笔触来铺出图标的明暗关系,这一步请忽略细节。

铺好大的明暗关系就可以开始塑造大的体积感,从主要部分入手,把英雄的头部和肩部的的明暗体积表现出来。

 

细节的刻画:4-6

可从最重要的部分开始刻画,脸部》盔甲》肩部  循序渐进。这个时候可以在线稿的上一层新建图层进行细致刻画。这时候笔触可以细一些硬一些。把英雄的各个部分都刻画一边,在绘制的时候记得多保存。以便切换母文件查看整体效果。确保每个细节都融合在整体中。

 

当整体都刻画一遍之后就可以对重点部分脸部进行更细致的刻画,使得这个部分最细致最精彩,其他部分可以相对弱化些,在刻画细节的时候需要不时的调细小的结构。

 

 

 

 

着色:固有色》环境色》光源色。

在素描层上方新建颜色层,以叠加的方式把基本颜色绘制出来,着色的顺序也是从大关系开始,把主要的颜色绘制出来,这一步只要把英雄的固有色绘制出来。可适当调整色彩的饱和度。

 

基本色完成后再叠一层光源色和一层环境色,此时要注意冷暖对比,一般来说受光面为冷色,被光面为暖色,或者受光面为暖色,背光面为冷色。

 

 

添加材质:

颜色差不多了,就可以叠加点材质,这个图标重点是金属质感的表现,找到合适的素材适当的加以处理,根据具体情况调整素材颜色和明暗度。去掉多余部分。

  

 

 

 

    

 

 

调整完成:

当颜色细节绘制完成以后,就可以进行整体的调整,强化重点部分,弱化次要部分。

回到母文件,可以根据情况适当的对智能对象层加上锐化效果,对智能对象的锐化是随意调整锐化百分比的。

 

 

 

长枪技能步骤图:

准备:在开始绘制技能图标前,有必要讲下技能图标的设计的要点和我最经常使用的技巧和方法。

一般来说,技能图标可以分为2大类,一类是物理技能,一类是法术技能,这样的话,在表现的方式上就有区别了。   物理技能在表现上比较具体实在,通常会用武器加一些特效来表现,颜色也通常是红色,绿色,黄色。而法术技能的表现上就会比较虚幻,给人的想象空间更大,有种神秘莫测的感觉,通常颜色以紫色,蓝色为主。

 

 

方法很简单,也是基于智能对象绘制完成。

由于方法和英雄绘制的方法相同,具体绘制不再赘述。

 

草稿阶段

 

         

 

 

 

明暗关系处理阶段,

  

 

 

 

 

 

 

 

着色:

  

 

 

 

 

长枪绘制好了后,可以在底层上绘制出放射状的线条,以便把枪的速度和伤害力表现出来。

    

 

 

调整完成:

 

 

 

三:游戏图标设计心得体会。

可识别原则

图标映射关系尽量直接简单,从生活,专业,心里找到最短的概念连接,简单来说图标要能最准确的表达相应的操作。

可识别性原则:

不同类型的图标间的差异性尽量拉开。要让用户一眼能感觉图标的差异性,帮助用户快速而准确的辨认图标。

 

 

统一原则:

相同功能的图标尺寸要保持一致。

同一系统中,光源一致

 

简洁原则:这个原则通常多用于功能图标。

不用过分追求图标的精细度,图标过分精细会弱化图标的识别性。

 

 

组成图标的要素也尽量简洁,最好不要超过3个、

 

建立图标的关系:

在一个游戏中会有大量的图标。如何把这些图标进行有序的归纳,让图标更为有序显得非常重要。这个时候很有必要设定规律建立图标的关系。

一些建立图标关系的方法:

 

背景处理:

对不同类别的图标背景差异处理,可以区别图标的关系

 

递进关系:

在游戏中常常会有同类物品不同等级的图标,

 

 

 

 

 

 

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台