Как подготовить иллюстрацию для after effects
Обновлено: 07.07.2024
Анимация — важная составляющая любого проекта, которая при правильном использовании может произвести хорошее впечатление, придать вашему дизайну изюминку и привлечь как можно больше внимания.
Вот гайд по созданию анимаций с советами и замечаниями, которые улучшат вид вашего дизайна.
Часто мы используем анимации, чтобы произвести хорошее первое впечатление. Моушн-дизайн оживляет наш пользовательский интерфейс и показывает, как все функции будут работать без вмешательства со стороны программиста. Вот один из концептов, в котором мы применили анимацию для демонстрации наших идей клиенту.
Оживление иллюстраций
Иногда можно использовать простые анимации для оживления иллюстраций, на это не уйдет много времени, но приведёт к положительным результатам. Анимированные иллюстрации, даже самые маленькие, действительно отыгрывают большую роль, не стоит ими пренебрегать.
Упрощение реализации
Моушн-дизайн помогает быстрее реализовать ваш проект. Как?
Во-первых, вы можете анимировать сайт или приложение, чтобы наглядно показать разработчикам, что именно они должны сделать. Вы можете анимировать все составляющие вашего проекта или только некоторые нестандартные переходы/раскрытия.
Во-вторых, если вы анимировали иллюстрации в After Effects, вы можете экспортировать их в формат файлов Lottie. Таким образом, их реализация не займет много времени, а разработчики смогут потратить его на нечто более приоритетное.
Улучшите свое портфолио
Слайд-шоу — это здорово, но давайте будем честны — людям нравятся видео. Они просты, впечатляющи, интересны и информативны.
Если вы занимаетесь моушн-дизайном, вы можете создавать множество классных анимаций: поиграйте с эффектом параллакса, включите 3D-анимацию в пользовательский интерфейс, поиграйте с эффектами искажения на фотографиях, анимируйте иллюстрации и т.д.
Если вы UI/UX-дизайнер, даже простая прокрутка и раскрытия помогут привлечь больше внимания к вашему дизайну и сделать портфолио более выдающимся.
Импорт из Sketch
Импорт из Sketch выполняется просто. Для этого вам понадобится плагин AEUX для After Effects и Sketch.
- Организуйте все в группы и дайте правильные названия всем слоям
2. Настройте параметры импорта в плагине AE. В настройках плагина вы можете выбрать, куда импортировать: в новую или уже существующую композицию. Также плагин умеет предварительно создавать артборды, группы, изменять частоту кадров и размер композиции и т.д. (подробную информацию о настройках плагина вы можете прочитать здесь).
Импорт из Figma
Для этого вам понадобится помощь плагина AEUX для After Effects и онлайн-плагина Figma (инструкция здесь).
1. Убедитесь, что вы скачали шрифты, используемые в дизайне.
2. Убедитесь, что все слои названы правильно. Это очень важно, ведь в противном случае вы потратите массу времени на организацию работы в After Effects.
3. Настройте параметры импорта в After Effects, тут всё как и в работе со Sketch.
4. Перейдите в панель плагинов > development > AEUX. При необходимости измените настройки и нажмите «send to AE». В последней версии плагина исходный код из Figma будет автоматически открываться в After Effects.
Precompose подразумевает под собой новую композицию с анимацией, которую вы решили по какой-то причине сделать отдельно. Чаще всего это делается, чтобы отделить одну логически законченную работу от других.
Как мы знаем, есть два типа людей:
- Любят precompose и используют их все время;
- Предпочитают не использовать precompose.
Мы используем их только для организации неанимированных или лишь слегка анимированных частей дизайна: верхнего и нижнего колонтитула, карточек и панелей инструментов.
Зачем? Вы часто теряете гибкость в процессе анимации. Например, если вам нужно анимировать прокрутку и у вас есть анимация для частей экрана — вы будете терять много времени, перемещаясь туда-сюда в композициях.
Кроме того, некоторые эффекты слоя могут не работать должным образом, если вы создали анимацию в предварительной композиции (CC bend, 3D-слои и т.д.).
Если вы не используете Precompose, вам в любом случае необходимо организовать свои слои.
Мы всегда используем цветовой код для распределения слоёв по группам и NULL-объектам, что помогает быстрее анимировать и находить нужные нам слои.
Во время анимации меняйте цвет для всех слоев на каждом анимированном экране (как на левом изображении) или частей экрана с цветовым кодом (как на правом изображении). Например, у нас есть экран с заголовком, а затем идет 3 столбца с содержимым.
Первый вариант — применить одинаковый цвет ко всем элементам экрана, второй — применить уникальный цвет к каждому столбцу. Затем создайте объекты NULL и сделайте все слои экрана родительскими для этого NULL.
Когда подготовка будет окончена, вы будете готовы приступить к анимации. Мы не будем учить вас анимировать основные параметры, но дадим несколько личных советов, которые мы выучили сами.
Основные бесплатные плагины для упрощения вашей работыMotion Tools
Мы не можем представить себе даже день анимации без этого плагина. Он помогает оптимизировать рабочий процесс и сэкономить много времени.Все инструкции о том, как его использовать, вы найдете в этом видео.
Это ещё один простой, но удобный плагин. У него есть только одна простая функция — копирование динамики из одного ключевого кадра в другой. Как это использовать? Просто выберите ключевые кадры, когда вы уже настроили динамику, нажмите «копировать», выберите нужные кадры, для которых вам нужна такая же динамика и нажмите «вставить». Легко и полезно!
Bodymovin и Lottie Files
Также мы используем плагины для экспорта наших иллюстраций, предварительных загрузок и анимаций значков.Эти плагины преобразуют композиции After Effects в файлы формата JSON, которые можно использовать на iOS, Android и React Native без изменений.
Хорошее смягчение — самое главное в анимации и ключ ко всему. Так как же научиться делать хорошее смягчение?
В движении пользовательского интерфейса вы все время будете анимировать две вещи: прокрутки и раскрытие.
Для их анимации используются стандартные свойства: положение, непрозрачность, масштаб и поворот.
Например, вы анимируете прокрутку: все ваши слои готовы и организованы, вы уже создали NULL для прокрутки и родительские слои для него (мы говорили о создании NULL для каждого экрана). Теперь вам нужно сделать их родительскими для прокрутки NULL. Хорошо, пора творить чудеса.
- Нажмите на scroll NULL и активируйте свойство Position (нажмите «P» на клавиатуре);
- Создайте ключевые кадры для начальной и конечной точек;
- Выберите ключевые кадры и перейдите в редактор графиков. Выберите график скорости, если он еще не активен.
- Отрегулируйте кривую, как на изображении.
- Вернитесь к временной шкале и при необходимости отрегулируйте время.
Теперь пора поговорить об анимации раскрытия объектов. Вы уже анимировали движение прокрутки, но этого все ещё недостаточно. Чтобы движение выглядело хорошо, необходимо анимировать отображение слоев, которые вы прокручиваете.
Как оживить раскрытие?
- Выберите слои, нажмите «P» и «T» на клавиатуре, чтобы выбрать положение и свойства непрозрачности;
- Переместитесь на 20 кадров вперед и создайте ключевые кадры;
- Вернитесь назад, анимируйте непрозрачность до 0, положение Y до +20;
- Создайте динамику, как показано на графике ниже.
Просмотрите анимацию и вы заметите, что теперь все движения выглядят более плавными.
Итак, вы анимировали движение прокрутки, раскрытия и добавили динамику, но чего-то всё еще не хватает… Смещений! Без них никуда, они всегда имеют большое значение.
Что из себя представляет «Смещение»?
Это означает, что анимация не одновременна. Например, анимация каждого следующего слоя начнётся на 2 кадра позже, чем анимация предыдущего слоя.
- Создайте смещения — переместите каждый слой на 2 кадра дальше (перемещайте ключевые кадры каждого слоя по одному или используйте плагин MDS, чтобы сделать это одним щелчком мыши).
- Просмотрите и при необходимости настройте анимацию. Теперь вы увидите большую разницу. Так что не забывайте использовать смещения, это всегда помогает!
Когда вы освоили базовую анимацию, пришло время проявить больше творчества.
Раскрытие фото
Добавьте маски, масштаб, поворот или даже искажение ваших фотографий и это мгновенно улучшит ваше положение.
Например, здесь вы можете наблюдать добавленную масштабную анимацию и отображаемую маску. Такое действие легко реализовать и выглядеть это будет гораздо лучше, нежели стандартное раскрытие.
Фотоэффекты
Помимо раскрытия, вы можете добавить эффекты искажения фотографий, которые будут отображаться при наведении курсора или же видны постоянно.
Создание искажений — довольно комплексный, а иногда и достаточно сложный процесс, но вы можете использовать уже готовые пресеты, которые есть в свободном доступе, в Интернете. Вот несколько отличных вариантов того, как фотоэффекты могут быть применены на ваших сайтах.
В большинстве случаев мы используем простые анимации для текста, но иногда вам может понадобиться добавить некоторые интересные детали к базовой анимации.
Анимацию текстовых эффектов достаточно легко освоить. Если вы наберете «текстовая анимация в After Effects» на YouTube, там будет представлено множество руководств. Но если вы не хотите тратить свое время на изучение анимации текста — можете использовать уже готовые пресеты. Их можно использовать как для заголовков, так и для основной текстовой анимации.
Посмотрите, как такой вид анимации может помочь в создании впечатляющего видео.
Оживите свои иллюстрации и ваш дизайн на 100% станет более впечатляющим.
Всегда стоит анимировать иллюстрации для сайтов/приложений. Это быстро, легко и просто реализовать, а профит от этих действий будет максимален.
Когда анимация будет завершена, разработчикам потребуются файлы в формате JSON. Для их создания мы используем плагин Bodymovin или Lottie files для After Effects. В большинстве случаев эффекты не работают в формате Lottie, поэтому мы пытаемся создать красивую анимацию с основными свойствами: положением, вращением, масштабом, непрозрачностью и анимацией пути.
Когда вы закончите создание анимаций, проверьте пару вещей:
1. Предварительно просмотрите все анимации несколько раз. Не один раз, а хотя-бы пять. Убедитесь, что все выглядит так, как вы хотели.
2. Сделайте так, чтобы в панели проекта все выглядело красиво. Все источники должны находиться в отдельных папках. Предварительные композиции правильно названы и собраны вместе в одной папке. Создайте папку «Архив» и храните здесь все версии анимаций (просто сделайте это, так будет лучше).
3. Выполните визуализацию и снова проверьте визуализированную анимацию. Наберитесь терпения и проверьте всё это еще хотя-бы 5 раз, уверяю, вы найдете там ошибки.
Советы по публикации и рендерингу в социальных сетяхЕсли вы новичок в анимации, у нас есть для вас несколько советов.
Используйте Adobe Media Encoder. Да, вы можете рендерить .mov прямо в After Effects, но это не самый лучший формат. MOV имеет большой вес, и не всегда правильно воспроизводится. Конечно, вы можете выполнять рендеринг в MOV, а затем использовать онлайн-конвертеры для рендеринга в формате MP4 или GIF.
В Media Encoder рендеринг проходит в формате h.264. Чаще всего вам будет достаточно стандартных настроек. При необходимости можно изменить частоту кадров или размер видео здесь, не возвращаясь к AE. Просто убедитесь, что для вашего рендера установлено «Ускорение графического процессора Mercury Playback Engine (металл)».
Иногда вам нужно оптимизировать видео, чтобы оно весило меньше. Для этого мы рекомендуем приложение HandBrake. Пользоваться им очень просто и интуитивно понятно. Здесь вы можете уменьшить размер файла видео, оптимизировать, изменить размер, битрейт или частоту кадров.
Советы по социальным сетям
Первое и самое главное — миниатюры. Самая распространённая ошибка — забывать о хороших миниатюрах. В результате у вас может быть пустой или непривлекательный эскиз, который испортит впечатление обо всей проделанной вами работе.
Второе, над чем нужно работать — зацикленная анимация. Это тот пункт, который делает анимацию красивее и плавнее.
На этой странице рассматриваются панель «Основные графические элементы» в After Effects и способы работы с шаблонами анимационного дизайна и основными свойствами.
Панель Основные графические элементы позволяет создавать настраиваемые элементы управления для анимационного дизайна и обмениваться ими как локальными файлами или шаблонами анимационного дизайна через библиотеки Creative Cloud Libraries. Панель «Основные графические элементы» работает как корзина, в которую можно добавлять различные элементы управления, изменять их, а затем упаковывать в качестве общих шаблонов анимационного дизайна . Новая среда для работы с панелью Основные графические элементы в After Effects, называющаяся Основные графические элементы , доступна на панели рабочих сред. Для доступа к рабочей среде выберите Окно > Рабочая среда .
Панель «Основные графические элементы» в After Effects можно использовать четырьмя способами.
- Как плоскость контроля в After Effects: используйте панель «Основные графические элементы» в качестве плоскости контроля для своих композиций. Перетаскивайте параметры с панели «Таймлайн» на панель «Основные графические элементы» для создания сочетания клавиш для элементов из композиции, которые вы часто изменяете.
- Можно создать основные свойства, которые работают как основные элементы управления и позволяют изменять свойства эффектов и слоев композиции при ее вложении в другую композицию.
- Для экспорта шаблонов анимационного дизайна (.mogrt): заключите свой проект After Effects в шаблоны анимационного дизайна, который можно будет изменять прямо в Premiere Pro. Все исходные изображения, видеоизображения и предварительные композиции, необходимые для созданного дизайна, упаковываются в шаблон. Настройку в Premiere Pro можно будет выполнять только с помощью элементов управления, к которым вы предоставили доступ, что позволяет контролировать ваш дизайн.
- Группировать элементы управления, управлять свойствами шрифтов и добавлять в шаблон анимационного дизайна элементы управления для источников данных электронных таблиц в формате CSV и TSV. Доступ к группам можно получить с помощью меню «Добавить форматирование» на панели «Основные графические элементы». Команда «Добавить комментарий» доступна в этом меню.
Создание шаблонов анимационного дизайна в After Effects
Просмотрите это видео, чтобы узнать о создании шаблонов анимационного дизайна в After EffectsКомпозиции на панели «Основные графические элементы»
В раскрывающемся меню «Основной» на панели Основные графические элементы выберите композицию в проекте и начните формировать шаблон анимационного дизайна.
Для открытия композиции на панели Основные графические элементы в After Effects выполните любое из следующих действий:
- Чтобы открыть текущую композицию, выберите Композиция > Открыть в Основные графические элементы.
- Для открытия конкретной композиции щелкните правой кнопкой мыши композицию на панели Проект и выберите Открыть в Основные графические элементы .
- Чтобы открыть любую композицию в проекте, щелкните меню Основной на панели Основные графические элементы .
Основная композиция
Основная композиция — это текущая композиция на панели Основные графические элементы . Поддерживаемые свойства из основной композиции можно добавлять на эту панель. Кроме того, на панель можно добавлять свойства из композиций, которые присутствуют в иерархии основной композиции.
Свойства из композиций, которых нет в иерархии основной композиции, считаются несвязанными свойствами. При добавлении несвязанных свойств на панель Основные графические элементы отображается предупреждение. Свойства по-прежнему добавляются на панель, но будут выделены красным цветом и при экспорте в виде шаблона анимационного дизайна не будут оказывать никакого влияния.
Совет. Для использования несвязанных свойств разместите композицию, которая содержит эти свойства, в основной композиции или в иерархии.
Несвязанные свойства не работают при экспорте композиции в качестве шаблона анимационного дизайна .
Добавление элементов управления
Можно добавлять поддерживаемые свойства из группы свойств любого эффекта или любого слоя, например Преобразовать , Маски или Параметры материала .
Типы поддерживаемых элементов управления:
- Флажок
- Цвет
- Числовой ползунок (т. е., числовое свойство с одним значением), например «Преобразовать» > «Непрозрачность» или эффект элементов управления выражениями «Ползунок»
- Исходный текст
- Свойства 2D-точки, такие как «Преобразовать > Опорная точка», «Преобразовать > Положение» и эффект управления выражениями элемента управления точкой
- Свойства 2D-шкалы, такие как «Преобразовать > Масштаб»
- Угловые свойства, такие как «Преобразовать > Поворот» и эффекты управления выражениями элемента управления «Угол»
При добавлении неподдерживаемого свойства After Effects выводит предупреждение Ошибка After Effects. Свойство этого типа еще не поддерживается в шаблонах анимационного дизайна.
Чтобы добавить элемент управления, перетащите одно или несколько выбранных свойств с панели «Таймлайн» на панель Основные графические элементы .
Также можно воспользоваться командой Добавить свойства на панель «Основные графические элементы» , чтобы добавить свойства на панель Основные графические элементы из панели Таймлайн или Элементы управления эффектами . Для добавления свойств используется любое из следующих действий:
- Выделите свойство на панели Таймлайн , а затем выберите Анимация > Добавить свойство к основным графическим элементам .
- Правой кнопкой мыши щелкните свойство на панели Таймлайн или Элементы управления эффектами , а затем в меню выберите команду Добавить свойства на панель «Основные графические элементы» .
Команде Добавить свойства на панель «Основные графические элементы» также можно назначить сочетание клавиш. Описание этой процедуры см. в разделе Визуальный редактор сочетаний клавиш.
Просмотр поддерживаемых свойств
Если необходимо просмотреть только свойства, поддерживаемые панелью Основные графические элементы , нажмите кнопку Поддерживаемые свойства Solo на панели. Кнопка отбирает поддерживаемые свойства и отображает их на таймлайне.
Элементы управления изменениями
Панель Основные графические элементы можно использовать для настройки элементов управления следующими способами:
- Переименование элемента управления: чтобы переименовать элемент управления, выполните любое из следующих действий:
- Щелкните поле с именем элемента управления и введите новое имя.
- Перетащите курсор, чтобы выделить текущее имя, и введите новое имя.
Элементы управления, которые добавляются на панель Основные графические элементы , связаны с исходными свойствами. При изменении значения элемента управления также изменяется значение свойства в композиции. Например, если на панели изменить непрозрачность до 50 %, значение параметра Непрозрачность в композиции также изменяется до 50 %.
Значения композиций обновляются по мере изменения значения с помощью числовых элементов управления на панели. Чтобы отключить функцию динамического обновления, удерживайте клавишу Option (Mac) или Alt (Win) при перемещении ползунка.
Создание групп элементов управления
Имеющиеся на панели «Основные графические элементы» элементы управления можно группировать с целью улучшения навигации и повышения удобства использования. Это особенно полезно при добавлении на панель длинных списков, допускающих изменения элементов управления или основных свойств вложенных композиций.
Чтобы создать группу, выберите меню Добавить форматирование в левом нижнем углу панели Основные графические элементы и выберите команду Добавить группу .
Чтобы добавить элемент управления в группу, перетащите его на имя группы.
Элементы управления шрифтами
При добавлении на панель «Основные графические элементы» текстового слоя в шаблоне анимационного дизайна можно изменить и задать семейство шрифтов, стиль, размер и псевдостили для этого слоя. Чтобы добавить на панель элементы управления свойствами шрифта, выполните следующие действия:
Добавьте свойство текстового слоя Исходный текст на панель Основные графические элементы .
Щелкните Редактировать свойства на правой стороне строки элемента управления.
В диалоговом окне «Свойства исходного текста» выберите свойства шрифта для управления из следующих вариантов:
- Разрешить выбор пользовательских шрифтов . Добавляет элементы управления «Гарнитура» и «Стиль шрифта».
- Разрешить регулировать размер шрифта . Добавляет элемент управления «Размер шрифта».
- Разрешить псевдостили . Добавляет элементы управления «Полужирный псевдостиль», «Псевдостиль курсив», «Все прописные» и «Малые прописные».
В этом диалоговом окне доступен еще один параметр — Использовать слой как резервное текстовое поле . Установка напротив него флажка позволяет выбрать композицию/подкомпозицию и слой-фигуру или слой клипа, чтобы определить альтернативное текстовое поле для редактирования текста в программном мониторе Premiere Pro. Этот параметр важен, потому что многие файлы в формате .mogrt содержат прямоугольные текстовые блоки, которые выходят за пределы экрана, имеют неверный размер или положение.
Альтернативные прямоугольные текстовые блокиЭлементы управления шрифта не поддерживаются в качестве основных свойств вложенной композиции.
Добавление комментариев на панель «Основные графические элементы»
Чтобы добавить комментарии, нажмите кнопку Добавить комментарий в нижней части панели Основные графические элементы . Вы можете добавлять несколько комментариев, переименовывать их и изменять порядок их следования. Также можно отменять или повторять добавление комментариев, изменять их порядок и удалять комментарии, если это необходимо.
- Для переименования щелкните поле с именем комментария и введите новое имя.
- Для изменения порядка следования перетащите комментарий на панели вверх или вниз.
Чтобы удалить комментарий, выделите его и нажмите клавишу Backspace или Delete.
Изменение элементов управления![Изменение элементов управления]()
При дублировании композиции на панели Проект ( Cmd+D Mac или Ctrl+D Windows) After Effects дублирует свойства и комментарии, добавляемые на панель «Основные графические элементы» для данной композиции.
Присвоение имени шаблону
Чтобы присвоить имя шаблону анимационного дизайна или переименовать его, щелкните поле имени шаблона и введите новое имя.
Установка кадра афиши для шаблона
Можно задать кадр афиши для шаблона. Кадр афиши используется в качестве миниатюры шаблона в библиотеках Creative Cloud Libraries и на панели Основные графические элементы в Premiere Pro.
Чтобы задать кадр афиши, выполните следующие действия:
В основной композиции поместите индикатор текущего момента времени в кадр, который нужно выделить.
Экспорт шаблона
Чтобы экспортировать композицию в качестве шаблона анимационного дизайна , выполните следующие действия:
В диалоговом окне Экспортировать как шаблон анимационного дизайна выберите меню Место назначения . Доступные места назначения перечислены далее.
- Creative Cloud Libraries: добавление шаблонов в библиотеки Creative Cloud Libraries.
- Основные графические элементы: добавление шаблонов в локальную папку по умолчанию. Шаблоны, хранящиеся в папке Основные графические элементы , непосредственно доступны на панели Основные графические элементы в Premiere Pro.
- Локальный диск: сохранение шаблонов в локальный каталог. Шаблоны, сохраненные в локальном каталоге, не становятся автоматически доступны на панели Основные графические элементы в Premiere Pro.
Экспорт шаблонов анимационного дизайна![Экспорт шаблонов анимационного дизайна]()
Установите флажок в разделе «Совместимость»:
- Предупреждать, если в этом шаблоне анимационного дизайна используются шрифты, которые недоступны в шрифтах Adobe: Задайте этот параметр, если ходите, чтобы программа After Effects предупреждала вас о том, что тот или иной шрифт, используемый в композиции, отсутствует в шрифтах Adobe.
- Предупреждать, если для настройки этого шаблона анимационного дизайна требуется программа After Effects: Задайте этот параметр, если хотите экспортировать только функции, которые можно использовать без программы After Effects (например, сторонние внешние модули).
Дополнительные сведения о добавлении ресурсов в библиотеки Creative Cloud Libraries см. в разделе Библиотеки Creative Cloud Libraries в After Effects.
Эти параметры только отображают предупреждения, они не изменяют содержимое шаблонов анимационного дизайна. Чтобы изменить проект в соответствии с требованиями, отмените экспорт и внесите изменения, после чего повторно экспортируйте шаблон анимационного дизайна.
Выберите место назначения для экспорта в меню Место назначения и нажмите кнопку ОК .
Вы можете импортировать в Premiere Pro шаблоны анимационного дизайна, использующие эффект «Кисть для ротоскопии». Дополнительные сведения см. разделе Эффекты «Кисть для ротоскопии», «Уточнить края» и «Уточнить подложку».
Можно создавать шаблоны анимационного дизайна (файлы .mogrt), для настройки которых пользователю на его компьютере не потребуется программа After Effects. Чтобы пользователю шаблонов .mogrt не потребовалось использовать программу After Effects, шаблоны должны удовлетворять следующим требованиям:
- Поддерживается только модуль рендеринга композиции Classic 3D; модули рендеринга CINEMA 4D и 3D-рендеринга с трассировкой не поддерживаются.
- Поддерживаются все имеющиеся в After Effects эффекты, кроме: Эффект восстановления четкости при дрожании камеры, Synthetic Aperture Color Finesse, Maxon CINEWARE, «Марионетка» и «Стабилизатор деформации».
- Использование видеорядов Dynamic Link, таких как эпизоды Premiere Pro или Character Animator CC, в композициях After Effects не поддерживается.
- Видеоряды в формате FLV и сторонние внешние модули не поддерживаются.
Чтобы изменить шаблоны анимационного дизайна After Effects (файлы .mogrt), их можно открыть в After Effects как файл проекта. Внеся изменения в шаблон, заново экспортируйте его в виде файла .mogrt.
Чтобы открыть шаблон анимационного дизайна как проект, выполните следующие действия:
Выберите Файл > Открыть проект .
В диалоговом окне Открыть проект выберите файл .mogrt, а затем нажмите кнопку Открыть . При открытии файла .mogrt в виде проекта приложение After Effects извлекает файл проекта и ресурсы. В диалоговом окне Извлечь <имя файла>.mogrt выберите место для извлечения содержимого файла .mogrt, а затем нажмите кнопку Извлечь .Также можно изменить шаблон анимационного дизайна, использующийся в эпизоде в Premiere Pro 12.1, выполнив следующие действия:
- В After Effects откройте файл .mogrt как проект. Измените одни или несколько композиций либо добавьте или измените элементы управления на панели Основные графические элементы .
- После внесения изменений на панели Основные графические элементы нажмите кнопку Экспорт шаблонов анимационного дизайна . Можно либо заменить исходный файл .mogrt, либо выбрать новое расположение или имя обновленного файла.
- В Premiere Pro нажмите клавишу Option (Mac OS) или Alt (Windows) и перетащите новый или обновленный файл .mogrt из вкладки Обзор панели Основные графические элементы на существующий клип .mogrt в данной последовательности. Premiere Pro обновляет вкладку Правка панели Основные графические элементы с учетом элементов управления.
В After Effects откройте файл .mogrt как проект. Измените композиции либо добавьте или измените элементы управления на панели Основные графические элементы .
После внесения изменений на панели Основные графические элементы нажмите кнопку Экспорт шаблонов анимационного дизайна . Можно либо заменить исходный файл .mogrt, либо выбрать новое расположение или имя обновленного файла.
В Premiere Pro на вкладке Обзор панели Основные графические элементы , удерживая нажатой клавишу Opt (MacOS) или Alt (Win), перетащите новый или измененный файл .mogrt на имеющийся в эпизоде клип .mogrt. Premiere Pro обновляет вкладку Правка панели Основные графические элементы с учетом элементов управления.
Управляемые данными шаблоны анимационного дизайна позволяют быстро и точно настраивать гистограммы, линейные диаграммы и многое другое — утомительный ручной ввод данных или глубокие знания в области анимированной графики не потребуются.
С помощью этой функции можно добавлять на панель «Основные графические элементы» элементы управления для данные таблицы в формате CSV и TSV. При экспорте этих шаблонов анимационного дизайна с элементами управления данными в Premiere Pro данные можно будет изменять и заменять прямо в программе Premiere Pro.
Другой вариант использования заключается в том, что элементы управления данными, имеющиеся на панели Основные графические элементы , могут работать как обозреватель или редактор для слоев данных CSV или TSV в композиции без ее экспорта в качестве шаблона. При добавлении композиции с данными таблицы на панели, на панели отображаются все данные, которые можно изменять. При работе с вложенной композицией элементы управления данными недоступны как основные свойства этой композиции.
Чтобы добавить элементы данными на панель «Основные графические элементы», выполните следующие действия:
Слои-фигуры создаются рисованием на панели «Композиция» с использованием инструмента фигур или инструмента «Перо». Затем к существующим фигурам можно добавлять атрибуты фигур или создавать фигуры в пределах этого слоя-фигуры. По умолчанию при выделении слоя-фигуры и рисовании на панели «Композиция» в этом слое-фигуре создается фигура над выделенными фигурами или группой фигур. Рисование на панели «Композиция» с помощью инструмента фигур или инструмента «Перо», когда выбран слой изображения, не являющийся слоем-фигурой, приводит к созданию маски. Дополнительные сведения см. в разделе Создание масок в After Effects.
Комбинация клавиш инструмента «Фигура» — Q, а комбинация клавиш инструмента «Перо» — G.
Перед тем как начать рисовать на панели «Композиция», чтобы создать слой-фигуру, нажмите клавишу F2 и отмените выделение всех слоев.
Обычно новая фигура имеет заливку и обводку, которые соответствует настройкам «Заливка» и «Обводка», выбранным на панели «Инструменты» в момент, когда фигура была нарисована. Те же самые элементы управления на панели «Инструменты» можно использовать, чтобы изменить эти атрибуты для выбранной фигуры после того, как она была нарисована. Фигуры, созданные из текста, создаются с помощью заливок и обводок, которые соответствуют заливкам и обводкам исходного текста.
Преобразование видеоряда векторной графики в фигуру
Можно создать слой-фигуру из слоя векторной графики видеоряда, а затем изменить его. Функции создания фаски и экструзии в After Effects позволяют также выполнить экструзию графического объекта, например, логотипа. Дополнительные сведения см. в разделе Экструзия слоев текста и слоев-фигур.
Чтобы преобразовать слой векторной графики видеоряда в слой фигуры, выберите Слой > Создать > Создать фигуры из векторного слоя . Соответствующий слой-фигура отображается поверх слоя видеоряда, который будет отключен.
Известные проблемы с преобразованием видеоряда векторной графики в фигуры
- В настоящее время сохранены не все функции файлов Illustrator. Примеры включают непрозрачность, изображения и градиенты.
- Преобразованные фигуры игнорируют переопределения PAR, заданные в диалоговом окне «Интерпретация видеоряда».
- Градиенты и неподдерживаемые типы могут отображаться как фигуры с уровнем серого 50 %.
- Файлы с тысячами контуров могут импортироваться медленно и без обратной связи.
- Команда меню за один раз срабатывает только на одном выделенном слое.
- При импорте файла Illustrator в качестве композиции (нескольких слоев) невозможно преобразовать все эти слои одновременно. Однако, можно импортировать файл в качестве видеоряда, а затем использовать команду для преобразования слоя видеоряда в фигуры.
Создание фигуры перетаскиванием с помощью инструментов фигур
К инструментам фигур относятся инструменты «Прямоугольник» , «Прямоугольник со скругленными углами» , «Эллипс» , «Многоугольник» , и «Звезда» .
Для активации инструментов фигур и переключения между ними используйте клавишу Q.
Многоугольник представляет собой звезду без свойств «Внутренний радиус» или «Внутренняя округлость», поэтому имена фигур, созданных инструментами «Многоугольник» и «Звезда», одинаковые: polystar.
Маску можно создать с помощью инструмента фигур путем перетаскивания на выбранный слой на панели «Композиция» или панели «Слой». Фигуру можно создать с помощью инструмента фигур путем перетаскивания на выбранный слой на панели «Композиция». Если слой не выбран, перетаскивание с помощью инструмента фигур на панель композиции, создает фигуру на новом слое-фигуре.
Чтобы нарисовать маску в слое-фигуре, нажмите активным инструментом фигур кнопку «Инструмент создания маски» на панели «Инструменты».
При создании фигуры путем перетаскивания на панель «Композиция» с помощью инструмента фигур создается параметрический контур фигуры. Чтобы вместо этого создать контур фигуры кривой Безье, перед началом перетаскивания нажмите клавишу ALT (Windows) или OPTION (Mac OS). Клавишу можно отпустить до окончания операции перетаскивания. Все контуры маски являются контурами кривой Безье. (См. раздел Сведения о фигурах и слоях-фигурах.)
Перетаскивание начинается со щелчка панели «Композиция» или панели «Слой» для рисования и заканчивается при отпускании кнопки мыши. Нажатие клавиш-модификаторов в различное время в ходе одной операции перетаскивания приводит к различным результатам.
Чтобы переместить фигуру или маску в процессе рисования, удерживайте клавишу пробела или среднюю кнопку мыши при перетаскивании.
Для масштабирования круга, эллипса, квадрата, квадрата со скругленными углами, прямоугольника или прямоугольника со скругленными углами вокруг его центра в процессе рисования удерживайте клавишу CTRL (Windows) или COMMAND (Mac OS) после начала перетаскивания. Не отпускайте клавишу до тех пор, пока не отпустите кнопку мыши для завершения рисования.
Для отмены операции рисования нажмите клавишу ESC.
Каждый инструмент фигур сохраняет настройки самой последней операции рисования, выполненной с использованием этого инструмента. Например, если нарисовать звезду и изменить количество точек на 10, следующая звезда, также будет иметь 10 точек. Чтобы сбросить значения параметров для инструмента и создать фигуру с настройками по умолчанию, дважды щелкните инструмент на панели «Инструменты». (См. раздел Создание фигуры или маски по размеру слоя).
Рисование прямоугольников, прямоугольников со скругленными углами, квадратов и квадратов со скругленными углами
- Выберите инструмент «Прямоугольник» или «Прямоугольник со скругленными углами» и выполните одно из приведенных ниже действий.
- Чтобы нарисовать прямоугольник или прямоугольник со скругленными углами, перетащите курсор по диагонали.
- Чтобы нарисовать квадрат или квадрат со скругленными углами, перетащите курсор по диагонали, удерживая нажатой клавишу SHIFT.
2. (Необязательно) При рисовании прямоугольника со скругленными углами или квадрата со скругленными углами, прежде чем отпустить кнопку мыши, выполните приведенные ниже действия.
- Для увеличения или уменьшения скругления углов нажмите клавишу СТРЕЛКА ВВЕРХ или СТРЕЛКА ВНИЗ или прокрутите колесико мыши вперед или назад.
- Чтобы установить скругление углов на минимум или максимум, нажмите клавишу СТРЕЛКА ВЛЕВО или СТРЕЛКА ВПРАВО.
3. Завершите рисование, отпустив кнопку мыши. При рисовании квадрата или квадрата со скругленными углами отпустите клавишу SHIFT после отпускания кнопки мыши.
Квадраты создаются в соответствии с попиксельной пропорцией композиции. Если значение пропорций пиксела композиции отлично от 1, квадраты отображаются на панели «Композиция» в квадратной форме, только если кнопка «Вкл./выкл. коррекцию пропорций пиксела» нажата в нижней части панели композиции.
Рисование эллипсов или кругов
- Выберите инструмент «Эллипс» и выполните одно из указанных ниже действий.
- Чтобы нарисовать эллипс, перетащите курсор по диагонали.
- Чтобы нарисовать круг, перетащите курсор по диагонали, удерживая клавишу SHIFT.
- Отпустите кнопку мыши, чтобы завершить рисование. При рисовании круга отпустите клавишу SHIFT после отпускания кнопки мыши.
Моушн-дизайнер и преподаватель в Bang Bang Education Константин Новиков составил большую подборку полезных скриптов и плагинов в After Effects на все случаи жизни — и объяснил, зачем нужен каждый из них.
Zl Explode Shape Layers: разбирает и группирует шейповые слои, которые были созданы, например, в Illustrator, а также убирает артборд, который часто очень мешает работать.
Reposition Anchor Point: очень простой скрипт, который дает одну удобную функцию — перемещение энкор-пойнта в один из углов объекта или в центр. Вы просто выделяете все объекты, у которых вам нужно сместить AP, и нажимаете «переместить».
Flow: скрипт, который позволяет удобно управлять графиками скорости и значения. Кроме того, в нем много предустановок шейповой анимации.
Motion: «швейцарский нож», которым пользуются многие моушн-дизайнеры. В нем есть все перечисленное выше плюс около полусотни встроенных скриптов, которые позволяют делать анимационные ходы и приемы одним кликом. Например, сгруппировать анимацию нескольких слоев под одним слайдером или добавить какую-то элементарную физику в сцену. Есть даже функция, которая чистит проект и группирует все исходники по отдельным папочкам.
Overlord: своеобразный телепорт для данных между After Effects и Illustrator. Одной кнопкой он перекидывает все шейпы в АE, при этом вам не нужно сохранять какие-то дополнительные файлы и при необходимости можно также переслать вектор обратно.
Скрипты, нужные в первую очередь для персонажной анимацииLimber: предназначен для того, чтобы очень быстро создавать конечности — руки, ноги, пальцы, ну или, например, лапки у паука. В первую очередь используют для создания конечностей с угловатыми суставами — локтями и коленями.
Rubber Hose: этот скрипт делает классические диснеевские руки-сосиски и ноги-сосиски, у которых нет локтей и которые прекрасно тянутся.
Character Tool: по своей механике ближе к Rubber Hose. Кроме того, в скрипте есть еще куча мелких, но полезных функций.
DuIK: скрипт номер один для персонажных аниматоров. Он не очень юзер-френдли, но это связано, скорее всего, с большим количеством функций в нем. Это целая система для производства персонажей с руками, ногами, позвоночником и хвостом. В нем постоянно пополняющийся список анимационных предустановок. Чего только стоит кнопка «цикл походки», которая заставляет вашу марионетку шагать (у аниматоров это занимает минимум полдня), или «кей клинер», который оптимизирует анимацию и позволяет добавить в нее «изинги» и «овершуты». Скрипт постоянно развивается и абсолютно бесплатен. Пользуюсь им не только для персонажей.
Newton: плагин, который добавляет физику в проекты: если вам, например, не хочется разбираться с графиками и думать, как должен прыгать мячик, или нужно сделать так, чтобы сотня мячиков упала и заполнила логотип. Пару лет назад Apple сделала себе целый ролик на этом плагине. Одним словом, плагин позволяет соединять объекты невидимыми пружинками между собой, бросать их вниз и наслаждаться тем, как физика все делает за вас.
rd: comp setter: целая группа скриптов, которые упрощают работу. Например, rd: comp setter позволяет изменить параметры всех выделенных композиций: сменить им разрешение или частоту кадров. Около полусотни скриптов на все случаи жизни.
Rift: в пару кликов можно упорядочить слои и ключи в композиции на ваше усмотрение: выстроить их по CTI (бегунку) или же, наоборот, сделать их хаотичными. В проектах, где, например, надо сделать сдвижку в один кадр в сотне слоев, но чтобы при этом анимация заканчивалась в определенную секунду (выравниванием ключей), это незаменимый помощник.
Declutter: все очень просто: скрипт наводит порядок в проекте. Создает папочки и сортирует все элементы проекта. Помогает при работе с чужими проектами.
FormParticularStardust: три эффекта, которые по-разному работают с частицами. Можно сделать падающий снег, вращающиеся вихри, что-то похожее на дымку или логотип, разлетающийся на мелкие точечки. Stardust имеет нодовую систему и поэтому людям, склонным к визуальному программированию, легко найти с ним общий язык.
Element 3d: плагин номер один для тех, кто хочет работать с 3D-объектами в AE без использования сторонних программ. Может превратить любой текстовый слой в 3D-текст, работает с готовыми 3D-файлами. А еще имеет наборы объектов, благодаря которым можно, например, собрать огромный трехмерный город (Metropolitan Pack) и сделать пролет камерой по нему — причем это займет у вас не больше получаса, включая рендер.
Optical Flares: второй плагин от Эндрю Крамера и студии VideoCopilot. Это большая база настраиваемых бликов, вспышек и пересветов. Его часто используют для того, чтобы оживить параллаксы или видео, добавив в них игры света и бликов.
Deep GlowVibrance: два плагина, которые позволяют добавить эффект свечения в ваши объекты.
Более сложные визуальные эффекты для тех, кто давно работает в АESlitscan: делает эффект отставания или замораживания линии пикселей.
AE Pixel Sorter: эффект стекания пикселей по контрастной области.
Lockdown: позволяет неплохо прикрепить текстуру к неоднородному и неплоскому движущемуся объекту.
Три плагина-диспетчера рендера для опытных пользователей, которым не хватает настроек и кодеков в Media Encoder:
Читайте также:
