{"id":3827,"url":"\/distributions\/3827\/click?bit=1&hash=a3421833d15d1c84d64094d7d2023b5ba4157196f84512612cd445af573903a5","title":"\u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043f\u0438\u0448\u0435\u0442 \u043d\u0430 Java \u0438 \u0445\u043e\u0447\u0435\u0442 \u0441\u043c\u0435\u043d\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443","buttonText":"\u042d\u0442\u043e \u043f\u0440\u043e \u043c\u0435\u043d\u044f","imageUuid":"2b70606f-740c-5d85-8a71-8a33c5f66557","isPaidAndBannersEnabled":false}
Gamedev
Smirnov School

Как в рисунке сделать эффектный переход между светом и тенью

Замечали приём, когда художники добавляют на границе света и тени яркий цветовой переход? Иллюстратор из Disney Марко Буччи показывает, как добавить своим картинам живости подобным образом.

Яркий пример использования приёма на концепт-арте от Andy Harkness

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

Если присмотреться внимательнее, то немного реализма всё-таки имеется. Давайте разберёмся.

Вот два быстрых наброска:

На обоих шар, освещённый далеким светом лампы. Тон этих двух картин в целом одинаков. Но какая из них кажется более естественной и приятной с точки зрения цвета? Второй вариант: он демонстрирует так называемое «затухание света».

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

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

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

Ладно, это слишком страшно, давайте просто посмотрим наглядно, что происходит.

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

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

Давайте теперь посмотрим, как ведет себя цвет при ослаблении света. Он истощается так же, как и тон, но не линейно: становится более насыщенным по мере потемнения тона. Но есть ещё одна хитрость — оттенок цвета тоже меняется! Когда тон становится темнее, оттенок теряет желтизну (и теплоту).

Цвет света меняется в зависимости от расстояния до источника света

Довольно легко запомнить: просто представьте Пакмена, который ест цвета по цветовому кругу. Он начинает с жёлтого, потом поглощает оранжевый, красный, и так далее.

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

А что произойдет, если источник света, скажем, красный? Вот картина, которая идеально передаёт поведение красного света:

Здесь Пакмен начинает «проедать» свой путь с красного цвета вместо жёлтого. Важно понимать, что Пакмен никогда не доходит до конца круга. К тому времени, когда он добирается примерно до четвёртого снизу цвета (интенсивный синий), из-за закона обратных квадратов свет исчезает, и приходится уже работать с тенями… следовательно, просчитывать цвет иначе.

Упражнение на работу с убывающим светом

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

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

Здесь довольно легко увидеть градиент на полу. С цветом дополнительная трудность в том, что нужно ещё и отслеживать спад освещённости на самих сферах.

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

Вот ещё один фото-пример затухания света: эти фонари дают увидеть эффект, который теперь должен стать для нас довольно предсказуемым.

Теперь посмотрите на этот пример. Закат в горах:

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

Как использовать эти знания на практике

Теперь — что же делать с тем крутым приёмом, где по границе светотени идёт яркая цветовая полоса? Если вы помните, с него началась статья.

Так вот, этот приём состоит в том, чтобы показать истощение цвета на очень сжатом пространстве. Вот так:

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

Давайте потренируемся. Допустим, вот фотография сарая, где есть много границ светотени, с которыми можно поиграть и применить этот приём.

Сперва набросайте основные формы и тон. Убедитесь, что композиция, форма и тон на месте, прежде чем работать с цветом.

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

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

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

Конечно, даже в режиме перекрытия всё равно придется настраивать цвета в зависимости от степени затухания света. Только от вас зависит, сколько оттенков проглотит Пакмен. Марко обычно выбирает между двумя и тремя оттенками. Будьте осторожны: если вы даёте слишком много оттенков в таком маленьком пространстве, оно может начать выглядеть как радуга. Ограничьтесь примерно тремя оттенками.

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

Оттенок, который Марко выбирает для тёплого цвета, усиливает эффект затухания света: Пакмен продолжает обедать от жёлтого к оранжевому.

И вот финальная картина! Конечно, это тонкий приём, но он довольно мощный. Вам стоит попробовать! Выглядит живописно, не правда ли?

Перевод выполнила Середа Екатерина, автор в Smirnov School. Мы готовим концепт-художников, левел-артистов и 3D-моделеров для игр и анимации. Если придёте к нам на курс, не забудьте спросить о скидке для читателей с DTF.

0
3 комментария
Georgy Pobedonosny

Обожаю работу со светом у Паскаля Кэмпиона

Ответить
Развернуть ветку
Hy6oMeT .

Короче, градиентики везде и на всем. Градиентики всему голова.

Ответить
Развернуть ветку
Александр Федотов

На графике с зависимостью интенсивности от дистанции не закон обратных квадратов, а какая-то другая очень резкая зависимость. Закон обратных квадратов будет давать асимптотическое затухание

Ответить
Развернуть ветку
Читать все 3 комментария
null