设计师必看!如何将色彩正确运用到游戏中?

作为一名设计师,相信大家对色彩都有了解,那么我们今天来讲一下色彩在游戏中的运用和他们之间的关系。
 

 


色彩心理:
 


色相环是由原色、二次色和三次色组合而成。色相环中的三原色是由红、黄、蓝,在环中形成一个等边三角形。二次色是橙、紫、绿,处在三原色之间,形成另一个等边三角形。三次色红橙、黄橙、黄绿、蓝绿、蓝紫和红紫六色,三次色是由原色和二次色混合而成。右边的图片是色相,明度,饱和度之间的关系。同类色30度,对比色120度,互补色180度,邻近色90度。

色彩情绪:

想要唤起情绪,色彩是有效的方式,下面的场景同一个构图,运用不同的色彩搭配营造出截然不同的色彩氛围,也会给人一种不同的心里感受。
 


品牌效应:

《超级玛丽》经典的蓝色天空,橘色的瓷砖背景色彩互补,辨识度很高,玛丽红色帽子,白色手套,红色上衣搭配蓝色裤子,形成鲜明的对比,经典的配色,有很明显的品牌辨识度。

《超级肉肉哥》这个游戏中通过收集绷带,完成异空间解锁,使用血红的肉块儿作为主角,运用饱和度极高的形象,搭配不同场景的颜色的场景,都与主角颜色形成强对比。

《乐克乐克》女性向的一款休闲游戏,橘黄主色调,颜色鲜艳,操作简单,画风可爱。

《太鼓达人》鼓的配色,场景的颜色,鲜艳丰富,整体高饱和的色调,凸显出热烈,热闹,欢快的场景。

《阴阳师百闻牌》以冷色调为主,大量的深蓝深绿和少量橙色黄色,有种东方壁画的感觉,界面边框大多是是降低透明度的蓝紫色,配合着淡淡的金色,简洁又清新,画面精致,冷紫色的画面有明显的品牌效应。

《冰汽时代》硬核写实的游戏,画面的色彩对比相对会弱一些,视觉上更接近现实。

品牌颜色


视觉层级:

色彩让层次在视觉上更清楚,像绘画和电影,导引视点集中在重要的东西上。
 

《地狱边缘Limbo》以明度作为焦点

《明日方舟》有色和无色进行搭配将重点信息用色彩来标识

《机动都市阿尔法》以饱和度作为焦点


进度感:

色彩可以给玩家一种进度感,一种时间或空间改变的感觉。
 

《风之旅人》利用渐变的场景颜色变化来表达角色的情感变化

《几何冲冲冲》背景是以彩虹色做排序,而这个设计还有另一个目的就是让游戏关卡区分度更大。


主题烘托:
 

关卡主题赋予颜色


在不同的关卡之间改变背景颜色在视觉上会更有区分感,而且QQ买卖玩家能更容易感受到游戏的深度和变化。《Smash Hit》这款游戏就是这样。

装备道具品质:

颜色区分装备等级


从暗黑开始,装备档次就按照颜色来区分了,灰白蓝金暗绿。目的是让玩家直接了解装备的档次,避免在一地装备的时候无法区分。
 


色彩心理:
 

HUE通过收集颜色,进行解密


有的关卡牵涉到快速辨色能力,在短时间内需要辨别出这是什么颜色,并切换到相同颜色即为通关。
 

《刺客信条》这款游戏 血腥动作 刺杀 敌人 目标红色设定 红色给人希望(颜色决定情绪氛围)


还有暖色调和冷色调分别给人的感受是不一样的:
 

暖色调:温暖,温馨,热烈,积极,活跃,兴奋,明快,生动的感觉。

冷色调:寒冷,阴冷,冰凉,凉爽,稳重,冷静,安逸的静态印象。


黄金比例:
 


日本的设计师马里佩也针对色彩的配色提出比例原则 75%、25%与 5%的配色比例方式 ,这个原则跟上面说的一致,两个颜色各占75%和25%,剩下的用5%的过渡色来做画面的协调色,使得主次分明。

举例说明:
 


我们在接到一个案子的时候,应根据产品目标来进行判定,比如说产品定位,视觉定位,前期的概念是什么样的,目标用户是哪种类型的。。。等等
 


明确产品的定位之后,我们开始定关键词,中国风,仙侠,飘逸,等等。
 


根据关键词总结出主题,色调,元素的相关内容。

然后开始找资料,定下色彩风格意向版,意向背景图从端游、影视剧、摄影照片来确定游戏风格的大基调。
 


最后的实现的样子:
 

《权力的游戏》深蓝色和暗金配色添加红色战争象征意义的颜色,体现了中世纪战争硬朗的概念

《第五人格》配色蓝灰色调,加上暗黄色的烛光,营造一种紧张压抑恐怖的心理。

《阴阳师百闻牌》冷色调为主,降低透明度的蓝紫色,配合淡淡的金色,简洁又清新,充满了东方特点,梦幻。

《第五人格》注重恐怖,紧张,在阴暗的色调中,活动界面灯光采用鲜明的色彩,不仅体现了节日的氛围,同时也将恐怖的心理传递给玩家。

《刺客信条》色彩运用在装备品质框上,在深蓝色调中,品质色醒目突出,重点聚焦。

《战歌竞技场》抽卡界面,采用扭蛋的形式,在冷棕色调中,暖色的运用舒适,不会太抢眼,界面重点突出,并且生动活泼,沉浸感,代入感十足。

《传奇》红色直接切入主题和金色的标题搭配,在加上花瓣飘洒的效果,使中国风界面的形式感宛如真实存在的,把空间关系和氛围都体现出来。


感谢阅读!

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值