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

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

Примеры таких шаблонов можно найти в приложении 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 (мягкий свет). Использование блендингов для стикеров чаще всего обусловлено необходимостью создать более реалистичный эффект, т.к. блендинги, примененные к стикерам, позволяют передавать текстуру кожи и многое другое.

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

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

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

Объединение стикеров в группы

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

В такой связи возникает резонный вопрос - как правильно позиционировать оба стикера, чтобы в результате они составили “общую картину”? Если позиционировать каждый стикер отдельно (пусть и с одинаковыми параметрами масштаба, силой притяжения и опорными точками), то ввиду того, что стикеры могут иметь разный размер, это скажется на конечном результате.

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

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

В данном разделе следует различать понятия “группа слоев” и “группа стикеров”. Группа слоев — это несколько слоев, объединенных в Photoshop в именованную группу. Каждый стикер представлен своей группой слоев в Photoshop. Группа стикеров — неименованная группа, объединяющая в себе стикеры, группы слоев которых связаны в Photoshop командой “связать слои”.

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

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

Связывание слоев и групп слоев в Photoshop работает неочевидным образом — если взять несколько групп стикеров и выделить их через Shift, то выделятся в том числе и их внутренние слои, даже если группы слоев стикеров свернуты. Таким образом при связывании будут затронуты внутренности каждой группы (кроме последней/нижней) и модификация содержимого затронет все связанные слои.

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

Подробнее об особенностях выделения и группировки слоев можно узнать в справке Photoshop по адресу: https://helpx.adobe.com/ru/photoshop/using/selecting-grouping-linking-layers.html

Теперь, после перечитывания PSD-документа, Конструктор шаблонов будет интерпретировать данные стикеры как группу стикеров.

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

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

При переходе к фильтру “Растеризация” любого из стикеров, входящих в группу, откроется редактор позиции группы стикеров и оба стикера будут позиционироваться вместе, в том положении относительно друг друга, как в Photoshop.

Интерфейс редактора позиции групп стикеров отличается от редактора позиции стикеров по двум ключевым параметрам:

  1. Названием окна редактора
  2. Наличием блока управлением видимости элементов группы.

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

Узнать больше об интерфейсе редактирования стикеров можно здесь.

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

Если вам понадобится отдельно использовать стикер, который уже используется в группе стикеров, создайте его независимую копию в Photoshop и работайте с ней отдельно.

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

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

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

# Действие Ошибка Предупреждение Необходимые действия
1 Объединение в группу стикеров, для которых уже существуют фильтры Растеризации с разными параметрами. - В следующих группах стикеров изменился охватывающий прямоугольник, по которому определяется область, экспортируемая из PSD, что привело к изменению их расположения, и Вам придётся отредактировать их расположение вручную. Проверка позиции стикера\группы стикеров при изменении охватывающего прямоугольника.*
Вы сгруппировали стикеры, для которых уже существовали методы растеризации. Вам придётся отредактировать их позицию для синхронизации параметров. Редактирование параметров стикеров при конфликте их позиции.**
2 Добавление в существующую группу стикера, у которого уже был фильтр Растеризация или объединение нескольких групп стикеров В следующих группах стикеров изменился охватывающий прямоугольник, по которому определяется область, экспортируемая из PSD, что привело к изменению их расположения, и Вам придётся отредактировать их расположение вручную. Проверка позиции стикера\группы стикеров при изменении охватывающего прямоугольника.*
Вы сгруппировали стикеры, для которых уже существовали методы растеризации. Вам придётся отредактировать их позицию для синхронизации параметров. Редактирование параметров стикеров при конфликте их позиции.**
3 Перерисовка стикеров или добавление стикеров в группу/удаление стикеров из группы таким образом, чтобы изменился охватывающий прямоугольник группы. В следующих группах стикеров изменился охватывающий прямоугольник, по которому определяется область, экспортируемая из PSD, что привело к изменению их расположения, и Вам придётся отредактировать их расположение вручную. Проверка позиции стикера\группы стикеров при изменении охватывающего прямоугольника.*
4 Стикер отвязали от одной группы и тут же привязали к другой. И попытались перечитать только слой этого стикера. Стикер стал принадлежать другой группе стикеров. Перечитайте PSD полностью. Перечитать PSD-документ полностью.
5 Стикер отвязали от текущей группы и создали с ним новую группу. И попытались перечитать его слой Стикер стал принадлежать другой группе стикеров. Перечитайте PSD полностью. Перечитать PSD-документ полностью.
6 Стикер отвязали от его текущей группы и попытались перечитать его слой. Стикер более не в группе стикеров. Перечитайте PSD полностью. Перечитать PSD-документ полностью.

* Проверка позиции стикера\группы стикеров при изменении охватывающего прямоугольника.
Через фильтр “Растеризация” откройте редактор стикера\группы стикеров. Проверьте позицию стикера. Если он действительно сместился с выбранной вами ранее позиции — скорректируйте ее и сохраните изменения.

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

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

Так, например, на схеме ниже стикеры, выделенные синим , имеют одинаковые параметры позиции. Оранжевый и зеленый стикеры имеют каждый свою неповторимую позицию.

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

Разрешив конфликт, сохраните настройки. Редактор выведет предупреждение вида:

“Были объединены в группу несколько стикеров с разными настройками расположения. После нажатия на ОК, их общее расположение будет изменено на выбранное в данном диалоге, а изначальные настройки будут безвозвратно утеряны.”

Подтвердите изменения.

Ограничения по работе с группами стикеров

При работе с группами стикеров существуют следующие ограничения:

  • Запрещается собирать в группу стикеры из разных ориентаций;
  • Запрещается добавлять в группу стикеров группы слоев и слои, которые не являются стикерами;
  • Запрещается использовать стикер, добавленный в группу, отдельно от данной группы. Следует добавить в psd копию данного стикера и работать с ней отдельно;
  • Запрещается помещать стикер более чем в одну группу одновременно;

Неочевидные возможности в работе с группами стикеров

  • В группе стикеров может быть более двух стикеров;
  • В документе может быть неограниченное количество групп стикеров;
  • Порядок наложения стикеров на юзерфото зависит от очередности фильтров растеризации. Очередность стикеров в Photoshop никак не влияет на их порядок наложения на юзерфото.

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

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

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

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

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

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

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

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

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

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

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

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

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

Примеры

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

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

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