Как наложить один слой на другой в after effects

Обновлено: 06.07.2024

Reshape в Adobe After Effects

Эффект «Изменение формы» преобразует одну форму в другую на том же самом слое, перетаскивая подлежащее изображение, которое его содержит. Изображение искажается в соответствии с формой новой области. Можно создать или импортировать до трех масок, чтобы задать область, которую требуется исказить: исходная маска, конечная маска и маска границы (необязательно).
Этот эффект работает с цветом 8 бит на канал и 16 бит на канал.

По умолчанию After Effects присваивает маскам функцию (исходные, конечные и маски границы) с учетом порядка, в котором они создавались или импортировались. Также можно задать различные маски. Используйте замкнутый контур для каждой маски. Все три маски должны размещаться на слое, к которому применяется эффект «Изменение формы», хотя можно также скопировать маски из другого слоя.

Исходная маска
Маска, которая содержит область изображения, форму которой требуется изменить. Если маска не задана, After Effects использует вторую маску, созданную как исходная. На панелях «Композиция» и «Слой» исходная маска обозначена красным контуром.

Маска назначения
Маска, которая определяет форму конечного изображения. Если значение не задано, After Effects использует третью маску, созданную в качестве маски назначения. На панелях «Композиция» и «Слой» конечная маска обозначена желтым контуром.

Маска границы
Указывает, для какой части изображения выполняется изменение формы. Объекты за пределами границы не изменяются. Если значение не указано After Effects использует вторую маску, созданную в качестве маски границы. На панелях «Композиция» и «Слой» маска границы обозначена синим контуром.

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

Упругость
Определяет, насколько точно изображение повторяет форму, заданную кривой. Параметр «Жесткий» действует подобно застывшей резине, что позволяет искажать минимальный возможный объем изображения. Параметр «Сверхтекучий» действует подобно горячей резине, что позволяет искажать изображение по принципу текучести. Другие параметры находятся в промежутке между этими двумя. Для использования дополнительных настроек упругости требуется дополнительное время рендеринга. Если конечное изображение не соответствует ожидаемой кривой, используйте следующие настройки упругости:
В целом рекомендуется использовать настройку максимальной жесткости, при которой не создается многоугольное изображение. Если конечное изображение выглядит многоугольным, но при этом содержит плавные кривые, следует использовать более высокое значение упругости.

Используйте параметры «Жесткий», «Менее жесткий» и «Ниже нормы», если исходные и конечные маски похожи по форме и отличаются низкой степенью искривления (несколько искривленных отрезков, которые значительно изменяют направление).

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

Используйте параметры «Свободный», «Текучий» или «Сверхтекучий», если маски отличаются по форме и содержат крайне высокую степень искривления.

Пары соответствия
Отображает количество точек на исходной маске, связанных или сопоставленных с точками на конечной маске. Эти точки отображаются на панели «Композиция» и контролируют интерполяцию искажения в пространстве. В целях повышенной точности контроля искажения можно добавить, удалить или переместить точки на любой из масок. Точки соответствия перемещаются с помощью инструмента выделения; при этом можно добавить или удалить точки соответствия с помощью инструментов «Добавить вершину» или «Удалить вершину», которые активируются нажатием клавиш ALT (Windows) или OPTION (Mac OS). При выборе экземпляра эффекта на панели «Элементы управления эффектами» можно оперировать только точками соответствия. Маска может содержать неограниченное число точек соответствия, но чем больше в ней таких точек, тем больше времени занимает рендеринг эффекта. Если искажение выглядит скрученным, попробуйте добавить больше точек соответствия в точках разделения вдоль масок. (Если длины дуг кривых между точками соответствия слишком сильно различаются, возможно появление скручивания.)

Метод интерполяции
Задает способ, которым After Effects определяет искажения каждого кадра видео или анимации в интервале между ключевыми кадрами или при отсутствии ключевых кадров.

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

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

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

Примечание.
Присвойте имя для каждой из масок, чтобы быстро распознать ее в меню «Маска» на панели «Элементы управления эффектами».

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

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

