Как сделать анимацию огня в adobe after effects
Обновлено: 03.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. Финальный вариант вроде этого:
1. Базовая форма
Нужно сделать новый композишн. На новом слое рисуем простую форму с помощью инструмента Pen. Для начала цвет формы может быть светло желтый. Выравниваем по вертикали опорные точки формы:
Рис 1. Начальная форма огня
К текущему слою применяем эффект Wave Warp. Anchor point должен быть расположен в основании объекта; настройки эффекта на рисунке ниже:
Рис 2. Настройка Wave Warp
На данный момент анимация будет похоже на плывущую рыбку (вид сверху). Текущий слой дублируем (CTRL+D). Заметно удлиняем и делаем тоньше форму на верхнем слое и самое важное: меняем параметр Wave Height на -26. Теперь это похоже на две рыбки. Меняем Track Matte нижнего слоя:
Рис 3. Меняем Track Matte
Базовая форма готова и будет выглядеть приблизительно так:
2. Подготовка огня
Формы верхних слоёв в рабочем поле смещаем левее. При этом необходимо уменьшить в масштабе обе формы. Еще раз дублируем исходные слои и проделываем схожие операций, но смещаем их вправо, относительно исходной формы.
Если есть большие видимые зазоры, то для "огня" необходимо сделать ядро. Для этого дублируем нижний слой с формой, убираем у него Track Matte, уменьшаем Wave height. Также уменьшаем форму в размере, визуально подгоняем для красоты между образовавшимися языками пламени.
Создаем pre-comp изо всех слоев. Добавляем инвертированную маску для нижней части огня. На данном этапе стилизованный огонь выглядит так:
3. Последние штрихи
На существующий pre-comp добавляем эффект Glow:
Рис 5. Настройки Glow для огня
На этом этапе создание огня завершено, но при желании можно добавить эффект Fill выше эффекта Glow. Это делается больше для красоты и природной схожести. Если эффект Fill добавляется, то необходимо будет задать цвет, близкий к оранжевому, и поменять Glow Threshold эффекта Glow, увеличив значение на несколько пунктов. Финальный вариант:
Как создать Реалистичный огонь в After Effects 2020 без плагинов.Также сделаем анимацию этого реалистичного огня.Такое пламя,созданное в Adobe After Effects 2020,может заменить реальный огонь при создании игр или видео.Эффект пламени сделаем без сторонних плагинов,при помощи встроенных в After Effects инструментов Particle,Turbulent Displace и Colorama.Они помогут создать эффект и цвет реального огня или пламени.
СУПЕР МЕГА ПУПЕР СВЕРХРЕАЛИСТИЧНЫЙ ОГОНЬ. СВОИМИ РУКАМИ В ADOBE AFTER EFFECTS.
СМОТРЕТЬ ВСЕМ.
поправьте скорее, пока не заминусили
Как сделать бесцветный огонь
Симуляция пламени
Доброго утра пикабушникам. Сделал ещё одну симуляцию, на этот раз через FumeFX, в Maya. Визуализировал при помощи V-Ray, примерно по тридцать секунд на кадр. Времени было немного, потому прошу простить за HD 720.
Критика приветствуется. Всем плодотворного дня!
Симуляция пламени
Доброго утра, пикабу. Сделал небольшую симуляцию потока пламени. Частицы - nParticles, симуляция пламени - maya fluid. Визуализировал через V-Ray, по две минуты на кадр.
Всем плодотворного дня!
Сухой лёд против пламени
Пылающий меч
3D ТРЕКИНГ текста в AFTER EFFECTS
В этом туториале я расскажу вам про очень полезную и крутую штуку - 3D трекинг, а именно - как сделать 3D текст и как его привязать и поместить в окружающую среду с помощью функции 3D Camera Tracker! Мы рассмотрим данную функцию в качестве создания интересных титров для вашего видео, а именно - будем использовать 3D ТРЕКИНГ текста в AFTER EFFECTS для создания эффекта реалистичной надписи на стене.
AFTER EFFECTS для Новичков 2 - ТРЕКИНГ
Всем привет! Во втором видео-уроке из курса "After Effects для новичков" я расскажу вам о трекинге - что это такое, для чего используется и самое главное - как его правильно делать. Покажу как быстро перенести видео из Premiere Pro в After Effects, а также как работать с проблемным трекингом. Этот урок базовый, для новичков, по этому рассматриваем дефолтные способы трекинга!
Youtube
(Указываю ссылки на свои личные соц.страницы, в связи с обновлением правил Пикабу).
Другие интересные референсы с анимацией эффектов и явлений
Ниже приведены раскадровки для некоторых популярных эффектов, которые так же часто встречаются в анимации.
Лопающийся пузырь
Анимация лопнувшего пузыря
Очень реалистичная графика в векторном формате, которая будет отлично смотреться и на растровом фото.
Огнемёт и стена огня
У огнемёта есть две ключевые атаки, для каждой из которых нужен отдельный эффект:
- обычная атака — струя пламени из ствола орудия;
- дополнительная атака — стена огня, которая наносит урон по области.
Первый шаг при создании эффекта — собрать и исследовать , чтобы понять, как он должен выглядеть. Вы можете искать референсы, например, на Pinterest (вот поиска для огнемёта).
Затем нарисуйте скетч. Набросок должен быть простым и грубым, но при этом передавать суть задумки. Это черновой вариант, поэтому используйте только упрощённые формы для изображения объектов. И не тратьте слишком много времени на проработку наброска. Постарайтесь сделать так, чтобы на эту задачу у вас уходило не более 20 минут.
Эскиз для огнемёта
Следующий важный шаг — рисование частиц (спрайтов), из которых будет состоять эффект. Проще всего нарисовать их в Photoshop. Для эффекта огнемёта понадобится три вида частиц. Первые нужны для создания следа дыма. В реальности дым состоит из частиц, появившихся в результате горения, и пара, поэтому его поведение и физическая природа очень похожи на газообразное вещество.
Чтобы дым в игре был правдоподобным, разработчики использовали только закруглённые формы без углов и резких переходов. В результате частицы дыма похожи на неровный четырёхлистник.
Спрайты для этого эффекта нарисованы в Photoshop
Если вы не знаете, как должны выглядеть подобные частицы, можно поискать вдохновение на сайте Adobe Stock (вот пример поиска).
Второй тип частиц — огонь. В реальности он ассоциируется с остроконечными всполохами. Однако в этом случае эффект выглядит лучше, если все частицы имеют похожую форму — это позволяет добиться единства и цельности всех элементов композиции.
Чтобы сделать их больше похожими на огонь, художники подобрали подходящие цвета и разукрасили спрайты. Также они добавили небольшой жёлтый блик внутри частицы, чтобы создать эффект огненных всполохов.
Третий тип частиц нужен для создания ореола свечения, который характерен для огня. Спрайт — обычный круговой градиент белого, который становится прозрачным по краям. По словам Тиханова, при правильном масштабе и аддитивном шейдере это выглядит не хуже эффектов пост-процессинга, которые слишком ресурсозатратны для мобильных устройств.
Когда спрайты нарисованы, разработчики собирают их в атлас, который используется в Unity. В своей работе стоит использовать атласинг текстур для эффектов, потому что у такого подхода есть несколько больших преимуществ:
- оптимизация — вместо множества текстур у вас остаётся одна для всех эффектов, кроме тех, для которых используется покадровая анимация. Это существенно сокращает размер билда;
- это позволяет удобно редактировать текстуры и следить за тем, чтобы они соответствовали стилю проекта;
- можно использовать ограниченное число материалов, что важно для поддержания высокой производительности рендеринга.
Атласы удобно собирать в Substance Designer: там можно легко определить размер атласа и количество ячеек для будущих спрайтов. Всё зависит от проекта, но обычно хватает 2048 пикселей и 12х12 ячеек: в такой атлас можно поместить 144 текстуры — этого должно хватить для мобильного проекта. Также для Substance Designer есть бесплатный плагин, который позволяет легко управлять атласом.
Принцип работы плагина
Следующий важный этап — создание и настройка систем частиц в Unity.
Эффект огнемёта состоит из трёх систем частиц:
- дым — в начале «жизни» частицы более красные (это позволяет имитировать свет от пламени), а затем становятся темнее и прозрачнее;
- глоу — очень размытые частицы, которые имитируют свечение от пламени;
- пламя, которое плавно переходит в искры и пепел к концу жизни.
Вот так выглядят системы по отдельности и в единой композиции
Каждая система частиц создаётся отдельно, хотя у них есть некоторые общие черты.
Всё начинается с создания Particle System
Нужно настроить форму таким образом, чтобы вылетающие из ствола частицы постепенно расходились в стороны
Затем задаём основные параметры системы: время жизни частицы, её скорость, пространство симуляции. Параметры можно взять со скриншота
Лучше задавать не конкретное значение, а диапазон, чтобы система брала случайные числа из выбранного промежутка. Это сделает эффект более живым и вариативным.
Чтобы определить, сколько частиц будет создаваться в единицу времени, нужно ввести значение в поле Emission
Далее настраиваем график изменения размера частиц в течение времени их жизни. Благодаря этому самые крупные частицы будут появляться где-то в середине пути частиц
Теперь можно заняться визуальной частью эффекта и заменить стандартные спрайты на ранее отрисованные. Для этого в поле Render назначаем нужный материал — так как он лежит в атласе, надо указать номер в поле Texture Sheet Animation. После этого эффект должен выглядеть примерно так.
Вот такой градиент хорошо подойдёт: сверху задаётся прозрачность, снизу — цвета
Следующая система частиц — сам огонь. Чтобы создать его, нужно скопировать уже созданную систему дыма, заменить градиент в поле Color Over Lifetime и выбрать нужный спрайт в поле Texture Sheet Animation.
Это уже похоже на огнемёт
Третья система частиц, глоу, нужна, чтобы подчеркнуть свечение. Для этого используем спрайт с размытыми краями в аддитивном шейдере.
Вот так выглядит градиент для третьей системы
Свечение наиболее активно только в начале эффекта, но постепенно теряет интенсивность. Также эти частицы становятся намного крупнее к концу жизни.
Финальный вид огнемёта
С основной атакой закончили. Теперь можно переходить к дополнительной.
Чтобы создать эффект, понадобятся три подобных спрайта
Опять начинаем со скетча.
Проджектайл летит по прямой и поджигает землю. Через некоторое время огонь плавно затухает
Полёт проджектайла определяется кодом, а с визуальной точки зрения эффект состоит из трёх систем частиц:
- след дыма с World Simulation Space;
- глоу с Local Simulation Space;
- пламя с World Simulation Space.
Для каждой системы нужен свой вариант Simulation Space
Ключевая особенность таких эффектов в том, что они привязаны к объекту который находится в движении. Само перемещение зависит от анимации, которая настраивается в редакторе или при помощи кода.
В этом случае движение снаряда влияет на геймплей и зависит от баланса игры. Но для тестирования эффекта всегда можно повесить на его родительский объект простую анимацию из Unity Animation Editor. Так вы сможете быстро увидеть все изменения, не создавая дополнительной логики.
Так выглядит основной проджектайл (каждая система включается с задержкой для наглядности)
Эффект горящей земли сделан из спрайтов, которые использовались для создания основной атаки. На самом деле он очень похож на обычный огонь, который встречается во многих играх. Чтобы сделать «стену огня», нужно создать несколько префабов огня через равные промежутки. Главное отличие «стены огня» от огнемёта в том, что частицы поднимаются вверх по оси Y c помощью параметра Gravity Modifier.
Достаточно выставить значение «-1»
Так выглядит эффект стены огня без поджигающего проджектайла
Финальная версия эффекта
Видео
Эффект взрыва
Экшены сложно представить себе без взрывов. И в Tanks A Lot! их тоже достаточно. Даже простой эффект взрыва состоит из нескольких систем частиц.
Здесь сочетаются все техники, о которых шла речь ранее
Взрывы появляются почти мгновенно, а после себя оставляют тёмный след на земле. Также должны присутствовать разлетающиеся искры, куски земли и дым. Но сначала нужно сделать базовый эффект — центр взрыва. Для этого Тиханов собрал в Substance Designer вот такую схему.
Здесь одновременно задействовано множество шумов
В итоге получилось что-то похожее на основу взрыва
Результат нужно преобразовать в 3D-модель, прогнать через оптимизатор геометрии в Maya и запечь цвет в текстуру. Полученную текстуру следует поместить в атлас эффектов, а меш импортировать в Unity. Такую модель можно сделать и более традиционными средствами: например, слепить в Blender или ZBrush.
После импорта создаём систему, добавляем модель в качестве частицы и настраиваем динамику появления в Size Over Lifetime.
Должно получиться нечто подобное
Уже выглядит интереснее
Расходящиеся круги ударной волны делают эффект динамичным. Теперь добавим расходящиеся стилизованные клубы дыма.
Для этого нужен подобный спрайт
В системе частиц дыма важно ограничить скорость движения во вкладке Limit Velocity Over Lifetime
Расходясь, частицы образуют круг, в центре которого произошёл взрыв
Затем нарисуем декаль следа от взрыва
Добавим ещё одну систему без Shape и сделаем очень быстрое появление через Size Over Lifetime. Декаль должна находиться параллельно земле. Для этого нужно в поле Renderer — Render Alignment поставить вариант Local.
В результате получается такой эффект
Теперь можно добавить полупрозрачный дым — для него Тиханов использовал спрайт, который рисовал для эффектов огня.
Следующий шаг — создание клубов чёрного дыма. Для этого достаточно скопировать систему с клубами стилизованного дыма и поменять несколько параметров — сами частицы, их размер и градиент.
Должен получиться такой дым
Теперь можно добавить дымящиеся осколки, разлетающиеся в стороны.
Они будут выглядеть примерно так
Для этого создадим систему частиц — в качестве частиц подойдёт круговой градиент в аддитивном шейдере. Настроим движение так, чтобы частицы вылетали вверх и плавно падали вниз, постепенно затухая.
Основные настройки такой системы
Теперь сделаем след дыма для этих частиц.
Для этого нужно перейти во вкладку Sub Emitters и создать ещё одну систему
В качестве частиц можно использовать нарисованные ранее спрайты стилизованного дыма.
Основные параметры этой системы
Должно получится примерно так
Теперь можно добавить разлетающиеся куски земли. Здесь та же логика, что и с фрагментами пилы: сперва их нужно смоделировать, а затем импортировать в качестве частиц.
Куски земли можно представить в виде простой модели со скошенными гранями
Чтобы камни падали на землю, нужно настроить Gravity Modifier и Collision.
Здесь выставлены все необходимые параметры
Также можно добавить вращение камней вокруг свой оси, пока они не достигнут земли. После этого они исчезают с помощью графика Size Over Lifetime.
Финальная версия эффекта выглядит так
Чаще всего эффекты состоят из нескольких систем, которые в совокупности формируют единую композицию. Несмотря на то, что для создания эффектов используется набор из нескольких инструментов, финальный результат может кардинально отличаться.
Обычно эффекты создаются в четыре этапа:
- поиск референсов;
- рисование эскиза;
- создание самих частиц (это могут быть 2D-спрайты или 3D-модели);
- создание систем частиц.
В заключение повторим несколько общих советов при создании визуальных эффектов:
- они должны быть лаконичными и читаемыми;
- убирайте все лишние элементы, которые мешают общей композиции;
- не забывайте про 12 принципов анимации;
- у всех спрайтов должна быть простая и понятная форма;
- не используйте слишком много цветов;
- эффект должен сочетать крупные, средние и мелкие элементы;
- собирайте спрайты в атлас, чтобы повторно использовать их в будущем.
Описанные принципы помогут вам улучшить качество своих эффектов. Также вы можете использовать примеры из текста, чтобы создать нечто подобное для своей игры.
Если программа у вас уже установлена на русском - лучше переустановить на английскую версию, предварительно сменив язык After Effects в настройках Creative Cloud. Просто сменить язык недостаточно, часть программы останется на русском и это может запутать.
С чего начать изучение After Effects?
Всем начинающим рекомендуем этот урок. За 10 минут автор познакомит вас с интерфейсом, базовыми инструментами и доступным языком объяснит, как анимировать в After Effects.
Вы научитесь импортировать файлы, работать со слоями и эффектами, соберёте свою первую композицию и узнаете, как превратить её в готовый ролик.
Самый быстрый и понятный урок по After Effects для начинающих:
Для чего нужен After Effects?
В After Effects вы можете создавать анимированную графику, презентации или слайдшоу, накладывать спецэффекты на видео и многое другое.
Если вы знакомы с Photoshop или Illustrator - вы легко поймёте и логику Ae, тут те же слои, стили и эффекты, но в Ae вы приводите всё это в движение.
After Effects особенно удобен для моушн-дизайна. Взгляните, какие эффектные ролики моушн-дизайнеры создают с его помощью:
Важно понимать, что After Effects - это не программа для видеомонтажа, у неё другая логика. Вам будет неудобно нарезать снятое видео на клипы, склеивать их в другом порядке и накладывать звуковые эффекты.
Заинтересовались изучением After Effects? Ниже мы собрали ресурсы с интересными уроками After Effects для начинающих.
Уроки After Effects для начинающих
Как только вы освоили основные инструменты Ae, можете переходить к более интересным вещам.
На YouTube есть бесплатные видеокурсы After Effects на русском:
1. Фишки и лайфхаки After Effects
В этом мини-курсе автор познакомит вас с полезными фишками работы в After Effects, которые будут необходимы в работе. Курс состоит из 6 уроков по 10 минут, наполненных ценными знаниями:
Отличный курс для новичков, 40 уроков длительностью до 5 минут. Никакой воды, удобный формат, начнёте с изучения интерфейса и последовательно изучите все нужные инструменты:
Легендарная серия из 25 уроков по After Effects, с простой и увлекательной подачей.
Вместе с автором вы изучите After Effects с нуля. Освоите кучу полезных инструментов и техник анимации, соберёте несколько композиций и создадите эффектный ролик, идя от простого к сложному:
Уроки After Effects на английском
Обязательно загляните на популярные каналы по After Effects на английском языке. Ниже мы привели плейлисты известных авторов на YouTube.
Лучшие англоязычные уроки по After Effects самой разной сложности. Автор учит крутейшим техникам, к тому же обладает недурным чувством юмора и харизмой.
Многие начинали именно с Video Copilot, и даже мы. На любом этапе обучения - обязательно к ознакомлению, уроки очень увлекательные:
Крутой автор, живая подача, интересные техники. Научитесь создавать профессиональные титры, графику или переходы для ваших видео:
Если вас заинтересовал моушн-дизайн в Ae - зацените этот 2-часовой курс по его основам на примере стильной и несложной анимации текста:
Ещё один канал с кучей уроков по After Effects, автор разбирает много полезных фишек и даёт ответы на часто задаваемые вопросы новичков:
Читайте также: