Курс «Анимация интерфейсов»

Хотите научиться делать анимацию на профессиональном уровне? Школа веб-дизайна Uprock проводит курс по созданию анимаций для начинающих моушн-дизайнеров, видеомонтажеров и всех, кто желает поменять профессию.

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

На курсе «Анимация интерфейсов»:

1. Программы для работы.
2. Освоение этапов разработки анимации.
3. Работа с After Effects и Motion Tools.
4. Продвижение.
5. Домашние задания с разборами.

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

Теория

Введение в веб‑анимацию

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

• Определение веб‑анимации и ее функции.
• Применение веб‑анимации.
• Минусы креативной анимации.
• Программы для создания веб‑анимации.

Теория

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

• Принципы веб‑анимации.
• Базовые действия анимации.
• Скорость.
• Хореография.

Установка программ

Разберемся, какие программы необходимо установить для обучения и комфортной работы. Где и как зарегистрироваться, какой тарифный план выбрать. Вы получите два полезных плагина — AEUX и Motion Tool, которые позволяют оптимизировать некоторые ключевые процессы работы в программе Adobe After Effects и значительно облегчают процесс создания анимации. Вместе по шагам установим все необходимые программы и скрипты.

Интерфейс и настройка After Effects

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

• Рабочие панели.
• Предварительные настройки.
• Экспорт фрейма.
• Домашнее задание.

Практика

Анимация появления

В уроке вы изучите самую базовую и популярную анимацию — анимацию появления и свойство 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 на сайте.

• Формат
  Самостоятельно с наставником
  Видеоуроки / Консультации
  Обучение в ЛК на сайте автора
• Продолжительность
  4 месяца
• Уровень сложности
  Для новичков
• Когда вы будете учиться
  В любой день в любое время
• Домашние задания
  ЕстьС проверкой
• Сопровождение
  Куратором
• Техническая поддержка
  В рабочее времяЧат в мессенджере
• Перспективы после обучения
  Трудоустройство
• Срок доступа к материалам
  Бессрочный
• Безопасная покупка
  70% от стоимости покупки в первые 2 недели обучения.
• Что можно оплатить дополнительно
  При оплате курса одним платежом, его стоимость снижается до 31 900 рублей. В этом случае ваша экономия составит 8100 рублей.