After effects анимация машины

Как сделать анимацию для сайта в After Effects — на примере бургер-меню

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

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

В этом уроке создадим анимацию иконки бургер-меню и узнаем основные принципы работы в After Effects.

Сначала познакомимся с рабочим пространством программы.

Adobe After Effects очень похож на Adobe Photoshop. Такая же работа со слоями, фильтрами, эффектами и так далее. Если вы работали в Photoshop, вам будет несложно освоить и After Effects.

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

А теперь давайте приступим к созданию анимированной иконки бургер-меню.

Создание проекта

Создайте новую композицию.

Укажите разрешение композиции, я поставил 1280х1280. Количество кадров установил 30. Продолжительность 10 секунд.

Создайте новый слой на панели слоев. Для этого правой кнопкой мыши откройте контекстное меню и выберете пункт New — Solid. Solid — это тип слоя, залитый сплошным цветом.

Установите параметры, указанные на скриншоте, цвет можете выбрать любой или выбранный для урока — #3D5272.

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

Основа готова. Перейдем непосредственно к иконке бургер-меню.

Создайте прямоугольник со скругленными углами — Rounded Rectangle Tool. Найти его можно на панели инструментов.

Примерно такого размера. Он сразу отобразится у вас на панели слоев.

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

Чтобы скруглить края, раскройте свойства слоя в панели слоев Contents — Rectangle 1 — Rectangle Path 1 — Roundness и выставите значение 100.

Anchor Point

Anchor Point — это опорная точка объекта, поворот (Rotation) и масштабирование (Scale) выполняются вокруг этой точки. При создании шейпового слоя ( Shape Layers — фигурные слои, для анимации векторной графики) по умолчанию Anchor Point располагается в центре слоя и имеет нулевые координаты X, Y, но будьте внимательны и всегда проверяйте расположение Anchor Point. Если точка находится за пределами объекта, расположите ее по центру.

Для этого выделите слой с прямоугольником и нажмите на инструмент Anchor Point, затем мышкой передвиньте эту точку в центр прямоугольника, вот так:

Для чего все это нужно? Покажу на примере. Я разместил два прямоугольника на одной плоскости, у одного прямоугольника Anchor Point расположен по центру, у другого чуть ниже.

Теперь повернем прямоугольники на 360°.

Думаю, разница очевидна.

Вернемся к созданию нашей иконки. Перейдите в панель слоев, выделите прямоугольник и нажмите два раза на Ctrl+D, тем самым вы создадите две копии этого прямоугольника.

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

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

В панели слоев выделите верхний прямоугольник и выберите два свойства слоя: Position и Rotate. Эти свойства мы задействуем в анимации. Повернем и переместим необходимые элементы. Чтобы выбрать именно эти свойства, зажмите Shift, затем, не отпуская, нажмите P, потом R. Должно получиться так:

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

Вот мы и подошли к самому интересному — анимации. Перейдите на панель Timeline, это та, что справа от панели слоев. Переместите индикатор текущего времени на одну секунду, как показано на скриншоте. Теперь на панели слоев в свойствах Position и Rotation нажмите на иконку секундомера. На панели Timeline у вас появятся два ромбика — это ключевые кадры анимации.

На панели Timeline переместите индикатор, как показано на скриншоте. Теперь создайте ключевой кадр — нажмите на иконку ромбика слева от иконки секундомера свойства Rotation на панели слоев. Поставьте этому свойству значение 45°.

Читайте также:  Газель некст нормальная машина

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

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

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

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

Переместите маркеры рабочей области так, чтобы осталась нужная часть.

Далее повторите все действия с нижним прямоугольником. Единственное отличие — в свойстве Rotation вместо 45° нужно поставить –45°.

Активируйте свойства слоя нижнего прямоугольника — зажмите Shift, затем поочередно P и R для отображения свойств слоев Position и Rotation. На панели Timeline переместите индикатор на первую секунду. Кликните на иконки секундомеров, тем самым создав ключевые кадры для свойств слоев Position и Rotation.

Переместите индикатор и создайте новые ключевые кадры, как на скриншоте, для свойства Rotation задайте значение –45°. Находясь на свойстве Position, переместите прямоугольник к центру двух других прямоугольников.

Вот что должно получиться:

Теперь нам необходимо избавиться от среднего прямоугольника. Можно сделать анимацию прозрачности от 100% до 0%.

Выделите слой среднего прямоугольника и нажмите T, вы увидите свойство Opacity. Создайте ключевые кадры, для первого задайте значение прозрачности 100%, для второго 0%.

Сделаем так чтобы крестик превращался обратно в бургер. Чтобы это реализовать, используем Time-Reverse Keyframes — воспроизведение ключевых кадров в обратном направлении.

