Курс UI анимации: Как “оживить” интерфейсы в After Effects

Что вы сможете после курса

• Разбивать векторную иконку на слои и оживлять её линию через Stroke, Mask и Trim Paths
• Делать прелоадер под длительность операции: спиннер, скелетон или процентный индикатор
• Писать анимацию на expression в After Effects, например эффекты bounce и overshot
• Собирать мобильный прототип в Principle: шапку-компонент, карточки, открытое меню и переход в карточку
• Привязывать анимацию объектов к скроллу через драйверы в Principle
• Собрать посадочную страницу в Webflow с анимациями загрузки, прокрутки и наведения и опубликовать её по ссылке

Кому подойдёт курс

Курс не учит программированию: код в After Effects показан в виде expression, а JavaScript и CSS-анимация в программе не разбираются.

Как проходит обучение

• Домашние задания идут в один проект — Макеты и референсы, которые вы анимируете по ходу курса, складываются в дипломный шоурил.
• Путь от макета до прототипа через четыре инструмента: Photoshop, After Effects, Principle и Webflow — Видно, как один макет переходит от статичного вида к интерактивному и на каком шаге нужен каждый инструмент.
• Инструменты сравниваются по задаче, сложности реализации и точности проработки — Проще выбрать программу под конкретную анимацию, а не делать всё в одной.
• Разбор удачных и перегруженных примеров анимации — Видно, какие решения помогают пользователю, а какие отвлекают от сути.
• Домашние задания по темам складываются в дипломный шоурил из собственных анимаций — К концу курса остаётся готовая работа для портфолио.

Что понадобится

• Adobe After Effects, Photoshop и Illustrator
• Principle: прототипы открываются на Mac, iPhone или iPad
• Webflow: сайт и прототип открываются по ссылке в браузере

Почему самому обычно не выходит

Анимация в интерфейсе решает конкретные задачи: показывает структуру приложения, связывает элементы и помогает пользователю ориентироваться. Без неё экран появляется без причины, а окно, свернувшееся в трей, просто исчезает.

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

Что изменится

Как устроен путь

1. Макет в Photoshop PSD-макет с таймлайном и ключевыми кадрами. Слои и группы называются понятно, чтобы их было легко анимировать.
2. Анимация в After Effects Ключевые кадры, маски, expression, Trim Paths и экспорт в GIF или видео.
3. Прототип в Principle Экраны связываются анимационными состояниями и драйверами по скроллу, после чего прототип проверяется на устройстве.
4. Сайт в Webflow Макет собирается по секциям и контейнерам, добавляются анимации загрузки, прокрутки и наведения, сайт публикуется по ссылке.

Программа курса

26 уроков · 10 модулей · 8 часов 58 минут видео · Практика в After Effects, Principle и Webflow; домашние задания присылаются на проверку.

• Поймёте, где применяется моушн-дизайн и какими технологиями он делается 2 урока

  Обзор: телеэфир, реклама, 3D-мэппинг, стоп-моушен и покадровая анимация, а также анимация в интерфейсах. Вводный урок задаёт рамку курса, домашнее задание: свой прелоадер в PSD.

  • Моушн-дизайн: области применения и технологии33:31

    Обзор моушн-дизайна: откуда он пошёл, где применяется в рекламе, на телеэфире, в интерфейсах и 3D-мэппинге, и какие технологии анимации используются. Урок показывает стоп-моушен, покадровую и шейповую анимацию, а также основы таймлайна и ключевых кадров на примере прелоадера в Photoshop.

  • Домашнее задание: анимация прелоадера1:16

    Самостоятельное задание: сделать собственный прелоадер по PSD-файлу из модуля, меняя размер, прозрачность и координаты элементов. Результат сохраняется в виде GIF-файлов.

• Научитесь переносить 12 принципов анимации Диснея в интерфейсы 2 урока

  Сжатие и растяжение, упреждение, сквозное движение, захлёст, расчёт времени и другие принципы, разобранные на примерах UI. Домашнее задание: сценарий шоу-рила по раскадровке.

  • Принципы анимации Диснея для интерфейсов40:02

    Урок разбирает 12 принципов анимации, сформированных аниматорами студии Walt Disney, и показывает, как они проявляются в движении и в интерфейсах. Среди них сжатие и растяжение, упреждение, сценичность, сквозное движение, захлёст, медленный вход и выход, вторичное действие, расчёт времени и преувеличение.

  • Домашнее задание: сценарий шоу-рила1:34

    Домашнее задание: составить сценарий шоу-рила по раскадровке и описанию задачи.

• Научитесь выбирать, какие элементы интерфейса стоит анимировать 4 урока

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

  • Зачем нужна анимация в интерфейсах15:25

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

  • Interface animation12:01

    Урок разбирает, какие элементы интерфейса можно анимировать: кнопки и ховер, ответ на нажатие, формы ввода, иконку бургер, прелоадеры, прогресс-бары и видеофоны. Также кратко рассказано о WebGL, технологии интерактивной 3D-графики в браузере.

  • Примеры удачной и неудачной анимации10:59

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

  • Домашние задания и шоурил1:53

    Домашнее задание: собрать макеты и подобрать референсы по анимации, которые в течение курса будут анимироваться и затем войдут в дипломный шоурил. Также нужно установить Illustrator, Photoshop, Premiere и After Effects к следующему занятию.

• Освоите After Effects: слои, ключевые кадры, маски и экспорт 3 урока

  Интерфейс программы, композиции и слои, родительские связи, Anchor Point, null object и прекомпозиция. Затем Easy Ease, Alpha и Luma Matte, adjustment layer; в домашнем задании Scale, Rotation и Position.

  • Возможности After Effects44:34

    Урок знакомит с интерфейсом After Effects и базовыми понятиями: композиция, слои, ключевые кадры, Anchor Point, null object и прекомпозиция. На примере трёх объектов показано создание простой анимации: перемещение, масштаб и прозрачность.

  • Ключевые кадры и маски26:00

    Урок показывает, как сглаживать движение через ключевые кадры и график скорости (Easy Ease), работать с альфа- и люма-масками, применять adjustment layer и управлять временем композиции.

  • Домашнее задание по анимации0:54

    Домашнее задание: придумать анимацию для иллюстраций из присланного файла с кривыми, используя Scale, Rotation и Position. Готовые работы отправляются на проверку.

• Сделаете анимированную иконку от векторного файла до вывода для сайта 3 урока

  Подготовка SVG-иконки, разбивка на слои, Stroke, Trim Paths и маски, отзеркаливание и вставка в макет. Выводы для сайта: GIF, спрайт или код. Домашнее задание: три иконки только через Stroke.

  • Инструменты для анимации иконок35:51

    Урок показывает подготовку векторной иконки к анимации: разбивку на отдельные слои, маски и Trim Paths для линии, а также тайминг появления и исчезновения элементов в After Effects. Иконки берутся в форматах SVG и EPS или рисуются в Illustrator.

  • Анимация иконки41:43

    Урок разбирает анимацию иконок рулетки и бикини: рассинхронное движение, отзеркаливание симметричной части, вставку иконки в PSD-макет в режиме Multiply и форматы вывода для сайта: GIF, спрайт и код.

  • Домашнее задание: анимация иконок0:54

    Домашнее задание: анимировать три иконки только через параметр Stroke с использованием Position и Rotation; Scale и Opacity в задании не применяются. Работы отправляются на проверку.

• Подберёте прелоадер под длительность операции и напишете его анимацию 2 урока

  Спиннер, скелетон и процентный индикатор и правило выбора между ними. Затем expression с bounce и overshot и прелоадер из эллипса и трёх кружков. Домашнее задание: четыре прелоадера под макеты сайтов.

  • Прелоадеры: виды и применение9:52

    Урок объясняет назначение прелоадеров: виды индикаторов прогресса, скелетоны и правило выбора между спиннером, скелетоном и процентным индикатором в зависимости от длительности операции. Скелетон или бесконечный спиннер подходят для операций 2–10 секунд, процентный индикатор для действий дольше 10 секунд.

  • Expression26:03

    Урок знакомит с expression в After Effects: короткий код задаёт движение объекта вместо ручной расстановки кадров. На основе движений bounce и overshot (отскок и плавное падение) собирается прелоадер из эллипса с обрезкой пути и трёх кружков.

• Будете анимировать интерфейс по гайдлайну Material Design 1 урок

  Принципы Material Design: ось Z, фазы ускорения и замедления, иерархия слоёв и тайминг. Домашнее задание не ограничено по объёму, но анимация должна соответствовать гайдлайну.

  • Принципы анимации по Material Design18:50

    Урок вводит принципы Material Design для анимации интерфейсов: зачем нужна дизайн-система, как ведут себя материалы и какие свойства делают анимацию понятной и уместной. Разбираются фазы ускорения и замедления, роль оси Z и критерии хорошей анимации.

