Разработка анимированных шаблонов

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

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

На каждом кадре можно независимо изменять:

• видимость слоев и групп;
• положение слоев;
• непрозрачность слоев;
• режим наложения (блендинг);
• стили слоя;
• задержку отображения кадра.

При работе с кадрами Photoshop Конструктор шаблонов извлекает:

• изменения положения слоев;
• изменения непрозрачности слоя;
• включение/выключение видимости слоев областей вписывания;
• изменения режимов наложения (блендингов);
• задержку отображения кадра.

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

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

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

Если добавлять промежуточные кадры средствами Photoshop, они будут восприниматься как новые и не сохранят настройки фильтров, масок и других параметров. Чтобы промежуточные кадры копировали все настройки, используйте команду Шаблон > Создать промежуточные кадры… в главном окне Конструктора.

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

Режим работы с несколькими выбранными кадрами (Selection) недоступен в Конструкторе шаблонов. Для таких задач используйте интерфейс Photoshop при добавлении промежуточных кадров.

В окне создания промежуточного кадра можно настроить следующие параметры:

• Промежуточные кадры — укажите, куда будет добавлен новый кадр относительно выбранного кадра.
• Добавить кадров — укажите, сколько кадров необходимо добавить.
• Слои — выберите Все слои или Выбранные слои, которые будут изменяться в добавленных кадрах.
• Атрибуты слоя — определите, какие свойства слоев будут изменяться:
  • Положение — равномерное изменение позиции содержимого слоя между начальным и конечным кадрами.
  • Непрозрачность — равномерное изменение прозрачности слоя между начальным и конечным кадрами.
  • Эффекты — равномерное изменение параметров эффектов слоя между начальным и конечным кадрами.

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

Для простого перемещения смарт-объекта или графического слоя достаточно использовать инструмент Перемещение (Move) - такие изменения в режиме покадровой анимации применяются независимо для каждого кадра.

В то же время действия, которые не поддерживают покадровую анимацию в Photoshop, имеют сквозной характер. К ним относятся, в частности: вращение, масштабирование, подкраска графики, маскирование, деформация и ряд других операций. Это означает, что при применении таких изменений к объекту в одном кадре, он будет автоматически изменён во всех кадрах анимации.

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

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

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

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

Таким образом каждый кадр получает собственный, независимый вариант смарт-объекта.

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

Принцип остается тем же: для разных кадров переключается видимость элементов. Однако в этом случае не создаются дополнительные копии графических слоев на уровне документа. Вместо этого изменяется содержимое одной и той же подгруппы графических слоев - её внутренняя структура и графика могут отличаться от кадра к кадру.

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

В остальном методика полностью повторяет подход, описанный для смарт-объектов областей вписывания.

Некоторые операции могут привести к поломке анимации и сделать шаблон частично или полностью непригодным для использования. К ним относятся:

• Включение опции Унификация атрибутов слоев в кадрах анимации — приводит к нежелательному применению одинаковых параметров ко всем кадрам (см. справку об унификации на сайте Adobe);
• Включение опции Распространение первого кадра — автоматически копирует состояние первого кадра на остальные, нарушая покадровую логику (см. справку о распространении первого кадра на сайте Adobe);
• Свободное трансформирование — изменения, внесенные этим инструментом, распространяются сквозным образом и ломают анимацию.

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

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

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

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

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

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

Глобальные настройки анимации расположены в меню Файл > Изменить проект > Дополнительно > Настройки анимации. Здесь вы можете настроить палитру, режим зацикливания анимации и формат выгрузки анимации.

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

• Зацикленный режим — анимация повторяется от первого до последнего кадра и затем снова начинается с первого.
• Симметрично-зацикленный режим — анимация проигрывается сначала от первого кадра к последнему, а затем в обратном порядке - от последнего к первому, при этом первый и последний кадры не дублируются. Таким образом, последовательность выглядит так: 1, 2, 3 … N, N-1, … 3, 2 (где N — общее число кадров). При использовании данного режима итоговое количество кадров почти удваивается (за исключением первого и последнего кадров), что приводит к почти двукратному увеличению размера итогового файла.

Управлять режимами зацикливания в Конструкторе шаблонов возможно через меню Файл > Изменить проект > Дополнительно > Настройки анимации. Установите галочку напротив Симметрично зациклить анимацию, в противном случае будет использован Зацикленный режим.

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

GIF может быть построен двумя способами:

• Глобальная палитра — одна таблица до 256 цветов для всех кадров.
• Локальная палитра — отдельная палитра до 256 цветов для каждого кадра, собранная из оттенков и цветов представленных в данном кадре.

Выбор зависит от цветового состава кадров:

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

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

Управлять палитрами в Конструкторе шаблонов возможно через меню Файл > Изменить проект > Дополнительно > Настройки анимации. Выберите Использовать палитру отдельно для каждого кадра для использования локальной палитры или выберите Использовать глобальную палитру.

Ниже приведены примеры, показывающие разницу экспорта одного и того же кадра при использовании глобальной и локальной палитры.

Глобальная палитра + близкие по цветовой гамме кадры	Локальная палитра + близкие по цветовой гамме кадры	Глобальная палитра + различающиеся по цветовой гамме кадры	Локальная палитра + различающиеся по цветовой гамме кадры

Просмотр и экспорт результата доступны в двух форматах: MP4 (используется по умолчанию) и GIF.

Управлять форматом выгрузки в Конструкторе шаблонов возможно через меню Файл > Изменить проект > Дополнительно > Настройки анимации. Выберите MP4 или GIF.

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

На данный момент анимация работает в ограниченном режиме для:

• шаблонов со стикерами,
• шаблонов со стикерами и несколькими областями вписывания (включая рамочные).

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

Ситуации, когда анимация может работать некорректно:

• Шаблон типа Стикер, в котором на разных кадрах используются разные пользовательские фото (например, на кадре 1 - фото 1, на кадре 2 - фото 2).
• Шаблон типа Рамка, где на разных кадрах для одной и той же области вписывания со стикерами подставляются разные пользовательские фото.
• Шаблон, в котором стикер применяется на область вписывания лица и одновременно анимируется её позиция.

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

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