Покраска драфта цветом

И почему нужно уметь её делать.

Куратор курса DRAFT PUNK Эдуарт Витер написал статью об основных принципах покраски драфта — а заодно объяснил, как человеческий глаз воспринимает цвет.
Пригодится всем, кто занимается 3D — удачно покрашенная модель всегда смотрится выигрышнее «серой».

Зачем красить драфт

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

Драфт может быть самобытным арт-объектом, а не просто начальной стадией модели. Объектом, который не стыдно оставить в своем портфолио или поделиться с друзьями. Выразительный силуэт, интересные средние формы и классная покраска могут показать, что вы не только умеете хорошо моделить, но и понимаете цвет, — а это не менее важный навык.

При грамотном подходе получаются очень выразительные объекты и сцены:

Так что если вы отправите клиенту, лиду или арт-директору на рассмотрение драфт не в сером материале, а с качественной покраской, скорее всего, он это оценит. К тому же вы проверите, насколько сходятся ваши вкусы и планы относительно этой модели.

Покраска драфтов позволяет новичкам понять цвет, попробовать разные палитры, да и вообще определиться, что же такое «палитра». И всё это при помощи самых простых инструментов: без UV, новых программ и сложного текстурирования, — всё в одном 3D-редакторе.

Про покраску

Главные элементы хорошего драфта — это качественно подобранные цвета (палитра) и геометрия, обозначенная тоном.

Начнём с последнего. Наряду со светотенью и перспективой один из важнейших механизмов восприятия — это бинокулярное зрение. Оно работает благодаря сложнейшему физиологическому механизму зрения — фузии (‪‎лат. fusio — слияние), то есть слиянию зрительных образов в единое зрительное восприятие. Больше 50% всего восприятия объекта — это как раз бинокулярное зрение.

Всё, что мы видим на экране монитора — это плоская картинка, на которой бинокулярное зрение не работает (за исключением случаев использования 3D-очков).

Поэтому один и тот же объект в живую и на экране будет восприниматься по-разному. Чтобы компенсировать потерю части восприятия при создании компьютерной графики приходится идти на ряд ухищрений. Одно из них — «цветовая модуляция».

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

Обратите внимание, как выделены деревья и зверёк. Использован очень скромный набор цветов, но мы отлично считываем как основные объекты, так и настроение с сцены. Эта работа выполнена с применением однотонных тонов — их называют flat color или flat shaiding

Base color (flat color) — техника, при которой используют только однотонные цвета без градиентных переходов и динамических теней. Также её называют «Плоскостной затушовкой» или «Постоянным затенением».

А вот еще одна работа. В ней формы выделены с помощью градиентных переходов, а объем подчеркивают подкрашенные фаски. Скрины сделаны в режиме base color (без бликов и теней), но мы всё равно отлично считываем объем.

Теперь рассмотрим несколько одинаковых моделей с разной степенью покраски.

По мере выделения геометрии тоном внутренние формы модели становятся всё более четкими и выразительными.

Рассмотрим те же модели, но уже в режиме Base color.

1. Вариант — робот в сером материале
2. Происходит разбивка на основные цвета, но один жёлтый акцент смотрится неинтересно.
3. На третьем варианте в покраске появляются переходы, модель становятся интереснее за счёт синих осей, а жёлтый глаз поддерживается жёлтым поясом. Добавляется разбиения по тонам для выделения вырезов
4. В итоговой версии появляется детализация тоном.

Еще один пример выделения геометрии объекта — вот этот цветок из работы студентки курса DRAFT PUNK nahem.san.

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

Также не стоит забывать, что ваша модель может быть использована в разных локациях и при разном освещении — особенно если речь о геймдеве. Но base color — ваше основное цветовое решение, — будет продолжать работать даже в очень затемненных/высветленных условиях. На рисунке ниже видно, как меняется восприятие моделей разных версий по мере ухудшения освещения.

