Дуотон в фотошопе как сделать
Уроки уроками, но не забываем продолжать изучать азы фотошопа! Вернемся к учебнику и разделу по работе с обесцвеченными изображениями.
Есть еще один элегантный эффект, используемый в черно-белых изображениях — эффект яркого тона (двутоновые изображения). При фотографировании создать такой эффект можно, осветив снимаемый объект огромным количеством света. При этом вы получите высококонтрастное изображение, на котором тени будут показаны оттенками серого, а все остальное будет почти белым.
Есть две серьезные причины, по которым вы, вероятно, захотите научиться создавать двутоновые изображения. Во-первых, такие изображения позволяют уменьшить стоимость при массовой печати. Во-вторых — это один из способов создать по-настоящему профессионально выглядящие черно-белые отпечатки (представьте себе, большинство черно-белых фотографий, выставленных в галереях, на самом деле содержат немного цвета!) Чтобы вы поняли, о чем вообще я говорю, разберем небольшой пример двутонового изображения и немного вспомним цветовые режимы.
Применение корректирующего слоя черно-белое. Теперь изображение стало черно-белым:
Теперь сделаем его двутоновым. Я выбрал оттенок красного (PANTONE 485 CVC):
Под двутоновым понимается изображение, в состав которого входят два цвета (один из них обычно черный). Режим Дуплекс (Duotone) программы фотошоп позволяет добавить нужные цвета к истинно черно-белым изображениям. Если к истинно черно-белому изображению добавить еще один цвет, вы получите двутоновое изображение. Добавив следующий цвет, вы получите трехтоновое изображение (градации серого и еще два цвета), и если добавите еще один — четырехтоновое (градации серого и еще три цвета). Для удобства рассмотрения и в связи с особенностями работы программы фотошоп, говоря о двутоновых изображениях, я буду подразумевать и трех-, и четырехтоновые, как бы странно это ни звучало.
В печатных машинах используется система CMYK — четыре отдельные печатные формы печатают разными чернилами, которым соответствуют четыре канала в режиме CMYK. В двутоновых и трехтоновых изображениях каналов меньше, и потому они печатаются меньшим числом печатных форм — одной для градаций серого плюс одной или двумя цветными формами (для получения двутоновых и трехтоновых изображений соответственно) — поэтому и снижается стоимость печати. Так что если ваш документ предполагается печатать на печатной машине, то использование двутоновых изображений — не очень затратный способ создания необычных впечатляющих изображений.
Есть еще один повод серьезно отнестись к двутоновым изображениям: поскольку они так широко используются в профессиональной печати, корпорация Adobe потратила кучу времени и денег на составление комбинаций цветов, из которых получаются поразительно красивые изображения — и эти комбинации доступны только в режиме Дуплекс. На самом деле, большинство (если не все) отмеченных наградами фотографий, демонстрируемых в галереях, вовсе не черно-белые: это дву-, трех- и четырехтоновые изображения с тонкими цветовыми оттенками, придающими им дополнительную глубину и яркость.
Даже если ваше изображение не будет печататься на профессиональной печатной машине, вам захочется попробовать в деле встроенные комбинации цветов программы фотошоп. Получить к ним доступ можно, переключившись в режим Дуплекс, а затем выйдя из него. Вот как это сделать:
1. Преобразуйте изображение в черно-белое с помощью одного из описанных в этой статье методов и затем сохраните документ в формате PSD. Неважно, какой метод вы выберете, только не позволяйте фотошопу выполнить преобразование за вас.
2. Измените цветовой режим изображения на Градации серого (выберите в меню пункт Изображение => Режим => Градации серого) и, когда в появившемся диалоговом окне вас спросят, сохранить или свести слои, щелкните мышью по кнопке Выполнить сведение (Flatten). В следующем диалоговом окне, спрашивающем, удалять ли данные цветов, щелкните мышью по кнопке Отменить (Discard).
3. Вернитесь в меню и выберите в нем пункт Изображение => Режим => Дуплекс. Теперь вы готовы к тому, чтобы выбрать одну из встроенных двутоновых комбинаций цветов, осталось только получить к ним доступ, переключившись в режим Дуплекс (Duotone).
4. В открывшемся диалоговом окне Параметры дуплекса (Duotone Options) выберите желаемую комбинацию цветов.
Раскрывающийся список Стиль (Preset) содержит сотни дву-, трех- и четырехтоновых комбинаций. (Можно потратить целый вечер на то, чтобы их только просмотреть.) Если вы выберете один из пунктов в этом раскрывающемся списке, фотошоп автоматически выберет соответствующий пункт в раскрывающемся списке Тип (Туре). Если же вы решите сами выбрать цвета, то выберите в раскрывающемся списке Тип пункт Дуплекс, Трехкрасочный (Tritone) или Четырехкрасочный (Quad-tone), а затем щелкайте мышью по маленьким индикаторам цветов ниже этого списка, чтобы выбрать чернила (не забывайте: в этом режиме фотошоп думает, что изображение пойдет на печатную машину, а там используются чернила).
Если вы захотите сохранить созданную вами комбинацию, щелкните мышью по кнопке, находящейся справа от раскрывающегося списка Стиль и задайте имя набора настроек. Когда завершите работу, щелкните мышью по кнопке ОК.
5. Переключитесь обратно в режим, в котором вы начали работу, выбрав в меню команду Изображение => Режим => RGB. Поскольку режим Дуплекс (Duotone) — специальный и предназначен для печати (не для редактирования документа), то делать в нем больше нечего. Переключившись в режим RGB, вы не заметите разницы — кроме потрясающего вида вашего изображения.
Отлично! Вы только что выбрали свою первую комбинацию цветов в режиме Дуплекс.
Я уже говорила о дуотоновых изображениях, что это такое, какими способами их получить. А в сегодняшнем уроке выполним коллаж, используя 2 раздельных цвета.
Для этого мне понадобится изображение модели (архив, 7,15 Мб), которую я заранее вырезала, и маска (.jpg, 2,5 Мб).
Для тех, кто предпочитает не читать, а смотреть, видео - урок в конце статьи.
1. Перемещение и трансформация маски
1. Открываю девушку и дублирую слой: Ctrl+J или перетаскиваю слой на пиктограмму Создать новый слой.
2. Маску перетаскиваю в файл с девушкой и трансформирую Ctrl+T до необходимого — ориентируюсь по левому глазу модели.
3. Перспектива маски не совпадает с поворотом головы девушки, но поскольку конечное изображение двухтоновое, мне достаточно будет лишь немного «подтянуть» маску, не вдаваясь в мелочи. Сделаю это с помощью фильтра Пластика (Liquify).
Включая и отключая видимость нижележащих слоев, подгоню правую часть под разворот.
2. Добавление тени от маски
2. Снимаю выделение (Ctrl+D) и с помощью фильтра Размытие по Гауссу смягчаю границу тени. Значения подбираю на глаз, они зависят от каждого конкретного случая.
3. Перевожу в режим Умножение (Multiply), перемещаю слой с тенью под маску, и немного смещаю в сторону. Тень выходит за границы головы девушки, избавлюсь от лишнего — Ctrl+Alt+клик левой кнопкой мыши между слоем с девушкой и тенью.
Если тень слишком жесткая, немного уменьшу ее прозрачность.
Подкорректирую границу деформацией.
4. Сливаю слои с девушкой, тенью и маской в один: с зажатым Shift выделяю слои и нажимаю Ctrl+E.
Отключаю пока видимость получившегося слоя и возвращаюсь к исходному.
3. Разбиение на цвета
Делать это буду в 2 этапа:
- Сначала переведу изображение в черно-белое,
- Затонирую в необходимые цвета.
1. Перевод в черно-белое изображение
Перевести в чб изображение можно разными способами, я использую корректировочный слой Black&White (Чёрное-и-Белое), потому что он дает возможность получить черно-белое изображение с необходимыми мне значениями чёрного и белого, в отличии от обычной команды Обесцветить, которая сохраняет исходные значения.
Например, подняв значения красного (Red +166) и желтого (Yellow + 83) цветов в Black&White получу более контрастное фото по сравнению с обесцвеченным:
Чтобы действие данного слоя применялось только к девушке и не затрагивало остальные, кликаю на иконке Обрезающая маска.
2. Тонирование
Первый цвет изображения готов.
Аналогично затонирую слой с девушкой в маске, но в голубой цвет:
1. Дублирую слои Черное-и-Белое и Карту градиента и перемещаю их выше слоя с девушкой в маске, включаю видимость последнего.
Перевожу слои в режим ClippingMask.
4. Окончательная трансформация
1. Отзеркаливаю слой с девушкой в маске по горизонтали: Редактирование (Edit) — Трансформация (Transform) – Отразить по горизонтали (Flip Horizontal).
2. Перевожу в режим Умножение (Multiply) и смещаю в сторону относительно исходного.
Можно вместо Умножения использовать другой подходящий затемняющий режим
3. Я увеличу размер холста, поменяю режим на Линейный затемнитель (Linear Burn) и добавлю текстовую надпись.
На этом все, получили такое вот изображение:
Как вы видите, с помощью нехитрых операций можно получить необычные эффекты, настраивая цвета Карты Градиента.
Видео - урок по созданию 2-хцветного изображения:
В очередной раз повторюсь: использование корректировочных слоев удобно тем, что в любое время можно безболезненно изменить их настройки, не выполняя снова одни и те же операции. Работает это и для градиентов, так что осваивайте и творите)
Делитесь результатами выполнения урока и пишите комментарии, был ли он вам полезен.
In this quick tutorial I’ll show you how to create a duotone effect on your images using Adobe Photoshop.
What You’ll Need
Step 1
Open up your image in Photoshop.
In the Layers panel choose Black & White from the New Adjustment Layer menu.
Switching the image to black and white will make your duotone color choice look more vibrant.
Step 2
Head back into the adjustment menu and this time choose Gradient Map.
Step 3
In the Gradient Map window, double-click on the gradient color bar. This will open up the Gradient Editor window.
Double-click on the stop at the far-left side of the slider under the Gradient Type section.
This opens the Stop Color window. Here you can add the first color of your duotone gradient. I’m going for a deep pink tone for this first stop, R=180 G=48 B=147. Once you’re happy with your color choice, click OK.
Step 4
Click on the right-hand stop to open the Stop Color window for your second color tone. Finding a color to complement your first choice can take a bit of experimenting.
Here I’ve gone for a baby blue, R=245 G=210 B=231. Click OK once you’re happy.
Step 5
You can adjust the strength of the duotone gradient by tweaking the position of the two stops.
I moved the pink slider to the right to make that color selection stronger. Aim for a balance of contrast and brightness in your image. You want to see all the details of your photo without saturating them too much, but you also want bold colors.
And you’re done! Read on to discover more tips for finding the right color combinations and enhancing individual elements in your duotone images.
PRO TIP: Duotone-Friendly Color Combinations
You can find color combinations that look great as duotone overlays with a color wheel tool like Adobe Color. Click on the Complementary option in the Color Rule menu to discover colors that always match well.
PRO TIP: Enhancing the strength of individual elements in your duotone images
Make elements of your image stand out against the duotone effect.
Step 1
For this image of a smiling woman, I’ve set teal (R=0 G=112 B=160) and green (R=32 G=205 B=78) duotone gradient. I want to bring out the deep color of her lipstick in an even darker tone to make her smile the focal point of the image.
To do this, use the Lasso Tool (L) to trace the edges of the area you want to darken. Then click on the Refine Edge button at the top of the workspace. In the window that opens, check Smart Radius, and adjust the other sliders until you’re happy with the accuracy of the selection. Click OK to exit the window.
Step 2
In the Layers panel, ensure the original image layer is selected, then choose Levels from the adjustment layer menu.
Pull the black and grey sliders to the right until you’ve darkened the selected area, creating a deeper, richer color.
Can’t wait to experiment with more duotone effects? Source some great images for the task — discover wanderlust shots, live music crowds and fantastic portraits.
COVID-19 Resources
Use these curated creative assets to keep your projects running.
Download free virtual backgrounds, video clips, images, and music.
Дуплекс (Duotone) позволяет веб-дизайнерам создавать красивые сайты, дизайн которых еще в течение ни одного года не устареет. Эти сайты встречаются нам очень часто во время веб-серфинга или изучения работ на Awwwards или Behance. Но как создать эффект дуплекс, как лучше использовать, как подобрать под него фотографии?
Впервые появившись еще в 2015 году в оформлении музыкального сервиса Spotify, красочный и яркий фотоэффект сейчас популярен, как никогда. Эффект, который использует всего два цвета (а иногда и больше) и, тем самым, преобразуя изображения, позволяет им выглядеть весело, энергично и красиво. И если в 2016 году он только начинал распространяться среди веб-дизайнерских «фишек», то теперь его использование считается проявлением вкуса веб-мастера, его чуткости к новым веяниям и безграничной творческой фантазии.
Да, речь идет именно об эффекте «Дуплекс» или Duotone. Впрочем, в Photoshop это, скорее, не эффект в привычном смысле, а режим отображения и печати, наряду с вариантом «градации серого», «CMYK» или «RGB». Так или иначе, но «Дуплекс» принято считать фотоэффектом. Почти с каждым месяцем можно увидеть все новые и новые сайты, которые изменяются или создаются с нуля с использованием этого эффекта. И такие сайты нам встречаются очень часто во время веб-серфинга или изучения работ на Awwwards или Behance.
Но как использовать его? Когда его применение оправдано и как его создать тремя простыми способами в Photoshop? И это при том, что каждый такой способ по-разному изменит исходное изображение.
Что такое Дуплекс?
Дуплекс предполагает почти полную двухцветную заливку (тонирование) исходного изображения. Поскольку чаще всего используется два цвета, то основные детали как раз и подчеркиваются одним, а общий фон - вторым. Вот как это выглядит в оригинале на Spotify.
Название и техника эффекта пришли в цифровую графику из полиграфии. Дуплекс представляет собой автотипную печать и позволяет создавать фотографии в полутонах с помощью двух красок: оттенками одного цвета или чёрного с каким-либо оттенком. Сама же печать осуществляется с двух клише, форм, на которых находится рельефный отпечаток исходного изображения и которые находятся под разными углами.
В цифровой графике, разумеется, все гораздо проще. В разных случаях достаточно нажать два-три раза мышкой и Photoshop представит красивый, сочный и жизнерадостный эффект. Да и вариаций двухцветного дуплекса может быть неимоверно много, что позволяет избежать повторов с работами других веб-дизайнеров. Причиной этому служит, например, богатая ежегодная палитра Pantone, которая предлагает цвет года и сочетающиеся с ним оттенки.
Сторонники минимализма полагают, что палитра веб-проекта должна быть ограниченной, поэтому для них в особенности эффект дуплекс – это доступный трюк с использованием минимального количества цветов. Используют же эффект преимущественно на промо-сайтах и добавляют на большие лого-изображения, отдельные элементы, фон. Особенно он востребован, если веб-дизайнер использует фотографии или работы известных художников, которые и без того широко распространены в интернете.
Таким образом, стиль полиграфической печати нашел в интернете вторую жизнь и вряд ли его скоро забудут или посчитают устаревшим.
Доминирующие изображения
Дуплекс часто применяется для больших фотографий. Мастера находят яркие парные цвета, которые могут даже не соответствовать друг другу. Главная цель – создание такого элемента, который привлечёт к себе внимание пользователя и с помощью цветов и контраста между ними, покажет главное.
Чтобы изображение с дуплексом было эффективным выбирают два контрастных или два парных цвета бренда сайта. Сама фотография выбирается не бледной и не двухцветный. Некоторые веб-мастера сначала играют с контрастом. Самым обычным, так как он позволяет выделить основные моменты сюжета изображения. Одновременно с этим необходимо продумать, где будут располагаться кнопочки поверх фотографии, текст, какие цвета подойдут для заливки, как повлияют они на настроение посетителей. После применения эффекта фотографии иногда оформляются в рамку, едва заметную или создается дополнительно эффект параллакса.
Простота палитры цветов
Дуплекс не сложен в освоении и восприятии. Тем более что зачастую веб-дизайнеры используют изначально простое графическое изображение, поверх которого накладывают эффект.
Проект Assurity использовал только пару красных оттенков и белый цвет для текста. И, несмотря на то, что фон для текстовых блоков использован тоже белого цвета, на красный тон все равно хочется смотреть. Хочется возвращаться на главную страницу и рассматривать даже клеточку в углу. Хитрость в том, что слишком уж прост эффект, чтобы быть эффективным. Но красный цвет от природы привлекает к себе внимание, фокусирует на себе сознание пользователя.
Удобство чтения
Как ни странно, но дуплекс способен сделать текст более контрастным и удобным для чтения. "Почему" – спросите вы и как? Дело в том, что двухцветное тонирование помогает «сгладить» разброс цветов на фотографии и сделать изображение более «спокойным». Соответственно, текст, размещаемый практически в любом месте поверх этого изображения, станет лучше виден и читаем.
Привлекая внимание
Эффект дуплекса применяется и для небольших фотографий и элементов, размещенных в различных секциях страницы. Это могут быть плитки с разделами сайта, секции-разделители на 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 и для этого варианта, уже без сомнения, подойдёт совершенно любое изображение. Но и тонирование оно предлагает более эффектное.
Открываем картинку и выбираем Изображение -> Режим -> Градации серого (даже если изначально у вас черно-белое). Теперь можно увидеть, что стал активным пункт в этом меню Дуплекс. Выбираем Изображение -> Режим -> Дуплекс и появляется соответствующее окно настроек и тонирования. В настройках можно выбрать цвета, настроить кривую их колебания, наладить градиент. Темные цвета лучше выбрать первыми, а светлые оттенки – вторыми или нижними, если у вас многоцветный дуплекс.
Важно помнить , что при многоцветном эффекте краски смешиваются, а значит, чистого желтого вы не увидите, как и чисто зеленого. Вы будете видеть результат их смешивания. Именно поэтому такой вариант работы с Дуплексом и предлагает «море фантазий» для веб-дизайнера, если у него два цвета и одна картинка.
Контраст позволяет подчеркнуть детали изображения. Сравните варианты работ ниже «до» и «после» контраста.
.jpg)
.jpg)
Также можно дополнительно размыть края и создать виньетку, можно сделать контраст, яркость или цветность только на часть всего изображения. В общем и целом, вариаций игры с цветом очень много, особенно если использовать свойства «Перекрывающиеся цвета» и многоцветный тип Дуплекса.
Вывод
Трудно найти технику дизайна, которая была более интересной, чем игра цветом. Дуплекс одинаково привлекателен как для художников, так и для веб-дизайнеров. Эффект способен оживить сайт, добавить забавный элемент, когда присутствует ощущение, что чего-то не хватает в проекте, чтобы привлечь внимание посетителей.
Кроме этого, эффект дуплекса позволяет веб-дизайнерам экспериментировать с цветами, потренировать свою фантазию. Да, не без этого, уж точно! Что уж говорить о том, что только в таком варианте вы сможете соединять такие безумные цвета, о которых и не думали раньше: ярко-зеленый и ярко-синий, розовый и ядрено-желтый. Такие вариации создадут эффект неожиданности, а если изображения небольшие (не фоновые), то и раздражать они не будут пользователя.
В любом случае, используя эффект дуплекса картинка всегда будет выглядеть необычно и интересно. Да и из моды такой эффект выйдет еще не скоро. Им пользуются крупные компании для своих сайтов, его можно увидеть на страницах промо-акций, на Landing Page, в авторских работах.
Читайте также: