Обучайся бесплатно с WAYUP Premiere сегодня вечером

Впервые появившись еще в 2015 году в оформлении музыкального сервиса Spotify, красочный и яркий фотоэффект сейчас популярен, как никогда. Эффект, который использует всего два цвета (а иногда и больше) и, тем самым, преобразуя изображения, позволяет им выглядеть весело, энергично и красиво. И если в 2016 году он только начинал распространяться среди веб-дизайнерских «фишек», то теперь его использование считается проявлением вкуса веб-мастера, его чуткости к новым веяниям и безграничной творческой фантазии.

Да, речь идет именно об эффекте «Дуплекс» или Duotone. Впрочем, в Photoshop это, скорее, не эффект в привычном смысле, а режим отображения и печати, наряду с вариантом «градации серого», «CMYK» или «RGB». Так или иначе, но «Дуплекс» принято считать фотоэффектом. Почти с каждым месяцем можно увидеть все новые и новые сайты, которые изменяются или создаются с нуля с использованием этого эффекта. И такие сайты нам встречаются очень часто во время веб-серфинга или изучения работ на Awwwards или Behance.

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

Что такое Дуплекс?

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

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

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

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

Таким образом, стиль полиграфической печати нашел в интернете вторую жизнь и вряд ли его скоро забудут или посчитают устаревшим.

И вот почему…

Доминирующие изображения

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

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

И вот о чем шла речь: Runbetter.newtonrunning, Winter Capital, Adison Partners

 

Простота палитры цветов

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

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

Аналогично выглядят Renate Rechner и Ortiz. Leon.

Удобство чтения

Как ни странно, но дуплекс способен  сделать текст более контрастным и удобным для чтения. "Почему" – спросите вы и как? Дело в том, что двухцветное тонирование помогает «сгладить» разброс цветов на фотографии и сделать изображение более «спокойным». Соответственно, текст, размещаемый практически в любом месте поверх этого изображения, станет лучше виден и читаем.

Разумеется, что веб-дизайнеры стараются выбирать цвета для дуплекса в этом случае более приглушенные, не слишком яркие и ядовитые. Примеры Etremarin, Fcinq.com, Music Incubator яркие представители описанного выше. Более того, если страничку второго проекта прокрутить чуть ниже, то можно увидеть и ощутить, как не слишком удобно становится читать текст поверх полноцветного изображения. Буквы белого цвета будто бы теряются на изображении.

  

Привлекая внимание

Эффект дуплекса применяется и для небольших фотографий и элементов, размещенных в различных секциях страницы. Это могут быть плитки с разделами сайта, секции-разделители на Landing Page. Иными словами – речь идет о вторичном контенте.

При таком варианте эффект дуплекса подходит, если веб-дизайнер окончательно не уверен, действительно ли его проект привлечет внимание пользователей и акцентирует их внимание на главном. Но сам же эффект привлечет точно! Правда? Поэтому двухцветные полутона накладывают и на сами изображения, и на видео, на ссылки, иконки или схемы. Примеры Viens-la, Lois Jeans, Boomex Agency показывают тонирование и видео, и изображений.

Фон не забыт

"А что, если фотографий используется мало, и тем более, если нет фоновых изображений" – спросите вы? Тогда эффектом дуплекс все равно можно создать красивый фон или затонировать небольшой и едва заметный узор. Обычно, в этом случае веб-мастера используют цветовую гамму бренда или трендовые цвета года, или те цветовые оттенки, ассоциирующиеся у общества с тематикой сайта.

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

 

Проект же Too Pop в качестве фона выбрал фотографию, но дуплексом практически полностью скрыл её сюжет. Получилось весьма необычно и даже загадочно. Отдельного внимания заслуживает и Nurture Digital

 

 

Три способа создания Дуплекса в Photoshop

Эффект дуплекс действительно прост и в создании, и в использовании. Тем более, что в Photoshop его можно создать тремя способами. Несколько «но» все же есть. Некоторые советуют производить дуплекс-тонирование с помощью CSS или скриптов. Но поскольку фотографии обычно используются уже заранее подобранные, то лучше вручную обработать их с тем, чтобы подобрать не просто оттенок цвета, но и плавность переходов, контраст и многое другое.

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

Доступен режим в любой версии Photoshop, как в CC, так и в CS. Красный нами выбран для яркости и наглядности. Особо сложного ничего нет в создании эффекта, поэтому меньше слов и больше дела, некоторые особенности по тексту.

Способ 1

Открываем изображение (в нашем случае арт), создаем поверх слоя еще один и заливаем его нужным цветом. Выбираем стиль наложения нового слоя – «Цветовой тон». Эффект Дуплекса готов и картинка затонировалась в многоцветие оттенков красного и черного, то есть использовались два цвета.

 

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

Способ 2

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

 

 Способ 3

Его рекомендуют сами Adobe и для этого варианта, уже без сомнения, подойдёт совершенно любое изображение. Но и тонирование оно предлагает более эффектное.

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

 

 

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

 Контраст позволяет подчеркнуть детали изображения. Сравните варианты работ ниже «до» и «после» контраста.

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

Вывод

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

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

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

Как вам материал?