游戏开发论坛

 找回密码
 立即注册
搜索
查看: 7716|回复: 0

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

[复制链接]

4万

主题

5万

帖子

8万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
85814
发表于 2020-12-17 11:03:35 | 显示全部楼层 |阅读模式
作为一名设计师,相信大家对色彩都有了解,那么我们今天来讲一下色彩在游戏中的运用和他们之间的关系。

微信图片_20201217105230.jpg

色彩心理:

微信图片_20201217105237.JPG

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

色彩情绪:

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

微信图片_20201217105238.jpg

品牌效应:

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

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

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

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

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

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

微信图片_20201217105247.JPG
品牌颜色

视觉层级:

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

微信图片_20201217105248.jpg
《地狱边缘Limbo》以明度作为焦点

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

微信图片_20201217105251.JPG
《机动都市阿尔法》以饱和度作为焦点

微信图片_20201217105252.jpg

进度感:

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

微信图片_20201217105253.JPG
《风之旅人》利用渐变的场景颜色变化来表达角色的情感变化

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

主题烘托:

微信图片_20201217105256.jpg
关卡主题赋予颜色

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

装备道具品质:

微信图片_20201217105257.jpg
颜色区分装备等级

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

微信图片_20201217105258.jpg

色彩心理:

微信图片_20201217105300.jpg
HUE通过收集颜色,进行解密

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

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

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

微信图片_20201217105302.jpg
暖色调:温暖,温馨,热烈,积极,活跃,兴奋,明快,生动的感觉。

微信图片_20201217105303.jpg
冷色调:寒冷,阴冷,冰凉,凉爽,稳重,冷静,安逸的静态印象。

黄金比例:

微信图片_20201217105305.jpg

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

举例说明:

微信图片_20201217105306.JPG

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

微信图片_20201217105307.JPG

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

微信图片_20201217105308.JPG

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

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

微信图片_20201217105310.jpg

最后的实现的样子:

微信图片_20201217105311.jpg

微信图片_20201217105312.jpg

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

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

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

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

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

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

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

感谢阅读!

文/迷你笑
来源:老司机UI CLUB
原文:https://mp.weixin.qq.com/s/6FkyR8zxWKfLokOGpWsdTg

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

作品发布|文章投稿|广告合作|关于本站|游戏开发论坛 ( 闽ICP备17032699号-3 )

GMT+8, 2024-11-22 00:02

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表