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

Исходная фотография	Результат обработки шаблоном

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

Шаг #1

Запустите Конструктор шаблонов и дождитесь запуска Photoshop. В Photoshop откройте загруженный PSD-документ.

Создайте новый проект в Конструкторе шаблонов со следующими параметрами:

• Тип шаблона — Стикер;

• PSD документ — Выбрать существующий документ;

• sticker_example_4.psd — Все ориентации.

Шаг #2

Перейдите в Photoshop.

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

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

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

Шаг #3

Перейдем в Конструктор шаблонов и нажмем Перечитать PSD-документ.

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

В нашем примере используются следующие параметры:

• Центральная точка стикера (для стикера из файла-заготовки): X (120), Y (500).

• Размер стикера: 90% По ширине головы.

• Позиция: по умолчанию (на переносице).

• Курсор силы притяжения: по умолчанию X (-100), Y (16155).

Нажмите ОК для сохранения позиции стикера.

Далее в окне Настройки фильтров для области вписывания добавляем фильтр Растеризация для Стикера с экраном и Стикера с рамкой.

Перейдите в меню Редактора позиции группы стикеров для одного из стикеров. Установите галочку в столбце Подгруппа напротив стикера с рукой в блоке Видимость элементов группы — так будет проще всего задать его положение.

Выше показан более сложный способ, иллюстрирующий разрешение конфликтов параметров в группе стикеров. Более простой вариант — сразу добавить фильтр Растеризация для всех трёх стикеров. Это позволит настраивать позицию одновременно для всей группы.

Шаг #4

Добавим к области вписывания фильтр Пипетка по маске cо следующими параметрами:

• Маска: По коже;
• Метод вычисления цвета: Медиана.

Обратите внимание, что данный фильтр должен находиться первым в списке.

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

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

Исходная фотография	Результат обработки шаблоном

Шаг #5

Как видно на результирующем фото, область вписывания с фильтром Пипетка по маске полностью перекрыла фотографию. Чтобы она воздействовала только на руку, сначала добавим еще одну область вписывания (Вставка > Область вписывания типа Рамка) с названием SQ Основное фото. Перейдем в Photoshop и расположим её в самом низу структуры шаблона.

Первую область вписывания переименуем в SQ Область Пипетка по маске, вернемся в Конструктор шаблонов и нажмем Перечитать PSD.

Переходим в редактор динамических масок слоя SQ Область Пипетка по маске и создаём маску по стикерам по этому же слою.

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

Шаг #6

Теперь нужно покрасить руку-стикер в цвет слоя с фильтром-пипеткой. Самый логичный способ — использовать режим наложения.

У нас есть два варианта расположения слоев:

Cлой с пипеткой внизу, сверху рука с режимами наложения	Рука внизу, слой с пипеткой с режимами наложения наверху

На иллюстрации показан двухцветный слой — он получен в результате применения фильтра Пипетка по маске к разным тестовым фотографиям. Эти результаты можно посмотреть в таблице на Шаге 4.

Обычно, чтобы покрасить объект, мы применяем режим наложения Цветность (Color) к слою, цвет которого используем.

Этот режим отлично работает на светлой коже, но не подходит для темной: он не меняет яркость, а только оттенок. В итоге тёмная рука с тоном светлой кожи смотрится неестественно. Обратная ситуация тоже верна — светлая рука, перекрашенная в тёмный цвет, выглядит плохо. Следовательно, этот вариант нам не подходит.

На этом этапе стоит вспомнить, как работают режимы наложения и чего мы хотим добиться. Нам важно сохранить объём — то есть светотеневую структуру объекта (блики и тени), — и при этом поменять цвет.

Все режимы наложения делятся на группы:

• Недоступные в Конструкторе шаблонов (выделены красным) — Темнее, Светлее, Вычитание, Разделить.

• Затемняющие — сохраняют только тени.

• Осветляющие — сохраняют только блики.

• Корректирующие — уже пробовали, не подошли.

• Инвертирующие — точно не подойдут в этом проекте.

• Контрастные — сочетают блики и тени, а значит, могут сохранить объём. Это то, что нам нужно.

Далее, путем простого перебора нам нужно выявить наиболее подходящие:

Как видно из иллюстраций наилучший результат дают Перекрытие и Жесткий свет. Установим один из этих режимов для группы стикера с рукой.

Дополнительно внутри смарт-объекта слоя с рукой поправим Яркость/Контрастность через меню Изображение > Коррекция. И уменьшим значения (Яркость: -60, Контрастность: -25), чтобы получить наиболее оптимальный вариант.

Тем не менее, даже эти режимы не дают идеального результата: не получается одновременно достичь одинакового контраста как для светлой, так и для тёмной кожи. Светлая кожа может выглядеть пересвеченной, а темная — недостаточно контрастной.

Шаг #7

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

Для создания слоя с текстурой понадобятся:

• Смарт-фильтр Кривые с фиксированными параметрами;
• Фильтр Краевой контраст;
• Блендинг Линейный свет для этого слоя.

Также, для создания правдоподобных теней и контрастов настроим Цветовой тон/Насыщенность изображения.

Добавим к слою Рука последовательно фильтр Краевой контраст и Кривые для снижения контраста, а также смарт-фильтр Цветовой тон/Насыщенность. Далее для слоя Рука устанавливаем блендинг Линейный свет. Таким образом вы получите слой с текстурой, который будет накладываться поверх слоя цвета. Самая сложная часть — правильно подобрать параметры фильтров, чтобы результат выглядел естественно на коже любого оттенка. В нашем примере были использованы следующие параметры:

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

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

Шаг #7

Осталось настроить экран телефона так, чтобы он отображал черно-белую версию пользовательской фотографии.

Создадим новую область вписывания (Вставка > Область вписывания типа Рамка) с названием SQ Область экрана, которую расположим в Photoshop поверх всех имеющихся областей вписывания. После чего вернемся в Конструктор шаблонов и нажмем Перечитать PSD. Добавим к SQ Область экрана фильтр Обесцвечивание: для этого нажмите правой кнопкой мыши по SQ Область экрана, в контекстном меню выберите Редактировать фильтры и добавьте необходимый фильтр в открывшемся окне настройки фильтров.

Для стикера Экран создадим растеризацию по области вписывания SQ Основное фото. Настройки позиции для данного стикера проще всего будет взять через копирование позиции, используя меню Копировать из... в открывшемся Редакторе позиции стикера.

Применим динамическую маску к области вписывания SQ Область экрана. Зададим ее параметры:

• Поставьте галочку напротив SQ Основное фото;

• Тип маски — По стикерам.

Обрабатываем фотографии и проверяем получившийся результат.

Шаг #8

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

Чтобы решить эту проблему, добавим правило предобработки, которое будет кадрировать фотографию до нужного масштаба до применения стикеров. Для этого:

• Нажмите Файл > Изменить проект, перейдите во вкладку Дополнительно и нажмите Редактировать правила предобработки.

  

• В появившемся окне нажмите Добавить, чтобы создать новое правило предобработки.
• В разделе Размеры фото выберите Кадрировать по маске и опцию По лицу в выпадающем списке.
• Чтобы настроить отступы от границ лица для рамки кадрирования, задайте следующие размеры полей:
  • Верхнее - 50;
  • Нижнее - 60;
  • Левое - 40;
  • Правое - 40.

  

• Нажмите ОК, а затем Сохранить.

Теперь, когда вы обработаете фотографию, она должна автоматически кадрироваться до подходящего размера:

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

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

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

Теоретические материалы по шаблонам-стикерам

Теоретические материалы по работе с шаблонам с несколькими стикерами

Примеры разработки простых шаблонов со стикерами

Видеоуроки с примерами создания шаблонов-стикеров