Расписание курсов 🔔 Vehicles and Props: старт курса 20 июня, продолжительность 3 месяца. Gas Station: старт курса 19 сентября, продолжительность 2 месяца. На курсе Environment Artist допускаются студенты, успешно прошедшие один из курсов: Gas Station / Vehicles and Props. Продолжительность обучения 12 месяцев. #индустрия@cgitems
Смешивание изображений. Режимы наложения в программах

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

02_режимы наложения_cgitems.ru.jpg

Самые очевидные и, вероятно, знакомые вам примеры, это adobe Photoshop и adobe Substance 3D painter. Давайте поговорим детальнее на эту тему и разберемся, что это вообще такое и как оно работает.

Режимы наложения. Смешивание изображений и их воздействие друг на друга

Слои графики. Layers

Стоит начать с базового понятия, такого как слои. Вероятно вы встречались с ним, и в целом понимаете что это такое. Здесь все просто - слои графики это, собственно, составляющие финального изображения.

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

01_режимы наложения_cgitems.ru.jpg

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

03_режимы наложения_cgitems.ru.jpg

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

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

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

04_режимы наложения_cgitems.ru.jpg

Режимы наложения/смешивания. Blending modes

Не станем задерживаться на теме слоев и их настройки, и перейдем к основной теме - режимы наложения.

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

Так или иначе, в основе работы с текстурированием лежат 2D изображения и их распределение по слоям - базовые и вспомогательные текстурные карты, декали, шейпы и прочие материалы, которые могут применяться в работе совершенно разным образом - маски, создание кистей, наложение градиентов и, помимо прочего, режимы наложения.

Это довольно обширная тема, в основе которой лежит взаимодействие пикселов друг с другом по разным признакам: яркости, положению, каналам и тд. Любое пиксельное 2D изображение обладает этими признаками, а режимы наложения позволяют взаимодействовать с ними через определенные алгоритмы.

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

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

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

05_режимы наложения_cgitems.ru.jpg

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

В нашем случае это Normal (вверху) - базовый режим без смешения, в котором пикселы никак не воздействуют друг на друга. И Screen (внизу) - режим осветления через инверсию каналов и умножение результата двух слоев. Да, своих тонкостей хватает и, по сути, это снова математика, работа с каналами и их значениями, но мы не станем копаться в формулах.
Существует достаточно статей, в которых можно найти пачки графиков и кривых взаимодействия пикселов с разбивкой по каналам. Нам же важно понять саму логику инструмента и увидеть разницу между группами режимов наложения, чем мы займемся чуть позже.

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

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

06_режимы наложения_cgitems.ru.jpg

Группы режимов наложения

Начнем с группировки режимов наложения по их свойствам и рассмотрим на примере adobe Photoshop.

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

07_режимы наложения_cgitems.ru.jpg Как видно на примере - в целом все похоже, но Painter имеет несколько больше вариантов и немного иную очередность. Режимов в Painter мы коснемся в конце, а пока перейдем к разбору отдельных групп и их содержимого.

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

Группа 1: Базовые режимы

Normal, Dissolve. Базовые режимы, в которых не происходит наложения - изображения просто лежат одно поверх другого. Нижнее изображение можно проявить, если на верхнем регулировать прозрачность, либо стереть его.

Normal (нормальный)

08_режимы наложения_cgitems.ru.jpg С этим режимом все понятно - два слоя находятся один над другим и независимы. Layer 2 является верхним, или корректировочным, Layer 1 - нижний, или целевой. Далее будем опираться на эти понятия.

Dissolve (затухание)

09_режимы наложения_cgitems.ru.jpg Здесь все чуть интереснее - режим Dissolve работает с непрозрачностью верхнего слоя. Чем она меньше, тем выше будет уровень шума. Это связано с тем, что алгоритм удаляет пиксели в определенном порядке - чем ниже уровень opacity, тем больше пикселей будет удалено.

Группа 2: Режимы затемнения

Darken, Multiply, Color Burn, Linear Burn, Darker color. Эти режимы работают с затемнением целевого слоя.

Darken (затемнение)

10_режимы наложения Darken_cgitems.ru.jpg Смешивает пиксели в участках где верхний слой темнее нижнего и затемняет пиксели целевого слоя.

Multiply (умножение)

11_режимы наложения Multiply_cgitems.ru.jpg Этот режим умножает цвета двух слоев, верхний на нижний, при этом давая несколько более темный и контрастный результат.

Color Burn (Затемнение основы)

12_режимы наложения Color burn_cgitems.ru.jpg Насыщение и затенение цветов нижнего слоя корректировочным изображением. Также делает результат немного контрастнее.

Linear Burn (Линейный затемнитель)

13_режимы наложения Linear burn_cgitems.ru.jpg Нечто среднее между Color Burn и Multiply. Усиливает цветами верхнего слоя и еще сильнее затемняет, по сравнению с другими режимами этой группы.

Darker Color (Темнее)

14_режимы наложения Darker color_cgitems.ru.jpg Сохраняет самые темные, относительно нижнего слоя, пиксели верхнего слоя.

Группа 3: Режимы осветления