Отдельно отмечу тайловые материалы, такие как плитка, кирпич, черепица. При равномерном выделение граней тоном мы получим интересный отдельный элемент (кирпич, камень и т.д.) Но в массиве это не работает и не обеспечивает нужной степени выразительности. Более эффективным приёмом будет выделение отдельных «кирпичей» или «плиток» тайлового материала другим тоном.

Рассмотрим одну из работ.

Подобный приём используется уже очень давно, — например, в отделочных материалах. Как это часто бывает, решение подсказал реальный мир.

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

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

На днях мне попался старый немецкий дом с очень выразительной кровлей

Если повысить насыщенность тона, распределение цветовых пятен становится более явным.

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

Будьте внимательны при обозначении разным тоном отдельных частей геометрии или элементов в общем массиве. Слишком контрастные цвета могут испортить выразительность вашей работы: наш мозг будет воспринимать их как совершенно разный материал.

Отдельно обращу внимание на такие материалы, как камень и дерево. Существуют стереотипы о их цвете: камень — серый, дерево — светло-коричневое. Отчасти это верно, но оба этих материала намного богаче по цветовой палитре.

Как видно из палитр выше, камень — очень разнообразный материал, в котором могут присутствовать как холодные, так и тёплые тона.

Дерево не сильно уступает камню по богатству тона.

Теперь немного теории. Сразу предупреждаю: это — лишь маленькая памятка в несколько абзацев, в которой очень поверхностно затрагивается теория цвета. Сам по себе цвет — это очень большая и непростая тема, по которой написано немало книг и сломано не меньше копий.

Для лучшего понимания — немного физики. Свет, если сузить и упростить это понятие, можно назвать потоком фотонов. Когда мы говорим: «эта чашка красная», то на самом деле имеем в виду, что молекулярный состав поверхности чашки поглощает все световые фотоны, кроме красных.

Если солнечный свет пропустить через трехгранную призму, как поступил сэр Исаак Ньютон в 1676 году, то мы получим спектр из семи цветов — красный, оранжевый, желтый, зеленый, голубой, синий и фиолетовый. Когда мы видим радугу, это как раз небо выступает в роли огромной призмы. Диапазон света который мы можем воспринимать, ограничен. Отсюда и формируются тона, которые мы воспринимаем.

Но особенно выделяются красный, синий и зеленый. На основе этого создана шкала — RGB (аббревиатура английских слов red, green, blue — красный, зелёный, синий) — аддитивная цветовая модель, которая описывает способ кодирования цвета для воспроизведения с помощью трёх цветов, которые часто называют основными. Все остальные тона и оттенки получают с помощью их смешивания.

Выбор «основных» цветов обусловлен особенностями восприятия цвета сетчаткой человеческого глаза. Ощущение цвета возникает в мозге при возбуждении и торможении цветочувствительных клеток, — колбочек. У человека и приматов существует три вида колбочек, которые различаются по спектральной чувствительности, — ρ (условно «красные»), γ (условно «зелёные») и β (условно «синие»). Отсюда и подобное восприятие.

Но что нам это дает на практике?

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

В современных рендерах используется в основном физически корректный рендеринг (Physically based rendering - PBR) — метод затенения и рендеринга, обеспечивающий точное представление взаимодействия света с поверхностями. Поэтому и взаимодействие цвета и света происходит на основе их физических характеристик. Подробнее про PBR — здесь и здесь.

Так что если осветить наш оранжевый шар насыщенным синим светом, то он будет скатываться по цвету в черный спектр. Всё дело в фотонах: так как наш источник освещения испускает в первую очередь синие, то оранжевая поверхность их практически полностью поглощает. Чёрный — это по факту не цвет, а отсутствие отраженных фотонов: что-то вроде «дыры» в нашем зрении.

Чуть сместим тон света: пускай цвет шара будет искажённый, но он появится. При этом интенсивность источника освещения осталась на том же уровне

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

Подбор цвета и палитры значительно упрощает цветовой круг. В каком-то смысле это такая «таблица Менделеева» для цвета.

