Как сделать крылья в after effects

Обновлено: 08.07.2024

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

Тема: параллакс и 2D риг персонажа.
Гость: Александр Ботезату, аниматор в Brazilero Animation Studio, Mолдова.

Содержание стрима с таймкодами:
03:50 Рекомендуемые сайты для поиска вдохновения
05:30 Создание параллакс эффекта
08:00 Подготовка сцены и камеры
21:00 Готовый параллакс
22:28 Анимация нарезки фирменной буквы В
27:00 Анимация падения резиновой буквы
31:30 След за движением объекта
34:30 Подготовка персонажа
39:00 Привязка отдельных частей тела
41:00 Наконец-то DUIK
43:00 Копирование рига руки
58:00 копирование анимации относительное объекта на другой
1:02:45 Работа с головой, риггинг лица
1:09:00 Создание тату на руке
1:11:30 Работа с глазами
1:14:00 Псевдо-3D движение на лице
1:18:00 Пример готового рига в проекте адского клоуна
1:21:00 Работа с ногами
1:23:00 Моргание глаз, закрытие-открытие
1:25:00 Копирование ключей нескольких слоев
1:28:00 Про пальцы
1:31:30 Про тело
1:33:15 Анимация ходьба и работа с ногами
1:45:00 Цикл ходьбы
1:49:00 Перемещение, движение, ходьба персонажа по экрану
1:52:00 Вращение ступни
1:56:45 Работа с анимацией пальцев руки
2:08:00 Про анимацию рта - lipsync
2:14:45 Пример проекта с ходьбой
2:17:00 Про заказчиков и согласование проекта, про деньги и все такое
2:27:20 Время рендера сложных проектов
2:31:00 Еще одна ручная анимация появления текста по буквам

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

ШАГ 1. Устанавливаем плагин Duik.

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

Плагин построен на элементах костей и суставов для персонажа. Причем не важно, человек это, животное или просто какое-то существо.

ШАГ 2. После установки ищем персонажа.

Он должен быть отрисован в векторном формате, чтобы при анимации не было никаких искажений. Можно нарисовать самому в Adobe Illustrator :)

Каждая часть тела должна быть разделена на слои. Например, рука разделена на три части — это плечо, предплечье и кисть.

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

ШАГ 3. Импортируем персонажа.

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

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

Кликаем правой кнопкой мыши по панели слоёв и выбираем "New" - Null object".
Выбираем все слои и с помощью функции привязки тянем их к нулевому объекту.
Просто наводим курсор на привязку любого слоя и удерживая левую кнопку мыши тащим привязку к нулевому объекту.

ШАГ 4. Переходим к нашему плагину.

Нужно расставить "ancor points", якорные точки всех частей персонажа. Например, стык плеча с телом, предплечье и плечо, кисть и предплечье и т.п. Именно в этом месте будет сгибаться ваша анимация.

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

ШАГ 5. Регаем персонажа в Duik.

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

Выделяем элемент —> удерживаем "Shift" —> выделяем туловище —> нажимаем в панели Duik на функцию "Auto-rig & IK". Плагин автоматически создаёт привязку. Делаем так со всеми элементами.

ШАГ 6. Персонаж и можно его анимировать с помощью точек и туловища.

Выделяем туловище, открываем в панели слоёв параметры этого слоя и ищем параметр "position", т.е. позиция.

Всю анимацию делаем на шкале времени. Теперь если проиграть анимацию, то мы увидим, что она работает.

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

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

Рассмотрим процесс создания анимированного изображения для сайта в подробностях и по шагам:

создание проекта: как создать анимированное изображение
создание иконки
аnchor Point
свойства слоя — Position и Rotation
создание анимации иконки
улучшение анимации, добавление микроанимации
плавность анимации, Easy Ease
ключевые кадры анимации в adobe after effects
выражения
ресурсы в интернете, посвященные анимации
редактор диаграмм
ресурсы в интернете, посвященные редактору диаграмм
указание свойств для отображения в редакторе диаграмм
параметры диаграммы в редакторе диаграмм
панорамирование и увеличение масштаба в редакторе диаграмм
автоматическое масштабирование по высоте и подгонка
результат работы

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

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

В начале создания можно указать:

разрешение анимации;
длительность;
количество кадров.

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

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

вернуться к оглавлению ↑

создание иконки

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

вернуться к оглавлению ↑

аnchor Point

Точка, вокруг которой происходит все движение, называется Anchor Point. Автоматически она находится в самом центре будущей анимации. Тем, кто только начинает разбираться в том, как сделать анимацию в After Effects, стоит проверять ее положение. Иногда ее можно случайно сдвинуть в процессе работы. Тогда съедет весь рисунок. Чтоб изображение было по центру, надо всегда проверять контрольную точку.

Чтоб изменить положение нужно открыть Anchor Point и передвинуть ее в нужное положение. Это один из самых важных моментов, ведь от положения точки зависит исходный результат.

вернуться к оглавлению ↑

свойства слоя — Position и Rotation

Адоб позволяет самостоятельно выбирать и создавать свои. Можно выбирать их насыщенность, цветовую гамму и размещение. Функцию Position используют для изменения расположения объекта. Rotation — градус его вращение.

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

вернуться к оглавлению ↑

создание анимации иконки

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

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

Все элементы, которые добавляют, отображаются в Timeline. Там можно менять его свойства и добавлять в работу.

вернуться к оглавлению ↑

улучшение анимации, добавление микроанимации

Применяя все инструменты и функции Адоб, можно создать красивую, детализированную анимацию. Важно уделить внимание всем частям. Чтоб добавить микроанимацию нужно:

добавить еще один слой;
изображение привязать к нему;
задать нужные параметры разворота на определенном участке;
добавить нужное количество кадров;
нажать Time Reserve Timeframes.

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

вернуться к оглавлению ↑

плавность анимации, Easy Ease

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

на слой Null 1 перенести кадр со второй секунды десятого кадра;
его же вставить на вторую секунду двадцатого кадра;
включить Rotation на 190 градусов;
в нижнем прямоугольнике продублировать все так же, как для Null 1, только с Rotation 45 градусов;
изображение с третьей секунды десятого кадра перенести на Null 1;
добавить двадцатый кадр с третьей секунды, указав Rotation 0;
на нижнем прямоугольнике нужно все повторить.

Когда все сделано, выделяют ключевые кадры и выбирают инструмент Easy Ease. Если все желтые точки совпадают, анимация сглаживается и становится плавной. В случае если есть несовпадения, нужно проверить правильно ли скопированы и перенесены кадры.

по теме Фотошоп :

Как сделать прозрачный фон картинки в Photoshop (фотошоп)

Как нанести градиент на фото с помощью adobe photoshop

Фотошоп онлайн редактор, функции фотошоп — монтаж, рисование…

вернуться к оглавлению ↑

ключевые кадры анимации в adobe after effects

Ключевые кадры нужны, чтоб задать параметры, которые будут меняться. Это может быть:

движения;
эффекты;
аудиосопровождение;
текст;
другие объекты.

Для создания анимации нужно минимум два кадра: начало и конец. Чтоб знать, как анимировать в after effects нужно включить секундомер. При изменениях параметра данные будут сохраняться. Если же таймер выключен, результат не сохранится.

вернуться к оглавлению ↑

выражения

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

Эту опцию чаще всего используют для:

беспрерывного вращения;
зацикливания точек входа и выхода;
разнообразных покачиваний.

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

вернуться к оглавлению ↑

ресурсы в интернете, посвященные анимации

Детально узнать информацию об анимировании изображений можно в руководстве пользователей от Адоб. Там есть все основные термины и функции, которые используют в работе. Также есть уроки от Джефа Сэнгстер о том, как работать в программе.

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

вернуться к оглавлению ↑

редактор диаграмм

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

Есть два варианта диаграммы:

значения (указаны все элементы);
скорости (скорость их изменений).

по теме создания сайтов :

Как настроить текстовый редактор Notepad++ нелишне изучить программку — текстовый редактор Notepad++ ! её возможности нынче и рассмотрим: подстроим первичные, но необходимые рычаги управления редактором, а также, что очень важно, научимся работать с Нотепад как с FTP — откроем ftp клиент соединение…

вернуться к оглавлению ↑

ресурсы в интернете, посвященные редактору диаграмм

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

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

вернуться к оглавлению ↑

указание свойств для отображения в редакторе диаграмм

Чтоб указать свойства при покадровой анимации картинки в After Effects нужно:

Можно просмотреть все свойства или же выбрать только анимированные. Также можно просмотреть те элементы, для которых была выбрана диаграмма.

вернуться к оглавлению ↑

параметры диаграммы в редакторе диаграмм

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

В параметрах диаграммы видно, присвоены ли звуковые волны слоям. Эталонная диаграмма показывает, насколько элемент соответствует норме. Она серого цвета и доступна только для просмотра.

вернуться к оглавлению ↑

панорамирование и увеличение масштаба в редакторе диаграмм

В зависимости от типа панорамирования стоит использовать:

колесико мышки для вертикального;
нажать SHIFT при прокрутке мышки для горизонтального.

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

вернуться к оглавлению ↑

автоматическое масштабирование по высоте и подгонка

Есть несколько видов автоматического масштабирования:

по высоте;
выбранной области;
всего изображения.

В первом случае программа самостоятельно выставить вертикаль, исходя данных по диаграмме. Горизонтальные размеры нужно настраивать вручную. Чтоб автоматически изменить данные выбранной обрасти, нужно указать размеры. Эта функция поможет новичкам, как анимировать картинку в Adobe After Effects animation под заданные размеры.

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

вернуться к оглавлению ↑

результат работы

Изучение того, как создать анимацию в Adobe After Effects занимает не сильно много времени. Это один из самых легких и простых вариантов оживить изображение.

Телеграм канал подпишись. Для вас самое важное и полезное по теме IT технологий и новостей мира!

Создание… продвижение сайтов: студия ATs media запросто с WordPress

все статьи: COMPLITRA
я - сайт COMPLITRA RU. Буду делиться для вас, надеюсь, полезной информацией. всегда рад сотрудничеству с авторами.
мой сайт

Для примера мы создадим какую-нибудь композицию. На нее мы загрузим значок доллара, для примера.

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

Выбрав данную функцию, у вас откроется маленькое окно.

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

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

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