Как сделать так чтобы цветовая схема не менялась
Обновлено: 06.07.2024
Известный художник Марко Буччи рассказывает о нюансе работы с цветом.
У себя на YouTube-канале художник-иллюстратор Марко Буччи рассказал об особенности цвета и о том, как насыщенность, цветовой тон и яркость влияют друг на друга.
Для начала разберемся в базовых терминах.
Цвет напрямую зависит от яркости. Вот, например, два цвета с разной насыщенностью:
Несложно сказать, что верхний цвет светлее, а нижний — темнее. Если вообще убрать насыщенность, мы сразу увидим, какая яркость у каждого из цветов:
Многие по ошибке считают, что цветовой тон и насыщенность не связаны с яркостью, ведь яркость выбирается по вертикальной оси палитры, а цветовой тон и насыщенность можно добавить после. Но это не так.
Более того, каждое цветовое решение влияет на яркость.
Для начала рассмотрим пример с насыщенностью.
У нас есть палитра и холст. Используем здесь красный оттенок. Начнем с самого ненасыщенного и нарисуем небольшой образец. А после увеличим насыщенность, оставив при этом тот же уровень яркости в палитре цветов.
Сделаем еще несколько образцов, делая их все более насыщенными.
А теперь переведем изображение в черно-белое.
Яркость выходит разная — добавление насыщенности делает цвет темнее. При этом Photoshop показывает, что уровень яркости не изменился.
Но есть и треугольные палитры, и они оказываются чуть более точными визуально.
На изображении выше палитра цветов Corel Painter. Ее форма сама по себе говорит нам, что более насыщенный цвет будет ниже по яркости. Помните, как яркость Photoshop не отражала изменения в насыщенности? Если изменять насыщенность в палитре Corel Painter, ползунок значения яркости теперь сдвигается. Но и это не полностью передает действительность.
Для начала отметим, что не все цветовые палитры одинаковы. Вот, например, плагин Coolorus для Photoshop, тоже имеющий треугольную форму:
При изменении насыщенности ползунок яркости не двигается, оставаясь на отметке 100.
Теперь поговорим о влиянии цветового тона на яркость. Тут начинается самое интересное.
Сверху у нас остается наш предыдущий пример с красным цветом. Теперь повторим процесс с синим.
Уровень яркости использовался такой же, как для красного цвета, и теперь у нас есть два ряда образцов. Переведем их в ч/б.
Как видно на изображении выше, разные цвета при изменении яркости дают разное значение яркости. И это очень важный момент в понимании цвета, который может сбивать с толку при рисовании в цифровом формате.
Вернемся к палитре Corel Painter. Мы уже знаем, что она показывает нам снижение яркости при увеличении насыщенности.
Но неточность этой палитры состоит в том, что она снижает яркость каждого цветового оттенка одинаково. Как мы только что убедились на примере выше, это совсем не так.
Вот еще один особенно выразительный пример — нарисуем образец фиолетовым цветом с 50% яркостью:
Теперь выберем максимальную яркость и максимальную насыщенность, нарисуем еще один образец:
Это сложно уложить в голове, но мы сместились вверх на половину палитры и получили более темный цвет.
Разумеется, это работает так не со всеми цветами. Например, возьмем желтый.
При увеличении насыщенности он не становится очень темным. У нас есть два образца, как и с фиолетовым цветом. Переходим в ч/б, и результат выходит более ожидаемым:
К слову, все то же самое происходит и с настоящими пигментами, дело не только в цифровом формате. Вот образцы ярких и очень насыщенных акриловых красок:
При переводе изображения в ч/б мы видим такое же поведение.
Чтобы помочь разобраться в этой теории цвета, Марко Буччи сделал специальную схему, которая может служить хорошим ориентиром. В ней два слоя.
Первый слой — это просто схема со всеми оттенками и различными уровнями насыщенности:
На втором слое те же уровни насыщенности, но в ч/б формате.
Разумеется, тут не отображено каждое мельчайшее изменение оттенка, но отражены наиболее существенные.
Существует еще одна проблема при рисовании в цифровом формате.
Допустим, мы хотим проверить читаемость рисунка, для чего нужно перевести его в ч/б. Неправильным способом будет использование настройки Hue/Saturation (Цветовой тон/Насыщенность). Когда мы снижаем насыщенность, яркость для всех цветов остается одинаковой, что не соответствует действительности.
Для примера мы используем Photoshop, но все то же самое происходит в Krita, в Corel Painter и в Clip Studio Paint. Один из надежных способов проверить рисунок в ч/б — переключить режим изображения на Greyscale (Градации серого).
Минус в том, что в данном режиме мы больше не можем рисовать в цвете, что делает использование этого способа не особо удобным.
Более хитрый способ заключается в создании нового слоя и заливки его белым цветом. После режим слоя переводится в Color (Цветность):
Этот способ работает в различных приложениях и является вполне надежным, хотя контраст, возможно, немного преувеличен.
Лучший способ проверки доступен только в Photoshop. Перейдите по вкладкам View (Просмотр) -> Proof Setup (Варианты цветопробы) -> Custom (Заказной).
Нажмите на выпадающий список и выберите Dot Gain 20%.
Теперь вы можете переключаться между цветным и ч/б режимами с помощью сочетания клавиш Ctrl+Y.
Теперь на примере работы Буччи рассмотрим, как эта теория цвета на самом деле влияет на рисование. Вот небольшой набросок руки Марко:
Он преимущественно состоит из серых цветов, поэтому область сзади сделана яркой. И для нее специально выбран конкретный оттенок синего.
На выбор цвета напрямую повлиял тот факт, что этот оттенок синего дает более темные значения яркости при высокой насыщенности. Таким образом цвет выходит ярким и выделяющимся, но при преобразовании изображения в ч/б яркость получается довольно низкой. Это помогает выделить более светлый центральный элемент рядом:
Вот еще один пример, где наоборот нужны были насыщенные цвета, которые не читались бы как темные:
Для этого выбор палитры состоял в основном из цветов, которые, как правило, сохраняют свои значения яркости при увеличении насыщенности.
Эту теорию цвета полезно всегда держать в голове при рисовании.
Возможно, данный эффект связан с длиной световых волн. В любом случае, за объяснениями лучше будет обратиться к науке.
Существует англоязычный акроним ROY G BIV (Рой Джи Бив). Это измерения длины волны каждого цвета в порядке убывания. Длина волн крайне относительно совпадает со схемой значений яркости. Например, красный цвет не будет самым светлым при высокой насыщенности. Поэтому точного ответа дать сейчас нельзя.
Марко Буччи — это известный художник-иллюстратор и преподаватель живописи из Канады. За 15 лет профессиональной деятельности Марко успел поработать с издательством Walt Disney Publishing Worldwide, производителями игрушек LEGO, Hasbro, Mattel Toys и Fisher-Price, разработчиком игр LucasArts, а также мультипликационными студиями Nelvana, GURU Studio, C.O.R.E. Digital Pictures и Yowza! Animation.
В качестве преподавателя Марко сотрудничал с Академией искусств Сан-Франциско, Колледжем Сентенниал в Торонто и другими учебными заведениями.
Можно же было просто в двух словах объяснить природу цвета, и что на самом деле меняет параметр яркости в cg-палитрах (по сути это не яркость, а именно множитель яркости от 0.0 до 1.0), и всё встало бы на свои места без кучи одинаковых примеров.
Буду вторым гендером:
Марко бучи - популист и смотреть на его рисунки физически больно. Есть множество тех же ютуберов, которые в разы информативнее и техничнее учат азам рисования. Я уже молчу про то, что их рисунки выглядят намного конструктивнее и красивее, чем мазня бучи
Какие например ютуберы?
Мне Sinix очень нравится, Marc Brunet тоже круто объясняет.
Oh, hi. I'm Mark (c)
“As you know, my lessons are not free, pay with a like and subscribe”
Яркость выходит разная — добавление насыщенности делает цвет темнее. При этом Photoshop показывает, что уровень яркости не изменился.
1. В видео идёт речь о Яркости (Brightness) и Значении (Value). Это разные вещи. В статье они преподносятся одинаково - как яркость.
2. Кроме Яркости есть параметр Светлость (Lightness) - он как раз и меняется.
3. Тот факт, что при обесцвечивании вдруг меняется Значение (Value) обусловлено тем, что невозможно провести этот процесс без потерь. Поэтому функция обесцвечивания предлагается в нескольких вариантах. Есть даже вариант без изменения Значения (Value), но тогда все цветовые пятна будут одинаковыми.
Горячо благодарим за фидбек!💖
По поводу поведений цветов на экране стоит помнить что экран имитирует реальность а не вопсроизводит ёё, то-есть как наше зрение регистрирует желтый цвет не имея специальных светочувствительных клеток к желтому цвету в глазу, у нас их 3 которые чувствительны к 3 типам волн это те-же что и в мониторе красный синий и зелёный, так что когда монитор отдаёт в глаза равное значение красного и зелёного наши глаза интерпретируют это как желтый несмотря на то что волн ~600nm там нет и в помине.
Так например большинство вещей что мы видим как фиолетовые на самом деле состоят из волн двух цветов это красного и синего, ибо на ультрафиолет наши глаза реагируют крайне слабо и объект который преимущественно отражает только ультрафиолет будет выглядеть больше серым или белым но никак не фиолетовым.
Ещё один важный эффект в смешении цветов, и цветовом пространстве, RGB довольно ограниченная палитра по смешению цвета и компьютеры для экономии используют полное значение цвета (0-255) только в момент отображения - при попадании на экран, всё остальное время цвет хранится в памяти в виде квадратного корня этого значения, при просто передачи картинок это экономит их вес и отображаются они безовсяких проблем, но когда речь заходит про редактирование. в общем наложив один цвет на другой в RGB программа сложит их корни и поделит на 2 и при отображении выдаст на экран итоговое значение возведённое в квадрат то-есть вместо к примеру (81+144)/2=112.5 мы получим (9+12)/2 в квадрате 110.25 то-есть значение темнее, и так смешиваются все цвета выдавая результат темнее чем должен быть. Вариант как этого избежать использовать цветовое пространство Lab его поддерживает фотошоп.
Марко Буччи прекрасен, обожаю его канал. Спасибо за популяризацию!
Всегда люблю ваши статьи.
Чтобы "перекрасить" страницу, в интерфейсе редактирования содержимого раскройте меню "Оформление" и раскрывшемся списке переключайтесь между цветовыми схемами - данные на странице при этом сохранятся.
Также Вы можете отредактировать существующие схемы или создать новые. Рассмотрим, как это сделать.
Шаг 1
Чтобы создать новую схему, нажмите на "+" в списке палитр.
Шаг 2
В открывшемся окне Вы можете выбрать одну из предложенных палитр (если таковые имеются в списке) и отредактировать ее.
Обратите внимание!
- Кнопки, помеченные иконкой с замком, являются системными и недоступны для редактирования, но Вы можете скопировать любую из системных палитр и перейти к редактированию ее копии. Для этого просто выберите нужную схему и нажмите "Копировать". Копия появится последней в списке.
Шаг 3
Если же Вы желаете создать абсолютно новую палитру, нажмите на "+" в конце списка.
В список добавится новая, "чистая" тема. Для удобства ей будет присвоен порядковый номер.
Шаг 4
Перейдите в режим редактирования.
Обратите внимание!
- Для перемещения по странице Вы можете вернуться в режим взаимодействия.
Шаг 5
Теперь выберите в правой части экрана какой-либо элемент интерфейса (Вы можете выбрать любой блок на странице, например, шапку сайта или какую-либо кнопку).
Шаг 6
После того как элемент выбран, в левой части экрана отобразится список доступных настроек цветов, тут Вы сможете изменить цвет текста, цвет самого элемента, цвет фона и т.д.
Обратите внимание!
- В списке параметров слева выводятся не только настройки выбранного элемента, но и настройки некоторых общих элементов (например, body).
Шаг 7
Отредактируйте цвета и пр. параметры выбранного элемента - все изменения будут отображаться в правой части экрана.
Подобным образом отредактируйте все необходимые элементы на странице/сайте.
Обратите внимание!
- При необходимости Вы можете включить "Инверсный режим" - он позволит обратить цвета некоторых элементов на странице.
- Чтобы сбросить все изменения в схеме, нажмите на кнопку отмены. Все внесенные Вами до последнего сохранения изменения будут сброшены.
Шаг 8
После того как схема будет готова, нажмите "Сохранить".
Шаг 9
Вернитесь обратно в интерфейс редактирования содержимого и выберите созданную цветовую палитру.
Обратите внимание!
- Если Вы хотите изменить фон страницы, нажмите на него в правой части экрана, а затем перейдите к редактированию фона в блоке "body" слева. Если фоном является картинка - Вы сможете заменить ее, нажав на соответствующее поле в блоке. Если фон - это просто цвет, Вы сможете изменить его в палитре "Цвет фона".
Удаление темы
При необходимости Вы можете удалить любую тему (кроме системных). Для этого просто выберите ее в списке тем и нажмите на кнопку "Удалить".
При этом нумерация будет смещаться, то есть, если были схемы 1, 2, 3, 4, 5, 6 и схема 4 удалена, то схема 5 будет переименована в 4, схема 6 в 5.
Мы занимаемся разработкой веб-сайтов для России и зарубежных рынков с 1997 года. Наша команда – более пятисот сотрудников в разных странах и городах.
Данный сайт защищен с помощью reCAPTCHA и соответствует
Политике конфиденциальности и Условиям использования Google.
Читайте также: