Двутоновые изображения или режим Дуплекс в фотошопе. Duotone в фотошопе


Двутоновые изображения или режим Дуплекс в фотошопе

Уроки уроками, но не забываем продолжать изучать азы фотошопа! Вернемся к учебнику и разделу по работе с обесцвеченными изображениями.

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

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

Первоначальное изображение:

pervonachal'noe_izobrazhenie

Применение корректирующего слоя черно-белое. Теперь изображение стало черно-белым:

cherno-beloe_izobrazhenie

Теперь сделаем его двутоновым. Я выбрал оттенок красного (PANTONE 485 CVC):

izobrazhenie_v_rezhime_dupleks

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

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

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

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

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

2. Измените цветовой режим изображения на Градации серого (выберите в меню пункт Изображение => Режим => Градации серого) и, когда в появившемся диалоговом окне вас спросят, сохранить или свести слои, щелкните мышью по кнопке Выполнить сведение (Flatten). В следующем диалоговом окне, спрашивающем, удалять ли данные цветов, щелкните мышью по кнопке Отменить (Discard).

3. Вернитесь в меню и выберите в нем пункт Изображение => Режим => Дуплекс. Теперь вы готовы к тому, чтобы выбрать одну из встроенных двутоновых комбинаций цветов, осталось только получить к ним доступ, переключившись в режим Дуплекс (Duotone).

4. В открывшемся диалоговом окне Параметры дуплекса (Duotone Options) выберите желаемую комбинацию цветов.

Раскрывающийся список Стиль (Preset) содержит сотни дву-, трех- и четырехтоновых комбинаций. (Можно потратить целый вечер на то, чтобы их только просмотреть.) Если вы выберете один из пунктов в этом раскрывающемся списке, фотошоп автоматически выберет соответствующий пункт в раскрывающемся списке Тип (Туре). Если же вы решите сами выбрать цвета, то выберите в раскрывающемся списке Тип пункт Дуплекс, Трехкрасочный (Tritone) или Четырехкрасочный (Quad-tone), а затем щелкайте мышью по маленьким индикаторам цветов ниже этого списка, чтобы выбрать чернила (не забывайте: в этом режиме фотошоп думает, что изображение пойдет на печатную машину, а там используются чернила).

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

5. Переключитесь обратно в режим, в котором вы начали работу, выбрав в меню команду Изображение => Режим => RGB. Поскольку режим Дуплекс (Duotone) — специальный и предназначен для печати (не для редактирования документа), то делать в нем больше нечего. Переключившись в режим RGB, вы не заметите разницы — кроме потрясающего вида вашего изображения.

Отлично! Вы только что выбрали свою первую комбинацию цветов в режиме Дуплекс.

Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter. Спасибо!

psand.ru

Тонирование фотографий

 тонирование фотографий

 

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

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

Вот пример фотографии, посмотрим что можно сделать с помощью тонирования.

тонирование фотографий

Примеры готовых форлум тонирования. Нажмите в Photoshop Ctrl+U в ячейках Hue/Saturation, задайте параметры (отметьте галочной Colorize в нижнем правом углу) и наслаждайтесь результатами:

КРАСНЫЙ ( Hue 0, Saturation 10).

тонирование фотографий

СЕЛЕН ( Hue 18, Saturation 10).

тонирование фотографий

СВИНЕЦ ( Hue 25, Saturation 20).

тонирование фотографий

ХОЛОДНЫЕ ТОНА ( Hue 220, Saturation 10).

тонирование фотографий

ЦИАНОТИПИЯ ( Hue 220, Saturation 35).

тонирование фотографий

ЗОЛОТО ( Hue 38, Saturation 30).

тонирование фотографий

СЕПИЯ ( Hue 29, Saturation 32).

тонирование фотографий

Режим дуотон.  Перевести цветной снимок в дуотон? Нет ничего проще! Экспериментируйте и выбирайте то, что лучше всего отвечает вашему замыслу. 

Термин «дуотон» изначально возник в полиграфии. Дуотоном называли тип печати, при котором использовались все два цвета красителей – основной (как правило, черный) и любой другой, заменяющий оттенки серого. Фотографии, обработанные таким образом, становятся объемнее и выразительнее. Для получения данного снимка нам придется сделать:

тонирование фотографий

1.    Конвертируем в дуотон.  Пока изображение находится в формате RGB, перевести его в дуотон невозможно. Поэтому сначала приведем его к оттенкам серого Image > Mode > Grayscale, а уж после этого Image > Mode > Duotone. Обратите внимание на то, что с потерей информации о цвете размер файла значительно уменьшится.

тонирование фотографий

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

тонирование фотографий

3.    Разнообразие режимов.  Для разнообразия можете поэкспериментировать с дополнительными цветами. У вас есть возможность получить одноцветный, двуцветный, трехцветный и даже четырёхцветный снимок.

тонирование фотографий

4.    Второй тип чернил.  Кликнув по белому квадратику, вы сможете выбрать любой цвет.   По умолчанию вам предлагается готовый набор цветов, но вы также можете ориентироваться по вертикальной шкале с основным цветом.

тонирование фотографий

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

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

тонирование фотографий

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

тонирование фотографий

8.    Раздельное окрашивание.  Благодаря кривым вы сможете ограничить применение чернил только для светлых или темных оттенков. Такой прием называется раздельным окрашиванием. Применять его можно как для одного типа чернил, так и для всех сразу. 

тонирование фотографий

И напоследок, парочка красивых фотографий:

тонирование фотографий  

тонирование фотографий  

тонирование фотографий  

тонирование фотографий  

тонирование фотографий  

тонирование фотографий  

тонирование фотографий  

Источник: Digital Photographer

www.takefoto.ru

Duotone Photo Effect – как сделать фото двухцветным

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

Двутоновое изображение (дуплекс) в GIMP:

Duotone Photo Effect в GIMP, двутоновое изображение

Вырезаем главный объект на изображении

Для того чтобы эффект дуотона сделать более выраженным, нужно предварительно удалить ненужный задний план на снимке, оставив на нём лишь главный объект, который затем будет контрастировать на основном фоне. Для создания дуплекса мы будем использовать фотографию с двумя колоритными мужчинами-индусами, с разрешением 2497×1679 px.

Исходное изображение для дуотон-эффекта

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

Шаг 1

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

Добавить альфа-канал к слою

Шаг 2

Возьмите инструмент Свободное выделение (Лассо). Сделайте выделение главного объекта на изображении, почаще расставляя контрольные точки вдоль границы между объектом и фоном. Замкните контур выделения, соединив начальную и конечную точки.

Для активации выделения в GIMP 2.10, нажмите клавишу Enter.

Полное выделение всех деталей на изображенииШаг 3 — по необходимости

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

Параметр вычитания в свободном веделении

Шаг 4

Через меню Выделение – Растушевать сделайте растушёвку с настройками по умолчанию.

Растушевать выделение по умолчанию

Если ваше изображение размером 3000 px и выше, можете увеличить степень растушёвки, чтобы сделать края выделения с более плавным переходом.

Шаг 5

Выберите в меню Выделение – Инвертировать.

Шаг 6

Сделайте заливку через меню Правка – Залить цветом фона. Холст зальётся белым цветом, не затронув наших мужчин-индусов.

Шаг 7

В меню Выделение выберите Снять выделение.

Индийские мужчины на белом фоне

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

Работаем с цветовыми каналами

В общем-то, секрет создания duotone effect состоит в умелой работе с цветовыми каналами изображения. Поэтому переходим на вкладку Каналы в правой боковой панели GIMP.

Шаг 1

Сделайте на каждом из цветовых каналов правый клик мышью и выберите пункт Создать копию канала.

Создать копию цветового канала

Шаг 2 – для версии GIMP 2.8.22

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

Копии цветовых каналов

Шаг 2 – для версии GIMP 2.10

Не отключайте видимость канала Альфа!

Работа с каналами дуотонового изображения в GIMP 2.10

Перейдите на вкладку Слои и отключите видимость основного слоя с мужчинами-моделями на белом фоне.

Отключаем видимость основного слоя в GIMP 2.10

Шаг 3

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

Выбор красного канала

Шаг 4 – не пропустите

Зайдите в меню Слой и выберите Создать из видимого. Из красного канала будет создан отдельный новый слой.

Создать слой из видимого

Шаг 5

Отключите видимость копии Красного канала и включите видимость канала Альфа. [В GIMP 2.10 канал Альфа остаётся включенным.]