Этот круг был создан путём анализа наиболее гармоничных сочетаний цветов, и их взаимодействия. Сейчас самый распространённый вариант цветового круга — RGB.

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

Сочетание двух цветов, расположенных друг напротив друга на цветовом круге, дают чёрный только когда речь идет о связке цвет—свет.

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

Эти цвета отлично сочетаются друг с другом, и если в вашей работе вы остановили свой выбор на двухцветовой схеме, то ваш выбор — комплиментарные цвета.

Данный принцип, как и описанные выше имеет прямое отношение к физиологии человека. Посмотрите пристально на зеленый квадрат, а потом закройте глаза, — и в качестве остаточного изображения у вас перед глазами возникнет красный. Можно повторить данный опыт на любом из цветов круга и каждый раз остаточным изображением будет его комплиментарный цвет.

Хроматический круг существенно облегчает подбор палитры. Например, схемы на основе треугольника (всегда равнобедренного) квадрата или ромба как бы отсекают «лишние» цвета: использовать можно только те, что внутри фигуры.

Есть множество сайтов, которые могут сильно помочь в подборе палитры или предоставить готовую.

Список взят с сайта designpub.ru.

• http://paletton.com/ — цветовой круг для составления палитр.
• https://color.adobe.com/ru/create/color-wheel/ — цветовой круг для составления палитр.
• https://coolors.co/ — отличный генератор случайных палитр.
• http://colorhunt.co/ — подобранные цветовые палитры.
• https://material.google.com/style/color.html — основные material цвета.
• https://www.materialpalette.com/blue/yellow — составление material палитр на основе двух цветов.
• http://material.colorion.co/ — составленные палитры в стиле material.
• http://www.flatuicolorpicker.com/all — цвета в стиле flat.
• http://swisscolors.net/ — подобранные цвета в швейцарском стиле.
• http://www.gradients.io/ — приятные градиенты.
• http://uigradients.com/ — подобранные градиенты.
• http://hslpicker.com/ — удобный конвертер цветов.

Но для более корректного понимания цвета придётся ещё раз пройтись по теории. Поговорим о разных видах контрастов.

Один из важнейших исследователей цвета Иоахнесс Иттон выделяет следующие виды:

1. Контраст по цвету
2. Контраст светлого и темного
3. Контраст холодного и теплого
4. Контраст комплиментарных цветов
5. Симультанный контраст
6. Контраст по насыщенности
7. Контраст по площади цветовых пятен

Контраст по цвету

Контраст по цвету — самый простой из семи, его можно продемонстрировать с помощью сопоставления любых двух основных тонов. В системе RGB выделяют 12.

Контраст светлого и тёмного

В данном случае изменение цвета происходит путем подмешивания в него черного или белого цвета.

На практике это выглядит вот так. Там, где правый верхний угол — наиболее насыщенный цвет, а смещение строго по горизонтали или вертикали высветляет или затемняет его.

Несколько примеров изменения цвета по светлоте/темноте:

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

Например, в данной работе цвет и перспектива усиливают друг друга.

Ещё есть характерная закономерность: светлые тона на чёрном фоне выступают вперёд в соответствии со степенью их светлоты. Пример — изображение ниже.

А тёмное на светлом фоне стремится вперёд:

Отличный пример работы по использованию данных свойств — фанарт по игре Firewatch.

Ещё один пример того, как цвет применяют для создания глубины:

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

Контраст холодного и теплого

Такое деление оказывает на человека мощный психологический эффект, — это даёт нам эффективный приём воздействия на зрителя. Но связь между ощущением температуры и зрительным восприятием цвета не всегда очевидна.

В книге «Искусство цвета» Иоханесс Иттон рассказывает об интересном опыте. В мастерских, окрашенных в сине-зелёные цвета, рабочие жаловались на холод при температуре 15 градусов. В это же время в красно-оранжевом помещении они начинали жаловаться на холод лишь при температуре 11 — 12.

