Пример шаблона с использованием динамической маски по стикерам

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

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

В результате у нас должен получиться вот такой результат:

Шаг 1

Откроем конструктор шаблонов. В меню "Файл" выберем пункт "Создать новый проект".

В открывшемся окне выберем тип шаблона "Рамка", создадим новый PSD документ с универсальной ориентацией, а также выберем место сохранения проекта.

Конструктор шаблонов сгененирует структуру слоев, необходимых для работы шаблона.

Шаг 2

Поскольку, в нашем шаблоне мы хотим испльзовать 2 разных пользовательских фото, очевидно, что нам потребуется 2 области вписывания. Добавим еще одну область вписывания типа Рамка из меню "Вставка".

Перейдем в Photoshop. Удалим лишние слои, а области вписывания переименуем как SQ Фото 1 и SQ Фото 2.

Перейдем в конструктор шаблонов и перечитаем PSD. Для одновременной обработки нескольких юзерфото нам потребуется изменить индекс фотографии на одной из областей вписывания. Выберем слой "SQ Фото 2" и в нижней панели изменим индекс фотографии с 0 на 1.

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

Давайте посмотрим, что может получится в таком случае.

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

Чтобы этого не происходило, нам нужно решение, которое автоматически будет позиционировать слой SQ Фото 2 в необходимое нам место, независимо от масштаба и местоположения фигуры на SQ Фото 1.

Шаг 3

Воспользуемся инструментом "Динамическая позиция". С его помощью мы сможем разместить слой в охватывающем прямоугольнике динамической маски.

Вот пример позиционирования "SQ Фото 2" по фигуре на "SQ Фото 1":

Как мы помним, наша задача состоит в том, чтобы спозиционировать SQ Фото 2 на корпусе фигуры из SQ Фото 1. Из всех существующих стандартных масок ни одна не сможет дать нам желаемого результата. Единственный способ, который нам подходит — только вариант позиционирования по стикеру.

Через меню "Вставка" — "Стикер" добавим слой со стикером. Для работы стикеру необходим фильтр "Растеризация" на области вписывания, поэтому добавим еще одну область вписывания "SQ для стикера".

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

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

Скачать получившееся у нас изображение можно по ссылке.

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

Шаг 4

Перейдем к позиционированию стикера. Для доступа к параметрам позиции стикера в Конструкторе шаблонов кликнем правой кнопкой мыши по слою "Стикер 0", выберем пункт "Добавить растеризацию" > "SQ для стикера". Откроется редактор позиции стикера.

Спозиционируем стикер на груди. Выберем в меню "Позиционировать по объекту" пункт "Позиционировать по скелету человека".

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

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

Шаг 5

Спозиционируем слой SQ Фото 2 на корпус фигуры. для этого перейдем в редактор динамической позиции и построим её по области вписывания SQ для стикера , выбрав тип маски "по стикерам".

Перечитаем PSD и обработаем фотографию.

Шаг 6

Нам осталось сделать плавный переход от одной фотографии к другой. В Шаге 4 мы сделали стикеру размытый край. На данном этапе этот факт сыграет решающую роль. Добавим слою SQ Фото 2 маску по стикерам, построенную по области вписывания SQ для стикера.

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

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