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

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

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

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

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

Создание проекта в Конструкторе шаблонов

Для Конструктора шаблонов psd-файл со слоями должен быть ассоциирован с проектом в формате .pttp2.

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

Алгоритм создания шаблона-стикера

Откроем Конструктор шаблонов при открытом Photoshop (если Photoshop не запущен, то это произойдёт автоматически при открытии Конструктора) и в меню "Файл" выберем пункт "Создать проект":

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

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

Если в Photoshop уже есть открытые документы, то в диалоге создания проекта Конструктор предложит создать проект на их основе:

Необходимо выбрать один psd-документ из списка и поставить напротив него галочку.

Привязку psd-документа к файлам проекта в любой момент можно поменять, нажав на "Файл > Изменить проект"(CTRL + E).

Помимо изменения привязки psd-документа можно скорректировать и тип проекта. Тип проекта при прочих равных может повлиять на итоговый результат.

Подробнее о Конструкторе и о том, как тестировать в нём готовые шаблоны, можно прочитать в этом разделе.

Область вписывания

В стикерах Смарт-объект SQ Область Вписывания (не удалять!) [uv] нужен для технических целей и не влияет на расположение юзерфото в шаблоне. Также в него можно поместить фотографии для “примерки” в Photoshop.

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

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

Чтобы отразить смарт-объект области вписывания, необходимо воспользоваться стандартными инструментами Photoshop, например, в меню "Редактирование -> Трансформация -> Отразить по горизонтали \ по вертикали".

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

Отражение работает одинаково для любых областей вписывания и вне зависимости от типа шаблона.

Структура стикера в PSD-документе

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

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

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

Позиционирование стикера

Опорные точки

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

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

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

Пример распознавания опорных точек на лице

Затем стикер размещается в соответствии с выбранными опорными точками и положением этих точек на данном лице. При позиционировании стикер также автоматически поворачивается в соответствии с наклоном лица на юзерфото.

Центр стикера

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

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

Сила притяжения к опорным точкам

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

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

  • две крайние опорные точки имеют коэффициент в 1;
  • нижняя точка: 5;
  • верхняя имеет коэффициент в 10 условных единиц;

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

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

Позиция центра стикера по умолчанию Смещенная позиция центра стикера

Результат для стикера
с центральной точкой по умолчанию
Результат для стикера
со смещенным центром

Масштабирование относительно лица

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

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

Адаптивность стикеров

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

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


  1. Разный размер лиц на фотографиях. Стикер автоматически увеличивается / уменьшается до необходимых размеров.
  2. Наклон головы. Стикер автоматически поворачивается на необходимый угол.
  3. Разные выражения лиц на фотографиях. На первом снимке девушка кричит, на втором - имеет спокойное выражение лица. Вследствие этого опорные точки на этих лицах сдвигаются, но стикер по-прежнему оказывается в зоне носогубного треугольника.

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

Несколько стикеров в одном шаблоне

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

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

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

Один стикер может состоять фактически из нескольких стикеров.

Этот шаблон с очками состоит из двух стикеров: с оправой и линзами очков.

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

Создание подразмеров для стикеров

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

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

В обратном случае, если стикер имеет маленькие размеры, а юзерфото, к которому он применен, - большое, то стикер будет “мыльным” ввиду того, что его пришлось растягивать.

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

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

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

Дополнительно

Анимация в шаблонах

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

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

Примеры разработки стикеров

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

Примеры

Особенности разработки

Важные видеоуроки

Остальные видеоуроки (например, про шаблоны с несколькими областями вписывания и работу с фильтрами) вы можете посмотреть на этой странице