как выбрать палитру для своей игры

[pullquote align=right]
Даг Сюарт из Kongregate рассказал о том, как цвет может определить вашу игру и как с ним лучше работать.
[/pullquote]

Цвет — один из самых мощных инструментов при создании игры. Цвета могут привлекать внимание, направлять ваших игроков к тому, что вы считаете важным. Они также могут быть использованы для скрытых подсказок о героях и их мире. При правильном использовании цвета задают тон игры, говорят вам, где вы и куда вам нужно идти.

Начинать создание цветовой палитры может быть сложно, поэтому давайте разберем процесс шаг за шагом.

Краткий обзор теории цвета

Хотите вы этого или нет, выбранные вами цвета имеют значение и это значение может меняться в данном контексте. Изучение восприятия цветов началось очень давно. Большая часть современной теории цвета имеет исторический контекст и глубокое культурное значение. Знакомство с ней позволит вам использовать цвета в вашу пользу или разрушить предубеждения игрока новым и креативным образом.

• Красный — сильные эмоции: любовь, страсть, гнев, но также и тепло
• Оранжевый — радость и энтузиазм, но в то же время разочарование и свежесть
• Желтый — счастье или трусость
• Зеленый — природа, зависть, болезнь или алчность
• Синий — спокойствие, холод, серьезность или мужественность
• Фиолетовый — королевское благородство, качество и роскошь
• Черный — загадка, зло или горе
• Белый — честность, добро, чистота, святость, невинность или траур

Выбор цветовой гаммы

Цветовая гамма вашей игры — отличный способ задать настроение и атмосферу мира, с которым будут взаимодействовать ваши игроки. Выбор палитры зависит от того, какой опыт вы хотите создать и какую историю вы хотите рассказать.

Теплые тона:

Цвета, о которых вы думаете, когда слышите об осени или закате. Теплые цвета могут ассоциироваться как с теплом и комфортом, так и с агрессией, поэтому от того, как вы их используете, зависит их смысл. Они могут сообщать, что вы в безопасности, или то, что пришло время идти воевать.

Холодные тона:

Оказалось, что будущее — синее. Или, по крайней мере, что-то холодное и яркое. Холодные цвета часто используются в sci-fi играх, чтобы описать безразличное и дезинфицированное будущее. В сочетании с яркими вставками теплого цвета эта картина может быть впечатляющей.

Вестерн/антиутопия:

Конец мира (как географический, так и метафорический) — коричневый, серый и безжизненный. Однако из-за приглушенной общей палитры яркие цвета действительно выделяются и могут подчеркнуть важную информацию для ваших игроков.

На скриншоте из Metro 2033 Redux вы можете заметить, как ваш взгляд притягивает запястье героя, даже несмотря на его маленький размер. Синий свет обозначает ваш стелс-режим, а числа — количестве патронов. Это очень важная информация для вашего выживания, которая выделяется из окружающего тусклого мира в ярком контрасте.

Нуар/киберпанк:

Нуар (и визуально похожий киберпанк) выделяется высоким контрастом между глубокими тенями и яркими участками. Текстура и цвет важны для подчеркивания важной информации для ваших игроков в темном и опасном мире.

Например, в Far Cry: Blood Dragon мир в основном окрашен в темно-синие и темно-фиолетовые тона. Яркий неоновый свет обозначает важные локации и опасных существ, чтобы привлечь вас или предупредить.

Монохромная/ограниченная палитра:

Эти минималистские стили очень ограниченно используют цвет для драматического эффекта. Сочетание с другой палитрой может быть очень неожиданным и привлекательным.

Создайте свою тему и разрушьте несколько правил

Напоминаю, что это только общие закономерности: многие интересные цветовые палитры появились при разрушении этих правил. Как и ваша игра не должна принадлежать только к одному жанру, ваши палитры могут смешиваться для правильного эффекта.

Некоторые способы использования цвета

При выборе цветовой гаммы подумайте, какой цели она будет служить. Это может помочь вам решить, насколько контрастными будут ваши цвета, какое настроение вы хотите создать с их помощью и в чем вы хотите убедить ваших игроков. Все это — часть процесса выбора.

Ориентирование

Самое частое использование цвета в играх — ориентирование. Используя контрастные цвета, вы привлекаете внимание к определенным направлениям и объектам. Однако вы всегда можете продвинуться еще дальше.

Вы можете сделать контрастными только самые важные объекты, как в игре Super Hot!, оставив всё остальное обесцвеченным. Это привлекает все внимание к ключевым объектам значительнее, чем низкоконтрастная палитра.