• Соберёте мобильный прототип в Principle с переходами и скроллом 5 уроков

  Сравнение инструментов, артборды и компоненты, анимационные состояния и переходы, драйверы по скроллу. Финал: экспорт в видео, GIF или приложение для Mac и проверка на iPhone.

  • Текущие инструменты18:15

    Урок сравнивает инструменты для анимации интерфейсов (анимационные редакторы, интерактивные прототипы и прототипы на коде) и объясняет выбор по задаче, сложности реализации и точности проработки. Знакомит с интерфейсом Principle: артборды, панели слоёв и параметров.

  • Principle. Начало работы15:45

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

  • Создание анимации17:40

    Урок показывает, как в Principle связать экраны анимационными состояниями и переходами: анимируются меню, бургер, скролл контента и открытие карточки. Переход открытия карточки выполнен через дублированный артборд с одинаковыми именами слоёв.

  • Драйверы12:38

    Урок вводит драйверы в Principle: параметры объектов привязываются к скроллу, и элементы меняют радиус, угол, масштаб и прозрачность без переходов между экранами. Разобран пример квадрата, который по скроллу превращается в круг.

  • Практика. Анимация объектов по скроллу8:50

    Урок показывает экспорт прототипа из Principle в видео, GIF и приложение для Mac, а также проверку на iPhone. Даются советы по именованию слоёв и выбору инструмента; задание: анимировать элементы сервиса аналитики по исходному PSD.

• Соберёте посадочную страницу в Webflow и опубликуете её по ссылке 3 урока

  Знакомство с Webflow: секции, контейнеры, отступы, адаптивные варианты. Перенос макета из Photoshop и анимации загрузки, прокрутки и наведения, публикация на домен Webflow.

  • Webflow: визуальная сборка сайтов и прототипов28:29

    Урок знакомит с Webflow, визуальным редактором, который создаёт сайты и анимированные прототипы: его возможности, ограничения и место в работе моушн-дизайнера. Webflow работает как CMS и содержит встроенные изинги, эффекты наведения и анимацию при скролле.

  • Прототип посадочной страницы в Webflow1:24:06

    Урок показывает перенос макета посадочной страницы из Photoshop в Webflow по секциям и контейнерам, а затем базовые анимации загрузки, прокрутки и наведения. Результат — интерактивный прототип, который публикуется на домене Webflow.

  • Оживите страницу из Webflow и получите работающий прототип в браузере 1 урок

    Задание: улучшить анимацию страницы из урока, например оживить персонажей через After Effects и вставить их в Webflow. Результат работает в браузере, а не является набором роликов.

    • Домашнее задание: анимация страницы1:50

      Домашнее задание: предложить свой вариант анимации страницы из Webflow и улучшить её, например оживив персонажей. Можно сочетать Webflow с After Effects; результатом должен стать работающий прототип в браузере.

• Настроите рабочие файлы и подборки референсов по проектам 1 урок

  Приёмы организации: отключение отвлекающих факторов, структура папок проекта, collect files и подборки референсов. Также требования к дипломной работе: презентация приложения или шоурил.

  • Организация рабочих файлов и референсов29:32

    Рабочие приёмы моушн-дизайнера: как структурировать папки проекта (PSD, AI, Render, out), собирать референсы в подборки и перед переносом использовать команду collect files. Также разобраны требования к дипломной работе: презентация приложения или шоурил.

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

Об этом курсе

• Нужно ли уметь программировать?

  Курс не учит программированию. Код в After Effects показан в виде expression, а JavaScript и CSS-анимация в карточках не разбираются; CSS-анимация упомянута как следующий шаг после урока в Webflow.

• Кому подойдёт курс, если опыта в анимации мало?

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

• Чем курс отличается от общего курса по анимации?

  Он сосредоточен на интерфейсах: иконки, прелоадеры, микровзаимодействия, видеофоны, прогресс-бары и переходы между экранами. Основа теории — 12 принципов анимации, разобранные применительно к UI.

• Что будет с домашними заданиями?

  Они накапливаются в дипломный шоурил: анимируются макеты, которые участник делает сам, и референсы по теме курса. Итог — готовый шоурил для портфолио.

• Какие программы нужны?

  В курсе используются After Effects, Photoshop, Illustrator, Principle и Webflow. Для практики понадобится установить Illustrator, Photoshop, Premiere и After Effects.

• Будет ли 3D-анимация?

  Отдельной практики 3D нет. 3D-переключатель в After Effects показан кратко, а Cinema 4D, Octane Render и WebGL упомянуты только как инструменты и технологии.

Доступ и материалы

• Когда и как я получу доступ к курсу?

  Сразу после оплаты, в ту же секунду и автоматически. Ждать подтверждения не нужно. Доступ приходит двумя путями сразу. Первый: на почту, указанную при оформлении заказа, приходит письмо со ссылкой на материалы. Второй: та же ссылка появляется в вашем аккаунте на сайте, в разделе «Загрузки», и остаётся там постоянно.

• Где хранятся материалы курса?

  Все видео и дополнительные файлы лежат в облачном хранилище. Ссылка на него — в вашем аккаунте на сайте, раздел «Загрузки», и в письме, которое пришло после оплаты. Аккаунт здесь — не формальность, а способ доставки: курс остаётся в нём навсегда. Даже если письмо потерялось или вы вспомнили о покупке через год, ссылка будет на месте.

