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

Полноценный курс по созданию анимаций на профессиональном уровне по внутренней методике процессов от студии 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 245 ₽/
мес
Без первого взноса
?

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

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

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

Запишитесь на консультацию

1 245 ₽/
мес
Без первого взноса
?

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

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

23 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 нестандартных варианта смены сцен: смена маской, смена шторкой и смена слайдом. Для создания перехода “смена маской” вы разберете принцип работы нового типа маски Alpha Inverted Matte (инверсивной альфа-маски), а также поймете, чем она отличается от Alpha Matte (альфа-маски). Поймете, как размещать видеоролик в качестве составляющей анимации. Применение нестандартных переходов придаст вашим анимациям еще больше уникальности.

Анимация изменения цвета

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

Анимация контура (обрезка)

В этом уроке мы изучите создание анимации контура по принципу обрезки. Для этого используют свойство слоя Trim Paths, за счет которого создается видимость движения по контуру. Оно имеет три параметра: Start (Начало), End (Конец) и Offset (Смещение), принципы работы которых мы также подробно изучим. Владение этой анимацией позволит вам создавать красивые эффекты для прелоадера, прогресс-бара в видео-плеере, кнопок и т.п.

Декоративная анимация текста (Глитч)

Этот урок посвящен изучению декоративной анимации текста. Вы изучите модный эффект, который называется Глитч, узнаете, где он применяется и за счет чего создается. Глитч эффект сопровождается знакомыми вам типами анимации: Появление — Opacity, Масштабирование — Scale, Движение — Position. Вы получите представление о том, как правильно подготовить элементы дизайна для создания данной анимации. В итоге с помощью декоративной анимации ваши проекты будут производить wow-эффект.

Креативная анимация текста

Разберемся с комбинацией, которая состоит из разных анимаций с использованием двух видов масок: Alpha Matte (альфа-маски) и Alpha Inverted Matte (инверсивной альфа-маски). Вы узнаете, как можно применять параметры обеих масок для создания эффектных анимаций. В итоге вы научитесь создавать продвинутую анимацию со множеством интересных эффектов.

Декоративная анимация текста (пропись)

В этом спринте научимся создавать анимацию рукописного текста.

Появление текста из маски

Разберём нестандартное появление текста из маски.

Комплексная анимация

В этом спринте мы будем применять знания, полученные на предыдущих уроках.

Анимация с применением Luma Matte

Изучим эффект наложения при появлении объектов в кадре.

Анимация с применением Turbulent Displace

Изучим анимацию с применением эффекта искажения фотографии.

Сложная анимация с эффектом наложения и искажением

В этом спринте мы будем применять знания, полученные на предыдущих уроках.

Принцип создания сцены (+практическое задание)

Разберём полный процесс создания шота с нуля.

Практика
Ведение аккаунта на Dribbble и продвижение

В этом спринте покажем, как вести аккаунт и что необходимо для его продвижения.

Анимация для презентаций и Behance

Изучим, какие параметры необходимо применять для анимации на Behance.

Условия

4 месяца
Онлайн‑стажировка под руководством наших motion‑дизайнеров с видеоуроками и обратной связью.
21 шот + 3 по желанию
Вы сделаете все типы шотов, которые мы выкладываем на Dribbble.
Для кого
Подходит как для начинающих, так и для опытных дизайнеров, которые хотят повысить свой профессиональный уровень.
Доступ навсегда
Набор актуальных инструкций, которые всегда будут доступны вам.

Запишитесь на консультацию

Забронируйте скидку и получите доступ к бесплатному мини-курсу «‎‎Анимация интерфейсов. Первые шаги»
1 245 ₽/
мес
Без первого взноса
?

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

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

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

Запишитесь на консультацию

1 245 ₽/
мес
Без первого взноса
?

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

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

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

Стоимость

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

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

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

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

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

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

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

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

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

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

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

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

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

Запишитесь
на консультацию
Спасибо, ваша заявка принята!
Мы свяжемся с вами в ближайшее время.
Пожалуйста, заполните правильно все обязательные поля
Записаться на курс