Разработка стикеров

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

• 
• 
• 

• 
• 
• 

Примеры таких шаблонов можно найти в приложении Photo Lab в разделах Фотобутафория для лица, Флаги, Головные уборы и других.

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

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

При создании проекта (Файл > Создать проект) выберите Тип шаблона - Стикер.

Конструктор шаблонов добавит смарт-объект SQ <название> и стикер в связанный с проектом PSD-документ в Photoshop. Подробнее о типах областей вписывания можно узнать здесь. Чтобы элементы отобразились в Конструкторе шаблонов, необходимо перечитать PSD.

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

PSD-документ шаблона типа Стикер включает в себя стикер и Область вписывания SQ <название>.

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

Все слои внутри группы стикера растеризуются на уровне самой группы. К группе можно применять блендинги (см. список блендингов) и маски.

Расположение стикера в PSD-документе не влияет на его позицию в шаблоне — она задается инструментами Конструктора шаблонов.

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

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

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

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

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

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

Растеризацию необходимо добавить вручную одним из следующих способов:

• Один раз кликните правой кнопкой мыши по SQ Области вписывания и в контекстном меню выберите Редактировать фильтры.... В открывшемся окне Настройки фильтров нажмите Добавить и выберите фильтр Растеризация. О других способах вызова диалогового окна Настройки фильтров можно узнать в разделе Работа с фильтрами;



• Кликнуть правой кнопкой мыши по Стикеру и в контекстном меню выбрать пункт Добавить растеризацию;



• Выбрать Стикер в списке слоев и в верхнем меню нажать Cлой > Добавить растеризацию.

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

Попасть в Редактор растеризаций можно:

• кликнув правой кнопкой мыши по Стикеру и в контекстном меню выбрав пункт Управление растеризациями...;



• выделив любой Стикер в списке слоев и в верхнем меню нажав Cлой > Управление растеризациями...

После добавления растеризации откроется окно Редактор позиций стикеров.

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

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

В редакторе позиции присутствуют следующие элементы:

• Строка меню:

  • Копировать из: копирование настроек положения с других стикеров, имеющихся в проекте.

  • Позиционировать по объекту: выбор набора опорных точек, которые будут использоваться для привязки стикера:

    • По лицу человека: вариант по умолчанию;
    • По скелету человека: при выборе этой опции становится активной кнопка Фильтр объектов и обработка ошибок в нижней части контекстного меню;
    • По морде животного при выборе этой опции становится активной кнопка Фильтр объектов и обработка ошибок в нижней части контекстного меню;
    • Татуировка на лицо.
    Фильтр объектов и обработка ошибок

    Фильтр объектов позволяет выбирать скелеты или животных, распознанных на пользовательской фотографии, по их порядковым номерам. Это позволяет применять к разным объектам в кадре разные стикеры или различные варианты растеризации одного и того же стикера.

    

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

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

    

  • Показать еще: отображение дополнительных элементов шаблона (например, графических слоев, растеризаций) на предварительном просмотре. Эта возможность облегчает позиционирование объектов относительно друг друга.

• Настройки стикера:

  Изменение координат центра стикера по осям X и Y. Координаты также можно задать вручную, переместив курсор на изображении стикера. Сброс: возможность сброса координат центра стикера до варианта по умолчанию. Размер стикера относительно черты лица: управление размером стикера.

• Настройки позиционирования:

  Видимость опорных точек лица, которые можно указать для привязки стикера. Типовые привязки и координаты курсора силы притяжения: Выбор типовых привязок из списка предусмотренных. Изменение координат курсора силы притяжения по осям X и Y. Скольжение: в случае, если на пути движения курсора силы притяжения по одной из осей встречается ограничительная линия, курсор скользит вдоль ограничительной линии. Если скольжение отключено, курсор упрется в ограничитель. Сброс: возможность сброса настроек привязки до варианта по умолчанию — по зрачкам и уголкам рта.

  • Точки позиционирования:

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

• Окно предпросмотра результата.

  • Опция Рисовать рамку и центр стикера внизу окна позволяет отключить отображение рамки и центральной точки стикера в окне предпросмотра.
  • Опция Автообработка включает автоматическое обновление превью результата при обновлении настроек. Если опция выключена, для обновления нужно нажать кнопку Обработать.
  • Панель под превью позволяет масштабировать результат.

При добавлении фильтра Растеризация к области вписывания типа Фигура (FSQ/FSQR) обратите внимание на последовательность фильтров. Так как при создании области вписывания типа Фигура (FSQ/FSQR) к области автоматически первым добавляется фильтр Вписывание фигуры.

Например взаимодействие черного стикера с блендингом Экран и области вписывания типа Фигура может происходить по двум различным сценариям, в зависимости от того, где находится стикер относительно контура фигуры человека:

• Стикер полностью попадает в область фигуры: он становится невидимым благодаря блендингу Экран, который скрывает черный цвет.



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

Если стикер по вашей задумке должен оставаться невидимым, вы можете:

• Поменять фильтры местами (если дальнейшие шаги по работе с шаблоном это позволяют).
• Разместить его на другой области вписывания с Непрозрачностью 0% и без использования блендинга Экран.

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

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