Выберите верхний прямоугольник и на панели Timeline выделите ключевые кадры свойств Position и Rotation, нажмите Ctrl + C. Затем переместите индикатор, как показано на скриншоте, и нажмите Ctrl + V. Тем самым вы скопировали ключевые кадры и свойства этого элемента. Но ключевые кадры еще раз продублируют анимацию от бургер-меню к элементу закрытия. Нам нужно ровно наоборот, чтобы элемент закрытия превращался обратно в бургер-меню.

Для этого, не снимая выделения со скопированных ключевых кадров, нажмите правой кнопкой мыши, в контекстном меню выберите Keyframe Assistant — Time-Reverse Keyframes. Наши ключевые кадры развернулись в нужном направлении от элемента закрытия к бургер-меню.

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

Что у вас должно получиться:

Очень неплохо, и если бы мы не были крутыми UI- и моушн-дизайнерами, то мы бы сказали: круто, в продакшн. Но мы так не скажем, потому что умеем замечать детали и знаем, как сделать еще лучше.

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

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

Я выберу три приема которые помогут улучшить анимацию: добавлю разворот на 180°, микроанимацию и Easy Ease. «Сглаживание анимации» (Easy Ease) — это одна из тех особенностей, за которую так любят After Effects.

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

Привяжите все наши прямоугольники к слою Null Object. Сделать это можно двумя способами:

1. Кликните курсором мыши на значке спирали в столбце Parent панели слоев и, удерживая, перетащите на слой Null Object. Так нужно сделать с каждым слоем, который мы хотим привязать.

2. Выбрать в выпадающем списке столбца Parent панели слоев — Null Object.

Выделите слой Null Object, в моем случае слой называется Null1. Выберите свойство Rotation этого слоя. Установите ключевые кадры, как показано на скрине, со значением 0° первого кадра и значением 180° второго кадра.

Продублируйте эти кадры и выберите Time-Reverse Keyframes, как показано на скриншоте.

Посмотрим, что получилось:

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

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

Укажите значение Rotation 53°.

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

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

Читайте также:  2 компонентная акустика для машины

Ключевые кадры перестали быть ромбиками и превратились в значки похожие на песочные часы. Это значит что мы их перевели в режим Easy Ease.

Но перед тем как редактировать графики, продублируйте еще несколько кадров. Эти кадры добавляют микроанимацию на выходе. С ней бургер-иконка смотрится более живо и гармонично. Перейдите на слой Null1 скопируйте ключевой кадр, который находится на десятом кадре второй секунды, и вставьте его на 20-й кадр второй секунды. Значение свойства Rotation укажите 190°. Перейдите на слой нижнего прямоугольника, продублируйте кадр так же, как для слоя Null1, и укажите значение свойства Rotation –45°. Вот так:

Перейдите на слой Null1, скопируйте ключевой кадр, который находится на десятом кадре третьей секунды, и вставьте его на 20-й кадр третьей секунды. Значение свойства Rotation укажите 0°. Перейдите на слой нижнего прямоугольника, продублируйте кадр так же, как для слоя Null1, и укажите значение свойства Rotation 0°. Вот так:

Выделите три ключевых кадра, как показано ниже, и нажмите на иконку графика Easy Ease, он также указан на скрине.

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

Пример настройки графика:

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

График нижнего прямоугольника.

Результат

Давайте посмотрим, что получилось в итоге.

В следующем уроке сделаем небольшую анимацию прелоадера с применением несложных скриптов.

Знание анимации — большой плюс для дизайнера. На курсах Skillbox рассказывают, как анимировать интерфейсы, создавать микровзаимодействия, делать пользовательский опыт «плавным». Вы освоите новые редакторы и приемы, углубите знания во многих областях, повысите свою ценность как специалист.

Источник

Анимируем текст в After Effects: по шаблонам и самостоятельно

В After Effects есть коллекция готовых текстовых эффектов, но анимировать текст можно и вручную. Рассказываем, зачем и как это сделать.

Где пригодится анимация текста

Если вы заинтересованы прогрессивным дизайном в digital и хотите зарабатывать на своих умениях, обратите внимание на курс «Анимация интерфейсов» от Skillbox.

Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикую переводы на хабре.

Дальше — пошаговая инструкция по применению и созданию таких эффектов.

Вот что у вас получится в конце урока:

Создание проекта

Начните с создания проекта и композиции: File — New — New Project. Затем выберите New Composition.

Появится экран настроек: конечно, вы можете задать свои. Frame Rate — это количество кадров в секунду, параметр отвечает за плавность анимации: чем он выше, тем плавнее анимация. Duration — продолжительность анимации.