Цветовые каналы и копии

Шаг 6 – для версии GIMP 2.8.22

Перейдите на вкладку Слои и активируйте основной слой, сделав по нему клик мышью.

Активировать нижний слой

Шаг 6 – для версии GIMP 2.10

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

Возвращаем видимость основного слоя в GIMP 2.10

Шаг 7

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

Красный канал на белом холсте

На этом шаге мы подошли к главной части нашего урока по созданию дуотон-эффекта в GIMP.

Создаём Duotone Effect – избирательно тонируем изображение в два цвета

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

Шаг 1

Кликните по пиктограмме цвета переднего плана и фона.

Выбор цвета переднего плана

В открывшейся палитре введите код в строку HTML-разметка: FF9933. Нажмите ОК.

FF9933 - оранжевый цвет

Шаг 2

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

Шаг 3 – будьте внимательны

Активируйте слой Видимое, с нашими индусами. И включите блокировку альфа-канала, щёлкнув по квадратику в шахматную клетку над стопкой слоёв.

Блокировка альфа-канала

Шаг 4

Снова измените цвет переднего плана, введя в строку HTML-разметка код: 000080. Нажмите ОК.

000080 - темно-синий цвет

Шаг 5

Инструментом Плоская заливка сделайте окрашивание главного объекта изображения. В нашем случае мужчины-индусы будут затонированы тёмно-синим цветом.

Шаг 6

По желанию, доработайте изображение инструментами цветокоррекции из вкладки меню Цвет. Например, инструментами Яркость-Контраст, Уровни или Кривые.

Оцените готовый результат:

Duotone Effect in GIMP Duplex

На этом урок по созданию Duotone Photo Effect в GIMP закончен.

uroki-gimp.ru

Изящество, Энергия и Фантазия С Эффектом Дуплекс В Photoshop

Впервые появившись еще в 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, в авторских работах. 

Расскажите друзьям!

2678

08 Июнь 2017

wayup.in

Тренд в дизайне — двухцветные изображения

Перевод статьи “Duotone Color: Tips & Examples for This Vibrant Trend” о зарождающемся тренде в веб-дизайне — двухцветных изображениях: как лучше всего их использовать и зачем.

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

Что такое дуотон?

052b37ad8912bba402b62579da79df00

Дуотон — использование двух цветов в изображении. Название и техника появились в полиграфии, где для печати использовали только 2 цвета.

Дуотон визуально интересен и делать его — элементарно. Эффект создается в Фотошопе или с помощью приложения по типу Colofilter.css.

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

Заглавное фото

Используйте двухцветное фото на главной странице — как New Deal Design, которые выбрали смелые цвета и смешные образы. Не бойтесь выйти из зоны комфорта — используйте несочетаемые цвета. Главное — создать контрастное изображение, притягивающее внимание пользователей.

Чтобы достичь максимального эффекта:● Выберите два контрастных цвета. Круто, если это будут цвета бренда;● Возьмите фото с объектами, на которых можно сфокусироваться. Пейзажи сложнее использовать;● Используйте качественные изображения. Размытые фотографии низкого качества — не вариант;● Создайте контраст;● Определите место для кнопок и текста;● Выбирайте цвета, которые отражают настроение фотографии;● Добавьте цветную рамку или параллакс-эффект.

71c3ec3f3f7d003083057265a351e92d

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

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

Assurity Life Insurance используют два оттенка красного и простой шрифт. По скроллу появляется еще несколько полутонов. Красный привлекает внимание пользователей.

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

8a27b51299581aa315c080507026fc8c

Повышенная читабельность

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

28823edcaec8cebaa0d2610a3431f922

Акцент

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

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

1ff46f94d145c43ae310280105e4c974

Фон

Это идеальный способ использовать фирменные цвета. И еще дуотон поможет сделать сайт современнее без кардинальных изменений.

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

525baeee9228b710cf916bf8b580e712

Дуотон — возможность экспериментировать, соединять несовместимые цвета. А результат всегда выглядит классно и работает.

Вывод

Оригинальное — не значит сложное. Особенно в эпоху минимализма. Берите фотошоп (или даже приложение для телефона) и креативьте трендовый дизайн.

Источник: blog.sibirix.ru

infogra.ru


Смотрите также