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

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

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

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

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

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

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

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

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

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

Добавление стикера в существующий проект

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

Структура шаблона типа "Стикер" в Photoshop

PSD-документ шаблона типа "Стикер" состоит из области вписывания и одного или нескольких стикеров. Стикер в PSD представлен группой слоёв, название которых начинается со слов "Стикер" или "Sticker".

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

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

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

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

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

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

В проектах типа Стикер должна быть ровно одна область вписывания.

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

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

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

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

Фильтр "Растеризация" и редактор позиции

Добавление растеризации

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

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

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

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

  и через меню "Cлой" > "Добавить растеризацию".

  

Чтобы эти пункты были активными, в списке слоев должен быть выбран стикер.

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

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

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

Редактор позиции

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

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

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

Ниже представлено окно редактора позиции стикеров:

1. меню редактора позиции:
   • "Копировать из..." позволяет скопировать настройки позиции другого стикера;
   • "Позиционировать по объекту" позволяет выбрать объект для позиционирования стикера (лицо человека, скелет человека, морда животного), а также открыть фильтр объектов;
   • "Показать еще" позволяет включить/выключить отображение дополнительных слоев и/или растеризаций в области предварительного просмотра позиции;
2. блок редактирования центра стикера;
3. управление размером стикера;
4. блок визуального редактирования центра стикера;
5. маркер центра стикера;
6. выбор типовых привязок;
7. элементы управления позицией маркера [11] внутри допустимой области;
8. блок отображения опорных точек;
9. опорные точки;
10. выбранные опорные точки;
11. маркер силы притяжения к опорным точкам;
12. границы допустимой области размещения маркера силы притяжения;
13. область предварительного просмотра позиции стикера;
14. рамка охватывающего прямоугольника и центр стикера;
15. вкл/выкл отображение рамки и центра стикера;
16. блок управления масштабом изображения на предварительном просмотре;
17. элементы управления автообработкой предварительного просмотра.

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

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

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

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

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

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

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

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

Центр стикера и сила притяжения

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

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

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

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

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

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

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

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

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

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

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

Размер стикера относительно черты лица

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

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

50%	100%

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

50%	100%

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

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

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

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

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

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

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

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

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

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

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

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

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

Фильтр объектов и обработка ошибок

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

Находится в меню "Позиционировать по объекту" > "Фильтр объектов и обработка ошибок".

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

Позиционирование по морде животного

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

Размер и поворот

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

Фильтр объектов и обработка ошибок

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

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

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

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

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

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

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

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

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

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

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

В данном разделе следует различать понятия "группа слоев" и "группа стикеров". Группа слоев — это несколько слоев, объединенных в 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 и работайте с ней отдельно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обычно подразмеры выбираются путем деления размера пополам. Т.е. для размера 5000px можно задать следующие подразмеры: 2500px, 1250px, 625px. Также на практике распространен следующий вариант: 3200px, 1600px и 800px. Для некоторых шаблонов может потребоваться более тонкий экспериментальный подбор оптимального набора подразмеров для достижения требуемого качества обработки пользовательских фотографий. Конструктор позволяет в любой момент отредактировать подразмеры для шаблона.

При обработке пользовательской фотографии выбирается ближайший подразмер, больший либо равный (по большей стороне) данной фотографии. Так, если вы создали шаблон с размером в 5000px по большей стороне и подразмерами в 3200, 1600 и 800 пикселей, то применимость подразмеров к пользовательской фотографии будет такой, как показано в таблице ниже:

Задать подразмеры можно либо при создании нового проекта, либо при редактировании уже существующего. Для этого пройдите в меню "Файл" > "Изменить проект", или нажмите сочетание клавиш Ctrl+E.

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

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

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

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

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

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

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

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

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

Примеры

• Пример создания простого шаблона-стикера
• Создание шаблона типа “стикер” с использованием подразмеров
• Пример шаблонов с многослойными стикерами
• Пример построения симметрии для стикеров

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

• Создание шаблонов с использованием стикеров: введение
• Создание шаблонов с использованием стикеров: несколько стикеров и сопоставление их размеров
• Создание шаблонов с использованием стикеров: симметрия, порядок наложения, некоторые особенности работы с группами

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