Бесплатная школа UX/UI-дизайна с наставником

Анимация интерфейсов

Полноценный курс по созданию анимаций для интерфейсов (web/mobile)
Оставить заявку

Сильная методология и гибкий процесс обучения

Начало обучения сразу после покупки с комфортной скоростью
Вам не нужно ждать старта потока. Оплачивайте курс, приступайте к обучению в этот же день и учитесь с комфортной скоростью. Оптимальный вариант — тратить на учёбу 2 часа в день. Если же вы сможете уделять курсу 4–8 часов, то закончите его в 2–4 раза быстрее.
Последовательность и время на адаптацию
Сложность заданий, которые вы делаете, возрастает от самых простых, длительностью до 30 минут, к более сложным и трудоемким. Таким образом вы постепенно вливаетесь в процесс обучения.
Емкие, но информативные видеоуроки
Сначала мы сделали сценарий на несколько сотен страниц, затем озвучили, смонтировали, наполнили графикой и сделали для вас короткие уроки «без воды», которые легко осваиваются и к которым комфортно возвращаться, чтобы что-то вспомнить.

Самая объемная и насыщенная программа

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

Теория
Введение
В этом уроке вы получите представление о том, что такое веб‑анимация, какие функции она выполняет в дизайне интерфейсов и в каких случаях используется. Вы узнаете, какие два типа анимаций используются на реальных сайтах. Получите ключевые рекомендации, как создавать плавную, легкую и всегда уместную анимацию. Узнаете, какие приемы лучше не использовать в реалистичных анимациях и почему. Мы разберем базовые действия анимации и рассмотрим их на примерах. Разберемся, какие программы необходимо установить для обучения и комфортной работы. Где и как зарегистрироваться, какой тарифный план выбрать. Вы получите два полезных плагина — 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 и создадите шот с анимацией вращения, который будет привлекать внимание зрителей.

В результате вы научитесь создавать анимации на профессиональном уровне, как на представленных ниже шотах.

Самая оперативная и качественная обратная связь

Наши кураторы дают самые быстрые и подробные ответы. Есть строгий регламент: вы будете получать минимум 2 видеоразбора в сутки, в каждом ответе куратор отметит ваши ошибки и подскажет, как их исправить.
до 4ч.
время ожидания
ответа от куратора
15 минут
время ожидания ответа от поддержки на вопросы по курсу

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

Рассрочка на 24 месяца — 2 204 ₽
Скидка 55% действует ещё
10
2 204 ₽ / мес
Рассрочка на 24 месяца
Без первого взноса
39 000 ₽ 49 900 ₽
4 408 ₽ / мес
Рассрочка на 12 месяцев
Без первого взноса
Суперскидка 20%
Заполните контактные данные
Ваша заявка принята!
Мы свяжемся с вами в ближайшее время
Ой! Что-то пошло не так при отправке формы

Курсы, которые станут отличным дополнением к «Анимация интерфейсов»

И помогут вам быстрее повысить квалификацию и получить уровень middle+ и выше.
Сайты Pro
Курс по дизайну сайтов. Поможет освоиться в профессии и выйти на первый заработок.
Курс включает:
UX/UI дизайнер: Сайты Pro
Бессрочный доступ к урокам
2 проекта в портфолио
Mobile Pro
Курс по дизайну мобильных приложений. Поможет углубиться в дизайн интерфейсов.
Курс включает:
UX/UI дизайнер: Mobile Pro
Бессрочный доступ к урокам
Проект в портфолио
Анимация интерфейсов
Полноценный курс по созданию анимаций для интерфейсов (web/mobile).
Курс включает:
24 шота в портфолио
Бессрочный доступ к урокам
4 месяца обучения
Создание 3D-иллюстраций
Курс по созданию 3D-иллюстраций и объектов для вашего дизайна.
Курс включает:
13 3D-моделей
Бессрочный доступ к урокам
1,5 месяца обучения
Создание сайтов на Webflow
Полноценный курс по разработке сайтов международного уровня в сервисе Webflow.
Курс включает:
1 проект в портфолио
Бессрочный доступ к урокам
1,5 месяца обучения

Частые вопросы

Какие есть варианты оплаты, есть ли рассрочка?

Вы можете оплатить полную сумму или воспользоваться беспроцентной рассрочкой без первого взноса с возможностью досрочного погашения от наших партнеров: ОТП Банк, Почта Банк, Сбер, Халва и Тинькофф Банк.

Вы рисуете в Figma? Я её не знаю.

Да, мы рисуем проекты в Figma. Это наиболее удобный на сегодняшний день инструмент, который используют большинство студий.

Наши партнеры