Lighten, Screen, Color Dodge, Linear Dodge (Add), Lighter Color. Эти режимы работают на высветление целевого изображения.

Lighten (Замена светлым)

14_режимы наложения Lighten_cgitems.ru.jpg Работает так же как Darken, но смешивание происходит на высветление - темные пиксели нижнего слоя осветляются смешиваясь с пикселями верхнего.

Screen (Экран)

15_режимы наложения Screen_cgitems.ru.jpg Работает как Multiply - перемножает каналы слоев, но при этом работает на осветление.

Color Dodge (Осветление основы)

16_режимы наложения Color Dodge_cgitems.ru.jpg Осветляет изображение верхним слоем и повышает насыщенность. Также повышает контраст.

Linear Dodge (Линейный осветлитель)

17_режимы наложения Linear Dodge_cgitems.ru.jpg Схож с режимом Screen, но при этом сильнее осветляет целевое изображение пикселями корректировочного.

Lighter Color (Светлее)

18_режимы наложения Lighter Color_cgitems.ru.jpg Схож с Darker color и работает также в обратном направлении - самые темные участки целевого изображения заменяются пикселями верхнего слоя, так как они светлее целевых.

Группа 4: Режимы контраста

Overlay, Soft Light, Hard Light, Vivid Light, Linear Light, Pin Light, Hard Mix. Эта группа воздействует на яркость и контраст целевого изображения.

Overlay (Перекрытие)

19_режимы наложения Overlay_cgitems.ru.jpg Совмещает в себе эффекты умножения и осветления. Смешивает цвета слоев учитывая яркие и темные участки целевого изображения.

Soft Light (Мягкий свет)

20_режимы наложения Soft light_cgitems.ru.jpg Схож с Overlay по воздействию, но дает более мягкий эффект, не так сильно воздействует на насыщенность.

Hard Light (Жесткий свет)

21_режимы наложения Hard light_cgitems.ru.jpg Также схож с вышеописанными режимами, но при этом он делает разницу темных и светлых пикселей сильнее, а цвета насыщеннее.

Vivid Light (Яркий свет)

22_режимы наложения Vivid light_cgitems.ru.jpg И снова высветление и затемнение на контрасте, но при этом каждый из процессов происходит по разному, в зависимости от яркости пикселов. По сути, сочетает в себе Color burn и Color dodge. Более явная разница по яркости, сохраняются самые светлые участки.

Linear Light (Линейный свет)

23_режимы наложения Linear light_cgitems.ru.jpg Также схож с остальными, применяет разные методы на темных и светлых участках, но при этом усиливается присутствие и влияние корректировочного слоя.

Pin Light (Точечный свет)

24_режимы наложения Pin light_cgitems.ru.jpg Сочетает в себе режимы Lighten и Darken для светлых и темных участков соответственно. Насыщает и делает ярче изображение сохраняя при этом разницу в светлоте участков.

Hard Mix (Жесткое смешение)

25_режимы наложения Hard mix_cgitems.ru.jpg Выравнивает и ограничивает верхним слоем тона целевого изображения по яркости участков. И делает ваше изображение похожим на обложку из 90х. Этот эффект называется “постеризация” - насыщенное изображение с яркими оттенками и сильным контрастом.

Группа 5: Режимы сравнения.

Difference, Subtract, Exclusion, Divide. В этой группе режимы работают на разности изображений.

Difference (Разница)

26_режимы наложения Difference_cgitems.ru.jpg Удаляет светлые участки и инвертирует цвета целевого изображения на основе оттенка верхнего слоя

Exclusion (Исключение)

27_режимы наложения Exclusion_cgitems.ru.jpg Облегченная версия предыдущего режима. Не так сильно затемняет, но также дает разность тонов и инверсию работая с верхним слоем

Subtract (Вычитание)

28_режимы наложения Subtract_cgitems.ru.jpg Яркость слоев вычитается с заменой оттенков

Divide (Разделение)

29_режимы наложения Divide_cgitems.ru.jpg Схож с принципом Color dodge. Осветляет с учетом содержимого верхнего слоя, но при этом работает на разности оттенков и областей яркости

Группа 6: Компонентные (HSL).

Hue, Saturation, Luminosity и Color. Hue, Saturation и Lightness — тон, насыщенность и светлота цветов изображения. Эта группа наложений работает с компонентами изображения и их разницей.

Hue (Цветовой фон)

30_режимы наложения Hue_cgitems.ru.jpg Объединяет цветовой тон верхнего слоя с яркостью и насыщенностью целевого. На первый взгляд незаметно, но обратите внимание на то, что страницы стали чуть теплее, а синяя обложка стала оранжевой.

Saturation (Насыщенность)

31_режимы наложения Saturation_cgitems.ru.jpg Объединяет насыщенность верхнего слоя с яркостью и цветовым тоном целевого. Здесь эффект довольно кислотный, так как корректировочное значение имеет сплошной и довольно яркий цвет (оранжевый).

Color (Цветность)

32_режимы наложения Color_cgitems.ru.jpg В этом случае цветовой тон верхнего слоя и его значение насыщенности объединяется с яркостью нижнего слоя. Происходит достаточно равномерное тонирование.

