Что такое шейповый слой в after effects
Как сделать анимацию для сайта в After Effects: на примере прелоадера
Чтобы закрепить навыки по освоению новой программы, дизайнеру нужна практика. Показываем, как сделать прелоадер в After Effects.
В предыдущем уроке мы рассмотрели базовые возможности After Effects, познакомились с интерфейсом программы и создали прекрасную анимацию иконки меню.
Создадим красивую анимацию прелоадера в After Effects.
Создание проекта
Создайте новую композицию.
Укажите разрешение композиции 1200х800. Продолжительность 10 секунд.
Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикую переводы на хабре.
Создайте новый шейповый слой 1 на панели слоев. Для этого правой кнопкой мыши откройте контекстное меню и выберете пункт New — Shape Layers.
Фигурные слои, для анимации векторной графики
Создание прелоадера
Композиция готова. Переходим к созданию прелоадера или загрузчика, смотря где будет применяться.
Выберите на панели инструментов Ellipse Tool и нарисуйте круг, как показано на скриншоте. Толщину линии выставьте, например, 50 px.
Продублируйте Shape Layer, нажав сочетание клавиш (Ctrl + D), либо выберите в меню пункт Edit — Duplicate.
Отключите видимость верхнего слоя, чтобы вы могли работать с нижним.
На панели Effects & Presets выберите Fill и примените этот эффект к видимому слою.
Выберите цвет — лучше, если он будет близким к фоновому, но при этом контрастным. Например, это может быть тот же цвет, но чуть светлее.
Включите видимость верхнего слоя.
Создайте слой Null Object. В предыдущем уроке мы узнали, что это за слой и зачем он нужен, в этом будем использовать его для гибкого управления шкалой прелоадера. На самом деле, можно было обойтись и без этого слоя, но так удобнее, плюс закрепить материал не помешает.
На панели Effects & Presets выберите Slider Control и перетащите на слой Null Object.
После этого перейдите на слой Shape Layer 2 и в свойствах слоя во вкладке Add выберите Trim Paths. Это «рисующая линия», которая будет эмулировать шкалу загрузки.
Теперь практически все готово для анимации шкалы прелоадера. Осталось установить параметры анимации.
Перейдите на вкладку Trim Paths, зажмите Alt и левой кнопкой мыши нажмите на иконку секундомера напротив End. Появится иконка спирали, нажмите на нее и, не отпуская левую кнопку мыши, перетащите на Slider Control слоя Null Object, как показано на скриншоте.
Теперь, изменяя значения Slider Control, мы управляем видимостью нашей шкалы. Правда, у нас осталась задача правильно анимировать прелоадер и синхронизировать анимацию с цифрами загрузки шкалы в процентах от 0 до 100.
Займемся цифрами, которые будут отображать статус загрузки. Выберите Horizontal Type Tool (Ctrl + T) на панели инструментов и создайте текстовый слой, нажав в любом месте нашей композиции.
Затем в свойствах текстового слоя Text — Source Text нажмите на иконку секундомера с зажатой клавишей Alt. В появившемся поле панели Timeline вставьте следующий код:
beginCount = 0;
stopCount = 100;
beginTime = 0; // start counting at time = 0
countDur = 5; // count for 5 seconds
«» + Math.round(linear(time,beginTime,beginTime + countDur,beginCount,stopCount)) + «%»
Этот код нужен для того, чтобы цифры, отображающие статус загрузки, динамически менялись от 0 до 100%.
Выровняйте текстовый слой по центру композиции, воспользуйтесь для этого панелью Align, как показано на скриншоте.
Теперь давайте синхронизируем загрузку нашей шкалы и цифр.
Для этого необходимо выставить в свойствах эффекта Slider Control слоя Null Object два ключа — начало и конец анимации.
Выставьте маркер на панели Timeline в нулевой кадр и нажмите на иконку секундомера напротив свойства Slider эффекта Slider Control для того, чтобы поставить ключевой кадр. Значение свойства Slider при этом должно быть равно нулю.
Переместите маркер на пятую секунду, установите ключевой кадр, а в свойстве Slider укажите значение 100.
Если вы все сделали правильно, должно получиться вот так:
Дело вкуса, конечно, но я немного скруглил окончания линии, мне кажется, что так шкала выглядит более аккуратно. Сделать это очень просто — в свойствах шейпового слоя выберите Round Cap из выпадающего списка.
Noveo
Adobe After Effects и основы анимации: освоено!
В начале года отдел дизайна Noveo практически полным составом прошел онлайн-курс по Adobe After Effects и основам анимации. Senior Designer и Team Lead отдела дизайна Зарина рассказывает (и показывает), чему мы научились на курсе.
Как и любой курс по инструменту, мы начали с основ, интерфейса программы и основных принципов анимации.
Принципы анимации
Всего их 12, сформулировали их аниматоры студии «Дисней». Не все эти принципы могут понадобиться в анимации интерфейсов или иллюстраций, но многие из них все еще актуальны, и их использование может значительно улучшить создаваемый ролик или анимацию.
Один из главных принципов — смягчение начала и завершения движения (Spacing). При движении большинству объектов в нашем мире нужно время, чтобы набрать скорость и остановиться, поэтому движение лучше выглядит, когда оно не равномерное, а ускоряется в начале и замедляется в конце.
Принцип сжатия и растяжения создает иллюзию веса и эластичности формы. Например, прыгающий мяч будет сжиматься, ударяясь о землю.
Принцип дуги говорит о том, что в природе все объекты движутся по параболическим траекториям, поэтому нужно использовать этот принцип для достижения эффекта естественности движений.
Первым боевым заданием была анимация мячика. Простое на первый взгляд задание — заанимировать падение резинового мяча — обернулось серьезным испытанием нервов и наблюдательности. Чтобы мяч падал, “как в жизни”, нужно точно знать, как меняется его скорость, когда он ударяется о поверхность и отскакивает. Пришлось проверить графики затухающих колебаний и позапускать физический мячик вживую.
Шейповая анимация
Следующей была тема шейповых слоев. Несмотря на возможность создавать шейпы в After Effects, иллюстраторы предпочитают делать это в более гибких и мощных инструментах, таких как Adobe Illustrator или Adobe Photoshop. Импорт из этих программ позволяет сохранить некоторые свойства шейповых слоев (градиенты и прозрачность не сохраняются) и информацию о точках (их координаты) и продолжить работать с ними в After Effects, добавляя анимацию. Например, изменить форму векторного слоя можно, передвинув точки, а After Effects достроит плавное изменение формы в промежуточных кадрах. Для закрепления навыков мы взяли несложную иллюстрацию, подготовили в Adobe Illustrator слои, необходимые для анимации, и после экспорта добавили движения некоторым объектам:
В результате статичная картинка ожила.
Анимация текста и кинетическая типографика
Еще одна интересная и очень востребованная тема курса — анимация текста. Для этого в программе After Effects есть много мощных инструментов, таких как анимация линии, к которой привязан текст, различные эффекты появления и исчезания знаков, слов и строк, рандомизация букв, 3D-эффекты и прочие. Все эти эффекты могут быть скомпонованы между собой, что дает практически бесконечное число манипуляций с текстом. Но чтобы создать крутой и интересный ролик, одних инструментов недостаточно. Тут нужно и придумать идею, и создать уравновешенную композицию, и выстроить кадры так, чтобы удержать внимание зрителя.
Отдельная тема — 3D-текст. Сейчас этот эффект стал очень популярен, и его можно увидеть во многих рекламных роликах и анимированных постерах. Тут на помощь приходит 3D-редактор Cinema 4D, в котором создается форма и натягивается текстура. Сама анимация выполняется в специальном плагине для After Effects.
Создание титров
Тема создания титров — это тоже часть большого раздела по анимации текстов. С этой задачей нам приходится сталкиваться регулярно, когда мы делаем видеовакансии и ролики про нашу компанию. В основном это титры вступления и low third, те самые, в которых пишут имя и фамилию. В создании титров активно применяются принципы анимации студии «Дисней», о которых упоминалось выше. А еще нужно медитативно перебирать разные варианты значений (ну или выставить их сразу, если опыта хватает), чтобы добиться нужной плавности появления, движения и исчезания элементов.
Анимация при помощи Puppet position pin tool
Часто, чтобы заанимировать несложные движения персонажей, применяется анимация при помощи Puppet pin tool. В ключевых точках расставляются пины, которые, как булавки, фиксируют части изображения. И передвигая эти булавки, можно заставить двигаться фигуру персонажа. Манипулировать этими пинами не всегда легкая задача, поэтому их привязывают к Null objects и анимируют параметры Position и Rotation нулевого объекта. Чтобы заанимировать, например, движение руки персонажа, необходимо сначала привязать части руки друг к другу и саму руку к телу. Тогда при повороте руки в локте остальная часть руки с кистью повернется следом. Кроме движения персонажей этот прием можно применять для оживления листвы, кустов или деревьев.
Анимация при помощи плагина Joysticks’n’Sliders
Для ускорения анимации мимики персонажа часто используют платные плагины, такие как Joysticks’n’Sliders. Чтобы с его помощью создать движение лица и эмоции персонажа, необходимо сначала зафиксировать нулевое положение всех деталей лица. Например, формы и положения глаз, рта, бровей и волос. Следующие шаги — это прописывание крайних состояний анимации лица. И тут нужно изменить положение и форму деталей персонажа так, чтобы они соответствовали этим крайним состояниям. Например, при повороте головы нос нужно сдвинуть и изменить его форму, чтобы он был в профиль, сдвинуть глаза и брови, изменить форму прически. И проделать эту процедуру для всех ключевых кадров анимации. Когда крайние положения для всех элементов прописаны, можно запускать анализ в плагине. Проанализировав все данные, плагин создает контроллер, так называемый Joystick, привязанный к элементам лица. При перемещении этого джойстика плагин анализирует возможные промежуточные положения элементов, и становится возможным записать плавную анимацию любых перемещений в пределах наших крайних положений.
Трекинг камеры
Трекинг камеры — это прием, который активно используют в рекламных роликах и спецэффектах. Суть в том, чтобы вписать искусственно созданную анимацию в реально отснятый на камеру ролик. Для этого нужно отследить движение одной или нескольких точек на исходном видео. Пользователь находит наиболее контрастные места на видео, устанавливает туда маркер, и программа отслеживает перемещение этого набора пикселей и строит путь его перемещения. Впоследствии по этому пути можно пустить любой объект, такой как выноска с текстом или титры.
Кроме того, если отслеживание сделано по 4 точкам, можно вписать другой заанимированный объект в границы этих точек. Именно таким способом мы сделали к 1 апреля шуточное видео про дорожные знаки, которые немного сошли с ума.
Паралакс
Паралакс — это направление в спецэффектах, которое недавно вошло в моду. Его используют в рекламе и web-дизайне, но особенно оно востребовано в рекламе картинных галерей и всевозможных выставок. Ведь с его помощью можно оживить знакомые произведения искусства и привлечь таким образом новых зрителей. Чтобы добиться эффекта паралакса, нужно разделить объекты выбранного изображения, вынести их на отдельные слои. Затем нужно дорисовать недостающие части изображения, ведь там, где мы вырезали объект из фона, образовалась дыра, она должна быть заполнена (обычно это делают методом копирования соседних участков). Затем изображению придают плановость, разнося объекты на разное расстояние по оси Z (в глубину). Последнее действие — оживление, то есть создание анимации отдельных объектов. При этом можно добавить движение камеры сквозь пространство картины. Это создает иллюзию погружения в мир, созданный художником.
Анимация интерфейсов
Эта тема нас интересовала, пожалуй, больше всех, так как с ней мы сталкиваемся в процессе своей профессиональной деятельности. Чтобы создавать презентации возможных анимаций интерфейсов, прежде всего надо быть знакомым с концепцией Google Material design, ведь там подробно описано, как должны вести себя элементы интерфейсов. Средствами Adobe After Effects можно показать, какие микровзаимодействия, переходы и анимации могут быть применены в приложении, как это повлияет на общее восприятие приложения. Чтобы оживить приложение, нужно в первую очередь подготовить файл с элементами интерфейса в Adobe Illustrator, затем импортировать его со всеми необходимыми слоями в программу After Effect и там настроить переходы и анимации средствами программы. Обычно анимируются такие параметры, как opacity, position и scale. С их помощью можно показать, как разворачиваются и открываются элементы, как приложение реагирует на взаимодействие с пользователем, как происходит переход между экранами и многое другое.
Еще одним заданием было вписать заанимированный интерфейс в фото или видео. Для этого нам опять пришлось обратиться к трекингу, цветокоррекции и инструментам деформации.
Итак, на этом суперинтересном и полезном курсе мы освоили множество мощных инструментов, узнали принципы моушен-графики и анимации, выполнили много сложных, но интересных заданий и уже вовсю применяем полученные знания в нашей повседневной работе!
Анимации выполнены дизайнерами Noveo Зариной и Людмилой.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Шейпы 2 в After Effects
В этом уроке мы продолжим изучать шейпы и, при помощи них, создадим потрясающую шейповую анимацию. Заставку, которую мы получим в результате, с легкосьтю можно использовать для своих видео.
По заданным фильтрам ничего не найдено
Попробуйте изменить критерий поиска, или сбросить фильтры.
Комментарии 81
Добрый день, подскажите. Авторские права на данное аудио кто имеет?
а как аудио скачать?
Под уроком есть ссылка «Скачать проект»
как скачать проект?
По ссылке выше, под уроком.
Урок супер! Идеальной решение для какой-нибудь заставки!
Здравствуйте всем пользователям сайта, я бы хотел задать вам не большой вопрос, не совсем по теме, у меня вот след. ситуация: Вместо звездочки, у меня рисует какой-то 4-ох угольник. Подскажите что делать, заранее спасибо.
В уроке 10:30 в этом временном отрезке звезда рисуется с наклонными линиями а не белым фоном,что я делаю не так,подскажите пожалуйста,Спасибо!
добавь fill на свою звезду:
Здравствуйте! Помогите пожалуйста с выполнением урока: у меня не получается нарисовать звезду с белым фоном,а она рисуется с наклонными линиями как в предыдущем шаге когда применяли эффект venetian Blinds.За раннее Спасибо!
Укажите соответствующий момент в уроке и приложите скриншот, пожалуйста
где скачать музыку
А есть для версии цс 4? А то хочу скачать проект, а он не открывается 🙁
Спасибо! Как не странно,но у меня все получилось! Все что вы делаете,все на высшем уровне! У вас лучшие уроки. Молодцы!
Здравствуйте! Почему у меня исчезновение начинается не с центра? Как это исправить? Заранее спасибо!
Переместите Iris Center в центр фигуры
спасибо большое, но надо как-то делать желательно без привязки к кадрам, а то сначала кадр 6 потом 13. хотя вы и объяснили, что все дело в аудио, но по мне так лучш потом подогнать по таймлайну
Здравствуйте, Артём. Возникла проблема. При нажатии на кнопку Fit to 100% происходит вот, что. Была ли у вас похожая проблема и знаете ли вы как её решать?Заранее спасибо.
можете выслать именно тот звук, который был в конечном видео?
В файлах к уроку можно скачать нужный звук.
Здравствуйте, может подскажете, где можно обзавестись набором звуков, подобных использованным в проекте? Спасибо. 😉
Подскажите пожалуйста, когда в magnification ratio popup ставишь fit или fit up to 100% ну и вобще меньше 100% если ставишь, то в ефекте iris wipe изменения значения outer radius не отабражаются да и вобще непонятно что отображается, а на 100% нормально, почему?
Пришли скрин, чтобы было понятней о чем речь.
ребята, когда делаю шейп (рисую прямоугольник) как задать ему точные параметры? чтобы не на глаз рисовать, а ввести ширину и длину его?
ребята, расскажите, реально ли вывести такую заставку или что угодно другое с прозрачным фоном, чтобы потом наложить на видео в Премьере, например?
Здравствуйте Артем! Вы гений:) Не именно по этому уроку, а вообще, так сказать, МАСТЕР 🙂 С чего вы начинали, и откуда черпали знания?
P.s. Ответ можно в личку:)
Спасибо! Все началось с того, что я просто захотел научиться создавать киношные спецэффекты. Учился, в основном, по западным урокам и учебникам, а также часами практиковался в различных программах.
А откуда вы берете звук? С интернета или сами как-то?
Но, программу и всё заморочки запомнить невозможно, по крайней мере, с одного тыка.
Была и есть классная программа Флеш, там такие вещи в разы быстрее делать, на мой взгляд.
Переход по внешней ссылке
VideoSmile не несёт ответственности за безопасность за пределами нашего сообщества.
Будьте осторожны и внимательны.
1″ > Вы можете выбрать до <
Создать опрос
Название опроса
Ответ <<(index + 1)>> Удалить ответ
Сортировка:
Опрос
По вашему запросу ничего не найдено
Попробуйте изменить критерий поиска, или сбросить фильтры.
Создаём анимированный путь в After Effects
Здравствуйте. И для начала импортируйте в панель Project изображение карты, по которой желаете проложить путь.
Шаг 2.
Теперь создадим новую композицию. Для этого выполните команду Composition => New Composition, или нажмите сочетание клавиш Ctrl+N.
Перед Вами появится окно с настройками новой композиции. Измените настройки «под себя» и нажмите ОК.
Шаг 3.
Кликните по файлу с картой на панели Project и, удерживая кнопку мыши, перенесите карту на панель Timeline. Карта перенесётся туда отдельным слоем.
Шаг 4.
Создайте новую фигуру. Для этого выполните команду Layer => New => Shape Layer.
Слой с фигурой появился на панели Timeline (пока этот слой пуст).
Шаг 5.
Изменим настройки нового слоя с фигурой. Обратите внимание, что над панелью Composition появилось несколько новых настроек. Их мы и будем менять.
Для начала кликните по надписи Fill (Заливка) и в появившемся окошке выберите пункт None (Без заливки).
Теперь кликните по параметру Stroke (Обводка). В появившемся окне выберите пункт Solid (Сплошная).
Кликните по прямоугольнику справа от надписи Stroke и выберите красный (тёмно-красный) цвет.
Измените толщину обводки на 12 px.
Всё, с настройками мы разобрались.
Шаг 6.
Выберите инструмент Pen Tool
. Убедитесь что в панели Timeline выбран слой с фигурой. Далее перейдите к панели Composition и кликните мышью в том месте, где должен начаться Ваш путь.
Далее кликните мышью в следующем месте, где должен пройти Ваш путь. Между точками появится красная прямая линия.
Таким образом Вы можете проставить сколь угодно много точек по всему Земному шару (я ограничился тремя).
Итак, путь нарисован. Давайте теперь отредактируем его.
Шаг 7.
Кликните и удерживайте кнопку мыши на инструменте Pen Tool в палитре Tools, пока не появится выпадающее меню. В нём выберите инструмент Convert Vertex Tool
Кликните по любой из точек, которые мы проставляли в предыдущем пункте. По бокам от точки появятся дополнительные маркеры. Перетаскивая эти маркеры Вы можете управлять кривизной прямых, соединяющих точки. С первого раза может не получится, но поупражнявшись некоторое время Вы с лёгкостью проделаете это задание.
Вот что у меня получилось в итоге.
Шаг 8.
Выберите слой с фигурой на панели Timeline. Кликните по серому треугольнику слева от имени слоя, чтобы раскрыть его свойства. Напротив группы свойств Contents кликните по кнопке Add (Добавить) и в выплывающем списке выберите пункт Trim Paths.
Добавится новое свойство Trim Paths. Раскройте его.
Смысл параметров Start, End и Offset я объяснять не буду. Просто поиграйтесь с их значениями и Вы сами всё поймёте.
Шаг 9.
Добавим анимации нашему пути. Для этого переместите индикатор текущего времени в начальную позицию. Анимируйте параметр End, кликнув по изображению секундомера слева от его имени. Измените значение параметра End в начальной точке на 0.
В начальной позиции появится ключевой кадр.
Шаг 10.
Переместите индикатор текущего времени в конец временной шкалы и измените значение параметра End на 100. Появится новый ключевой кадр. Теперь наш путь прорисовывается с течением времени.
Шаг 11.
С анимацией мы закончили. Теперь давайте изменим внешний вид линий. У слоя с фигурой выберите группу свойств Contents, в ней группу Shape 1, далее раскройте группу Stroke 1. Здесь выберите параметр Dashes (Штрихи) и напротив него нажмите на кнопку «плюс».
В итоге линии из сплошных превратились в пунктирные. При помощи параметра Dash отредактируйте длину штриха.
Шаг 12.
В заключении измените режим наложения на панели Timeline с Normal на Multiply. Делается это при помощи меню Mode.
Если меню Mode не отображается кликните по кнопке Toggle Switches/ Modes в нижней части панели Timeline.
На этом всё. Надеюсь у Вас всё получилось. До встречи в следующих уроках и курсах After Effects!
По заданным фильтрам ничего не найдено
Попробуйте изменить критерий поиска, или сбросить фильтры.
Комментарии 42
Благодарю, Артем Лукьянов
все четко! Спасипа! сделала пару варинтов дороги в шк ) думаю и до кафешки так сделать
Добрый день! А как сделать так, чтобы карта из начальной точки увеличилась и двигалась вместе с нашей линией до ее конца?
Можете перевести композицию в 3D, создать камеру и анимировать её соответствующим образом
Подскажите пожалуйста, как изменить начальный маркер с которого начинается путь. Допустим у меня сложная замкнутая фигура, состоящая из нескольких ломанных линий и маркеров. я хочу сделать из нее путь. Путь начинается с определенного маркера, а мне надо, чтобы он начинался с другой точки.
А как в Time Line сделать так что б в Grapth Editor была возможность замедлить линию в целом + чтоб она замедлялась перед определенными пунктами прибытия?
Можно ли привязать объект (например, маркер карты) к параметру trim path?
Вроде этот параметр на процентах, так что, скорее всего, нет.
Добрый день, уважаемые.
Есть вопрос: как сделать пунктирную линию, чтобы у каждого пунктира на конце была стрелочка? Такие рисуют когда нужно показать направление движения вдоль дороги.
А можно ли, к этой линии, в дальнейшем, прикрепить какой-нибудь объект, например, автомобиль, самолет, пароход и т. п.как-будто это они двигаются по данному маршруту. Спасибо. Ответьте, пожалуйста.
Подскажите пожалуйста,что я не так делаю.Не появляется ключевой кадор(шаг 9). Сколько не побывала ромбик(как у вас на картинке) не ставиться.
Опишите подробнее, пожалуйста, где и что именно не получается
траектория движения шейпа в after effects исчезает, а не отображается постоянно, как исправить?
спасибо большое только сегодня начил сделал уже две задани))
Каждый раз нужно выделять шейповый слой на таймлайне
Не могу сохранить в PDF, в чём дело?
Из AE нельзя получить файл формата PDF
Спасибо! Классный урок!
Спасибо!Отличный урок и очень нужный!
просмотрел много уроков в формате видео, потратил уйму времени и не смог анимировать путь, а по этой статье через 5 минут достиг желаемого.
Спасибо огромное я потом догадалась. Всё получилось просто здорово. Вы молодцы.
подскажите пожалуйста, что такое индикатор текущего времени и куда мне его надо переместить. Зациклилась на шаге 9 и никак.
Переход по внешней ссылке
VideoSmile не несёт ответственности за безопасность за пределами нашего сообщества.
Будьте осторожны и внимательны.
1″ > Вы можете выбрать до <
Создать опрос
Название опроса
Ответ <<(index + 1)>> Удалить ответ
Сортировка:
Опрос
По вашему запросу ничего не найдено
Попробуйте изменить критерий поиска, или сбросить фильтры.