В меню «Маска» выберите исходную и конечную маски, а также маски границы.
Отрегулируйте элемент управления «Процент» и выберите вариант значения «Упругость».
На панели «Композиция» добавьте, удалите или переместите точки соответствия на масках, чтобы контролировать искажение:
Чтобы добавить точку, нажмите ALT (Windows) или OPTION (Mac OS) и щелкните маску.

Чтобы удалить точку, нажмите ALT или OPTION и щелкните выбранную точку.

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

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

Выберите метод интерполяции, а затем просмотрите искажение. Если параметр «Линейный» или «Плавный» дает нежелательные результаты, рекомендуется добавить дополнительные ключевые кадры. Если параметр «Дискретный» дает нежелательные результаты, следует выбрать другой метод.

Данный 3-й урок из мини-курса "Быстрый старт в After Effects" является заключительным. Представленной информации в данном уроке и в двух предыдущих вам будет вполне достаточно, для того чтобы увереннее ориентироваться в интерфейсе программы и начать делать в After Effects какие-то уже более серьёзные вещи - анимацию и видео-эффекты. В данном уроке мы рассмотрим основные слои в программе и более подробно остановимся на шейпах, а так же поработаем с инструментом "маска" и ознакомимся с 2D и 3D пространствами After Effects.

1. Основные слои в After Effects (Солид и Шейп)

Начнём со слоёв. В предыдущем уроке мы работали со слоями изображений из которых делали простое слайд шоу. Кроме слоёв с изображениями и видео-слоёв в After Effects можно создавать и другие слои, например "Solid". Кликаем правой кнопкой мыши по панели слоёв и выбираем "New" - "Solid", таким образом мы создаём новый слой "Solid" и у нас появляется окно с параметрами данного слоя. Солид - это слой "заливка".

Курс After Effects для начинающих

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

Курс After Effects для начинающих

Слой Solid - это простой слой-заливка, он применяется для создания различных эффектов и довольно часто используется в работе. Цвет Солида можно поменять в настройках слоя в любое время, для этого выделяем солид в панели слоёв, кликнув по нему левой кнопкой мыши и выбираем в верхнем меню "Layer" - "Solid sattings", где меняем цвет заливки.

Курс After Effects для начинающих

Следующий слой - это шейп. Шейп - это фигурный слой, которому можно задать абсолютно любую форму. Если из вас кто-то работал в Adobe Illustrator, то уже понимает, что такое шейп. В After Effects можно создавать шейп уже готовой формы, для этого нужно кликнуть на соответствующий инструмент и выбрать готовую фигуру необходимой вам формы.

Курс After Effects для начинающих

Давайте выберем, допустим Элипс и тут сразу появляются параметры создаваемого шейпа. Это цвет его заливки (Fill), цвет обводки (Stroke) и толщина обводки, задаваемая в пикселях. Данные параметры можно задать сразу а потом нарисовать фигуру, а можно и наоборот нарисовать фигуру, а потом уже настроить эти параметры. Если кликнуть по цвету заливки, то можно его изменить. С цветом обводки тоже самое, ну и толщина тут изменяется мышкой или просто пишем нужное значение.

Курс After Effects для начинающих

Заливка и обводка имеют и дополнительные параметры, которые можно открыть кликом на название, кликаем по надписи "Fill" - заливка и открываются её дополнительные параметры.

базовый курс After Effects

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

Давайте установим какую-нибудь градиентную заливку и изобразим элипс. Удерживая правую кнопку мыши рисуем фигуру. Если при этом удерживать Shift, то фигура будет строго пропорциональной, то есть получится круг. Градиент на шейпе имеет и дополнительные настройки. Если мы виберем сейчас инструмент "anchor point", то увидим, что на фигуре появились две точки и с помощью них мы можем на глаз регулировать градиентную заливку фигуры.

базовый курс After Effects

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

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

базовый курс After Effects

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

базовый курс After Effects