Текстовый слой

Выберите на панели инструментов Type Tool. Также вы можете использовать горячие клавиши Ctrl+T или кликнуть правой кнопкой мыши по панели слоев и в контекстном меню выбрать пункт New — Text.

Наберите текст, к которому будете применять эффекты.

С помощью инструментов выравнивания расположите текстовый слой по центру.

Текстовые эффекты из коробки

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

Decoder Fade In

Это эффект «перебора букв», вот такой:

Перейдите на панель Effects & Presets и выберите категорию Animation Presets, подкатегорию Animate In и эффект Decoder Fade In.

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

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

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

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

Источник

Создаём анимированный арт из обычной картинки в After Effects

В этом уроке мы возьмём обычную картинку из интернета и превратим её в анимированный арт в программе After Effects.

Автор: Олег Шарабанов

Комментарии: 45

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

извините за спам второй скрин не прикреплялся

Здравствуйте такой вопрос почему когда я пытаюсь кинуть маску либо эффекты при кидании эффектов либо масок 51:28 уже не раз стаким сталкиваюсь и в других ваших работах,объект остается без изменений при этом с работой в 2д хорошо

Читайте также:  Вышивальная лапка для швейной машины

Здравствуйте, причина в том, что у вас включен режим черновика (Fast Draft), выставите Final Quality и всё заработает

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

Добрый день, хороший урок, спасибо)
У меня вопрос, на 37.03 вы говорите,что нужно закрепить ключ на финальном кадре, и просто перетягиваете ползунок, а потом он у вас снова на 1й секунде и вы меняете параменты картинки, и после этого нажимаете Shift и она у вас проигрывается. Я пыталась сделать тоже самое, но я не понимаю как закрепить ключ, потому что после изменение параментов у меня картинка не меняет положения, а стоит на месте.
спасибо!

Здравствуйте, проверьте, чтобы параметр был в режиме анимации (создания ключей, иконка секундомера должна быть активной)

Здравствуйте, вопрос. При попытке выполнить заливку пишет “заливка невозможна: недостаточно исходных пикселов на выбранном слое”. При попытке повторить на другом слое, функция заливки недоступна вообще.

Здравствуйте, скиньте ваш psd, в котором столкнулись с такой проблемой

Здравствуйте. У меня вопрос. Выполнил обводку контура главного персонажа, отстройку маски, после чего создал копию слоя с персонажем (Ctrl + J). Создался слой с силуэтом сплошного белого цвета на “шахматном поле”. Где я потерял цвета исходного персонажа? Почему отображается сплошным белым, а не в исходном цвете, как у Вас в уроке?

Здравствуйте, покажите скриншот окна программы или запишите видео с ее демонстрацией

Здравствуйте и спасибо за ваш труд. Но не могли бы выкладывать видео 1080 и 1440 для скачивания. Очень неудобно повторять процесс, перелистывать между ютубом и АЕ

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

Привет! Спасибо за классный урок! У меня затык на 21мин.30сек.: какую именно команду отдает автор, чтобы слить слой с изменной маской? Заранее благодарю.

Здравствуйте, сочетание Ctrl+Shift+E

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

Сохраняйте проект через File > Dependencies > Collect Files, затем всё полученное собираете в архив и отправляете

Прикольно как-то Deadpool Kills Deadpool #1 (Comics) https://youtu.be/K5-ITGxgwCQ

Спасибо! С удовольствием повторю урок.

Здравствуйте, не нажимает кнопка Fill примерно на 19 минуте.

Покажите скриншот окна программы.

zip сильнее подвержен заражению, чем rar

Спасибо за рекомендацию, приняли к сведению.

Самого проекта нет и шума, регался только из-за него))

Проект решили не добавлять, чтобы большое количество народу сделали урок. Все исходники на месте:

можно было избежать многих телодвижений если бы псд файл вставить в афтер размером слоев краев во весь экран

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

А как связаны навыки работы в пакетах Adobe и знания английского языка?

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

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

Урок очень толковый и своевременный, спасибо!

Но в папке с проектом нет самого проекта! Есть только футажи

Моушн дизайн сейчас набирает обороты, это красиво, это стильно и это реально выглядит завораживающее

меня тоже этот урок сподвиг зарегиться у вас

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

Как всегда супер!) Спасибо.

Как раз вовремя. Тэнкс.

Нерезкое видео, не видны названия инструментов и менюшек в интерфейсах Фотошопа и Афтера.

Видео смотрите в максимальном качестве? В 1440p?

Спасибо Бро. делаю челендж в 50 видосов. Это 2-е. Спасибо за уроки.

Источник

Интересные факты и лайфхаки