Основы цветовой теории для видеоигровой разработки
Автор обложки Zezhou Chen
Это лекция для студентов первого курса направления «Гейм-дизайн» о цвете как инструменте.
Она закладывает теоретический фундамент в области визуального дизайна видеоигр. Студенты знакомятся с концепцией цвета в дизайне и изучают различные способы его применения в разработке видеоигр.
Часть 1. Психология цвета
Ассоциации как основа
Цвет оказывает значительное влияние на психологию и человека, так как он способен вызывать определенные эмоции, ассоциации, настроения и даже физиологические реакции.
Ассоциативных цветовых схем множество. Это связано с тем, что восприятие цвета уникально для каждого человека из-за культуры и контекса, поэтому создать универсальную таблицу довольно сложно
Например, красный. Эмоционально он возбуждает, стимулирует, вызывает чувство страсти, энергии, а иногда и агрессии. Психологически — может увеличивает частоту сердечных сокращений и кровяное давление. Цвет дает ассоциации, связанные с моментами, закрепившиеся в сознании от воздействия сильного впечатления.
Так красный цвет ассоциируется у нас с любовью, красным летним закатом или тарелкой вкусного горячего борща. Цвет может давать нам ощущение заботы и тепла или ассоциацию с опасностью, побоищем и насилием — цвет освещения от сигнализации, горящего леса или крови.
Смешарики (2004), My Little Pony: Friendship is Magic (2010)
Психология цвета активно используется в дизайне персонажей детских мультфильмов, потому что позволяет создать яркие запоминающиеся образы, основанные на знакомых архетипах, что влияет в том числе и на маркетинг.
На примере выше можно увидеть общие архетипы у персонажей со схожей палитрой, несмотря на то, что мультфильмы создавались в разное время и для разной целевой аудитории.
Ради узнаваемого дизайна в видеоиграх используют такие же приемы цвет-ассоциация не только на персонажах, но и на палитрах всего проекта целиком.
Цвета помогают передать настроение игры. Мрачные тона лучше подойдут для хоррора. Яркие — для веселой аркады.
Edouard Noisette, Albert Urmanov, Snow Gao
Maciej Baranowski
Aki 烨火
Ann Kondrat
Etienne SAVOIE, Khoa Viet, Shelly MENVILLE
Один оттенок может давать безграничное вариантов ассоциаций. На возможные интерпретации трактовки цвета влияют некоторые общие принципы: персональный опыт пользователя и индивидуальные предпочтения, культурные различия, контекстная среда — где помещён цвет, какие цвета находятся рядом с ним, какая история повествуется в общем.
Например, в одних культурах белый цвет символизирует чистоту, а в других — траур.
Если опираться на поп-культурные ассоциации, то основные цвета влияют на эмоции и восприятие следующим образом:
- Красный: энергия, страсть, опасность.
- Синий: спокойствие, доверие, холод.
- Желтый: оптимизм, радость, внимание.
- Зеленый: природа, гармония, рост.
- Фиолетовый: роскошь, тайна, творчество.
- Черный: элегантность, сила, траур.
- Белый: чистота, простота, свет.
Oliver Ryan
Психология цвета в видеоиграх
Цвет маркирует важные объекты: полезные, необходимые или опасные сущности. Благодаря этому игрок может считать функцию сущности заранее по ассоциации с цветом. Зеленый показатель здоровья — персонаж в порядке, красный — наш игровой аватар на грани гибели. Цвет показателя сменился на фиолетовый? Что-то нетипичное — персонаж отравлен.
В тоже самое время существует градация редкости предметов по цветам, где фиолетовый уже не отрава, а вполне себе ценный редкий ресурс. Так как цвет фигурирует в разных сущностях, игрок считывает ассоциацию с ним в зависимости от контекста.
Dragon Age: The Veilguard
В рамках игрового мира цвета могут формировать ассоциацию с расой, классом, фракцией или созданной авторами культурой.
Например, серый, медный и малахитовый ассоциируются с дворфами, а золотой, салатовый и оранжевый — с эльфами.
За фракциями тоже закрепляются свои цвета, чтобы игрок мог сразу отличить их друг от друга. Цвет становится маркером и частью внутреннего бренда внутриигровых группировок.
Dragon Age: The Veilguard
Влияние контекста
Обозначение контекстной среды может превалировать над вариативной цветовой трактовкой: в таком случае цвет может играть роль вспомогательного инструмента, позволяющий усилить эмоции или ассоциации от увиденного образа за счёт форм и силуэтов. Так на основе характера объекта можно подбирать цвета и оттенки, которые совпадают с одной из возможной трактовкой по ассоциации.
Желтый над фиолетовым (1956) и № 61 Ржавый и голубой (1953), Марко Ротко
Заложенного контекста может и не быть. Тогда пользователь отправится в полёт фантазий исходя из персонального и культурного опыта.
Эмоции через цвет
Цвета влияют на эмоции игрока, например, теплые тона вызывают радость, холодные — тревогу. Однако, всё может быть диаметрально наоборот.We Happy Few, 2016
В We Happy Few используется контраст между мейнстримной цветовой ассоциацией и реальностью: яркий, сочный радужный мир не радостный, а сумасшедший и опасный.
Подобный контраст есть и в The Northern Path, где холодные цвета не мешают создавать уютную атмосферу снежных вылазок.
The Northern Path
Пример смены атмосферы с помощью цвета, Yongkun X
Резкая смена цветовой палитры, контраст — отличный прием для влияния на эмоции игрока.
Часть 2. Цветовая теория
Набор принципов и правил, которые объясняют, как цвета взаимодействуют друг с другом.
В основу аспектов цветовой теории входят: основа цветов и цветовой круг, характеристика цвета (тон, насыщенность, яркость), психология цвета, цветовые модели, цветовые палитры, теплые и холодные цвета, цветовые контрасты.
Stefan Mihai Toma
Работа с цветом позволяет сохранять визуал проекта гармоничным и целостным
При работе анализе цветов и палитр на изображениях мы обратимся к следующим терминам:
- Hue — Тон — чистый цвет, сам пигмент.
- Value — Яркость — насколько цвет черный.
- Saturation — Насыщенность — насколько цвет выраженный.
По сути, являются комбинациями Value и Saturation. Подобные термины хорошо отражают принцип работы одного из цветовой модели — HSV.
Цветовая модель
Математическая или визуальная система, которая позволяет описывать и представлять цвета с помощью числовых значений или параметров.Примеры цветовых моделей: RGB, HSV/HSB, LAB, CMYK, Grayscale и т. д.
Цветовые модели отличаются способами создания и описания цветов, а также тем, где и для чего они используются.
Например, RGB идеален для экранов, CMYK — для печати, а Pantone и LAB — для точного соответствия цветов в брендинге, т. к. эти цветовые модели не зависят от устройств и на любом устройстве цвета будут идентичными, в отличие от CMYK и RGB.
Evan Waterman
Цветовой круг Иттена
Инструмент, который помогает визуализировать отношения между цветами. Он состоит из первичных, вторичных и третичных цветов.Первичные цвета: красный, синий, желтый. Эти цвета нельзя получить смешением других.
Вторичные: зеленый, оранжевый, фиолетовый. Получаются смешением первичных цветов.
Третичные: полученные смешением первичных и вторичных цветов (например, красно-оранжевый или сине-зеленый).
Также цветовой круг называют RYB (red, yellow, blue) — это классическая цветовая модель, которая помогает понять основы смешения цветов и создания гармоничных сочетаний.
Хотя она устарела для современных технологий, её принципы до сих пор актуальны для художников и дизайнеров.
Именно по принципу RYB художники смешивают краски на палитре
Цветовые палитры
Набор цветов, которые сочетаются друг с другом по определенным правилам или принципам.
Монохромная схема
Монохроматическая схема: оттенки одного цвета (разная яркость и насыщенность). Например, разные оттенки синего.
Аналоговая схема: цвета, расположенные рядом на цветовом круге (например, желтый, желто-оранжевый, оранжевый).
Samorost 3, 2016
Hollow Knight, 2017
Ori and the Will of the Wisps, 2015
Комплементарная схема: цвета, расположенные напротив друг друга на цветовом круге (например, синий и оранжевый).
Сплит-комплементарная схема: в отличие от обычной комплементарной палитры, вместо дополнительного цвета напротив основного взятого на цветовом круге палитра берет два соседних цвета от изначального. Такая схема создает менее резкий контраст и лучше балансирует взятые противоположные оттенки.
Firewatch, 2016
NEVA (2024), GRIS (2018)
Before Your Eyes, 2020
Треугольная, квадратная и прямоугольная схемы: три и четыре цвета, образующие собой фигуру — треугольник и квадрат/прямоугольник.
GRIS, 2018
Dead Cells (2017), Genshin Impact (2020)
Hades, 2018
Помимо них, можно использовать приемы с контрастами, ретро-палитры, минимализм с акцентом или монохромную схему.
Limbo, 2010
Bendy and the Ink Machine, 2017
Portal 2, 2011
Теплое и холодное
Ассоциации человека, связанные с природными наблюдениями и особенностями психического восприятия. Несмотря на то, что есть общепринятое деление на теплые и холодные оттенки, любой цвет можно увести в более холодный или теплый, тем самым создать разнообразие в палитре.Верхний ряд — теплые цвета, нижний — холодные
Ann Kondrat
Контраст между теплым и холодным всегда добавляет пространству глубины и интереса.
BLACKFROST: The Long Dark 2, Adrien Usa-Lucas