Шейповые слои, в отличии от других слоёв имеют возможность использовать модификаторы. Модификатор - это такой дополнительный параметр, который позволяет как-то изменять слой для получения определенного результата. Т.е. с помощью модификаторов к шейповым слоям можно подключать различные дополнительные параметры, чего нельзя делать с другими слоями. Например, возьмём вот этот слой с элипсом и откроем его параметры, тут мы видим стандартный набор: Anchor Point, Position, Scale, Rotation и Opacity. Об этих параметрах мы говорили в предыдущем уроке. Чтобы к шейповому слою подключить дополнительный параметр, а точнее модификатор, нужно кликнуть Add и в появившемся списке выбрать модификатор.

базовый курс After Effects

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

 бесплатный курс для новичков After Effects

2. Маска в After Effects

Теперь рассмотрим работу с инструментом "Маска". Рассматривать работу с маской лучше на примере какого-нибудь изображения. Маска - это такая область, которая ограничивает, обрезает или наоборот дополняет изображение или какой-нибудь объект. Принцип работы маски в After Effects тот же, что и в фотошопе, т.е. мы можем маской скрыть часть какого-то слоя или наоборот сделать видимой какую-то часть.

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

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

 бесплатный курс для новичков After Effects

Маска имеет набор параметров, а так же режимы наложения. Сейчас, по умолчанию установлен режим add, который работает именно так, как вы сейчас видите. Если выбрать другой режим, например Subtract, то мы увидим, что он работает с точностью наоборот. Т.е. Всё, что в маске теперь скрыто, а всё что за маской доступно к просмотру.

 бесплатный курс для новичков After Effects

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

 бесплатный курс для новичков After Effects

Поэтому для анимации маски используется параметр "Mask Path". Ставим ключ этого параметра в первой точке, затем перемещаем ползунок немного дальше, выбираем инструмент "Convert Vertex tool" и с помощью него перемещаем точки фигуры маски удерживая Ctrl или изменяем форму просто потянув за точку. В результате получается анимация маски.

 бесплатный курс для новичков After Effects

Следующий параметр маски - это Mask Feather, с помощью которого можно размыть края маски. Mask Opacity - это непрозрачность маски и Mask Expansion - это увеличение или уменьшение маски, типа как утончение края в фотошопе.

After Effects для начинающих

Мы рассмотрели создание маски на обычном слое, теперь рассмотрим особенности создания маски на шейпе. Создадим какой-нибудь шейп, допустим квадрат и на этом шейпе нам нужно сделать маску. Если мы на этом слое начнём рисовать ещё один квадрат, в надежде, на то, что он станет маской, то увидим, что у нас появляется не маска, а просто еще один отдельный шейп.

After Effects для начинающих

Для того, чтобы этот второй шейп превратился в маску, сверху имеется такой параметр "Tool create shape" и "Tool create mask". Если перед тем, как рисовать второй шейп мы здесь выберем "Tool create mask", то у нас получится маска.

After Effects для начинающих

Всё, что во круг маски скрылось, а что внутри осталось.

After Effects для начинающих

Теперь, если мы включим параметр маски Subtract, то всё внутри маски будет скрыто, а вся область снаружи будет видна.

After Effects для начинающих

Вот таким образом работают маски в After Effects, ну а мы переходим далее, к рассмотрению 2D и 3D пространства.

3. 2D и 3D пространства в After Effects (Свет и Камера)

Для примера возьмём два слоя с изображениями и сейчас оба изображения у нас находятся в 2D пространстве, т.е. они оба плоские.

уроки по After Effects

Давайте сделаем одно из изображений 3-х мерным. Для этого к слою с данным изображением подключаем параметр 3D. Выделяем слой и кликаем по этой иконке, таким образом мы из обычного слоя сделали 3D слой.

уроки по After Effects

Если открыть параметры обоих слоёв, то можно увидеть, что обычный слой с изображением имеет стандартные параметры трансформирования, такие как Anchor Point, Position, Scale, Rotation и Opacity. В то время, как 3D слой имеет еще и дополнительные параметры. У Position появилось дополнительное значение, с помощью которого можно удалять и приближать объект, а так же появились параметры ориентации, x-rotation, Y-rotation и Z-rotation.

уроки по After Effects

И уже с помощью данных параметров можно сделать какую-нибудь 3D анимацию, например вращение картинки вокруг своей оси.