Luminosity (Яркость)

33_режимы наложения Luminosity_cgitems.ru.jpg Сочетает яркость верхнего слоя с тоном и насыщенностью целевого. Дополнительно может регулироваться прозрачностью корректировочного слоя.

Итак, медленно но верно мы проделали внушительную работу - посмотрели и немного разобрали режимы наложения слоев. На первый взгляд может показаться несколько непонятным, но, как уже говорилось ранее - в этом вопросе важна насмотренность и эксперименты. В целом, даже расписав математику работы режимов все равно остались бы вопросы (возможно даже больше чем есть на данный момент). Главное тут, это запомнить разделение на группы, и за что эти группы отвечают.

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

34_режимы наложения_cgitems.ru.jpg

Ну и в конце давайте рассмотрим режимы наложения в adobe Substance 3D painter. Как уже упоминалось - в целом они схожи с теми, что мы рассмотрели на примере adobe Photoshop и выполняют те же функции. Поэтому не станем разбирать каждый режим, но рассмотрим общую разницу и те режимы, которые есть именно в Painter из за его специфики.

Режимы наложения в adobe Substance 3D painter

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

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

35_режимы наложения_cgitems.ru.jpg Текстурные карты 36_режимы наложения_cgitems.ru.jpg Вкладка с PBR каналами и дополнительными картами. 37_режимы наложения_cgitems.ru.jpg Вкладка с режимами наложения слоя. Обратите внимание что на папке, в которой лежит выделенный слой, тоже есть режимы наложения.

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

38_режимы наложения_cgitems.ru.jpg Слой в режиме Normal, без наложений 39_режимы наложения_cgitems.ru.jpg Первые три режима более технические, остальные являются вариациями обычных режимов наложения

Passthrough

Режим для работы с эффектами и инструментами Smudge и Clone. На новом слое этот режим должен быть выставлен во всех каналах PBR для корректной работы. Он берет информацию со всех нижестоящих слоев. Например, этот режим полезен для работы штампом (инструмент полностью работающий по аналогии с штампом из Photoshop).

Disable

Исключает выбранный слой из обработки программой. Полезен для оптимизации ресурсов на отрисовку.

Replace

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

Inverse Divide

40_режимы наложения_cgitems.ru.jpg Работает как обычный Divide - осветляет через деление нижнего слоя на верхний по значениям яркости. При этом меняются местами сами слои то есть в этом случае верхний слой делится на нижний

Inverse Subtract

41_режимы наложения_cgitems.ru.jpg Вычитает цвета нижнего слоя из верхнего по яркости. Собственно, обычный Subtract, который мы разбирали в примере с Photoshop, просто с инверсией значений.

Difference

42_режимы наложения_cgitems.ru.jpg Вычитает цвета верхнего слоя из нижнего (Subtract). При этом пикселям присваивается абсолютное значение результата, а отрицательные значения становятся положительными (появляется инверсия).

Exclusion

43_режимы наложения_cgitems.ru.jpg Работает так же, как Difference, но при этом вносит меньше контраста.

Signed Addition (AddSub)

44_режимы наложения_cgitems.ru.jpg На основе цветов верхнего изображения добавляет и вычитает цвета нижнего слоя на верхний. Этот процесс происходит по разности светлоты оттенков. Темные области исключают темные на целевом слое, светлые наоборот добавляют светлые

В конце рассмотрим три специфичных режима, которые созданы для работы с Normal map.

45_режимы наложения_cgitems.ru.jpg Для примера возьмем две карты нормалей и разместим их одну над другой. В базовом примере видно, что на верхнем слое выставлен режим Normal. В результате карта нормалей просто ложится поверх нижней не внося изменений и не принимая на себя каких либо свойств.

Normal Map Combine

46_режимы наложения_cgitems.ru.jpg Это режим наложения со смешиванием, при котором алгоритм сохраняет направление нормалей целевого слоя и добавляет их к нормалям корректировочного

Normal Map Detail

47_режимы наложения_cgitems.ru.jpg Более точный режим наложения по сравнению с предыдущим. Нормали корректирующего слоя задают направление, это можно увидеть на некоторых переходах и закруглениях. Корректирующее изображение преобладает и выделяется более отчетливо. В целом также происходит усреднение с сохранением общего направления.

Normal Map Inverse Detail

48_режимы наложения_cgitems.ru.jpg Инверсия предыдущего режима - нормали целевого слоя задают направление, корректирующий слой подстраивается под них.

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

Итог

  • Мы разобрались с тем, что такое слои и как они работают
  • Разобрались с общим принципом работы режимов наложения через слои
  • Учли, что режимы наложения также могут включаться на некоторых других инструментах, что не меняет их сути, но дает дополнительной гибкости в работе
  • Обстоятельно разобрали все ключевые режимы наложения на примере adobe Photoshop
  • Коснулись темы того, как режимы наложения работают в adobe Substance 3D painter

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

Ваша заявка отправлена!
Если во входящих на почте: нет письма, проверьте папку спам или напишите нам в телеграм