• Можно ли скачать материалы или только смотреть онлайн?

  Скачивать можно и нужно. Мы рекомендуем сохранить видео на компьютер и смотреть оттуда. Причина простая: облачное хранилище не рассчитано на просмотр видео. Иногда оно позволяет включить ролик прямо в браузере, но качество при этом заметно хуже исходного. На своём компьютере вы увидите курс таким, каким его записывали.

• Как долго действует доступ?

  Бессрочно. Курс остаётся вашим навсегда, возвращаться к нему можно сколько угодно раз. Если через год или два ссылка вдруг перестанет открываться по техническим причинам — напишите на info@siluette.com.ua, мы её восстановим.

• Письмо с доступом не пришло — что делать?

  Прежде всего: доступ у вас есть в любом случае. Войдите на сайт и откройте раздел «Загрузки» — ссылка на курс уже там, независимо от того, дошло письмо или нет. Чаще всего письмо теряется из-за опечатки в адресе при оформлении заказа. Ещё стоит заглянуть в папку «Спам». Не разбирается — не тратьте время: напишите на info@siluette.com.ua или в чат в правом нижнем углу сайта, мы поможем.

• На каких устройствах смотреть курс?

  Лучше всего на компьютере или ноутбуке: скачайте видео и откройте любым привычным плеером. Понадобятся установленные видеокодеки — на большинстве компьютеров они уже есть. Скачать курс можно на сколько угодно устройств. А вот телефон мы не советуем, и по двум причинам. На маленьком экране плохо видно детали, особенно если в уроке показывают интерфейс программы. И на телефонах часто нет кодеков для форматов, в которых записаны видео.

Оплата и возврат

• Какими способами можно оплатить?

  Банковской картой Visa, MasterCard или Prostir, через Google Pay, Apple Pay, Masterpass, Visa Checkout, платёжный QR-код, Botpay в Telegram или Privat24. Есть и оплата частями: Монобанк (3 или 4 платежа), А-Банк (2, 3 или 4 платежа и рассрочка), Банк Глобус (8 платежей), «Скибочка» от OTP Bank (3 платежа), мгновенная рассрочка и оплата частями от ПриватБанка.

• Примут ли карту, выпущенную не в Украине?

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

• Как работает скидка 20% при покупке нескольких курсов?

  Добавьте в корзину два курса или больше — скидка применится автоматически ко всем товарам в корзине. Два курса: минус 20% на оба. Пять курсов: минус 20% на все пять. Скидка сочетается с любыми акционными ценами и действует на весь каталог без исключений.

• Можно ли вернуть курс или деньги?

  Цифровые товары возврату и обмену не подлежат. Это общее правило для всех электронных товаров в Украине — постановление Кабинета Министров № 172 от 19 марта 1994 года. При этом мы всегда на связи. Если доступ не открывается, ссылка перестала работать или файлы повреждены — напишите на info@siluette.com.ua, укажите дату и номер заказа. Восстановим. Если что-то непонятно в самом курсе, тоже пишите — подскажем.

• Можно ли оплатить от организации по счёту?

  Пока нет. Мы работаем только с частными покупателями — безналичной оплаты по счёту от юридических лиц сейчас нет.

Как проходит обучение

• Есть ли обратная связь с преподавателем и проверка заданий?

  Нет. Все курсы — это записи уроков для самостоятельного изучения: преподаватель не отвечает на вопросы и не проверяет домашние задания. Именно поэтому курсы стоят намного дешевле обучения с куратором. Вы получаете тот же материал, но занимаетесь сами и в своём темпе.

• Выдаётся ли сертификат?

  Да, цифровой сертификат — по запросу и бесплатно. Напишите на info@siluette.com.ua, укажите имя и фамилию ровно в том виде, в каком хотите видеть их в сертификате, и мы пришлём его в течение суток.

• Нужен ли опыт, чтобы начать?

  Для большинства курсов — нет. Они рассчитаны на начальный уровень и объясняют с азов. Если курс требует подготовки, это сказано в его описании.

• Есть ли сроки прохождения курса?

  Нет. Ни дедлайнов, ни расписания, ни сгорающего доступа. Скачали — смотрите когда удобно, с любыми перерывами.

• Можно ли поделиться курсом с другим человеком?

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

Поддержка

• Куда писать, если что-то не работает?

  Лучше всего на info@siluette.com.ua. Есть и чат в правом нижнем углу сайта, но почта надёжнее: там можно всё описать подробно и приложить скриншоты. Просьба: опишите, что именно вы делали и что пошло не так, и приложите снимок экрана с ошибкой. Так мы решим вопрос сразу, а не будем полдня выяснять, что произошло.

• Как быстро отвечает поддержка?

  В рабочее время, с 9:00 до 19:00, на почту обычно отвечаем в течение часа, в чате — за пару минут. После 19:00 тоже случается, но время ответа не обещаем.