Немного классики. Обратите внимание что детализация на этой картине Клода Моне практически отсутствует. По сути, нам доступны лишь силуэты и тени, но картина при этом очень выразительна и задаёт настроение.

Ещё один пример холодных и тёплых тонов от beeple.

Контраст холодного и тёплого обладает интересным свойством: он может влиять на наше восприятие расстояние до объекта. Чем дальше от нас объект, тем более холодным он кажется — из-за воздушного слоя. Наш мозг так привык к этому ориентиру, что такой эффект будет работать и в 2D, и в 3D.

Контраст комплиментарных цветов

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

Есть такое направление в живописи — пуантализм: рисунок создаётся нанесением на холст точек, которые на расстоянии сливаются в единую картину. Пуантилисты добивались серого цвета нанесением очень маленьких точек комплиментарных цветов рядом друг с другом: серый тон появлялся только в глазах зрителя.

Симультанный контраст

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

Понятие «симультанный контраст» обозначает явление, при котором наш глаз при восприятии какого-либо цвета тотчас же требует появления его дополнительного цвета, и если такового нет, то симультанно, то есть одновременно порождает его сам.

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

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

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

Одна из самых мощных цветовых схем — равносторонний треугольник.

На схеме видно, насколько все цвета смещены относительно их комплиментарных.

Контраст по насыщенности

Контраст по насыщенности часто путают с контрастом по светлоте/темноте. Основное отличие в том, что насыщенность не пытается уйти в белую или чёрную зону, а падает, стремясь прийти в средне-серую.

По градации RGB средне-серый — это цвет в значениях 128:128:128. Смещение в показанной ниже системе происходит по прямой, из правого верхнего угла (максимально чистый цвет) к средне-серому.

Контраст по размеру цветовых пятен

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

Если мы обобщим виды контрастов и подмешаем в них цветовой круг с его схемами, то получим стандартное распределение цвета относительно объема модели или картины.

Это соотношение, близкое к 60 на 30 на 10. 60 — это основной цвет, как правило относительно насыщенный. 30 — дополняющий, заметно более блеклый, чем основной. 10 — это акцентный, чаще всего самый яркий. Это не жёсткая формула, но стоит стремится к подобной пропорции. Помните: если вы не можете с первого взгляда определить основной цвет модели, стоит пересмотреть распределение цветов.

Рассмотрим на примере. Первый робот покрашен в соответствии с гармоничной триадой а вот последующие модели — с нарушением правил подбора цвета.

Про черный, белый и оттенки серого

Чёрный и белый цветами, по сути, не являются. К чёрному стремится любой цвет при снижении яркости — например, при уменьшении освещённости до полной темноты. При увеличении яркости любой цвет стремится к белому. Черный и белый, а также весь спектр серого между ними — это ахроматический ряд, в переводе с древнегреческого — «не цветной». Ахроматические цвета различаются только по светлоте.

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

Гармония — это равновесие, симметрия сил. Нейтральным цветом считается серый — наш глаз не создаёт с ним никакого дополнительного цвета, и это чаще всего делает его самым гармоничным.

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

У ахроматических цветов есть важная роль: подмешивая их в тона цветового круга, мы можем регулировать яркость и влиять на насыщенность цвета. Эти цвета отлично подходят для создания инструментов по регулированию тех или иных параметров. Например — для текстурных одноканальных карт, таких как Hights и Ambient oclusion. Но именно при формировании своей палитры их лучше избегать.

Но не забывайте, что серый — это очень богатый цвет, если в нём присутствует тон. Вот несколько палитр:

Напоследок — простой, но действенный прием от Антона Беляева.

Находим красивую картинку с крутой цветовой схемой, конвертируем её в мозайку, и получаем на выходе отличную палитру.

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

Цвет — не самый простой предмет для изучения. Но его понимание это во многом фундамент всего дизайна. Если вы сможете с ним совладать, ваши навыки и уровень как специалиста значительно вырастут.

Автор: Эдуард Витер