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

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

Шаг #1

Запустите Конструктор шаблонов и дождитесь запуска Photoshop.

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

Вкладка Основное:

• Тип шаблона — Рамка;

• PSD документ — Новый PSD документ;

• Выбранные ориентации — Вертикаль.

Вкладка Дополнительно:

• Установите галочку — Использовать анимацию.

Конструктор шаблонов сгенерирует всю необходимую структуру в PSD-документе.

Шаг #2

Перейдем в Photoshop и обратимся к структуре PSD-документа.

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

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

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

Удалим слой Фон. А затем переименуем подгруппы графических слоев по порядку, сверху вниз:

• Паук с паутиной;
• Рамка;
• Стекло.

Шаг #3

Поместим необходимую графику (скачать здесь) в подгруппы графических слоев в соответствии с задумкой. Для подгруппы Стекло установим блендинг Экран и Непрозрачность — 40%.

Шаг #4

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

Шаг #5

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

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

Шаг #6

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

Номер текущего кадра отображается справа, под кнопкой Перечитать PSD. Для того, чтобы скопировать кадр выберите в меню Шаблон > Скопировать кадр.

Выбор кадра	Копирование кадра

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

Кадр 1: Паук слева	Кадр 2: Паук левее	Кадр 3: Паук по центру	Кадр 4: Паук правее	Кадр 5: Паук справа

Шаг #7

Перейдём в Photoshop. В панели Шкала времени видно, что количество кадров увеличилось до пяти. Прежде чем приступить к их настройке, вернёмся к вопросу позиционирования графики с паутиной и пауком.

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

Только паутина	Только паук

Шаг #8

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

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

Шаг #9

Создайте 4 копии слоя с пауком. Переключаясь между кадрами в Photoshop, настройте видимость слоёв таким образом, чтобы на каждом кадре был виден только один слой с пауком. То есть на первом кадре - первая копия, на втором - вторая, и так далее. Для каждого кадра поверните слой с пауком в соответствии с положением, показанным в конце Шага #6.

Шаг #10

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

Шаг #11

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

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

Для этого перейдем в меню Файл > Изменить проект. В открывшемся окне Редактировать проект переходим во вкладку Дополнительно и ставим галочку в области Настройки анимации напротив пункта Симметрично зациклить анимацию. Подтвердим изменения и заново обработаем тестовое фото.

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

Несимметрично зацикленная анимация	Симметрично зацикленная анимация

Готовый результат урока доступен для скачивания здесь.

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

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

Шаг #1

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

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

Шаг #2

Перейдем в Photoshop и разместим в появившемся стикере графический слой с мошкой (скачать здесь). Масштабируем его и повернем немного влево по своей оси.

Шаг #3

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

Шаг #4

Настроим видимость для каждого слоя внутри подгруппы стикера в соответствии со схемой ниже.

Кадр 1:	Кадр 2:	Кадр 3:	Кадр 4:	Кадр 5:

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

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

Шаг #5

Перейдем в Конструктор шаблонов и нажмем Перечитать PSD-документ. После того, как информация о слоях в кадрах будет обновлена, убедимся, что у нас выбран Кадр №1. Добавим для области вписывания фильтр Растеризация и перейдем в Редактор позиции.

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

Установите маркеры на опорных точках бровей, а также установите прицел силы притяжения как можно ближе к левой опорной точке.

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

Затем отмасштабируйте стикер относительно ширины головы, установив значение 20%.

Положение мошки относительно брови должно выглядеть следующим образом:

Если результат вас устраивает, нажмите ОК для сохранения настроек.

Шаг #6

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

Шаг #7

Перейдите на следующий кадр (2).

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

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

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

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

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

Шаг #8

Обработайте тестовое фото и сравните полученный результат с образцом:

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

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

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

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