Работая над дизайном сайта, логотипом, художественной работой или подбирая какой-нибудь занятный эффект для фотографии, который будет размещаться на фоне страницы/секции, веб-дизайнерам приходится, так или иначе, заниматься творчеством. Творчеством в широком смысле, потому как действительно первоклассный дизайн получается отчасти только тогда, когда он притягивает взор посетителя. И если посмотреть на многочисленные работы некоторых мастеров, то можно увидеть, что фотографии и изображения в чистом, оригинальном виде используются … очень редко.
Это объяснить легко. Не всегда для дизайна предоставляются фотографии хорошего качества с нужным освещением. Также идеальные фотографии не всегда уместны по тематике. Иногда просто для данного дизайна хочется преобразить фотографию или изображение, изменить по тональности, яркости, резкости и прочее. Одним словом, обработка необходима и не все веб-дизайнеры представляют, как её можно осуществлять кроме банального цветотона и яркости-насыщения. А что еще можно?
А еще можно использовать режимы наложения/смешивания слоев. Казалось бы, что режимы наложения нужны, если создается какая-то композиция, но в действительности применяться они могут и в пределах одного изображения.
Таинство режимов наложения
Работа с режимами наложения – процесс практически всегда экспериментальный, поскольку предсказать результаты почти невозможно. Для каждого изображения результат применения одного и того же режима всегда разный и зависит это от того, какие цвета и в какой пропорции используются в оригинале. Но мы сегодня расскажем вам немного о взаимодействии режимов, о том, как они зависят от цветов. Мы постараемся не углубляться в математические расчеты (хотя они есть и могут применяться), но объясним и продемонстрируем вариации их использования и смешивания друг с другом.
Обычно из всего количества режимов смешивания, предлагаемых Adobe дизайнерам, используется только Умножение, Экран, Перекрытие и Мягкий свет. Но магия таится в ином. У кисточки, у каждого слоя в отдельности тоже есть разные режимы смешивания по каналам или прозрачности. Но обо всем по порядку и начинаем с панели слоев и последовательно со всех 27 режимах наложения.
Основной наш оригинал.
Перестановочные режимы
Существует две пары режимов смешивания, являющихся перестановочными версиями друг друга. Это Перекрытие и Жесткий свет, а также пара Яркость и Цветность. Когда вы применяете один такой режим к активному слою, то увидите результат тот же, как если бы добавили другой режим наложения на нижний слой, а затем изменили порядок слоев.
Зависимость от непрозрачности
Некоторые режимы наложения очень зависят от того, как отрегулированы ползунки Непрозрачность слоя и Заливка. Например, Жесткое смешение обычно выглядит не очень хорошо, но если настроить процент Непрозрачности заливки для данного слоя, то можно получить отличные результаты.
Кроме Жесткого смешения такими зависимыми являются еще семь: Затемнение основы, Линейный затемнитель, Осветление основы, Линейный осветлитель (добавить), Яркий свет, Линейный свет, Разница.
Умножение
При выборе режима Умножения вы затемняете рисунок. Этот вариант подходит, если исходная фотография слишком засвечена (проэкспонирована). Суть в том, что при многократном использовании одних и тех же пикселей на обоих слоях, им присваиваются номера в соответствии с их цветом, и они перемножаются. Но если умножить черный на черный, то результат станет черным, а белый на белый – белым. Это нейтральные цвета, они всегда неизменны, но вот все остальные изменяются.
Ниже можно увидеть тарелку с блинчиками и ягодками. Она слишком засветлена. Применили Умножение и увеличили количество слоев. Результат уже хороший.
Экран
Режим наложения Экран также производит умножение значений пикселей, но делает это с обратными значениями. Если верхний слой темный, а нижний светлый, то результат станет светлым. Режим отлично подходит для фотографий темных, которые требуют исправить недовыдержанность при фотосъемке или просто темные изображения. Иными словами, вам не потребуется создавать и придумывать источник света, регулировать яркость/контрастность. Осветлить всю картинку можно одним только режимом Экран.
Затемнение и Замена светлым
Предыдущие варианты мы рассматривали в пределах одного изображения. То есть регулировали его качество. Но эти два режима не покажут вам каких-либо изменений, если на обоих слоях одно и тоже изображение. Увы!
Чтобы увидеть их работу, вам потребуется два разных изображения, находящихся на разных слоях одного документа. Для верхнего слоя с птичкой применим Затемнение. Данный режим сравнивает каждый пиксель на верхнем слое с теми, что на нижнем и отображает самый темный из них. Поэтому у нас получилась «форменная неказистость», но наглядная. Результат более темный в совокупности уже двух изображений.
Режим наложения Замена светлым работает аналогично, но отображает самые светлые пиксели, что есть в двух изображениях, и предлагает совокупность их. Такой режим для нашей пары приемлем более всего, а если немного пройтись ластиком или кисточкой по маске, то и композиция становится лучше.
Осветление основы, линейный осветлитель, затемнение основы, линейный затемнитель
В Photoshop все эти четыре типа режима наложения работают одинаково. В каждом случае пиксели фонового слоя, в сравнении с соответствующими пикселями верхнего слоя, изменяются по яркости и контрастности. То есть, яркие пиксели одного смешиваются с яркими другого.
- Затемнение основы – увеличивает контрастность
- Линейный затемнитель – уменьшает яркость
- Осветление основы – уменьшение яркости и придания светлости изображению
- Линейный осветлитель – увеличивает яркость
При выборе данных режимов также рекомендуется учитывать, что режимы темной группы затемнят изображение, а светлой – осветлят. При любых вариантах сочетания цветов, разных или одинаковых изображениях и прочего. Другой вопрос как раз состоит в том, как именно они это будут делать и на что повлияют.
Мы говорили выше, что эти режимы входят в восьмерку самых сложных и неоднозначных, поэтому для их качественного применения необходимо регулировать ползунки Непрозрачности и Заливки.
Перекрытие
Этот режим наложения, наверное, самый популярный и полезный, когда дело доходит до увеличения насыщенности и контраста. Если у вас уже идеальная фотография, то произойдет попросту смешивание пикселей и неказистый эффект. Использовать данный режим лучше при условии, что на слоях у вас одно и то же изображение. Тогда вы сможете сделать цвета более сочными. Если же требуется немного осветлить, то тогда уже переходите на Экран или Умножение для затемнения. Но Перекрытие дает именно насыщенность. Если у вас очень светлая картинка, то она станет еще светлее, поэтому для тарелки с блинчиками Перекрытие никак нельзя применять. Только Умножение.
Жесткий свет
Лучше всего работает только тогда, когда у вас на слоях два разных изображения. Принцип его работа похож на Умножение и Экран, но результат зависит от светлого или темного оттенка на слое (не фоновом). Для чего это может пригодиться в веб-дизайне? Когда на выбранную вами фотографию нужно добавить немного теней или света, поскольку на верхнем слое светлые станут светлее и темные пиксели будут затемнены.
Боле того, этот режим смешивания подходит для работы с деталями, поэтому имея два изображения, при разном порядке слоев будет и разный результат.
Если же у вас на слоях одно и то же изображение, то Жесткий свет попросту увеличит контрастность и затемнит композицию. Это не всегда удобно.
Мягкий свет
Он идентичен Жесткому свету, но результат становится более мягким. Так или иначе, оба эти режима наложения направлены на то, что увеличить насыщенность цветов и контраст в тусклых и безжизненных рисунках. То есть, имея фотографию птички, очень светлую и ненасыщенную, путем режима Мягкий свет мы совсем чуть-чуть насытили её красками. А режим Жесткий свет сделал это более активно.
Разница, исключение, вычитание
Если с предыдущими слоями все более-менее понятно (снижение /увеличение яркости, добавление черного и белого), то эти три режима всегда приводят новичков (чаще всего) в некое замешательство. Результаты поражают своей аляповатостью и никогда не знаешь, а зачем эти режимы вообще нужны-то?? Вот и остановимся на них чуть подробнее.
Разница и Исключение работают аналогично друг другу, но у Разницы результат может быть более явным и жестким. Оба эти режима вычитают цвета на обоих слоях в зависимости от того, какой из них более легкий (светлый). Если вы смешиваете изображение со светлым вариантом, то оно инвертируется и смешивается с черными пикселями, остающимися без изменений.
Режим наложения Разница делает результат такого смешивания более контрастным, чем при Исключении.
Вычитание же занимается именно вычитанием одинаковых цветных пикселей на верхнем изображении из тех, что находятся на нижнем слое. И в зависимости от того, на каких слоях находятся ваши картинки – результат тоже будет разным.
Оттенки, насыщение, светимость
Все эти режимы наложения в последней группе всех режимов работают по единому принципу. Они изменяют один элемент базового цвета по тону, насыщенности, светимости и оставляют два других неизменяемыми. То есть, у нас три параметра. Один какой-то меняем, два других остается. При выборе оттенка, яркость и насыщение остаются неизменными.
На примере ниже для тарелки с блинчиками использовали тон и изображение окрасилось, смешались краски. Если же поменять слои, то эффект более наглядный и неоднозначный.
Небольшой итог
Таким образом, режимы смешивания слоев выполняют одну простую роль – коррекция исходного изображения. Другое дело, что только восемь из 27 типов работают, если изображения разные на слоях. Это, наверное, главное, что следует помнить.
Но также интересен и тот факт, что режимы наложения можно смешивать и тогда композиция может получиться невероятно загадочной и новой. Всего-то добавили на нижний слой Экран, на птичку – Цветность и получили совершенно новое изображение. Добавьте маску и кисточкой пройдитесь по небесам. Может, там северное сияние?
А, может, превратить тундру в зеленый массив? Меняем слои местами и применяем Цветность и Затемнение. И это без игры с непрозрачностью и заливкой. Но опять-таки со слоями-масками, поскольку небо нужно было «почистить».
Таким образом, режимы смешивания предлагают еще один занятный и творческий способ преобразить ваши фотографии, изображения для дальнейшего использования в макете сайта. Кто-то скажет: можно просто перебором по слоям подобрать нужный вариант, зачем нужно знать, где темнее, где светлее? Да, можно, но это дольше и сложнее. Когда не знаешь принцип смешивания, можно часами сидеть и подбирать режимы на слоях и думать, да что ж получается белиберда-то?... Если иметь хотя бы общее представление, то время подбора сократиться.
Кисточка
Напоследок еще одно интересное «но». У инструмента Кисточка существует два дополнительных режима смешивания. Это На заднем плане и Очистить. Первый вариант смешивания будет применять краску на прозрачных пикселях, а непрозрачные останутся без изменений. При выборе же Очищения – кисть превратиться в ластик и удалит пиксели, что вы рисовали на прозрачном фоне. С одной стороны, может показаться, что этому нет применения, но, например, для ИК-эффекта очень даже подойдет. Или добавления красного артефакта, что придаст акцент в том месте и сделает имитацию лавы.
Режим наложения по умолчанию
В настройках каждого слоя также есть режимы наложения, но работают по каналам или серому цвету. Например, вот хотим мы добавить луну, самую обычную (без эффектов). Возможно, применить к слою Экран или Осветлитель достаточно, но есть способ более детальный.
Два раза кликаем на слой с луной и появляется знакомое окошко. И внизу для панели данного слоя левый ползунок двигаем вправо, удаляя тем самым черный цвет.
Выглядит нереалистично, поэтому, оставаясь все здесь же, обратим внимание на нижнюю панель. Она позволит нам скрыть луну в облаках. Если они светлые, то используйте правый ползунок, если темные – левый.
Луну можно подвинуть при необходимости.
Итоги
Таким образом, разные вариации смешивания слоев, будь это настройки одного слоя, режимы панели слоев или работа с кисточкой, позволяют создавать изображения совершенно новые и оригинальные. Да, в тренде веб-дизайна приветствуются реалистичные фотографии. Но что делать, если не все они очень хорошего качества, если им не хватает немного лоска, свечения, насыщения.
С ползунками корректирующих слоев порой приходится долго разбираться, а с режимами наложения гораздо проще. И причина тому проста. Они изначально разделены на группы по своему принципу преобразования пикселей, а значит нам, как веб-дизайнерам, остается только подобрать нужные картинки.
И если вам говорят: у вас объект на небе яркий – не отчаивайтесь, а попробуйте поиграть с режимами слоев в разных вариантах.