ТЕОРИЯ
Введение
В этом уроке вы получите представление о том, что такое веб‑анимация, какие функции она выполняет в дизайне интерфейсов и в каких случаях используется. Вы узнаете, какие два типа анимаций используются на реальных сайтах. Получите ключевые рекомендации, как создавать плавную, легкую и всегда уместную анимацию. Узнаете, какие приемы лучше не использовать в реалистичных анимациях и почему. Мы разберем базовые действия анимации и рассмотрим их на примерах. Разберемся, какие программы необходимо установить для обучения и комфортной работы. Где и как зарегистрироваться, какой тарифный план выбрать. Вы получите два полезных плагина — AEUX и Motion Tool, которые позволяют оптимизировать некоторые ключевые процессы работы в программе Adobe After Effects и значительно облегчают процесс создания анимации, и познакомитесь с программой After Effects.
- Введение в веб-анимацию
- Теория
- Установка программ
- Интерфейс и настройка After Effects
ПРАКТИКА
Анимация появления
В уроке вы изучите самую базовую и популярную анимацию — анимацию появления и свойство Opacity. Этот практический урок построен так, что вы получаете подробную инструкцию, как поэтапно создать анимацию появления. Мы поговорим о том, что такое рендеринг и для чего он нужен. Разберемся с функцией Track Matte и ее первым свойством — Alpha Matte (альфа‑маской). В итоге вы получите основной навык работы со свойствами Opacity, Alpha Matte (альфа-маской) и создадите шот с красивой анимацией появления.
ПРАКТИКА
Сложная сцена появления
Разберемся с комбинацией, которая состоит из двух анимаций: появления (с ней вы уже знакомы) и движения (это новый для вас тип анимации). На последней мы остановимся поподробнее. Для анимации движения вы будете использовать параметр Position, который определяет положение объекта в композиции. Также вы познакомитесь с таким параметром слоя, как Опорная точка (Anchor Point) и научитесь правильно его использовать. В итоге вы анимируете шот и научитесь из разных типов анимаций создавать впечатляющую анимацию.
ПРАКТИКА
Работа с Motion Tools
В уроке вы подробно изучите скрипт Motion Tools. На практике убедитесь в том, насколько это удобный инструмент. На самом деле он значительно ускоряет процесс работы. Вы получите полное представление о том, что такое график скорости, Easing, в чем заключается принцип работы кривых Безье в After Effects и как они влияют на анимацию. В заключение вы подробно разберетесь с тем, как настраивать анимацию с помощью Motion Tools, что значительно оптимизирует вашу работу над ней.
- Общие понятия
- Motion Tools v2.0
ПРАКТИКА
Анимация масштабирования (с применением альфа-маски)
Вы узнаете, как можно показать анимацию появления фотографий. Ключевым свойством, которое вы изучите в этом уроке, является параметр слоя Scale (Масштабирование). С его помощью можно менять размеры объекта. Эта анимация называется анимацией масштабирования (с применением Alpha Matte (альфа-маски)). Мы будем масштабировать саму Alpha Matte (альфа-маску) и изображение внутри нее совместно с уже изученной вами ранее анимацией появления. В результате вы научитесь эффектно анимировать фотографии.
ПРАКТИКА
Анимация "Параллакс"
Вы получите полное понимание того, как применять один из самых популярных эффектов — параллакс. Для его реализации вам понадобится 3 элемента дизайна и уже знакомое вам свойство Position. После создания параллакс-эффекта вы разберетесь, как применять анимацию обратного хода, чтобы она получалась зацикленной. В заключение вы научитесь создавать шоты, которые с помощью эффекта параллакса вызывают ощущение глубины и объема, что производит сильное впечатление на зрителей.
ПРАКТИКА
Сложная сцена с параллаксом, движением и применением маски
В этом уроке вы научитесь создавать сложную (комплексную) анимацию, которая включает в себя анимации, изученные в предыдущих спринтах, а именно: Появление — Opacity, Движение — Position, Масштабирование — Scale, применение Alpha Matte (альфа-маски) и Эффекта параллакс. Новым типом анимации для вас будет появление заголовка в области маски. Вы научитесь создавать сложные сцены с переходами с применением всех указанных типов анимации, что поможет выделить ваши шоты на фоне остальных.
ПРАКТИКА
Адаптивная анимация
Мы рассмотрим понятие адаптивной анимации. Это уже знакомая вам анимация масштабирования, которую вы будете использовать для демонстрации адаптивных версий сайта, когда десктопный макет плавно трансформируется в макет под мобильный телефон. Для ее создания вы будете применять ранее изученные свойства, такие как Движение – Position, Масштабирование – Scale, Исчезание/Появление — Opacity, Анимацию обратного движения – Motion Tools 2/Clone. Владение знаниями о том, как правильно реализовать адаптивную анимацию позволит вам эффектно презентовать свои проекты.
ПРАКТИКА
Анимация вращения
Вы изучите простую анимацию — вращения и свойство объекта Rotation, которое отвечает за поворот слоя вокруг его опорной точки. Мы рассмотрим три параметра Rotation: количество оборотов, значение, на которое хотим повернуть элемент (в градусах), поворот по часовой стрелке/против часовой стрелки. После поэтапного прохождения всех повторяющихся циклов анимации в итоге вы освоите навык работы со свойством Rotation и создадите шот с анимацией вращения, который будет привлекать внимание зрителей.
ПРАКТИКА
Сложная анимация состоящая из всех базовых анимаций
Разберемся с более сложной комбинацией, которая состоит из всех знакомых вам базовых анимаций. В этом уроке мы затронем тему создания эффекта имитации клика по картинке с помощью анимации масштабирования и исчезновения круга (инструмент Ellipse Tool). В результате вы изучите последовательность применения различных анимаций, что позволит вам создавать более сложную, впечатляющую анимацию.
ПРАКТИКА
Работа со сценами
Этот урок является циклом, который состоит из 3-х спринтов. Он посвящен альтернативным переходам между сценами. Сначала мы подробнее остановимся на понятии “сцена” и обсудим, какие бывают переходы между сценами. Вы научитесь применять 3 нестандартных варианта смены сцен: смена маской, смена шторкой и смена слайдом. Для создания перехода “смена маской” разберете и научитесь работать с новым параметром Track Matte – Alpha Inverted Matte или Инверсивная альфа-маска. И узнаете, как импортировать видео в композицию анимации.
ПРАКТИКА
Анимация изменения цвета
В этом уроке вы научитесь работать с анимацией цвета и свойством слоя Color. Простая анимация, которая может применяться для демонстрации ховера кнопок или ссылок. Но мы с вами разберем более интересный вариант, как можно красиво презентовать свой проект, используя анимацию изменения цвета.
ПРАКТИКА
Анимация контура (обрезка)
Вы освоите новый параметр Trim Path, с помощью которого создают очень классные эффекты движения контура, или другими словами можно сказать эффекты обрезки контура. Например, когда хотят показать прелоадер, прогресс-бар в видеоплеере и т.п
ПРАКТИКА
Комплексная анимация
В этом уроке вы снова поработаете с комплексной анимацией, закрепите ранее полученные навыки и создадите анимацию шота с новыми эффектами, используя все те же базовые свойства анимации: появление, движение, маска, масштабирование, переход между сценой 1 (смена маской), переход между сценой 2 (смена шторкой).
ПРАКТИКА
Декоративная анимация текста (глитч)
С этого урока начинается еще один небольшой цикл, состоящий из 3х уроков по декоративной анимации текста. В этом уроке вы изучите, как сделать такой неординарный эффект, как Glitch – эффект “битой” картинки или телевизионных помех. Такой эффект в анимациях выглядит достаточно модно и производит wow-эффект. При этом создается достаточно просто
ПРАКТИКА
Декоративная анимация текста (пропись)
На этом уроке вы научитесь создавать анимацию, которая имитирует прописной текст. Этот прием часто используют для расставления акцентов на сайте и выглядит он достаточно эстетично. Для такой анимации вы будете использовать новый инструмент Pen Tool. Будьте готовы к кропотливой работе и наберитесь терпения. В результате у вас получится красивая анимация, которую можно использовать для презентации своих проектов.
ПРАКТИКА
Креативная анимация текста
В этом уроке вас вновь ждет анимация текста, но более креативная и необычная. Ее интересный эффект включает комбинацию разных анимаций с использованием двух альфа-масок – простой и инверсивной. В результате вы создадите крутой шот, а этот способ сможете применять в своих проектах для эффектных презентаций.
ПРАКТИКА
Комплексная анимация
В этом уроке будем применять типы анимаций, с которыми вы уже знакомы, но некоторые из них мы будем использовать для создания более сложных и нестандартных эффектов. В результате получим сложную, комплексную анимацию, которая состоит из трех сцен с переходами, скроллом и сменой слайдом.
ПРАКТИКА
Анимация с применением Luma Matte
На прошлых уроках мы разбирали с вами параметры Track Matte, и вы уже хорошо представляете принцип действия Alpha Matte и Alpha Inverted Matte. В этом уроке мы изучим два следующих параметра Track Matte: Luma Matte (маска Luma) и Luma Inverted Matte (инверсивная маска Luma) и научимся применять их в своих проектах.
ПРАКТИКА
Анимация с применением Turbulent Displace
Изучим анимацию с применением эффекта искажения фотографии. Turbulent Displace является одним из инструментов параметра Distort. Технически – это легкий сдвиг пикселей, которые помогает создать эффект волны и часто применяется для эффекта на фотографиях.
ПРАКТИКА
Сложная комплексная анимация
Последний обучающий урок, где будем создавать сложную комплексную анимацию, применяя уже изученные ранее виды анимаций и новый – параметр Text и его свойство “Source Text”, позволяющее изменять контент текстового слоя. Самостоятельная практическая часть, где вы придумаете и создадите анимацию для своего шота с нуля, а также несколько интересных и полезных бонусных видео-уроков
ПРАКТИКА
Создание анимации с нуля
Определение стилистики, поиск референсов, создание сценария. Принцип создания идей для сцен и переходов между ними, подготовка исходника, создание анимации 1 сцены, публикация шота в сетях.
ПРАКТИКА
Ведение аккаунта на Dribbble и продвижение
Ведение аккаунта на Dribbble и продвижение. Анимация для презентаций и Behance. Использование анимации из After Effects на сайте.
