0 added
0 removed
Original
2026-01-01
Modified
2026-03-07
1
<p>Блог xyz school</p>
1
<p>Блог xyz school</p>
2
<h2>Покраска драфта цветом</h2>
2
<h2>Покраска драфта цветом</h2>
3
<p>И почему нужно уметь её делать.</p>
3
<p>И почему нужно уметь её делать.</p>
4
<p>Куратор курса DRAFT PUNK Эдуарт Витер написал статью об основных принципах покраски драфта - а заодно объяснил, как человеческий глаз воспринимает цвет. Пригодится всем, кто занимается 3D - удачно покрашенная модель всегда смотрится выигрышнее "серой".</p>
4
<p>Куратор курса DRAFT PUNK Эдуарт Витер написал статью об основных принципах покраски драфта - а заодно объяснил, как человеческий глаз воспринимает цвет. Пригодится всем, кто занимается 3D - удачно покрашенная модель всегда смотрится выигрышнее "серой".</p>
5
<p><strong></strong><strong>Зачем красить драфт</strong>Покраска драфта позволяет на раннем этапе отработать цветовые решения и подобрать палитру - как для одиночной модели, так и для целой локации. И всё это - с помощью простых инструментов. Бывает очень обидно после часов, а возможно и дней работы осознать, что твоя текстура просто не подходит, цвета не сочетаются, и надо всё переделывать.</p>
5
<p><strong></strong><strong>Зачем красить драфт</strong>Покраска драфта позволяет на раннем этапе отработать цветовые решения и подобрать палитру - как для одиночной модели, так и для целой локации. И всё это - с помощью простых инструментов. Бывает очень обидно после часов, а возможно и дней работы осознать, что твоя текстура просто не подходит, цвета не сочетаются, и надо всё переделывать.</p>
6
<p>Драфт может быть самобытным арт-объектом, а не просто начальной стадией модели. Объектом, который не стыдно оставить в своем портфолио или поделиться с друзьями. Выразительный силуэт, интересные средние формы и классная покраска могут показать, что вы не только умеете хорошо моделить, но и понимаете цвет, - а это не менее важный навык.</p>
6
<p>Драфт может быть самобытным арт-объектом, а не просто начальной стадией модели. Объектом, который не стыдно оставить в своем портфолио или поделиться с друзьями. Выразительный силуэт, интересные средние формы и классная покраска могут показать, что вы не только умеете хорошо моделить, но и понимаете цвет, - а это не менее важный навык.</p>
7
<p>При грамотном подходе получаются очень выразительные объекты и сцены:</p>
7
<p>При грамотном подходе получаются очень выразительные объекты и сцены:</p>
8
<p><a>Работа</a>студентки курса DRAFT PUNK - annzep</p>
8
<p><a>Работа</a>студентки курса DRAFT PUNK - annzep</p>
9
<p><a>Работа</a>студентки курса DRAFT PUNK - annzep</p>
9
<p><a>Работа</a>студентки курса DRAFT PUNK - annzep</p>
10
<p><a>Работа</a>студентки курса DRAFT PUNK - nahem.san</p>
10
<p><a>Работа</a>студентки курса DRAFT PUNK - nahem.san</p>
11
<p>Так что если вы отправите клиенту, лиду или арт-директору на рассмотрение драфт не в сером материале, а с качественной покраской, скорее всего, он это оценит. К тому же вы проверите, насколько сходятся ваши вкусы и планы относительно этой модели.</p>
11
<p>Так что если вы отправите клиенту, лиду или арт-директору на рассмотрение драфт не в сером материале, а с качественной покраской, скорее всего, он это оценит. К тому же вы проверите, насколько сходятся ваши вкусы и планы относительно этой модели.</p>
12
<p>Покраска драфтов позволяет новичкам понять цвет, попробовать разные палитры, да и вообще определиться, что же такое "палитра". И всё это при помощи самых простых инструментов: без UV, новых программ и сложного текстурирования, - всё в одном 3D-редакторе.</p>
12
<p>Покраска драфтов позволяет новичкам понять цвет, попробовать разные палитры, да и вообще определиться, что же такое "палитра". И всё это при помощи самых простых инструментов: без UV, новых программ и сложного текстурирования, - всё в одном 3D-редакторе.</p>
13
<p><strong>Про покраску</strong>Главные элементы хорошего драфта - это качественно подобранные цвета (палитра) и геометрия, обозначенная тоном.</p>
13
<p><strong>Про покраску</strong>Главные элементы хорошего драфта - это качественно подобранные цвета (палитра) и геометрия, обозначенная тоном.</p>
14
<p>Начнём с последнего. Наряду со светотенью и перспективой один из важнейших механизмов восприятия - это бинокулярное зрение. Оно работает благодаря сложнейшему физиологическому механизму зрения - фузии (<a>лат.</a>fusio - слияние), то есть слиянию зрительных образов в единое зрительное восприятие. Больше 50% всего восприятия объекта - это как раз бинокулярное зрение.</p>
14
<p>Начнём с последнего. Наряду со светотенью и перспективой один из важнейших механизмов восприятия - это бинокулярное зрение. Оно работает благодаря сложнейшему физиологическому механизму зрения - фузии (<a>лат.</a>fusio - слияние), то есть слиянию зрительных образов в единое зрительное восприятие. Больше 50% всего восприятия объекта - это как раз бинокулярное зрение.</p>
15
<p>Всё, что мы видим на экране монитора - это плоская картинка, на которой бинокулярное зрение не работает (за исключением случаев использования 3D-очков).</p>
15
<p>Всё, что мы видим на экране монитора - это плоская картинка, на которой бинокулярное зрение не работает (за исключением случаев использования 3D-очков).</p>
16
<p>Поэтому один и тот же объект в живую и на экране будет восприниматься по-разному. Чтобы компенсировать потерю части восприятия при создании компьютерной графики приходится идти на ряд ухищрений. Одно из них - "цветовая модуляция".</p>
16
<p>Поэтому один и тот же объект в живую и на экране будет восприниматься по-разному. Чтобы компенсировать потерю части восприятия при создании компьютерной графики приходится идти на ряд ухищрений. Одно из них - "цветовая модуляция".</p>
17
<p>Изменяя тон выделяют геометрию и формы внутри силуэта модели. Характерно это как для полноценных текстур, так и для покрашенных драфтов. Далее - несколько работ для примера.</p>
17
<p>Изменяя тон выделяют геометрию и формы внутри силуэта модели. Характерно это как для полноценных текстур, так и для покрашенных драфтов. Далее - несколько работ для примера.</p>
18
<p>Обратите внимание, как выделены деревья и зверёк. Использован очень скромный набор цветов, но мы отлично считываем как основные объекты, так и настроение с сцены. Эта работа выполнена с применением однотонных тонов - их называют flat color или flat shaiding</p>
18
<p>Обратите внимание, как выделены деревья и зверёк. Использован очень скромный набор цветов, но мы отлично считываем как основные объекты, так и настроение с сцены. Эта работа выполнена с применением однотонных тонов - их называют flat color или flat shaiding</p>
19
<p><a>работа</a>Sorin Covor - Early Morning Walk</p>
19
<p><a>работа</a>Sorin Covor - Early Morning Walk</p>
20
<p><a>работа</a>Sorin Covor - Early Morning Walk</p>
20
<p><a>работа</a>Sorin Covor - Early Morning Walk</p>
21
<p><strong>Base color (flat color)</strong>- техника, при которой используют только однотонные цвета без градиентных переходов и динамических теней. Также её называют "Плоскостной затушовкой" или "Постоянным затенением".</p>
21
<p><strong>Base color (flat color)</strong>- техника, при которой используют только однотонные цвета без градиентных переходов и динамических теней. Также её называют "Плоскостной затушовкой" или "Постоянным затенением".</p>
22
<p>А вот еще одна работа. В ней формы выделены с помощью градиентных переходов, а объем подчеркивают подкрашенные фаски. Скрины сделаны в режиме base color (без бликов и теней), но мы всё равно отлично считываем объем.</p>
22
<p>А вот еще одна работа. В ней формы выделены с помощью градиентных переходов, а объем подчеркивают подкрашенные фаски. Скрины сделаны в режиме base color (без бликов и теней), но мы всё равно отлично считываем объем.</p>
23
<p><a>BitGem</a>Cemetery Set Update - Proto Series</p>
23
<p><a>BitGem</a>Cemetery Set Update - Proto Series</p>
24
<p><a>BitGem</a>Cemetery Set Update - Proto Series</p>
24
<p><a>BitGem</a>Cemetery Set Update - Proto Series</p>
25
<p><a>BitGem</a>Cemetery Set Update - Proto Series</p>
25
<p><a>BitGem</a>Cemetery Set Update - Proto Series</p>
26
<p>Теперь рассмотрим несколько одинаковых моделей с разной степенью покраски.</p>
26
<p>Теперь рассмотрим несколько одинаковых моделей с разной степенью покраски.</p>
27
<p>По мере выделения геометрии тоном внутренние формы модели становятся всё более четкими и выразительными.</p>
27
<p>По мере выделения геометрии тоном внутренние формы модели становятся всё более четкими и выразительными.</p>
28
<p>Режим final render на scketchfab</p>
28
<p>Режим final render на scketchfab</p>
29
<p>Рассмотрим те же модели, но уже в режиме Base color.</p>
29
<p>Рассмотрим те же модели, но уже в режиме Base color.</p>
30
<ol><li>Вариант - робот в сером материале</li>
30
<ol><li>Вариант - робот в сером материале</li>
31
<li>Происходит разбивка на основные цвета, но один жёлтый акцент смотрится неинтересно.</li>
31
<li>Происходит разбивка на основные цвета, но один жёлтый акцент смотрится неинтересно.</li>
32
<li>На третьем варианте в покраске появляются переходы, модель становятся интереснее за счёт синих осей, а жёлтый глаз поддерживается жёлтым поясом. Добавляется разбиения по тонам для выделения вырезов</li>
32
<li>На третьем варианте в покраске появляются переходы, модель становятся интереснее за счёт синих осей, а жёлтый глаз поддерживается жёлтым поясом. Добавляется разбиения по тонам для выделения вырезов</li>
33
<li>В итоговой версии появляется детализация тоном.</li>
33
<li>В итоговой версии появляется детализация тоном.</li>
34
</ol><p>Режим Base color на scketchfab</p>
34
</ol><p>Режим Base color на scketchfab</p>
35
<p>Еще один пример выделения геометрии объекта - вот этот цветок из работы студентки курса<a>DRAFT PUNK</a>nahem.san.</p>
35
<p>Еще один пример выделения геометрии объекта - вот этот цветок из работы студентки курса<a>DRAFT PUNK</a>nahem.san.</p>
36
<p>работа студентки курса DRAFT PUNK - nahem.san, режим Final render</p>
36
<p>работа студентки курса DRAFT PUNK - nahem.san, режим Final render</p>
37
<p>работа студентки курса DRAFT PUNK - nahem.san, режим Final render</p>
37
<p>работа студентки курса DRAFT PUNK - nahem.san, режим Final render</p>
38
<p>При покраске всегда проверяйте, как ваши цвета выглядят в режиме base color. В режиме рендера, с тенями, бликами, а зачастую и с фильтрами постобработки, часто тяжело понять, что ухудшает выразительность, - плохо подобранные цвета, некорректное освещение или фильтры.</p>
38
<p>При покраске всегда проверяйте, как ваши цвета выглядят в режиме base color. В режиме рендера, с тенями, бликами, а зачастую и с фильтрами постобработки, часто тяжело понять, что ухудшает выразительность, - плохо подобранные цвета, некорректное освещение или фильтры.</p>
39
<p>Также не стоит забывать, что ваша модель может быть использована в разных локациях и при разном освещении - особенно если речь о геймдеве. Но base color - ваше основное цветовое решение, - будет продолжать работать даже в очень затемненных/высветленных условиях. На рисунке ниже видно, как меняется восприятие моделей разных версий по мере ухудшения освещения.</p>
39
<p>Также не стоит забывать, что ваша модель может быть использована в разных локациях и при разном освещении - особенно если речь о геймдеве. Но base color - ваше основное цветовое решение, - будет продолжать работать даже в очень затемненных/высветленных условиях. На рисунке ниже видно, как меняется восприятие моделей разных версий по мере ухудшения освещения.</p>
40
<p>Отдельно отмечу тайловые материалы, такие как плитка, кирпич, черепица. При равномерном выделение граней тоном мы получим интересный отдельный элемент (кирпич, камень и т.д.) Но в массиве это не работает и не обеспечивает нужной степени выразительности. Более эффективным приёмом будет выделение отдельных "кирпичей" или "плиток" тайлового материала другим тоном.</p>
40
<p>Отдельно отмечу тайловые материалы, такие как плитка, кирпич, черепица. При равномерном выделение граней тоном мы получим интересный отдельный элемент (кирпич, камень и т.д.) Но в массиве это не работает и не обеспечивает нужной степени выразительности. Более эффективным приёмом будет выделение отдельных "кирпичей" или "плиток" тайлового материала другим тоном.</p>
41
<p>Рассмотрим одну из работ.</p>
41
<p>Рассмотрим одну из работ.</p>
42
<p>работа студентки курса DRAFT PUNK - annzep, режим Final render</p>
42
<p>работа студентки курса DRAFT PUNK - annzep, режим Final render</p>
43
<p>работа студентки курса DRAFT PUNK - annzep, режим Final render</p>
43
<p>работа студентки курса DRAFT PUNK - annzep, режим Final render</p>
44
<p>Подобный приём используется уже очень давно, - например, в отделочных материалах. Как это часто бывает, решение подсказал реальный мир.</p>
44
<p>Подобный приём используется уже очень давно, - например, в отделочных материалах. Как это часто бывает, решение подсказал реальный мир.</p>
45
<p>Вот пример стандартной черепицы без какой либо разбивки по тону элементов. Смотрится неплохо, но несколько скучно.</p>
45
<p>Вот пример стандартной черепицы без какой либо разбивки по тону элементов. Смотрится неплохо, но несколько скучно.</p>
46
<p>Но как только мы добавляем разнообразие тона, черепица начинает смотреться совершенно по другому.</p>
46
<p>Но как только мы добавляем разнообразие тона, черепица начинает смотреться совершенно по другому.</p>
47
<p>На днях мне попался старый немецкий дом с очень выразительной кровлей</p>
47
<p>На днях мне попался старый немецкий дом с очень выразительной кровлей</p>
48
<p>Если повысить насыщенность тона, распределение цветовых пятен становится более явным.</p>
48
<p>Если повысить насыщенность тона, распределение цветовых пятен становится более явным.</p>
49
<p>Не так давно зашёл в одну из новых кофеен: хозяин заведения явно не поскупился и воспользовался услугами профессиональных дизайнеров. Видно это было по отделке и подбору цветов, - как отдельных элементов, так и помещения в целом. Но я обратил внимание на напольную плитку. В глаза бросается разбивка по тону:</p>
49
<p>Не так давно зашёл в одну из новых кофеен: хозяин заведения явно не поскупился и воспользовался услугами профессиональных дизайнеров. Видно это было по отделке и подбору цветов, - как отдельных элементов, так и помещения в целом. Но я обратил внимание на напольную плитку. В глаза бросается разбивка по тону:</p>
50
<p>Будьте внимательны при обозначении разным тоном отдельных частей геометрии или элементов в общем массиве.<strong>Слишком контрастные цвета могут испортить выразительность вашей работы:</strong>наш мозг будет воспринимать их как совершенно разный материал.</p>
50
<p>Будьте внимательны при обозначении разным тоном отдельных частей геометрии или элементов в общем массиве.<strong>Слишком контрастные цвета могут испортить выразительность вашей работы:</strong>наш мозг будет воспринимать их как совершенно разный материал.</p>
51
<p>Отдельно обращу внимание на такие материалы, как камень и дерево. Существуют стереотипы о их цвете: камень - серый, дерево - светло-коричневое. Отчасти это верно, но оба этих материала намного богаче по цветовой палитре.</p>
51
<p>Отдельно обращу внимание на такие материалы, как камень и дерево. Существуют стереотипы о их цвете: камень - серый, дерево - светло-коричневое. Отчасти это верно, но оба этих материала намного богаче по цветовой палитре.</p>
52
<p>Как видно из палитр выше, камень - очень разнообразный материал, в котором могут присутствовать как холодные, так и тёплые тона.</p>
52
<p>Как видно из палитр выше, камень - очень разнообразный материал, в котором могут присутствовать как холодные, так и тёплые тона.</p>
53
<p>Дерево не сильно уступает камню по богатству тона.</p>
53
<p>Дерево не сильно уступает камню по богатству тона.</p>
54
<p>Теперь немного теории. Сразу предупреждаю: это - лишь маленькая памятка в несколько абзацев, в которой очень поверхностно затрагивается теория цвета. Сам по себе цвет - это очень большая и непростая тема, по которой написано немало книг и сломано не меньше копий.</p>
54
<p>Теперь немного теории. Сразу предупреждаю: это - лишь маленькая памятка в несколько абзацев, в которой очень поверхностно затрагивается теория цвета. Сам по себе цвет - это очень большая и непростая тема, по которой написано немало книг и сломано не меньше копий.</p>
55
<p>Для лучшего понимания - немного физики. Свет, если сузить и упростить это понятие, можно назвать потоком фотонов. Когда мы говорим: "эта чашка красная", то на самом деле имеем в виду, что молекулярный состав поверхности чашки поглощает все световые фотоны, кроме красных.</p>
55
<p>Для лучшего понимания - немного физики. Свет, если сузить и упростить это понятие, можно назвать потоком фотонов. Когда мы говорим: "эта чашка красная", то на самом деле имеем в виду, что молекулярный состав поверхности чашки поглощает все световые фотоны, кроме красных.</p>
56
<p>Если солнечный свет пропустить через трехгранную призму, как поступил сэр Исаак Ньютон в 1676 году, то мы получим спектр из семи цветов - красный, оранжевый, желтый, зеленый, голубой, синий и фиолетовый. Когда мы видим радугу, это как раз небо выступает в роли огромной призмы. Диапазон света который мы можем воспринимать, ограничен. Отсюда и формируются тона, которые мы воспринимаем.</p>
56
<p>Если солнечный свет пропустить через трехгранную призму, как поступил сэр Исаак Ньютон в 1676 году, то мы получим спектр из семи цветов - красный, оранжевый, желтый, зеленый, голубой, синий и фиолетовый. Когда мы видим радугу, это как раз небо выступает в роли огромной призмы. Диапазон света который мы можем воспринимать, ограничен. Отсюда и формируются тона, которые мы воспринимаем.</p>
57
<p>Но особенно выделяются красный, синий и зеленый. На основе этого создана шкала -<strong>RGB</strong>(аббревиатура английских слов<strong>r</strong>ed,<strong>g</strong>reen,<strong>b</strong>lue - красный, зелёный, синий) - аддитивная цветовая модель, которая описывает способ кодирования цвета для воспроизведения с помощью трёх цветов, которые часто называют основными. Все остальные тона и оттенки получают с помощью их смешивания.</p>
57
<p>Но особенно выделяются красный, синий и зеленый. На основе этого создана шкала -<strong>RGB</strong>(аббревиатура английских слов<strong>r</strong>ed,<strong>g</strong>reen,<strong>b</strong>lue - красный, зелёный, синий) - аддитивная цветовая модель, которая описывает способ кодирования цвета для воспроизведения с помощью трёх цветов, которые часто называют основными. Все остальные тона и оттенки получают с помощью их смешивания.</p>
58
<p>Выбор "основных" цветов обусловлен особенностями восприятия цвета сетчаткой человеческого глаза. Ощущение цвета возникает в мозге при возбуждении и торможении цветочувствительных клеток, - колбочек. У человека и приматов существует три вида колбочек, которые различаются по спектральной чувствительности, - ρ (условно "красные"), γ (условно "зелёные") и β (условно "синие"). Отсюда и подобное восприятие.</p>
58
<p>Выбор "основных" цветов обусловлен особенностями восприятия цвета сетчаткой человеческого глаза. Ощущение цвета возникает в мозге при возбуждении и торможении цветочувствительных клеток, - колбочек. У человека и приматов существует три вида колбочек, которые различаются по спектральной чувствительности, - ρ (условно "красные"), γ (условно "зелёные") и β (условно "синие"). Отсюда и подобное восприятие.</p>
59
<p>Но что нам это дает на практике?</p>
59
<p>Но что нам это дает на практике?</p>
60
<p>Возьмём оранжевый шар. Его цвет формируется путём поглощения синих фотонов и отражения красных и зелёных, смесь которых и дает оранжевый.</p>
60
<p>Возьмём оранжевый шар. Его цвет формируется путём поглощения синих фотонов и отражения красных и зелёных, смесь которых и дает оранжевый.</p>
61
<p>В современных рендерах используется в основном физически корректный рендеринг (Physically based rendering - PBR) - метод затенения и рендеринга, обеспечивающий точное представление взаимодействия света с поверхностями. Поэтому и взаимодействие цвета и света происходит на основе их физических характеристик. Подробнее про PBR -<a>здесь</a>и<a>здесь</a>.</p>
61
<p>В современных рендерах используется в основном физически корректный рендеринг (Physically based rendering - PBR) - метод затенения и рендеринга, обеспечивающий точное представление взаимодействия света с поверхностями. Поэтому и взаимодействие цвета и света происходит на основе их физических характеристик. Подробнее про PBR -<a>здесь</a>и<a>здесь</a>.</p>
62
<p>Так что если осветить наш оранжевый шар насыщенным синим светом, то он будет скатываться по цвету в черный спектр. Всё дело в фотонах: так как наш источник освещения испускает в первую очередь синие, то оранжевая поверхность их практически полностью поглощает. Чёрный - это по факту не цвет, а отсутствие отраженных фотонов: что-то вроде "дыры" в нашем зрении.</p>
62
<p>Так что если осветить наш оранжевый шар насыщенным синим светом, то он будет скатываться по цвету в черный спектр. Всё дело в фотонах: так как наш источник освещения испускает в первую очередь синие, то оранжевая поверхность их практически полностью поглощает. Чёрный - это по факту не цвет, а отсутствие отраженных фотонов: что-то вроде "дыры" в нашем зрении.</p>
63
<p>Чуть сместим тон света: пускай цвет шара будет искажённый, но он появится. При этом интенсивность источника освещения осталась на том же уровне</p>
63
<p>Чуть сместим тон света: пускай цвет шара будет искажённый, но он появится. При этом интенсивность источника освещения осталась на том же уровне</p>
64
<p>Поэтому если вдруг в вашей сцене после настройки освещения - особенно интенсивного с насыщенными цветами, - какие то элементы начали скатываться в черный спектр, не стоит паниковать. Возможно, всё дело в фотонах, и ситуация заметно улучшится, когда вы сместите тон освещения.</p>
64
<p>Поэтому если вдруг в вашей сцене после настройки освещения - особенно интенсивного с насыщенными цветами, - какие то элементы начали скатываться в черный спектр, не стоит паниковать. Возможно, всё дело в фотонах, и ситуация заметно улучшится, когда вы сместите тон освещения.</p>
65
<p>Подбор цвета и палитры значительно упрощает цветовой круг. В каком-то смысле это такая "таблица Менделеева" для цвета.</p>
65
<p>Подбор цвета и палитры значительно упрощает цветовой круг. В каком-то смысле это такая "таблица Менделеева" для цвета.</p>
66
<p>цветовой круг по Иоханнесу Иттону</p>
66
<p>цветовой круг по Иоханнесу Иттону</p>
67
<p>Этот круг был создан путём анализа наиболее гармоничных сочетаний цветов, и их взаимодействия. Сейчас самый распространённый вариант цветового круга - RGB.</p>
67
<p>Этот круг был создан путём анализа наиболее гармоничных сочетаний цветов, и их взаимодействия. Сейчас самый распространённый вариант цветового круга - RGB.</p>
68
<p>Вернемся к нашему шару. Цвет<strong>объекта</strong>и цвет<strong>света</strong>находятся на противоположных сторонах круга, - все подобные сочетания дают эффект с отсутствием отраженных фотонов.</p>
68
<p>Вернемся к нашему шару. Цвет<strong>объекта</strong>и цвет<strong>света</strong>находятся на противоположных сторонах круга, - все подобные сочетания дают эффект с отсутствием отраженных фотонов.</p>
69
<p><strong>Сочетание двух цветов, расположенных друг напротив друга на цветовом круге, дают чёрный только когда речь идет о связке цвет-свет.</strong></p>
69
<p><strong>Сочетание двух цветов, расположенных друг напротив друга на цветовом круге, дают чёрный только когда речь идет о связке цвет-свет.</strong></p>
70
<p>Для подбора тона и работы с палитрами цвета, расположенные на противоположных сторонах круга, также крайне важны, хотя и работают по другому принципу. Подобные цвета называются<strong>комплиментарными, дополнительными или контрастными</strong>. В разных источниках: книгах, лекциях и методических пособиях вы можете услышать подобные определения, но касаются они одного и того же явления.</p>
70
<p>Для подбора тона и работы с палитрами цвета, расположенные на противоположных сторонах круга, также крайне важны, хотя и работают по другому принципу. Подобные цвета называются<strong>комплиментарными, дополнительными или контрастными</strong>. В разных источниках: книгах, лекциях и методических пособиях вы можете услышать подобные определения, но касаются они одного и того же явления.</p>
71
<p>Эти цвета отлично сочетаются друг с другом, и если в вашей работе вы остановили свой выбор на двухцветовой схеме, то ваш выбор - комплиментарные цвета.</p>
71
<p>Эти цвета отлично сочетаются друг с другом, и если в вашей работе вы остановили свой выбор на двухцветовой схеме, то ваш выбор - комплиментарные цвета.</p>
72
<p>Данный принцип, как и описанные выше имеет прямое отношение к физиологии человека. Посмотрите пристально на зеленый квадрат, а потом закройте глаза, - и в качестве остаточного изображения у вас перед глазами возникнет красный. Можно повторить данный опыт на любом из цветов круга и каждый раз остаточным изображением будет его комплиментарный цвет.</p>
72
<p>Данный принцип, как и описанные выше имеет прямое отношение к физиологии человека. Посмотрите пристально на зеленый квадрат, а потом закройте глаза, - и в качестве остаточного изображения у вас перед глазами возникнет красный. Можно повторить данный опыт на любом из цветов круга и каждый раз остаточным изображением будет его комплиментарный цвет.</p>
73
<p>Но почему нам нравится данное сочетание? Исследователи полагают, что физическое смешивание противоположных цветов даёт серый, - цвет, который считают признаком гармонии. Если попытаться повторить выше указанный опыт на средне-сером цвете, то никакого остаточного изображения не появится: нашему мозгу не потребуется "компенсация".</p>
73
<p>Но почему нам нравится данное сочетание? Исследователи полагают, что физическое смешивание противоположных цветов даёт серый, - цвет, который считают признаком гармонии. Если попытаться повторить выше указанный опыт на средне-сером цвете, то никакого остаточного изображения не появится: нашему мозгу не потребуется "компенсация".</p>
74
<p>Цветовой круг нередко называют - хроматическим, то есть отражающим цвета видимого спектра.</p>
74
<p>Цветовой круг нередко называют - хроматическим, то есть отражающим цвета видимого спектра.</p>
75
<p>Хроматический круг существенно облегчает подбор палитры. Например, схемы на основе треугольника (всегда равнобедренного) квадрата или ромба как бы отсекают "лишние" цвета: использовать можно только те, что внутри фигуры.</p>
75
<p>Хроматический круг существенно облегчает подбор палитры. Например, схемы на основе треугольника (всегда равнобедренного) квадрата или ромба как бы отсекают "лишние" цвета: использовать можно только те, что внутри фигуры.</p>
76
<p><strong>Контраст светлого и тёмного</strong>В данном случае изменение цвета происходит путем подмешивания в него черного или белого цвета.</p>
76
<p><strong>Контраст светлого и тёмного</strong>В данном случае изменение цвета происходит путем подмешивания в него черного или белого цвета.</p>
77
<p>На практике это выглядит вот так. Там, где правый верхний угол - наиболее насыщенный цвет, а смещение строго по горизонтали или вертикали высветляет или затемняет его.</p>
77
<p>На практике это выглядит вот так. Там, где правый верхний угол - наиболее насыщенный цвет, а смещение строго по горизонтали или вертикали высветляет или затемняет его.</p>
78
<p>Несколько примеров изменения цвета по светлоте/темноте:</p>
78
<p>Несколько примеров изменения цвета по светлоте/темноте:</p>
79
<p>Такой контраст позволяет сделать интересный эффект глубины, смещая окрас объектов от насыщенного или даже темного цвета в белую зону и добиваясь отличного ощущения пространства.</p>
79
<p>Такой контраст позволяет сделать интересный эффект глубины, смещая окрас объектов от насыщенного или даже темного цвета в белую зону и добиваясь отличного ощущения пространства.</p>
80
<p>Например, в данной работе цвет и перспектива усиливают друг друга.</p>
80
<p>Например, в данной работе цвет и перспектива усиливают друг друга.</p>
81
<p>Ещё есть характерная закономерность: светлые тона на чёрном фоне выступают вперёд в соответствии со степенью их светлоты. Пример - изображение ниже.</p>
81
<p>Ещё есть характерная закономерность: светлые тона на чёрном фоне выступают вперёд в соответствии со степенью их светлоты. Пример - изображение ниже.</p>
82
<p>А тёмное на светлом фоне стремится вперёд:</p>
82
<p>А тёмное на светлом фоне стремится вперёд:</p>
83
<p>Отличный пример работы по использованию данных свойств -<a>фанарт</a>по игре Firewatch.</p>
83
<p>Отличный пример работы по использованию данных свойств -<a>фанарт</a>по игре Firewatch.</p>
84
<p>Ещё один<a>пример</a>того, как цвет применяют для создания глубины:</p>
84
<p>Ещё один<a>пример</a>того, как цвет применяют для создания глубины:</p>
85
<p>Интересная особенность: красный, оранжевый и жёлтый при недостаточном освещении кажутся более тёмными, в то время как зелёный и синий в тех же условиях, наоборот, кажутся более светлыми.</p>
85
<p>Интересная особенность: красный, оранжевый и жёлтый при недостаточном освещении кажутся более тёмными, в то время как зелёный и синий в тех же условиях, наоборот, кажутся более светлыми.</p>
86
<p><strong>Контраст холодного и теплого</strong>Такое деление оказывает на человека мощный психологический эффект, - это даёт нам эффективный приём воздействия на зрителя. Но связь между ощущением температуры и зрительным восприятием цвета не всегда очевидна.</p>
86
<p><strong>Контраст холодного и теплого</strong>Такое деление оказывает на человека мощный психологический эффект, - это даёт нам эффективный приём воздействия на зрителя. Но связь между ощущением температуры и зрительным восприятием цвета не всегда очевидна.</p>
87
<p>В книге "Искусство цвета" Иоханесс Иттон рассказывает об интересном опыте. В мастерских, окрашенных в сине-зелёные цвета, рабочие жаловались на холод при температуре 15 градусов. В это же время в красно-оранжевом помещении они начинали жаловаться на холод лишь при температуре 11 - 12.</p>
87
<p>В книге "Искусство цвета" Иоханесс Иттон рассказывает об интересном опыте. В мастерских, окрашенных в сине-зелёные цвета, рабочие жаловались на холод при температуре 15 градусов. В это же время в красно-оранжевом помещении они начинали жаловаться на холод лишь при температуре 11 - 12.</p>
88
<p>Немного классики. Обратите внимание что детализация на этой картине Клода Моне практически отсутствует. По сути, нам доступны лишь силуэты и тени, но картина при этом очень выразительна и задаёт настроение.</p>
88
<p>Немного классики. Обратите внимание что детализация на этой картине Клода Моне практически отсутствует. По сути, нам доступны лишь силуэты и тени, но картина при этом очень выразительна и задаёт настроение.</p>
89
<p>Клод Моне "Лондонский парламент в тумане"</p>
89
<p>Клод Моне "Лондонский парламент в тумане"</p>
90
<p>Ещё один пример холодных и тёплых тонов от beeple.</p>
90
<p>Ещё один пример холодных и тёплых тонов от beeple.</p>
91
<p>Контраст холодного и тёплого обладает интересным свойством: он может влиять на наше восприятие расстояние до объекта. Чем дальше от нас объект, тем более холодным он кажется - из-за воздушного слоя. Наш мозг так привык к этому ориентиру, что такой эффект будет работать и в 2D, и в 3D.</p>
91
<p>Контраст холодного и тёплого обладает интересным свойством: он может влиять на наше восприятие расстояние до объекта. Чем дальше от нас объект, тем более холодным он кажется - из-за воздушного слоя. Наш мозг так привык к этому ориентиру, что такой эффект будет работать и в 2D, и в 3D.</p>
92
<p><strong>Контраст комплиментарных цветов</strong>Этот тип контраста мы обсудили выше, тут отмечу только занятный факт, который показывает, насколько четко наш мозг складывает подобные цвета в серый.</p>
92
<p><strong>Контраст комплиментарных цветов</strong>Этот тип контраста мы обсудили выше, тут отмечу только занятный факт, который показывает, насколько четко наш мозг складывает подобные цвета в серый.</p>
93
<p>Есть такое направление в живописи - пуантализм: рисунок создаётся нанесением на холст точек, которые на расстоянии сливаются в единую картину. Пуантилисты добивались серого цвета нанесением очень маленьких точек комплиментарных цветов рядом друг с другом: серый тон появлялся только в глазах зрителя.</p>
93
<p>Есть такое направление в живописи - пуантализм: рисунок создаётся нанесением на холст точек, которые на расстоянии сливаются в единую картину. Пуантилисты добивались серого цвета нанесением очень маленьких точек комплиментарных цветов рядом друг с другом: серый тон появлялся только в глазах зрителя.</p>
94
<p><strong>Симультанный контраст</strong>Это, пожалуй, самый непростой для понимания, но не менее важный вид контраста. Чтобы объяснить, о чём речь, я просто процитирую упомянутого не раз Иоханесса Иттена.</p>
94
<p><strong>Симультанный контраст</strong>Это, пожалуй, самый непростой для понимания, но не менее важный вид контраста. Чтобы объяснить, о чём речь, я просто процитирую упомянутого не раз Иоханесса Иттена.</p>
95
<p><em>Понятие "симультанный контраст" обозначает явление, при котором наш глаз при восприятии какого-либо цвета тотчас же требует появления его дополнительного цвета, и если такового нет, то симультанно, то есть одновременно порождает его сам.</em></p>
95
<p><em>Понятие "симультанный контраст" обозначает явление, при котором наш глаз при восприятии какого-либо цвета тотчас же требует появления его дополнительного цвета, и если такового нет, то симультанно, то есть одновременно порождает его сам.</em></p>
96
<p><em>Это означает, что основной закон цветовой гармонии базируется на законе о дополнительных цветах. Симультанно порожденные цвета возникают лишь как ощущение и объективно не существуют. Они не могут быть сфотографированы.</em></p>
96
<p><em>Это означает, что основной закон цветовой гармонии базируется на законе о дополнительных цветах. Симультанно порожденные цвета возникают лишь как ощущение и объективно не существуют. Они не могут быть сфотографированы.</em></p>
97
<p><em>Поскольку симультанные цвета возникают лишь в глазах, они вызывают в нас чувство возбуждения и живой вибрации от непрерывно меняющейся интенсивности этих цветовых ощущений.</em></p>
97
<p><em>Поскольку симультанные цвета возникают лишь в глазах, они вызывают в нас чувство возбуждения и живой вибрации от непрерывно меняющейся интенсивности этих цветовых ощущений.</em></p>
98
<p><em>При длительном рассматривании основной цвет как бы теряет свою силу, - глаз устаёт, - в то время как восприятие симультанно возникшего цвета усиливается. При сочетании двух чистых цветов, не являющихся строго дополнительными, каждый из них стремится сдвинуть другой в направлении к его дополнительному, причём в большинстве случаев оба цвета теряют нечто от присущего им характера и приобретают новые оттенки.</em></p>
98
<p><em>При длительном рассматривании основной цвет как бы теряет свою силу, - глаз устаёт, - в то время как восприятие симультанно возникшего цвета усиливается. При сочетании двух чистых цветов, не являющихся строго дополнительными, каждый из них стремится сдвинуть другой в направлении к его дополнительному, причём в большинстве случаев оба цвета теряют нечто от присущего им характера и приобретают новые оттенки.</em></p>
99
<p>Одна из самых мощных цветовых схем - равносторонний треугольник.</p>
99
<p>Одна из самых мощных цветовых схем - равносторонний треугольник.</p>
100
<p>На схеме видно, насколько все цвета смещены относительно их комплиментарных.</p>
100
<p>На схеме видно, насколько все цвета смещены относительно их комплиментарных.</p>
101
<p><strong>Контраст по насыщенности</strong>Контраст по насыщенности часто путают с контрастом по светлоте/темноте. Основное отличие в том, что насыщенность не пытается уйти в белую или чёрную зону, а падает, стремясь прийти в средне-серую.</p>
101
<p><strong>Контраст по насыщенности</strong>Контраст по насыщенности часто путают с контрастом по светлоте/темноте. Основное отличие в том, что насыщенность не пытается уйти в белую или чёрную зону, а падает, стремясь прийти в средне-серую.</p>
102
<p>По градации RGB средне-серый - это цвет в значениях 128:128:128. Смещение в показанной ниже системе происходит по прямой, из правого верхнего угла (максимально чистый цвет) к средне-серому.</p>
102
<p>По градации RGB средне-серый - это цвет в значениях 128:128:128. Смещение в показанной ниже системе происходит по прямой, из правого верхнего угла (максимально чистый цвет) к средне-серому.</p>
103
<p><strong>Контраст по размеру цветовых пятен</strong>Этот тип контраста характеризуется размерным соотношением между двумя или несколькими цветовыми пятнами.</p>
103
<p><strong>Контраст по размеру цветовых пятен</strong>Этот тип контраста характеризуется размерным соотношением между двумя или несколькими цветовыми пятнами.</p>
104
<p>Если мы обобщим виды контрастов и подмешаем в них цветовой круг с его схемами, то получим стандартное распределение цвета относительно объема модели или картины.</p>
104
<p>Если мы обобщим виды контрастов и подмешаем в них цветовой круг с его схемами, то получим стандартное распределение цвета относительно объема модели или картины.</p>
105
<p>Это соотношение, близкое к 60 на 30 на 10. 60 - это основной цвет, как правило относительно насыщенный. 30 - дополняющий, заметно более блеклый, чем основной. 10 - это акцентный, чаще всего самый яркий. Это не жёсткая формула, но стоит стремится к подобной пропорции. Помните: если вы не можете с первого взгляда определить основной цвет модели, стоит пересмотреть распределение цветов.</p>
105
<p>Это соотношение, близкое к 60 на 30 на 10. 60 - это основной цвет, как правило относительно насыщенный. 30 - дополняющий, заметно более блеклый, чем основной. 10 - это акцентный, чаще всего самый яркий. Это не жёсткая формула, но стоит стремится к подобной пропорции. Помните: если вы не можете с первого взгляда определить основной цвет модели, стоит пересмотреть распределение цветов.</p>
106
<p>Рассмотрим на примере. Первый робот покрашен в соответствии с гармоничной триадой а вот последующие модели - с нарушением правил подбора цвета.</p>
106
<p>Рассмотрим на примере. Первый робот покрашен в соответствии с гармоничной триадой а вот последующие модели - с нарушением правил подбора цвета.</p>
107
<p><strong>Про черный, белый и оттенки серого</strong></p>
107
<p><strong>Про черный, белый и оттенки серого</strong></p>
108
<p>Чёрный и белый цветами, по сути, не являются. К чёрному стремится любой цвет при снижении яркости - например, при уменьшении освещённости до полной темноты. При увеличении яркости любой цвет стремится к белому. Черный и белый, а также весь спектр серого между ними - это<strong>ахроматический ряд</strong>, в переводе с древнегреческого - "не цветной". Ахроматические цвета различаются только по светлоте.</p>
108
<p>Чёрный и белый цветами, по сути, не являются. К чёрному стремится любой цвет при снижении яркости - например, при уменьшении освещённости до полной темноты. При увеличении яркости любой цвет стремится к белому. Черный и белый, а также весь спектр серого между ними - это<strong>ахроматический ряд</strong>, в переводе с древнегреческого - "не цветной". Ахроматические цвета различаются только по светлоте.</p>
109
<p>Новички часто активно используют чёрный, серый и белый цвета - это ошибка. Профессиональные художники как правило эти цвета не используют, так как в природе их не существует.</p>
109
<p>Новички часто активно используют чёрный, серый и белый цвета - это ошибка. Профессиональные художники как правило эти цвета не используют, так как в природе их не существует.</p>
110
<p>Гармония - это равновесие, симметрия сил. Нейтральным цветом считается серый - наш глаз не создаёт с ним никакого дополнительного цвета, и это чаще всего делает его самым гармоничным.</p>
110
<p>Гармония - это равновесие, симметрия сил. Нейтральным цветом считается серый - наш глаз не создаёт с ним никакого дополнительного цвета, и это чаще всего делает его самым гармоничным.</p>
111
<p>И тут мы попадаем в "ловушку гармонии". Основная задача большинства визуальных произведений - вызывать эмоции, а серый цвет, наоборот, их чаще всего приглушает. Поэтому серый стоит использовать крайне аккуратно и с оттенками цветов хроматического ряда. Чёрный и белый не могут быть комплиментарными цветами и не отображаются на цветовом круге.</p>
111
<p>И тут мы попадаем в "ловушку гармонии". Основная задача большинства визуальных произведений - вызывать эмоции, а серый цвет, наоборот, их чаще всего приглушает. Поэтому серый стоит использовать крайне аккуратно и с оттенками цветов хроматического ряда. Чёрный и белый не могут быть комплиментарными цветами и не отображаются на цветовом круге.</p>
112
<p>У ахроматических цветов есть важная роль: подмешивая их в тона цветового круга, мы можем регулировать яркость и влиять на насыщенность цвета. Эти цвета отлично подходят для создания инструментов по регулированию тех или иных параметров. Например - для текстурных одноканальных карт, таких как Hights и Ambient oclusion. Но именно при формировании своей палитры их лучше избегать.</p>
112
<p>У ахроматических цветов есть важная роль: подмешивая их в тона цветового круга, мы можем регулировать яркость и влиять на насыщенность цвета. Эти цвета отлично подходят для создания инструментов по регулированию тех или иных параметров. Например - для текстурных одноканальных карт, таких как Hights и Ambient oclusion. Но именно при формировании своей палитры их лучше избегать.</p>
113
<p>Но не забывайте, что серый - это очень богатый цвет, если в нём присутствует тон. Вот несколько палитр:</p>
113
<p>Но не забывайте, что серый - это очень богатый цвет, если в нём присутствует тон. Вот несколько палитр:</p>
114
<p>Напоследок - простой, но действенный прием от Антона Беляева.</p>
114
<p>Напоследок - простой, но действенный прием от Антона Беляева.</p>
115
<p>Находим красивую картинку с крутой цветовой схемой, конвертируем её в мозайку, и получаем на выходе отличную палитру.</p>
115
<p>Находим красивую картинку с крутой цветовой схемой, конвертируем её в мозайку, и получаем на выходе отличную палитру.</p>
116
<p>Несколько примеров изображений, полученных таким образом:</p>
116
<p>Несколько примеров изображений, полученных таким образом:</p>
117
<p>Цвет - не самый простой предмет для изучения. Но его понимание это во многом фундамент всего дизайна. Если вы сможете с ним совладать, ваши навыки и уровень как специалиста значительно вырастут.</p>
117
<p>Цвет - не самый простой предмет для изучения. Но его понимание это во многом фундамент всего дизайна. Если вы сможете с ним совладать, ваши навыки и уровень как специалиста значительно вырастут.</p>
118
<p><em>Автор:<a>Эдуард Витер</a></em></p>
118
<p><em>Автор:<a>Эдуард Витер</a></em></p>
119
<p>Хочешь получать лучшие статьиот XyZ раз в неделю?</p>
119
<p>Хочешь получать лучшие статьиот XyZ раз в неделю?</p>
120
<p>Подпишись на рассылку XyZ</p>
120
<p>Подпишись на рассылку XyZ</p>
121
<p>Нажимая на кнопку, вы соглашаетесь с условиями обработки данных</p>
121
<p>Нажимая на кнопку, вы соглашаетесь с условиями обработки данных</p>
122
122