В After Effects существует несколько режимов 3D. Если перейти к настройкам композиции, выбрав в верхнем меню "Composition" - "Composition Settings", то можно увидеть, что во вкладке 3D render по умолчанию установлен режим "Classic 3D" и этот режим используется в большинстве случаев. Но тут еще имеется и такой режим, как "Cinema 4D", я им не рекомендую пользоваться, но объясню вам что это такое.

уроки по After Effects

Если мы сейчас подключим его, то увидим, что у 3D слоя появились дополнительные параметры, которые называются опции геометрии.

уроки по After Effects

С помощью этих параметров мы можем изменять геометрию 3D слоя, например можем его изогнуть. Это то, что касается обычного слоя с изображением. Если же мы создадим шейп в этом 3D режиме и преобразуем его в 3D слой, то у него будет еще такой параметр, как "экструзия" и мы сможем выдавить из плоского квадрата куб и у нас получается полноценный трёхмерный объект.

афтер эфектс уроки для начинающих

Но, как мы видим объект не имеет тени. Для того, чтобы появилась тень нам нужен свет и камера. Давайте создадим камеру, для этого в панели слоёв кликаем правой кнопкой мыши и выбираем "New"-"Camera", оставляем настройки по умолчанию и нажимаем "Ок".

афтер эфектс уроки для начинающих

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

афтер эфектс уроки для начинающих

Для того, чтобы комфортно использовать камеру нужно создать нулевой объект, сделать данный слой трёхмерным и к нему уже привязать камеру. Кликаем по панели слоёв правой кнопкой мыши и выбираем "New" - "Null Object".

афтер эфектс уроки для начинающих

Ну и привязываем камеру к нулевому объекту.

афтер эфектс уроки для начинающих

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

афтер эфектс уроки для начинающих

Теперь добавим на сцену освещение. Для этого кликаем по панели слоёв правой кнопкой мыши и выбираем "New"-"Light". Открывается окно настроек слоя со светом и тут если мы оставим тип освещения "spot", то уже получим полноценный 3D объект с тенями.

афтер эфектс уроки для начинающих

Вот этот вот режим 3D композиции, который называется Cinema 4D конечно симпатичный, но в нём намного дольше всё рендерится и при работе значительно тормозит, работать в нём гораздо дольше, чем в режиме Classic 3D. Поэтому лучше использовать именно режим Classic 3D, а если нужна прям такая 3D графика серьёзная, то её лучше делать непосредственно в 3D редакторах, типа Cinema4D и уже просто импортировать в After Effects.

афтер эфектс уроки для начинающих

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

Blending-Mode-Cover-Image-865x486

Один из самых простых способов придать какую-либо стилизацию фотографиям или видео с помощью After Effects — это использование режимов наложения. Всего несколько кликов — и вид и атмосфера вашей композиции существенно преображается.

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

Ниже приведены 6 интересных режимов наложения для After Effects. Однако вы можете использовать упомянутые в этой статье режимы и в Premiere и в Photoshop.


1. “Экран” (Screen)

Girl-in-Coat-1024x576

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


Мы можем применить режим “Экран”, чтобы совместить снег и финальное изображение.
2. “Умножение” (Multiply)

“Умножение” — это эффект, противоположный “Экрану”. Вместо извлечения темных участков из изображения “Умножение” убирает светлые участки. Хотя этот режим может использоваться во многих разных случаях, я чаще всего использую его для придания гранж-эффекта изображению.
Возьмем такое изображение:
чтобы добавить вот это изображение:
Мы просто можем применить режим “Умножение” для создания гранж-эффекта.

Grungy-Image-Composited-1024x576


3. “Добавление” (Add)

Как и “Экран”, “Добавление” оставляет только светлые участки изображения, при этом убирая темные. Однако “Добавление” — это более сложный режим. Он добавляет (о чем и говорит его название) цветовые значения изображению ниже, в результате конечное изображение становится значительно ярче.

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

К примеру, возьмем это фото:

Girl-Looking-at-Sunset-1024x576