Конструктор предоставляет готовый набор преднастроенных привязок для некоторых типовых случаев размещения стикеров. Типовые привязки собраны в меню справа от выбора отображения опорных точек.

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

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

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

Центральная точка стикера по умолчанию расположена в координатах X (0), Y (0) — в геометрическом центре изображения. Ось X направлена вправо, ось Y — вверх. На превью стикера её положение обозначено прицелом, что позволяет легко сориентироваться визуально.

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

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

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

• Две крайние точки — 1;
• Нижняя точка — 5;
• Верхняя точка — 10.

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

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

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

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

Начало координат находится между верхней и центральной точками переносицы. Диапазон изменения координат прицела силы притяжения по оси Y=±43700, по X=±26900. Допустимы только целочисленные координаты.

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

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

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

А также высоты головы.

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

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

При масштабировании стикера на пользовательской фотографии Конструктор шаблонов учитывает несколько факторов:

• Размер лица – стикер автоматически увеличивается/уменьшается до необходимых размеров.
• Наклон головы – стикер автоматически поворачивается на необходимый угол.
• Выражение лица – из-за различий в мимике опорные точки могут немного смещаться, но стикер все равно останется в заданной области.

Начало координат находится в области таза. Диапазон изменения координат прицела силы притяжения по оси Y=±300000, по X=±297500. Допустимы только целочисленные координаты.

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

Размер стикера на пользовательской фотографии определяется по расстоянию между выбранными опорными точками тела [1]. Это расстояние измеряется на загруженной фотографии [2] в px и умножается на коэффициент размера стикера [3], указанный в процентах. Выбранная сторона стикера [4] (ширина или высота) масштабируется в соответствии с полученным значением, при этом сохраняются исходные пропорции стикера. Например, если коэффициент задан как 60% по ширине, то ширина стикера [5] будет составлять 60% от длины линии между точками плеч [2].

Вкладка Поворот отвечает за вращение стикера на пользовательской фотографии. Вращение осуществляется относительно горизонтальной оси стикера.

Задается вращение при помощи двух опорных точек, которые определяют направление вектора.

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

Изменить направление вектора можно кликом правой кнопки мыши по схеме скелета. В этом случае стикер развернется на 180°.

При позиционировании стикеров по скелету человека может использоваться фильтр объектов. Подробнее о нём можно прочитать в предыдущем разделе.

Начало координат находится в области лба. Диапазон изменения координат прицела силы притяжения по оси Y=±250500, по X=±313500. Допустимы только целочисленные координаты.

О функциональности вкладок Размер и Поворот можно подробно прочитать в разделе позиционированиe по скелету человека.

При позиционировании стикеров по морде животного и по скелету человека используется один фильтр объектов. Подробнее о нём можно прочитать в предыдущем разделе.

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

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

Татуировка на лицо	Позиционирование по лицу

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

Обычный стикер	Татуировка – гладкий рельеф лица	Татуировка – сильный рельеф лица

Начало координат находится в области переносицы. Диапазон изменения координат прицела силы притяжения по оси Y=±25600, по X=±25600. Допустимы только целочисленные координаты.

О функциональности вкладки Размер можно подробно прочитать в разделе позиционированиe по скелету человека.

• Проект может содержать несколько стикеров-татуировок. Для оптимизации производительности шаблона их нужно размещать вместе в списке фильтров, если художественная задумка это допускает:

  Татуировки размещены вместе – оптимальная скорость работы шаблона	Татуировки разделены другим фильтром – сниженная скорость работы шаблона

• Татуировка на лицо лучше всего работает на лицах, изображенных анфас. При сильном повороте головы стикер может быть наложен вне целевой области.

Пошаговую инструкцию по созданию шаблона стикера-татуировки можно найти здесь: Пример простого шаблона со стикером-татуировкой.

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

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

Если наоборот — стикер маленький, а фото большое — изображение стикера станет размытым («мыльным»), так как его пришлось растянуть.

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

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

Обычно подразмеры подбираются с делением пополам. Например, для исходного размера 5000px можно задать 2500px, 1250px и 625px — либо, как часто используется на практике, 3200px, 1600px и 800px. При необходимости вы можете настроить и другие комбинации, подходящие под особенности шаблона.

При обработке фотографии выбирается ближайший подходящий подразмер — тот, чей размер больше или равен размеру по большей стороне фотографии. Например, если шаблон имеет размер 5000px и содержит подразмеры 3200, 1600 и 800px, то они будут применяться следующим образом:

Задать подразмеры можно либо при создании нового проекта, либо при редактировании уже существующего (Файл > Изменить проект).

Далее, во вкладке Дополнительно поставьте галочку напротив пункта Использовать подразмеры. Нажмите кнопку Настроить, чтобы открыть диалоговое окно Редактора подразмеров.

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

Пример создания шаблона-стикера с использованием подразмеров представлен здесь.

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

Шаблоны-стикеры можно анимировать. Подробнее о разработке анимированных шаблонов можно узнать здесь: Разработка анимации.

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

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

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

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

Пример шаблона-стикера с использованием режимов совмещения нескольких динамических масок

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