Или вы можете использовать драматическое освещение нуарной эстетики (как в Bioshock), чтобы создать гнетущую атмосферу, которая сама подталкивает ваших игроков к свету. Люди движутся к нему по умолчанию, и, если вы смешаете темную и предвещающую зло палитру с теплыми цветами для ключевых объектов, игроки пойдут к ним сами.

В каком движении вы ни захотели бы двигаться, помните, что это не должно быть простой подсказкой. Цвета могут рассказывать историю мира, который вы создаете для игрока.

Сообщение об опасности и безопасности

Для ваших игроков важно знать, когда надвигается опасность, а когда она отсутствует. Как у игрового дизайнера, у вас есть много инструментов, и цвет может быть скрытой (или не такой скрытой) подсказкой, что обстоятельства изменились.

В шутерах экран часто становится красным, черным или белым, когда игрок получает много ущерба и находится в смертельной опасности. В серии Splinter Cell цвет вокруг игрока становится менее насыщенным, когда он находится в безопасности, и более насыщенным, когда его обнаруживают.

История и развитие героя

В играх это используется не так часто, но цвет может быть отличным индикатором развития персонажа. Эту концепцию недавно использовала игра Nier: Automata. Она использует цвет и его отсутствие, чтобы показать различие между тем, во что верит героиня, и тем, что она видит в жизни. Эта концепция кажется обыденной и безжизненной, но при исследовании мира оказывается динамичной и полной жизни.

Инструменты и хитрости для создания ваших палитр

Иногда вы можете сразу открыть Photoshop и начать экспериментировать с цветами. Это хороший подход, и он может принести вам цельную палитру. Если это работает для вас, убедитесь, что вы выровняли цвета и прошлись через режимы смешивания слоев. Это отличный способ найти родственные цвета, которые отличаются друг от друга, но не слишком далеки.

Если вы предпочитаете более прямой подход, вот несколько полезных инструментов:

Adobe Color и Coolors

Оба этих инструмента позволяют вам создавать собственные цветовые гаммы и предоставляют вам библиотеку готовых палитр для вдохновения.

Они также часто предлагают возможность создания палитры на основе изображения. Я часто использую такой метод: беру фото из Интернета (пейзаж или уличную фотографию) и загружаю в один из этих инструментов, чтобы получить точку для старта. Затем я корректирую цветовую гамму, чтобы она лучше подходила к тону, который я ищу.

Paletton

Еще один отличный инструмент для создания сложных цветовых палитр. Если вы не знаете, с чего начать, используйте генератор случайных цветовых гамм для старта.

Accessible Color Matrix

Основанный на инициативе WCAG 2.0, инструмент ACM — это хороший способ удостовериться, что ваша палитра полностью доступна для людей с нарушениями зрения. Это должно быть вашим вторым шагом после создания цветовой гаммы для игры.

Другие источники вдохновения

Кинематограф и фотография экспериментируют с цветом уже больше века, и у них есть много интересной информации. Вот несколько раскрывающих эти темы видео с YouTube для вашего вдохновения:

Цвет в фотографии

• The Role of Color in Photography
• Color Palettes in Photography

Цвет в фильмах

• 10 Best Uses of Color of All Time
• AKIRA: How to Animate Light

Если вы нашли опечатку — выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать [email protected].

15 сервисов для игры с цветом

• 
  Дизайн
• 4 мин на чтение
• 
  28749

Попытки найти идеальное цветовое решение уходят корнями далеко вглубь истории, к шедеврам великих художников. Теперь поисками идеального сочетания цветов, как филосовского камня, занимаются дизайнеры. Как сказал французский импрессионист Клод Моне: «Цвет – моя каждодневная одержимость, моя радость и моя мука».

Люди ассоциируют цвета с предметами, к примеру, красные яблоки и зеленая трава. Также, мы считаем цвет чем-то постоянным, даже тогда, когда знаем, что белое вино на самом деле желтое, даже скорее золотистое, и что синее море, совсем не синее, и его цвет может варьироваться от темно-серого до бирюзового.

Мы совершенно игнорируем тот факт, что интерпретация цвета является сложным процессом, который задействует в нашем восприятии не только глаза, но и настроение. При создании сайта, перед дизайнером появляется ряд вопросов, требующих ответа. И один из них – это сочетание цветов, идеально подходящее для будущего веб-проекта, как бы тривиально это не звучало. Гармония цветов – первое, что бросается в глаза посетителю, поэтому этот нюанс, лучше, хорошо продумать.

Представляем вашему вниманию пятнадцать отличных онлайн-сервисов, которые помогут вам подобрать подходящее сочетание цветов. Многие ресурсы позволяют загружать уже готовые палитры цветов, чтобы потом доработать. Сервисы позволяют искать и группировать цветовые схемы по определенным ключевым словам и оттенкам. Это очень помогает, когда у вас есть один цвет и нужно его использовать с рядом других, близких к нему цветов. Но самое главное, что все предложенные сервисы совершенно бесплатные.

1. Adobe Kuler – специальное веб-приложение для создания цветовых схем, которые могут вдохнуть жизнь в совершенно любой проект. Вы можете экспериментировать с цветами и просматривать тысячи тем из Kuler сообщества. Тут есть рейтинговая система самых лучших палитр, составленных другими пользователями. При желании, можно составить собственную палитру или загрузить изображение с приятной цветовой гаммой.

2. Сolourlovers – это серьезный ресурс, где люди не просто выбирают палитры цветов, но и говорят о цвете. Здесь можно найти и бесшовные текстуры, и готовые палитры. Также, на этом ресурсе есть форум, где ведется общение.

3. Главное преимущество Colorscheme в том, что весь процесс работы происходит в пределах одного экрана, то есть вам не нужно переходить на другие страницы. Первый шаг – выбор цветовой модели для будущего веб-проекта. Вы можете комбинировать холодные и теплые оттенки. Далее, изменяете яркость и контрастность, вы можете использовать готовые стили. Справа можно видеть результаты своей работы. Также, есть предварительный просмотр готового сайта, конечно же, примерный. Этот ресурс будет крайне полезен начинающим дизайнерам.

Очень порадовал список с названиями цветов.

4. С ColoRotate вы можете с легкостью создавать и управлять палитрами цветов в объемном 3d-пространстве для лучшего контроля цвета текста и фона. Цвета оживают, потому что в объеме наш ум воспринимает цвет иначе. Слайдеры и джойстики интуитивно понятны и просты в управлении. К тому же, вы можете синхронизировать палитры цветов между компьютерами и делиться заготовками с коллегами или клиентами.

5. ColorBlender – простой в использовании инструмент для создания цветовых палитр для веб-разработки. Основная функция этого ресурса – создание палитры из шесть цветов. Вы выбираете один, а программа подбирает остальные пять соответствующих цветов. Это позволяет легко и быстро создавать палитры.

6. Colormunki – это многофункциональный ресурс для работы с цветовыми палитрами и управления цветом в сфере графического, промышленного и интерьерного дизайна.

7. ColorExplorer является бесплатным инструментом для проектирования и работы с цветовой палитрой. Набор инструментов сайта не ограничивается подбором цветов, вы можете просматривать популярные библиотеки цветов, соединять библиотеки, экспортировать палитру в популярные программы, такие как AdobePhotoshop, Illustrator и многие другие. Также, можно импортировать цвета из изображений. Этот сайт был разработан специально для профессиональных дизайнеров. Тут нет регистрации, подобранную палитру можно просто сохранить. Однако, если вы хотите защитить свою палитру от посторонних глаз, можно создать и свой собственный профиль.

8. Главная идея Сolr: игра с цветом и цветовыми схемами. Этот сайт является одновременно игрушкой и серьезным генератором идей.

9. С ColorCombos вы попадете в мир цветов, в котором вы обязательно найдете свою идеальную цветовую палитру. Этот сайт был создан, чтобы помочь веб-разработчикам и дизайнерам быстро выбирать и тестировать различные комбинации цветов. Библиотека ресурса содержит сотни и тысячи образцов цвета. С помощью данного ресурса можно создать красивый сайт с отличным сочетанием цветов.

10. На Ficml можно подбирать цветовые оттенки и благодаря номеру, который высвечивается, можно использовать эти цвета в AdobePhotoshop или других программах. Всего несколько кликов мыши производят цветовое волшебство.

11. На Сolrd можно создавать схемы цветов, шаблоны, загружать изображение, чтобы узнать его цветовую гамму и многое другое.

12. ColorHunter – это ресурс, на котором можно найти и создать цветовые палитры, сделанные из изображений. Чтобы найти цветовые палитры на сайте, нужно ввести поисковый запрос в поле в верхней части страницы. Поиск можно осуществить по тегам, шестнадцатеричному коду цвета или ссылке на изображение. Изображение, также, можно загрузить из ПК.

13. Mudcu позволяет имитировать девять видов цветовой слепоты.

14. Etsy – это самый забавный и необычный способ подобрать цвет.

15. На Archizona оптимальное сочетание цветов можно подобрать, перемещая ползунок внизу. Это аналог цветового круга. Это один из немногих русскоязычных сервисов по подбору цветов.

Надеемся, данные инструменты помогут вам найти идеальную цветовую палитру для вашего будущего веб-проекта.

Источник: templates.motocms.ru

• #дизайн
• #инструменты

• 
  
• 
  0
• 
  

Список палитр

Список палитр

Логин
Зарегистрироваться

Внимание! Для использования этого веб-сайта требуется современный веб-браузер.

Мы обнаружили, что у вас может быть устаревший или неподдерживаемый веб-браузер. Этот инструмент, как и многие другие на этом сайте и в Интернете, использует функции, доступные только в новых веб-браузерах. Мы рекомендуем обновить ваш текущий браузер или загрузить Firefox или Chrome.

Отправить

|
Очередь отправки
| API

отправить

0 в очереди, 76 в ожидании

Список палитр Lospec — это база данных палитр для пиксельной графики. Мы включаем как палитры, созданные на старом оборудовании, которое могло отображать только несколько цветов, так и палитры, созданные художниками по пикселям специально для создания произведений искусства. Все палитры можно загрузить и импортировать в выбранное вами программное обеспечение для обработки пикселей (узнайте, как это сделать). Вы также можете попробовать нашу палитру дня или случайную палитру.

NEW Теперь вы можете просматривать понравившиеся палитры!

аасдф
аасдф
аасдф

Количество цветов:

AnyMaxMinExact

Поиск по тегу:

Предлагаемые теги: оборудование, художник, компьютер, геймбой

Сортировка:

По умолчаниюA-ZЗагрузкиНовые

Создано
Рафаэру Сама

Палитра, которую я сделал для развлечения и обучения  

• #redpalettepixelart

9- к
Рафаэру Сама

 

Создано
Гсус пригорода

Палитра, основанная на обложке нового альбома Metallica ’72 Seasons’

.

• #погоня за светом
• 2 цвета
• 9 загрузок

• Пример дизеринга с помощью этой палитры, рисунок Джеймса Хэтфилда из Metallica — автор
  Гсус пригорода

Теги: металлика, 72 сезона, 1 бит, желтый, неон

Создано
Ручари

Палитра, вдохновленная старыми компьютерами и теплыми цветами. Дизайн RucharyArts. Используйте хэштег, если хотите отдать мне должное за свои работы.

• #rgrproto16
• 16 цветов
• 157 загрузок

• Пример использования палитры RGR-Proto16 — by
  Ручари

Теги: теплый, ретро, ​​винтаж, rgrproto16

Создано
станксы

• #llllpalette
• 17 цветов
• 32 загрузки

Теги: зеленый, коричневый, градиент, природа, растения

Создано
ДжейДжей Бондс

• #groove96
• 4 цвета
• 27 загрузок

Метки: заводной, грув, 70-е, 80-е, 90 с

н. э. | присоединяйтесь, чтобы убрать рекламу!

Создано
Подруга

Может использоваться как двухцветная палитра с низкоконтрастным фоновым цветом для дополнительных деталей и штрихов.

• #chocichor
• 3 цвета
• 187 загрузок

• Пример по
  Подруга

Теги: шоколад, золото, коричневый, 1bit, 3colors, темный, вкусный, теплый, мягкий

Создано
деинпиксель

Моя первая палитра и взгляд на мягкие пастельные тона. Наслаждаться!

• #softel16
• 16 цветов
• 180 загрузок

• Пример по
  деинпиксель

• Пример по
  деинпиксель

Теги: пастель, мягкая, 16, арт, пиксель, художник

Создано
Подруга

Очень яркий вариант зеленоватых оттенков палитры Gameboy, хорошо заряжающий энергией теплым неоново-желтым, контрастирующим с очень холодным зеленым! 9- к
Подруга

Теги: геймбой, зеленый, классный, яркий, неоновый, желтый, яркий, ретро, ​​Fourtone

Создано
АААААААА

• #опасные полосы
• 7 цветов
• 48 загрузок

• Пример по
  АААААААА

Метки: промышленный, 7цвет, опасность

Создано
аналоговые студии_

