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

Полноценный курс по созданию анимаций на профессиональном уровне по внутренней методике процессов от студии UPROCK.

записаться на курс

Плюсы работы
motion‑дизайнером

Высокооплачиваемая профессия с возможностью работать удаленно.
Motion-дизайнер создает анимации для рекламы, веб‑сайтов, пользовательских интерфейсов, youtube, презентаций и телевидения.
Высокая оплата труда. Творческая, интересная работа, бесконечный рост в профессиональном плане.
Motion‑дизайнер одна из самых востребованных профессий будущего.
Умеет вызвать эмоции у аудитории и быстро доносить до неё нужную информацию и идею.

Кому
подойдет

Начинающие motion‑дизайнеры смогут разобраться в теме, а продвинутые — систематизировать свои знания и повысить профессиональный уровень.
Фрилансерам
Видеомонтажерам
Начинающим motion‑дизайнерам
Тем, кто меняет сферу деятельности
Продуктовым и веб‑дизайнерам
Тем, кто хочет собрать мощный шоурил
Автор курса
Евгений Кузьмин
Обладатель более 50 международных дизайн‑наград, в том числе в номинации "Лучший сайт года". В качестве арт‑директора и продюсера реализовал более 500 интернет‑проектов. Является евангелистом стиля минимализм. Делал проекты для таких брендов как AXE, Beeline, Coca‑cola, Lipton, Yota, СДЭК.
У меня была цель за год прокачать наш профиль на Dribble. За этот период мы создали один из лучших аккаунтов по анимации. Наши шоты регулярно попадают в международные подборки. Мы хотим научить вас создавать такие же стильные анимации.

Чему вы научитесь на курсе

Создавать анимации на профессиональном уровне, как на приведенных справа шотах.
Опыт до курса:
Опыт до курса:
Опыт до курса:
Опыт до курса:
Опыт до курса:
Опыт до курса:
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Опыт до курса:
смотреть
Смотреть больше проектов на dribbble

Наши студенты трудоустраиваются в лучшие компании

SETTERS
LANDAU
CREATIVE PEOPLE
ZEPHYR LAB
EVEREST
СИБИРИКС
M-A-X
2GIS
OZON
OBYS
UPLAB
WRIKE
СБЕР
CLAY
Мы учим создавать максимально эффективные решения, чтобы вы могли соответствовать самым высоким стандартам на рынке motion-дизайна. Поэтому работодатели ценят наших студентов.
Посмотрите отзывы работодателей о наших студентах.
Узнать подробнее о курсе «‎‎Анимация интерфейсов»
1 661 ₽/
мес
Без первого взноса
?

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

Оставьте заявку для подробностей.

31 900 ₽/
40 000 ₽
Одним платежом
Пожалуйста, заполните правильно все обязательные поля

Как построен процесс обучения

Вы получаете ответ на любой организационный вопрос в течение 10 минут и ответ куратора в течение суток. Это четко контролируется.
Система подачи информации

Курс разбит на последовательные и логические этапы реальной разработки проекта. Таким образом вы легко усвоите материал и научитесь систематизировать свои рабочие процессы.

Упор на практику

Процесс подготовки на 80% состоит из практической работы, что позволяет максимально оттачивать навыки и наработать опыт.

Ориентирование на результат

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

Качественная обратная связь

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

Умение объяснять

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

Успех школы заключается в уникальной
методике обучения

Вы совместно с куратором пройдете все этапы создания анимации от начала и до конца.
/01
После прохождения курса вы научитесь анимировать интерфейсы, веб‑сайты, презентовать свои работы на Dribbble и Behance.
/02
Вы узнаете, как спланировать и систематизировать весь процесс: от подготовки до запуска по методике, которую мы используем в студии Uprock.
/03
Вы пройдете все этапы создания анимации и сделаете 24 шота, которые сможете положить себе в портфолио.

Что вы получите

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

Последовательные и логические этапы реальной разработки проекта. Систематизация рабочих процессов.

Вы сделаете более 21 шота и 3 опционально

