Design and animation of HUD & UI by Timur Konstantinov (Russian)

On May 4, 2021

Release date:2021

Author:Timur Konstantinov

Skill level:Beginner

Language:Russian

Exercise files:Yes

Освойте создание анимированных футуристических HUD&UI-интерфейсов, которые уже успели стать популярными в кино, видеоклипах и компьютерных играх!
Как вы думаете, что объединяет такие известные голливудские фильмы, как «Железный человек», «Мстители», «Стражи галактики», «Игра Эндера», проморолики Land Rover и Lexus, а также компьютерные игры Call of Duty, Watch Dogs и многие другие?

Да, мы перечислили их неслучайно. Во всех них используется то, чему посвящён этот видеокурс, — а именно футуристические анимированные HUD&UI-интерфейсы! Что это такое?

Это элементы выдуманных интерфейсов для разного рода устройств и систем, используемых в фильмах и роликах, которые придают «эффект технологичности».

В курсе автор подробно покажет и расскажет вам, как создавать HUD&UI-элементы в программе Adobe Illustrator и анимировать их в After Effects. При этом стоит отметить, что «Анимация и дизайн HUD&UI» — это курс не столько о программах, сколько о принципах и правилах создания профессиональных HUD&UI-интерфейсов.

Table of Contents

ГЛАВА 1

Дизайн HUD&UI-элементов

5 занятий (2 часа 26 минут)

Рассмотренные темы:

Введение в мир HUD&UI
Подготовка к работе
Анализ референсов HUD-прицелов и их дизайн
Изучение референсов окон и прочих UI-элементов и их дизайн
2 домашних задания:

1.
Создать дизайн нескольких прицелов и точек
2.
Разработать дизайн некоторых UI-элементов, таких как окна, полосы прогресса, плашки и т. д.

ГЛАВА 2

Анимация прицелов и точек

6 занятий (9 часов 6 минут)

Рассмотренные темы:

Начальная анимация точек
Введение в экспрешены, а также углубление в более продвинутую работу с ними
Особенности анимации текста в HUD&UI
Анимация средних и больших прицелов
Написания первого простого скрипта на примере создания отражений (Flip) элементов по вертикали и горизонтали внутри Shape-слоя
Скрипт AE Modular и Prop Meet в подарок
2 домашних задания:

1.
Разработать анимацию прицелов-точек
2.
Разработать анимацию больших и средних прицелов

ГЛАВА 3

Анимация окон и прочих UI-элементов

13 занятий (12 часов 39 минут)

Рассмотренные темы:

Анимация титров и плашек
Линии прогресса и заполняющие элементы детализации кадра
Разнообразные окна: видеоплеер, списки, профиль, окно кода, файловое дерево, отпечаток пальца, а также сканирование сетчатки глаза
Особенности анимации переходов содержащихся картинок и видео внутри окон, в контексте HUD&UI-стилистики
Разработка большого скрипта для автоматизации процесса анимации списка городов
Анимация нодового UI-элемента
4 домашних задания:

1.
Разработка анимации титра и плашек
2.
Создание анимации линии прогрессов (Progress bar)
3.
Анимация нескольких окон
4.
А также анимация любого UI-элемента на ваш выбор

ГЛАВА 4

Подробный разбор проморолика этого курса

12 занятий (2 часа 36 минут)

Рассмотренные темы:

Стилизация проекта, а также структурные особенности проекта
Анимация аватарок
Эпизод с линией времени, содержащиеся элементы в нём
Особенности анимации HUD&UI-логотипа, а также переход к эпизоду с визуализацией сути
Особенности сцены с «сутью». В частности, фон, текст, взрыв и вырисовывающаяся линия
Эпизод с анимацией титров, таких как Fictional User Interface и другие
Эпизод с анимацией планеты, а также окно с изометрической картой
Переход из планеты к финальному кадру

Watch online or Download for Free

Chapter 1
01. Introduction
02. Preparation
03. Crosshairs
04. Crosshair design
05. Task – Crosshair creation
06. Windows -Analysis and Design
07. Task – Creating windows

Chapter 2
01. Animation of points
02. Animation of points. Advanced expressions
03. Task – Animation of a simple crosshair
04. Text animation
05. Medium crosshairs. Start
06. The first script
07. Medium crosshairs. Continuation
08. Large crosshair
09. Task – Animation of a large crosshair