Изображения в вебе становятся все более качественными. Когда мы изменяем дизайн или графику, мы хотим, чтобы эти изменения не повредили исходный материал. Таким образом, оригинал будет сохранен, если нам захочется отменить изменения или сделать другие улучшения.
Одной из последних возможностей, попавших в руки веб-дизайнеров является обработка изображений с помощью режимов наложения (смешивания). Режимы наложения позволяют с легкостью раскрашивать изображения и добавлять текстуру, а также применять другие эффекты без необходимости лишний раз открывать графический редактор. Это экономит время, так как позволяет избежать повторной обработки графики при внесении изменений, а также предотвращает проблемы при необходимости еще раз применить настройки, созданные несколько месяцев назад. Вместо этого нужные графические режимы можно задавать, применять и поддерживать с помощью нескольких деклараций CSS.
Описание режимов наложения
Технически для смешивания цветов применяются математические операции к цветовым компонентам пикселей изображения. Это так, под капотом всей нашей креативности лежит математика. Не волнуйтесь, вам не придется запоминать формулы, чтобы использовать режимы наложения, но базовое понимание того, как это работает не помешает.
Раскрашивание с помощью hue и color
У всех режимов смешивания есть потенциал к изменению цвета графики, но особо полезны для раскрашивания два из них: цветовой тон (hue) и цветность (color).
Цветовой тон hue
Этот режим смешивания берет тон перекрывающего слоя и применяет его к нижним слоям, оставляя насыщенность и светимость неизмененными. Я могу накладывать совершенно разные цвета, но получать одинаковый результат, если их оттенок совпадает. В следующем примере три варианта коричневого цвета различаются на 26 градусов, тем не менее тонировка фото выглядит ровно, независимо от степени затемнения цвета.
Цветность color
Этот режим смешивания влияет на тон и насыщенность исходника, игнорируя при этом светимость. Красно-коричневое наложение делает пиксели исходника красновато-коричневыми, также как и в режиме hue , но оно также придает им одинаковую насыщенность, что обычно создает эффект более яркой окраски, чем в режиме hue .
Красно-коричневое наложение делает пиксели исходника красновато-коричневыми, также как и в режиме hue , но оно также придает им одинаковую насыщенность
Такого же эффекта можно достигнуть, изменив порядок слоев, поместив цветовой слой под фотографией и смешав их в режиме luminosity .
Кроссбраузерное наложение
Используя эти режимы наложения, мы можем применять смешивание уровня Photoshop с помощью CSS. Но несмотря на то, что во всех браузерах используется одинаковая математика, вы можете заметить, что результаты иногда существенно отличаются.
Управление цветом это сложный мир и хотя W3C рекомендует использовать по умолчанию профиль sRGB, подход производителей браузеров различается - каждый браузер рендерит цвета согласно своим прихотям. Например, в Chrome рендеринг изображений основывается на “неуправляемом” цветовом пространстве, если в изображении не прописан цветовой профиль. Firefox работает также, но глубоко в его конфигурационных настройках запрятан флаг , устанавливающий sRGB по умолчанию для изображений с не указанным профилем. А Safari действует почти как Photoshop, так как графический API Apple основан на Adobe Postscript. Да, даже здесь есть свои отличия.
Идем дальше - различия не исчерпываются браузерами. Люди тоже разные. Например, миллионы живут с цветовой слепотой. И они видят ваш дизайн совсем не таким, как вы предполагаете. Как и всегда - тестируйте ваш труд в разных браузерах, проверяйте доступность и не рассчитывайте на то, что ваш дизайн будет выглядеть одинаково везде.
И еще - не забывайте тестировать на “живых” устройствах, а не только в режиме эмуляции, чтобы понять как хардверные ограничения (типа нехватки оперативной памяти) влияют на ваш сайт. Некоторые режимы наложения могут вызвать задержки при прокрутке страницы. И если вы добиваетесь гладкости 60 кадров в секунду, учитывайте это при своем выборе.
Применение режимов наложения
Режимы наложения можно применить с помощью пары свойств CSS: background-blend-mode и mix-blend-mode , также нам может пригодиться свойство isolation .
Наложение фоновых изображений
Свойство background-blend-mode смешивает изображения, указанные в декларации background-image . Это значит, что все изображения располагаются в стеке поверх друг друга и вы используете режим наложения, чтобы смешать их вместе.
Попробуем добавить пыль и царапины на фото. (Обратите внимание, что код предназначен для конкретных примеров).
.background { background-image: url("dust-and-scratches.jpg"), url("mountain.jpg"); background-blend-mode: screen; }
Вы можете использовать разные режимы наложения для каждой декларации background-image . Перечислите их в том же порядке, что и фоновые изображения и разделите запятыми. Последней декларации - самому нижнему слою автоматически задается нормальный режим наложения и это нельзя изменить. Если вы задали фоновый цвет с помощью background-color , то самым нижним уровнем будет он.
Иногда у вас может возникнуть потребность использовать цвет в качестве наложения. К сожалению, свойство CSS background-color ограничено одним цветом и это всегда будет самый нижний слой, независимо от того, объявлен ли он в начале списка фонов или нет. Рекомендация W3C предлагает нотацию image() , позволяющую использовать цвет в качестве изображения, но на данный момент это не поддерживается ни в одном браузере. К счастью, у нас есть обходной путь: так как градиенты в CSS рассматриваются как изображение, мы можем обмануть браузер, подсунув ему однотонный цвет с двумя идентичными точками останова.
Итак, осветлим изображение, как мы делали это ранее и изменим его цвет на сепию.
Background { background-image: linear-gradient(hsl(26, 24%, 42%), hsl(26, 24%, 42%)), /* sepia */ linear-gradient(hsl(316, 22%, 37%), hsl(316, 22%, 37%)), /* lavender */ url("dust-and-scratches.jpg"), url("mountain.jpg"); background-blend-mode: color, /* sepia */ screen, /* lavender */ screen; /* dust-and-scratches */ }
Наложение элементов HTML
Свойство mix-blend-mode задает режим наложения для элементов HTML, поэтому элементы на перекрывающихся слоях будут использовать его при смешивании с нижними слоями. Давайте опять добавим заглавие к изображению, удалив нежелательный белый фон заглавия с помощью режима multiply . Я также сделал элемент с изображением немного прозрачным, чтобы улучшить наложение цветов.
А вот пример использования mix-blend-mode для наложения нескольких элементов.
Если вы не хотите, чтобы элемент в нижнем слое смешивался с каким-либо из верхних слоев, их можно отделить друг от друга с помощь третьего свойства: isolation . Это используется для наложения нескольких элементов без воздействия на базовый слой. Каждому из дисков в нашем примере задано mix-blend-mode в значение screen , что вынуждает их создавать новые цвета при пересечении. Но мы хотим, чтобы фотография горы не смешивалась с ними.
Background { isolation: isolate; }
Учитывайте, что mix-blend-mode применяется к элементу целиком, вместе со всеми его потомками. Это аналогично воздействию свойства opacity , делающему невидимым не только контейнер, но и его содержимое. Точно также и mix-blend-mode смешивает и контейнер, и содержимое.
Для следующего примера я немного поработал в Photoshop и создал набросок дизайна для вымышленного производителя лыжного оборудования Masstif. В этом наброске я создал блок с небольшим текстом и логотипом. Я смешал этот блок в режиме осветления цветов (color-dodge). Это дает четкий контраст по отношению к фону и помогает лучше сочетать текст и графику.
При попытке воспроизвести это средствами HTML и CSS, я рассчитывал, что работать будет следующий код:
When you’re on top of the world,
the only way to go is down.
Но в результате содержимое смешалось с контейнером так, как на следующем изображении.
Также как отдельные проблемы с прозрачностью частично решаются за счет альфа-каналов фона, здесь мы тоже можем решить проблему с mix-blend-mode путем перемещения того, что возможно в фон. Вместо создания блока и наложения его с помощью mix-blend-mode , будет работать прием с конвертацией блока в background-image . Это не является решением для всех случаев, но попытаться стоит. Другого способа изолировать дочерние узлы от содержащего их смешиваемого элемента нет.
Поддержка в браузерах
Режимы наложения поддерживаются в большинстве основных браузеров, кроме Internet Explorer и Edge. Некоторый оптимизм есть в том, что реализация режимов наложения для Edge находится в стадии рассмотрения, а этот браузер уже поддерживает все режимы наложения для SVG, что дает шанс на скорую реализацию. Вы можете повлиять на процесс, проголосовав на сайте пожеланий для разработчиков Edge .
Также есть проблема с Safari - он не поддерживает режимы hue , saturation , luminosity и color .
Учитывайте, что в не поддерживающих режимы наложения браузерах, ваш дизайн не будет отображаться так, как вам надо. Это может все осложнить, пока вы не уверены, что у вашей аудитории достаточно продвинутые браузеры. Спрашивайте себя - приемлемы ли запасные варианты для вашей аудитории. Если нет - вам надо искать обходной путь.
Несмотря на эти предостережения, режимы наложения это отличное дополнение к инструментарию любого веб-дизайнера. Теперь мы можем добавлять прозрачность, тон и текстуру в наш дизайн с помощью CSS, причем делать это гибко и без компромиссов с качеством. Это означает увеличение возможностей для наших браузерах и наших рук.
От режима наложения, указанного в элементах управления панели параметров, зависит, какое влияние будут испытывать пиксель в изображении при использовании определенного инструмента рисования или редактирования. При описании визуальных эффектов режима наложения используются перечисленные далее термины, обозначающие цвета.
Основной цвет - это исходный цвет в изображении.
Совмещенный цвет - это цвет, накладываемый с помощью инструмента рисования или редактирования.
Результирующий цвет - это цвет, полученный в результате наложения.
Описания режимов наложения
Выберите во всплывающем меню «Режим» на панели параметров.
Примечание.
- Во всплывающем меню режима наложения вы можете просмотреть, как разные параметры будут выглядеть на вашем изображении. Photoshop отображает интерактивную предварительную версию режимов наложения на холсте.
- Для 32-битных изображений доступны только следующие режимы смешивания: «Обычный», «Растворение», «Замена темным», «Умножение», «Замена светлым», «Линейное осветление основы (добавление)», «Разница», «Цветовой тон», «Насыщенность», «Цвет», «Яркость», «Светлее» и «Темнее».
Обычный
В этом режиме для придания пикселам результирующего цвета происходит редактирование или рисование каждого пиксела. Этот режим применяется по умолчанию. (При работе с растровым изображением или изображением с индексированными цветами режим «Нормальный» именуется Пороговым .)
Растворение
В этом режиме для придания пикселам результирующего цвета происходит редактирование или рисование каждого пиксела. Но результирующий цвет представляет собой результат случайной замены цвета пикселов базовым или совмещенным цветом в зависимости от значения непрозрачности в местоположении пиксела.
Подложка
В этом режиме редактирование или рисование осуществляется только на прозрачной части слоя. Этот режим применяется для работы только со слоями, для которых отменен выбор параметра «Блокировать прозрачность», и аналогичен рисованию на обороте прозрачных областей листа прозрачной монтажной основы.
Очистка
В этом режиме обеспечивается редактирование или рисование каждого пикселя и преобразование его в прозрачный. Этот режим доступен для инструментов «Фигура» (когда выбрана область заливки ), инструмента «Заливка» , инструмента «Кисть» , инструмента «Карандаш» , команды «Выполнить заливку» и команды «Выполнить обводку». Для использования этого режима необходимо перейти к слою, для которого отменен выбор параметра «Блокировать прозрачность».
Замена темным
В этом режиме рассматривается информация цвета в каждом канале, и в качестве результирующего выбирается основной или совмещенный цвет в зависимости от того, какой из них темнее. Пикселы с цветом, более светлым по сравнению с совмещенным, заменяются, а пикселы с цветом, более темным по сравнению с совмещенным, остаются неизменными.
Умножение
В этом режиме рассматривается информация цвета в каждом канале, и значение основного цвета умножается на значение совмещенного цвета. Результирующий цвет всегда представляет собой более темный цвет. В результате умножения значения любого цвета на значение черного цвета вырабатывается черный цвет. В результате умножения значения любого цвета на значение белого цвета цвет остается неизменным. При рисовании цветами, отличными от черного или белого цвета, подряд идущие штрихи, накладываемые с помощью инструмента рисования, создают все более темные цвета. Этот эффект аналогичен рисованию изображения с помощью нескольких маркеров.
Затемнение основы
В этом режиме рассматривается информация цвета в каждом канале и основной цвет заменяется более темным для отражения совмещенного цвета в результате увеличения контраста между двумя цветами. Смешивание с белым цветом не приводит к появлению каких-либо изменений.
Линейный затемнитель
В этом режиме рассматривается информация цвета в каждом канале и основной цвет заменяется более темным для отражения совмещенного цвета в результате уменьшения яркости. Смешивание с белым цветом не приводит к появлению каких-либо изменений.
Замена светлым
В этом режиме рассматривается информация цвета в каждом канале и в качестве результирующего цвета выбирается основной или совмещенный цвет в зависимости от того, какой из них светлее. Пикселы с более темным цветом по сравнению с совмещенным цветом заменяются, а пикселы с более светлым цветом по сравнению с совмещенным цветом остаются неизменными.
Осветление
В этом режиме рассматривается информация цвета в каждом канале и перемножаются обратные значения совмещенного и основного цвета. В качестве результирующего цвета всегда применяется более светлый цвет. При осветлении с применением черного цвета цвет остается неизменным. При перекрытии с применением белого цвета цвет становится белым. Полученный эффект аналогичен наложению друг на друга изображений многочисленных фотографических слайдов с помощью проектора.
Осветление основы
В этом режиме рассматривается информация цвета в каждом канале и основной цвет заменяется более ярким для отражения совмещенного цвета в результате уменьшения контраста между двумя цветами. Смешивание с черным цветом не приводит к появлению каких-либо изменений
Линейный осветлитель (добавить)
В этом режиме рассматривается информация цвета в каждом канале и основной цвет преобразуется в более светлый для отражения совмещенного цвета в результате увеличения яркости. Смешивание с черным цветом не приводит к появлению каких-либо изменений
Перекрытие
В этом режиме цвета умножаются или осветляются в зависимости от основного цвета. Узоры или цвета перекрывают существующие пикселы, оставляя неизменными светлые и темные участки основного цвета. Базовый цвет не заменяется, а смешивается с совмещенным цветом, что позволяет отразить наличие светлых или темных участков первоначального цвета.
Рассеянный свет
В этом режиме цвета становятся более темными или более светлыми в зависимости от совмещенного цвета. Полученный эффект аналогичен освещению изображения расплывчатым светом прожектора. Если совмещенный цвет (источник света) является более светлым, чем 50 % серого, то изображение становится светлее, как после осветления. Если совмещенный цвет является более темным, чем 50 % серого, изображение становится темнее, как после затемнения. Раскрашивание чистым черным или белым цветом создает отчетливые, более темные или более светлые зоны, но чистого черного или белого цвета не получится.
Направленный свет
В этом режиме цвета умножаются или осветляются в зависимости от совмещенного цвета. Полученный эффект аналогичен освещению изображения резким светом прожектора. Если совмещенный цвет (источник света) является более светлым, чем 50 % серого, то изображение становится светлее, как после осветления. Этот эффект может применяться для добавления светлых участков к изображению. Если совмещенный цвет (источник света) является более темным, чем 50 % серого, то изображение становится темнее, как после умножения. Этот эффект может применяться для добавления темных участков к изображению. Рисование чисто-черным или чисто-белым цветом приводит к получению чисто-черного или чисто-белого цвета.
Яркий свет
Применение этого режима приводит к затемнению или осветлению цвета в результате увеличения или уменьшения контраста в зависимости от совмещенного цвета. Если совмещенный цвет (источник света) является более светлым, чем 50 % серого, то изображение становится светлее в результате уменьшения контраста. Если совмещенный цвет (источник света) является более темным, чем 50 % серого, то изображение становится темнее в результате увеличения контраста.
Линейный свет
Применение этого режима приводит к затемнению или осветлению цвета в результате увеличения или уменьшения яркости в зависимости от совмещенного цвета. Если совмещенный цвет (источник света) является более светлым, чем 50 % серого, то изображение становится светлее в результате увеличения яркости. Если совмещенный цвет (источник света) является более темным, чем 50 % серого, то изображение становится темнее в результате уменьшения яркости.
Точечный свет
Применение этого режима приводит к замене цвета в зависимости от совмещенного цвета. Если совмещенный цвет (источник света) является более светлым, чем 50 % серого, то пикселы с цветом, более темным по сравнению с совмещенным, заменяются, а пикселы с цветом, более светлым по сравнению с совмещенным, остаются неизменными. Если совмещенный цвет (источник света) является более темным, чем 50 % серого, то пикселы с цветом, более светлым по сравнению с совмещенным, заменяются, а пикселы с цветом, более темным по сравнению с совмещенным, остаются неизменными. Этот режим может применяться для добавления специальных эффектов к изображению.
Жесткое смешение
Добавляет значения красного, зеленого и синего каналов совмещенного цвета к значениям RGB основного цвета. Если результирующая сумма для какого-либо канала равна 255 или больше, каналу присваивается значение 255; в противном случае - 0. Поэтому для всех пикселов смешанного цвета значения красного, зеленого и голубого каналов будут равняться 0 или 255. Все пикселы заменяются на основные аддитивные цвета (красный, зеленый или синий), белый или черный.
Примечание.
Для изображений в режиме CMYK параметр «Жесткое смешение» заменяет все пикселы на основные субтрактивные цвета (голубой, желтый или пурпурный), белый или черный. Максимальное значение цвета - 100.
Разница
В этом режиме рассматривается информация цвета в каждом канале и вычитается либо совмещенный цвет из основного цвета, либо основной цвет из совмещенного цвета в зависимости от того, какой цвет имеет большее значение яркости. Смешивание с белым цветом приводит к инвертированию значений основного цвета, смешивание с черным цветом не влечет за собой каких-либо изменений.
Исключение
В этом режиме создается эффект, аналогичный создаваемому в режиме «Разница», но характеризующийся более низким контрастом. Смешивание с белым цветом приводит к инвертированию значений основного цвета. Смешивание с черным цветом не приводит к появлению каких-либо изменений.
Вычитание
В этом режиме рассматривается информация цвета в каждом канале, и вычитает значение цвета наложения из значения основного цвета. В изображениях с глубиной цвета 8 и 16 бит все отрицательные значения заменяются нулями.
Разделение
В этом режиме рассматривается информация цвета в каждом канале, и получает значение цвета наложения путем деления значения основного цвета.
Тон
В этом режиме создается результирующий цвет со светимостью и насыщенностью основного цвета и цветовым тоном совмещенного цвета.
Насыщенность
В этом режиме создается результирующий цвет со светимостью и цветовым тоном основного цвета и насыщенностью совмещенного цвета. Рисование в этом режиме в области, не имеющей насыщенности, а именно имеющей насыщенность, равную 0 (т. е. в области с серым цветом), не приводит к каким-либо изменениям.
Цвет
С помощью этого параметра создается результирующий цвет со светимостью основного цвета и с цветовым тоном и насыщенностью совмещенного цвета. Этот параметр сохраняет уровни серого в изображении и может применяться для раскрашивания монохромных изображений и добавления оттенков к цветным изображениям.
Свечение
В этом режиме создается результирующий цвет с цветовым тоном и насыщенностью основного цвета и светимостью совмещенного цвета. Этот режим создает эффект инверсии цветового режима.
Светлее
Сравнивает суммарную величину значений всех каналов для совмещенного и основного цветов и отображает цвет с наибольшим значением. В режиме «Светлее» третий цвет не создается, что может быть результатом наложения «Замена светлым», поскольку для создания результирующего цвета выбираются наибольшие значения каналов как основного, так и совмещенного цветов.
Темнее
Сравнивает суммарную величину значений всех каналов для совмещенного и основного цветов и отображает цвет с наименьшим значением. В режиме «Темнее» третий цвет не создается, что может быть результатом наложения «Замена темным», поскольку для создания результирующего цвета выбираются наименьшие значения каналов как основного, так и совмещенного цветов.
Мы узнали, теперь пришло время изучить режимы наложения слоев в фотошопе. Для начала, разберемся, что это такое и с чем его едят.
С английского «режимы наложения» переводится как Blending Modes и если переводить строго по словарю, то на русском это будет звучать как «режимы смешивания». В некоторых уроках используется именно такой вариант перевода. По сути, режимы наложения и являются смешиванием вышележащего слоя с нижележащим. От выбранного режима наложения зависит, насколько слои взаимодействуют между собой.
Режимы наложения слоев используются для многих целей: вписывания объекта в фон, тонирования, наложения текстур и многого другого. Изменяя режимы и регулируя непрозрачность и заливку слоя можно добиться интересных эффектов.
Где находятся режимы наложения в фотошопе?
Выпадающий список с режимами наложения слоя находится в левой верхней части панели слоев:
На данный момент в фотошоп существует 27 режимов наложения (в более ранних версиях программы 25), они разделены на шесть групп при помощи горизонтальных линий:
1. Основные режимы (Basic)
2. Затемняющие режимы (Darken)
3. Осветляющие режимы (Lighten)
4. Контрастные режимы (Contrast)
5. Сравнительные режимы (Comparative)
6. Компонентные режимы (HSL)
Давайте от теории перейдем к практике и на примере фото девушки и текстуры попробуем тонировать изображение. Сразу предупреждаю, что при использовании некоторых режимов наложения результат будет, мягко говоря, не радовать глаз, но мы же помним, что всегда можем понизить непрозрачность или (и) заливку для уменьшения эффекта.
Основные режимы (Basic)
Основные режимы (Basic) - полностью заменяют пиксели нижележащего слоя.
Откроем в фотошоп фото с девушкой , Файл-Открыть (File — Open ) . Помещаем яркую текстуру , Файл-Поместить (File — Place ).
Вот как выглядит и рабочий холст на данный момент:
По умолчанию все новые слои и помещаемые файлы имеют Нормальный (Normal).
Режим наложения Нормальный (Normal ) наиболее часто используемый режим. При 100% непрозрачности верхний слой полностью перекрывает нижний, при уменьшении непрозрачности нижний слой становится частично видимым.
100% непрозрачности:
50% непрозрачности:
Режим наложения Затухание (Dissolve)
При 100% непрозрачности верхний слой полностью перекрывает нижний, как и в режиме Нормальный , но при снижении непрозрачности часть пикселей верхнего слоя в рандомном порядке теряют непрозрачность и это позволяет видеть нижний слой.
100% непрозрачности:
50% непрозрачности:
Затемняющие режимы (Darken)
Затемняющие режимы (Darken) - затемняют нижележащий слой. Белые участки вышележащего слоя никак не воздействуют, они становятся невидимыми.
Режим наложения Затемнение (Darken)
Сравниваются значение обеих слоев в каждом канале и, если пиксель верхнего слоя светлее, чем нижнего, он замещается темным с нижнего слоя, в итоге видимыми остаются самые темные участки обеих слоев.
Белый цвет, как во всей группе Затемняющих режимов , игнорируется. Давайте на время отключим видимость слоя с текстурой (нажав на «глазик» в панели слоев ), и создадим новый слой, залитый белым цветом. Изменим на Затемнение (Darken):
Как видите, ничего не изменилось, нижний слой полностью видимый, его цвет, контраст, яркость не изменилась, а верхний белый слой «исчез», благодаря режиму наложения Затемнение (Darken) . Забегая вперед, ещё раз отмечу, что такое произойдет если изменить режим наложения слоя с белым цветом на любой из группы Затемняющих режимов .
Режим наложения Умножение (Multiply)
Умножает цвета верхнего и нижнего слоев и делает изображение темнее. Режим Умножение (Multiply) часто используется для затемнения светлых областей на засвеченном изображении.
Режим наложения Затемнение основы (Color Burn)
Повышает насыщенность средних цветов, дает более сильное затемнение, чем предыдущий .
Режим наложения Линейный затемнитель (Linear Burn)
Использует тот же принцип действия, что и режим Затемнение основы, но имеет более сильный затемняющий эффект.
Режим наложения Темнее (Darker color)
Имеет сходство с режимом Затемнение (Darken), только цвета сравниваются поканально, в итоге видимыми остаются только пиксели, которые темнее пикселей нижнего слоя.
Осветляющие режимы (Lighten)
Осветляющие режимы (Lighten) - осветляют нижележащий слой. Черный цвет при использовании Осветляющих режимов становится «невидимым». Осветляющие режимы часто используются для наложения текстур на черном фоне, с помощью этих режимов легко и просто можно убрать черный фон, оставив нетронутыми другие цвета.
Режим наложения Замена светлым (Lighten)
Противоположен режиму Затемнение ). Поканально сравнивает цвета и, если пиксели верхнего слоя светлее пикселей нижнего, они остаются без изменений. В случае, если пиксели верхнего слоя темнее, чем пиксели нижнего, они заменяются пикселями нижнего.
В группе Осветляющих режимов игнорируемый цвет – черный . На нашей текстуре черный цвет присутствует, но для чистоты эксперимента давайте проверим. Зальем новый слой черным цветом и изменим режим наложения на один из режимов группы осветления:
Черный цвет полностью невидимый.
Режим наложения Экран (Screen)
Принцип действия противоположный режиму Умножение (Multiply ), он умножает цвета верхнего и нижнего слоя, осветляя изображение. Режим можно использовать для осветления темных фотографий.
Режим наложения Осветление основы (Color Dodge)
Его воздействие противоположно режиму Затемнение основы (Color Burn). Цвета выгорают, насыщенность средних тонов повышена. Режим используется для придания эффекта свечения.
Режим наложения Линейный осветлитель (добавить) (Linear Dodge (Add)
Скомбинирован с режимов Экран (Screen
) и Осветление основы (Color Dodge).
Светлые цвета заменяются более светлыми, почти белыми.
Режим наложения Светлее (Lighter Color)
Сравнивает значение обоих слоев по всех каналах, оставляет более светлые пиксели на результирующем изображении.
Контрастные режимы (Contrast) - увеличивают контраст нижележащего слоя. Для всех режимов этой группы за исключением режима Жесткое смещение (Hard Mix) игнорируемый (невидимый) цвет – 50% серого. Снова проверим, залив новый слой 50% серым цветом
Режим наложения Перекрытие (Overlay ) – осветляет светлые участки и затемняет темные, увеличивает контраст результирующего изображения.
Режим наложения Мягкий свет (Soft Light)
Схожий с предыдущим режимом, но придает более мягкий эффект. Прекрасно подходит для повышения контраста на изображениях с небольшой контрастностью благодаря тому, что не допускает выбивания цветов и теней.
Режим наложения Жесткий свет (Hard Light)
Алгоритм действий схож с режимами Мягкий свет (Soft Light) и Перекрытие (Overlay), но эффект более сильный. Контраст повышен очень жестко.
Режим наложения Яркий свет (Vivid Light)
Скомбинирован с режимов Затемнение основы (Color Burn) и Осветление основы (Color Dodg e ). Имеет более сильное действие, чем Жесткий свет (Hard Light).
Режим наложения Linear Light (Линейный свет)
Скомбинирован с режимов Линейный затемнитель (Linear Burn) и Линейный осветлитель (Linear Dodge). Контрастность светлых участков уменьшается, а темных участков – увеличивается. Имеет противоположные свойства с предыдущим режимом, но в то же время очень похож на него.
Режим наложения Точечный свет (Pin Light)
Включает в себя режимы Замена темным (Darken) и Замена светлым (Lighten). Смешивает светлые пиксели при помощи первого режима, а темные пиксели – с помощью второго режима.
Режим наложения Жёсткое смешение (Hard Mix)
Смешивает яркость верхнего слоя с цветом нижнего. Создает постеризированное изображение, ограниченное в цветах.
Сравнительные режимы (Comparative) - результирующее изображение напрямую зависит от разницы обоих слоев.
Режим наложения Разница (Difference )
Сравнивает значение яркости обоих слоев. Смешивание с белым цветом инвертирует значения основного цвета, смешивание с черным цветом ничего не меняет.
Режим наложения Исключение (Exclusion)
Действие аналогично с предыдущим слоем, но с более мягким эффектом и меньшим контрастом. Смешивание с белым цветом инвертирует значения основного цвета, смешивание с черным цветом ничего не меняет. Часто используется для тонирования изображения посредством наложения сплошного цвета и существенного уменьшения непрозрачности.
Режим наложения Вычитание (Subtract)
Значение яркости вышележащего слоя вычитается из нижележащего. Если яркость пикселя верхнего слоя будет больше или равна яркости нижнего, итоговый цвет изменится на черный.
Режим наложения Разделить (Divide)
Похож на предыдущий режим, но с более сильным осветлением. Из-за того, что режим работает поканально, цвета сильно искажаются.
Компонентные режимы (HSL)
Компонентные режимы (HSL) - результат зависит от яркости и цвета слоев. Зачастую режимы этой группы используются для тонирования фото или перекрашивания объектов на изображении.
Режим наложения Цветовой тон (Hue)
Результирующее изображение имеет оттенок вышележащего слоя, а насыщенность и яркость – нижележащего. Придает эффект рисунка акварельными красками.
Режим наложения Насыщенность (Saturation)
Результирующее изображение имеет насыщенность вышележащего слоя, а цветовой тон и светлоту – нижележащего.
Режим наложения Цветность (Color)
Сохраняется цветовой тон и насыщенность верхнего слоя и яркость нижнего. Нижний слой «перекрашивается» в цвета верхнего. Режим прекрасно походит для изменения цвета на изображении.
Режим наложения Яркость (Luminosity)
Противоположен предыдущему режиму. Сохраняется цветовой тон и насыщенность нижнего слоя и яркость верхнего.
Вот мы и разобрались в режимах наложения слоев в фотошопе. Теоретическая часть конечно хорошо, но все же рекомендую вам экспериментировать с режимами наложения и наблюдать за их взаимодействием. Так вы быстрее запомните свойства каждого режима, а также найдете «любимчиков» среди режимов наложения, которые станут вашими верными помощниками в создании прекрасных работ.
Каждое изображение в фотошопе представляет собой совокупность слоев. Параметр Непрозрачность (Opacity) определяет количество (прозрачность) слоя, а параметр смешивание (Mode) каким образом будет проводиться смешивание слоев. Режимы смешивания выбирают из диалогового окна слоев.
Нажав на стрелочку в диалоговом окне, которая располагается права от строки с выбранным режимом “нормальный”, мы откроем список всевозможных режимов смешивания. Это и растворение, замена темным, умножение, затемнение основы, линейный затемнитель, темнее, замена светлым, осветление, осветление основы, линейный осветлитель, светлее и др. Для того, чтобы правильно выбрать подходящее смешивание необходимо понимать и предвидеть результат.
Для переключения режимов смешивания при помощи клавиатуры, можно нажимать Shift + для передвижения вниз по списку режимов и Shift — для движения в обратном направлении.
Характеристика режимов смешивания (рассмотрим на примере смешивания изображения (непрозрачность = 82%)с фоновой черно-белой картинкой:
Нормальный (Normal) – простой режим смешивания. При непрозрачности верхнего слоя смешивания не происходит. Если верхний слой прозрачен предположим на 15%, то нижний под ним слой будет “просвечивать” на эту величину:
Растворение (Dissolve) – представляет собой губчатую, крапчатую структуру:
Умножение (Multiply) – изображение получается более темным, цвета насыщенными, так как при этом режиме смешивания темные цвета заменяют более светлые:
Осветление (Screen) – противоположный умножению режим:
Наложение (Overlay) – пиксели верхнего слоя помещаются над нижним только в том случае, если они более насыщенные. Темные области базового слоя становятся более темными, а светлые – более светлыми:
Мягкий свет (Soft Light) – если цвет основного слоя светлый, то базовый слой осветляется, если же темный – то затемняется. Результат смешивания в данном примере такой же, как в предыдущем слое.
Жесткий свет (Hard Light) противоположен режиму смеживания наложение. Здась за основу берутся пикселы базового слоя:
Осветление (Color Dodge) – темные участки верхнего изображения не оказывают никакого влияния на нижнее, в то же время, как светлые обесцвечивают базовый слой.
Затемнение (Color Burn) – использует темные участки верхнего слоя для затемнения базы, а светлые не оказывают влияния:
Замена темным (Darken) – если пиксел верхнего слоя темнее, тогда он помещается в результирующее изображение. Результат изображения в данном примере похож на предыдущий.
Приветствую вас, читатели сайт. Сегодня мы поговорим о режимах смешивания в фотошопе (иногда их ещё называют режимы наложения). Полагаю, вы уже ознакомились с тем, что это такое. Если же нет, тогда советую прочитать о режимах смешивания в фотошопе в уроке .
Да, это тот самый Blend Mode, о котором я твержу практически в каждом Photoshop уроке. Расположены режимы смешивания в панели слоёв, вот здесь:
Однако этим сфера их влияния не ограничивается, и найти режимы смешивания также можно в стилях слоя:
Пользователь Photoshop волен выбирать из 27 режимов смешивания:
Как видите, все режимы разделены на 6 групп, согласно принципу воздействия на нижние пиксели: стандартные режимы, режимы затемнения, осветления, контраста, режимы сравнения и режимы цвета.
Остановимся теперь на каждой группе подробнее.
К каждому режиму смешивания я дам пояснение, а также наглядную иллюстрацию в виде наложения вот этой текстуры:
На это изображение:
Стандартные режимы
Normal (Обычный). Этот режим стоит по умолчанию и не имеет особых параметров смешивания.
Dissolve (Растворение). «Растворяет» текущий слой, т.е. удаляет некоторую часть пикселей в случайном порядке, вследствие чего появляется эффект рассеивания. Для того, чтобы увидеть этот режим в действии, нужно уменьшить непрозрачность слоя:
Режимы затемнения
Режимы смешивания этой группы затемняют изображение, а также, белые пиксели становятся прозрачными .
Darken (Замена тёмным) — Сравнивает яркость пикселей текущего слоя, и пикселей слоя, который расположен ниже. Все пиксели на текущем слое, которые темнее, чем нижние, остаются, остальные же становятся прозрачными.
Multiply (Умножение) — Название говорит за себя, этот режим смешивания делает пересекающиеся цвета темнее в 2 раза. Обычно его применяют для того, чтобы затемнить очень светлое изображение или придать глубину.
Color Burn (Затемнение цвета) — Эффект аналогичен режиму Multiply, но при этом увеличивается насыщенность изображения.
Linear Burn (Линейное затемнение) — Похож на Multiply, за тем исключением, что затемняет пересекающиеся точки более двух раз.
Darker Color (Цвет темнее) — Сравнивает все цветовые каналы, выделяя базовый и составной цвета, а затем отображает цвет с наименьшим значением.
Режимы осветления
Режимы смешивания этой группы осветляют изображение, а чёрные пиксели заменяются прозрачными.
Lighten (Замена светлым) — Работает прямо противоположно режиму Darken, то есть оставляет те пиксели текущего слоя, которые светлее, а остальные убирает.
Screen (Экран) — Делает пересекающиеся цвета в 2 раза светлее. Один из вариантов использования — осветление фотографий (дублируете слой с фотографией, и применяете этот режим смешивания)
Color Dodge (Осветление основы) — Делает невидимыми чёрные цвета, а остальные цвета осветляют изображение на слое ниже. Увеличивает насыщенность изображения.
Linear Dodge (Add) (Линейная основа) — Тоже самое, что Color Dodge, только увеличивается яркость, а не насыщенность.
Lighten Color (Цвет светлее) — Работает противоположно режиму Darker Color (отображается цвет с наибольшим значением).
Режимы контраста
Режимы смешивания этой группы берут в расчёт и светлые, и тёмные пиксели, в отличии от двух предыдущих. А работают режимы этой группы с контрастностью изображения.
Overlay (Перекрытие) — Смешивает пиксели на текущем и нижнем слое, убирает светлые участки, и умножает тёмные.
Soft Light (Мягкий свет) — Затемняет или осветляет цвет на нижнем слое, в зависимости от цвета текущего.
Hard Light (Жёсткий свет) — Схож с предыдущим, но эффект сильнее. Затемняет нижние цвета, если на текущем слое тёмный цвет, и осветляет, если светлый.
Vivid Light (Яркий свет) — Почти то же, что Soft Light, но регулируется значение контрастности.
Linear Light (Линейный свет) — В зависимости от цвета текущего слоя сильно засвечивает или затемняет изображение. Может использоваться для имитации засветки изображения.
Pin Light (Точечный свет) — В зависимости от того, какие цвета (тёмные или светлые) на активном слое, перемещает цвета на слое ниже.
Hard Mix (Жёсткий микс) — Смешивание по яркости, на выходе получаем очень яркое изображение 🙂
Режимы сравнения
Difference (Разница) — Совмещает верхнее и нижнее изображение друг на друга. Происходит реверсирование цветов, и их яркость зависит от разницы.
Еxсlusion (Исключение) — Тоже самое, что Difference, но контраст значительно меньше.
Subtract (Вычитание) — Вычитает 8-битовые цвета из каналов основы каждого пикселя на каждом слое. Если результатом является негатив, то отображается чёрный цвет.
Divide (Разделение) — Делит друг на друга цвета верхнего и нижнего изображений.
Режимы цвета
Эта группа режимов смешивания фотошопе позволяет наложить только один параметр (например, цвет или яркость), не трогая другие.
Hue (Цветовой тон) — Накладывает на нижний слой цветовой тон верхнего, оставляя все остальные параметры нижнего слоя нетронутыми.
Saturaion (Насыщенность) — Тоже самое, только для насыщенности,
Color (Цвет) — то же для цвета,
Luminosity (Яркость) — и для яркости.
В целом, режимы смешивания дают неизмеримо больше свободы и гибкости при работе с изображениями в photoshop, чем обычное изменение параметров. А в сочетании со стилями и масками слоя это, пожалуй, самый мощный инструмент создания потрясающих эффектов.
Мы рассмотрели все режимы смешивания слоёв в фотошопе , надеюсь этот photoshop урок был для вас полезен, не забывайте оставлять комментарии. На этом я желаю вам успехов, и прощаюсь до новой встречи в следующем уроке.