Процесс подготовки на 80% состоит из практической работы, что позволяет максимально оттачивать навыки и наработать опыт.

Обратная связь куратора раз в сутки с видеоразбором вашего домашнего задания

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

Техподдержка

Наша техподдержка отвечает в течение 5 минут по всем организационным вопросам.

Получение рассрочки

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

Бонусы

Мы постоянно ищем новые возможности для повышения уровня качества вашего обучения.
Скидки
У вас будут специальные скидки до 50% на последующие продукты от UPROCK.
Работа в Uprock
Привлекаем студентов на свои проекты в качестве фрилансеров, а также нанимаем в Uprock, как штатных сотрудников
Пиар наших студентов
Регулярно публикуем проекты сообщества на наших страницах в Instagram, Facebook и Вконтакте. Охват более 40 тыс. подписчиков.
Бесплатные места
У нас есть ежемесячная квота на бесплатные консультации для людей с 1‑2 группой инвалидности.

Программа
обучения

Самая объемная и насыщенная программа, которая раскрывает
все темы. Все уроки даются последовательно и насыщенно,
емко и без воды
Теория
Введение в веб‑анимацию

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

Определение веб‑анимации и ее функции

Применение веб‑анимации

Минусы креативной анимации

Программы для создания веб‑анимации

Теория

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

Принципы веб‑анимации

Базовые действия анимации

Скорость

Хореография

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

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

Установка After Effects и Media Encoder

Установка плагина АЕUX

Установка скрипта Motion Tools

Интерфейс и настройка 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 месяца
Онлайн‑стажировка под руководством наших motion‑дизайнеров с видеоуроками и обратной связью.
21 шот + 3 по желанию
Вы сделаете все типы шотов, которые мы выкладываем на Dribbble.
Для кого
Подходит как для начинающих, так и для опытных дизайнеров, которые хотят повысить свой профессиональный уровень.
Доступ навсегда
Набор актуальных инструкций, которые всегда будут доступны вам.
Узнать подробнее о курсе «‎‎Анимация интерфейсов»
1 661 ₽/
мес
Без первого взноса
?

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

Оставьте заявку для подробностей.

31 900 ₽/
40 000 ₽
Одним платежом
Пожалуйста, заполните правильно все обязательные поля

Стоимость

Покупка курса сейчас — это отличная возможность сэкономить.
КУРС ПО АНИМАЦИИ
Включает:
— 24 шота в портфолио
— Бессрочный доступ к материалу
— 4 месяца обучения
31 900
вместо
40 000

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

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

В договоре есть сложный пункт про основную и дополнительную услугу и базовую цену. Основная услуга — это доступ к платформе со всеми видео. Дополнительная услуга — это обратная связь от дизайнеров студии. В стоимость консультации, т.е. в Базовую цену, входит всё вместе, доплачивать не нужно. Просто внутренние пропорции Базовой цены изменяются в зависимости от количества видео, просмотренных клиентом, и полученных видеоразборов от дизайнеров студии.

Такая разбивка была придумана для возможности возврата средств, если клиент выразит такое пожелание. Суть этих пунктов в том, что я смогу вернуть 70% оплаченных средств в первые две недели после покупки, если покупатель вдруг захочет расторгнуть договор после просмотра вводной консультации. 30% вернуть не сможем в любом случае, т.к. они удерживаются с нас нашими финансовыми партнерами, налогами, платформой и т.п. После просмотра дальнейших консультаций и получения разборов от ведущих дизайнеров услуга уже считается оказанной в полном объёме, и деньги вернуть мы не сможем. Так мы хотели предусмотреть возможность хотя бы частичного возврата средств.

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

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

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

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

Как помогаете с трудоустройством?

Помогаем правильно составить резюме и оформить портфолио. Консультируем при прохождении собеседования и выполнении тестового задания. Регулярно получаем заявки от работодателей и напрямую трудоустраиваем в компании. Также предлагаем проекты на фриланс и берем на работу в UPROCK.

Как проходит консультация?

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

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

Записаться на курс