游戏图标设计--设计思路与绘制步骤
图标定义:
广义:图标是指具有明确指代含义的图形。
侠义:具有指代意义的图形符号,具有高度浓缩并快捷传达信息,便于记忆的特征。
图标分类
从表现上:小图标 大图标
小图标:尺寸 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个、
建立图标的关系:
在一个游戏中会有大量的图标。如何把这些图标进行有序的归纳,让图标更为有序显得非常重要。这个时候很有必要设定规律建立图标的关系。
一些建立图标关系的方法:
背景处理:
对不同类别的图标背景差异处理,可以区别图标的关系
递进关系:
在游戏中常常会有同类物品不同等级的图标,