предназначен для bitByBit_ [8×8]

• #побитно
• 12 цветов
• 50 загрузок

Теги: пиксельная графика, единство, Ичио

Представлено
П-смокинг7

Палитра, используемая Ронни Вестером в DOS-рогалике Magus

1997 года.

• #маг
• 16 цветов
• 87 загрузок

Теги: ПО, DOS, roguelike, иконографика

Для текущего выбора больше нет палитр.

Что вы думаете об этой странице?

н.э. | присоединяйтесь, чтобы убрать рекламу!

Список палитр

Список палитр

Логин
Зарегистрироваться

Внимание! Для использования этого веб-сайта требуется современный веб-браузер.

Мы обнаружили, что у вас может быть устаревший или неподдерживаемый веб-браузер. Этот инструмент, как и многие другие на этом сайте и в Интернете, использует функции, доступные только в новых веб-браузерах. Мы рекомендуем обновить ваш текущий браузер или загрузить Firefox или Chrome.

Отправить

|
Очередь отправки
| API

отправить

0 в очереди, 76 в ожидании

Список палитр Lospec — это база данных палитр для пиксельной графики. Мы включаем как палитры, созданные на старом оборудовании, которое могло отображать только несколько цветов, так и палитры, созданные художниками по пикселям специально для создания произведений искусства. Все палитры можно загрузить и импортировать в выбранное вами программное обеспечение для обработки пикселей (узнайте, как это сделать). Вы также можете попробовать нашу палитру дня или случайную палитру.

NEW Теперь вы можете просматривать понравившиеся палитры!

аасдф
аасдф
аасдф

Количество цветов:

AnyMaxMinExact

Поиск по тегу:

Предлагаемые теги: оборудование, художник, компьютер, геймбой

Сортировка:

По умолчаниюA-ZЗагрузкиНовые

Создано
Подруга

Очень яркий вариант зеленоватых оттенков палитры Gameboy, хорошо заряжающий энергией теплым неоново-желтым, контрастирующим с очень холодным зеленым! 9- к
Подруга

Теги: геймбой, зеленый, классный, яркий, неоновый, желтый, яркий, ретро, ​​Fourtone

Создано
г-жа Ари

Справедливое предупреждение: несъедобные пиксели

• #cookie
• 4 цвета
• 141 загрузок

Теги: 4, цвет, геймбой, оборудование

Создано
Керри Лейк

791

790

нравится

• #icecreamgb
• 4 цвета
• 14 462 загрузки

• Пример использования палитры от Керри Лейк.

• Скриншоты из Desert Bandit.

• Пример по
  Пиксельбат

Теги: kerrielake, художник, геймбой

Создано
Полиутки

Четырехцветная палитра для геймбоя и гладкая эстетика

618

617

нравится

• #ауу4
• 4 цвета
• 7 293 загрузки

• Пример использования палитры от Polyducks

Теги: художник, полиутки, геймбой

Создано
Космический сэндвич

Палитра из 4 цветов, призванная выглядеть очень роботизированной или механической, с холодным металлическим темно-серым и теплым устаревшим светло-серым пластиком, идеально сочетающим

586

585

нравится

• #2битдемихром
• 4 цвета
• 8 753 загрузки

• Пример по
  Космический сэндвич

• Вот некоторые работы, которые я создал с помощью этой палитры. — к
  30 пикселей

• Пример по
  битбиты

Теги: 2bit, оттенки серого, оттенки серого, Gameboy

н.э. | присоединяйтесь, чтобы убрать рекламу!

Создано
Кирокадзэ

536

535

нравится

• #kirokazegameboy
• 4 цвета
• 17 165 загрузок

• Цифровое яйцо от Kirokaze.

• Пример по
  Пиксельбат

• Пример по
  битбиты

Теги: художник, геймбой

Создано
Керри Лейк

470

469

нравится

• #rusticgb
• 4 цвета
• 8 389 загрузок

• Пример использования палитры /u/octacok.

• Пример использования палитры от Boberatu

Теги: kerrielake, художник, геймбой, монохромный

Создано
Керри Лейк

451

450

нравится

• #mistgb
• 4 цвета
• 9 630 загрузок

• Пример использования палитры от Керри Лейк

• Пример по
  ЭльБульбазавр Ретро

• Пример по
  ПРИНЦЕССА ИНТЕРНЕТ-КАФЕ

Теги: kerrielake, художник, геймбой

Создано
полтергазм

2-битная палитра, основанная на цветах Hollow Knight.