И создадим световые пятна в “хипстерском” стиле, которые мы накладываем на непрозрачный темный слой.
Затем мы можем применить режим передачи “Добавление”, чтобы получить эффект световых пятен.
4. “Затемнение основы Classic” и “Затемнение основы” (Classic Color Burn or Color Burn)

Также как и “Умножение”, режим передачи “Затемнение основы” затемняет изображение. Однако “Затемнение основы” отличается тем, что этот режим сливается с фоном. В соответствии с названием, этот режим создает эффект затемнения, что хорошо для гранж-эффекта и для винтажного эффекта. Светлые участки сохраняются при использовании затемнения основы. “Затемнение основы” обычно используется для создания “грязноватого” винтажного эффекта.

К примеру, возьмем такое изображение:


и применим к нему это изображение поверх всей композиции:
В результате получим вот это:
5. “Перекрытие” (Overlay)

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

Green-Side-Overlay-1024x576


6. “Рассеянный свет” (Soft light)

Этот режим очень похож на режим “Перекрытие”. Однако “Рассеянный свет” — менее заметный по сравнению с предыдущим. В примере к тому же слою того же самого изображения применен “Рассеянный свет” вместо “Перекрытия”.

Soft-Light-Example-1024x576

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

Вы можете создать подобную анимацию меньше чем за час при помощи одного единственного эффекта в After Effects. Это руководство основано на мини мастер-классе, который я проводил в рамках программы Bridge в Designer Fund. Я предполагаю, что вы никогда раньше не пользовались After Effects, а если пользовались — вы можете пропустить большинство шагов.

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

(Для этого тьюториала вам нужно установить размер холста 800x600 px)


Откройте или создайте вашу векторную форму в Illustrator. Пусть это будет Слой 1. Потом создайте новый слой: на нем вы будете рисовать пути, которые собираетесь анимировать. Рисуйте их при помощи инструмента “Перо” (P). Пусть путь начинается вне логотипа и проходит по одному или нескольким изгибам фигуры.


Создайте еще 5 (или сколько нужно) путей, которые будете анимировать.


Теперь вы готовы к запуску After Effects. Когда откроете программу, перед вами будет пустой проект. Если это не так, вам нужно будет создать новый проект при помощи клавиш Alt + Cmd + N.

Вы увидите нечто подобное:


Теперь вам нужно создать новую композицию (cmd + N).

Композиция — это то же самое, что и документ в Photoshop. У нее есть слои, и к этим слоям вы можете применять эффекты и маски. Отличие After Effects в том, что у вас появляется дополнительное измерение — время. Это означает, что любой примененный эффект может быть модифицирован во времени посредством ключевых кадров (keyframes).

На заметку: Ключевые кадры (keyframes) — это то, что позволяет делать изменяющиеся во времени эффекты. Например, переход от прозрачности в 0% (первый ключевой кадр) до прозрачности в 100% (второй ключевой кадр) за одну секунду (интервал между ключевыми кадрами) создаст эффект выцветания. Это основа работы After Effects.

Когда вы создаете новую композицию, в вашем распоряжении — множество опций и различных настроек. На этом этапе мы не будем долго выбирать правильные настройки, а предположим, что нашу анимацию мы будем использовать в качестве шота для Dribbble. Задайте размер 800x600 и длительность 5 секунд, а все остальное оставьте без изменений.


Мы используем квадратные пиксели, потому что создаем анимацию для экрана компьютера.

Теперь, когда вы находитесь в пустой композиции, создайте новый сплошной слой (Solid Layer: cmd + Y). Он добавится на временную шкалу. Не думайте пока о цвете слоя, его мы будем настраивать в другом месте.


Перейдите в Illustrator, выберите один из путей, перейдите обратно в After Effects, где уже выбран новый спрошной слой, и нажмите “вставить” (cmd + V). Если путь слишком большой, дважды кликните по нему, чтобы отмасштабировать (по мере вставки остальных слоев, нужно будет так же отмасштабировать и их). Вы увидите добавленный путь в окне предпросмотра. (Еще один способ посмотреть маску — нажать M на сплошном слое временной шкалы)

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

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

Читайте также: