Что такое моушн-дизайн: история, области применения, инструменты

Движение может объяснить то, что статика показать не в состоянии. Рассказываем о моушн-дизайне.

Что такое моушн-дизайн

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

Продукт моушн-дизайна — ролик-история, рассказанная во времени. Создание такого, даже очень короткого ролика — занятие трудоемкое и затратное.

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

История возникновения

Тот моушн-дизайн, каким мы его знаем сейчас, обязан своим появлением почти 200-летней истории анимации. Многие приемы, изобретенные тогда, активно используются моушн-дизайнерами до сих пор.

Начало

1825

Тауматроп — игрушка, основанная на оптической иллюзии: при быстром вращении кружка с двумя рисунками, нанесенными с разных сторон, они воспринимаются, как один. Была особо популярна в Викторианскую эпоху. Возможный изобретатель тауматропа — английский врач Джон Айртон Пэрис.

Пример тауматропа. Игрушка Икабода Крейна из фильма Тима Бертона «Сонная лощина»

1832

Фенакистископ — лабораторный прибор для демонстрации движущихся рисунков, конструкция которого основана на персистенции — инерции человеческого зрения. Изобретателем фенакистископа считается Жозеф Плато. Почти одновременно с Плато Симон фон Штампфер изобрел аппарат, очень похожий на фенакистископ, и назвал его стробоскопом.

Общий вид фенакистископа

1833

Зоотроп — устройство для демонстрации движущихся рисунков, конструкция которого основана на инерции человеческого зрения. Изобретателем зоотропа считается Уильям Джордж Горнер.

Зоотроп

1876

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

В честь первого показа «светящихся пантомим» Рейно в 1892 году 28 октября отмечается как Международный день анимации. Праздник был утвержден АСИФА в 2002 году.

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

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

Кинематограф

Немой кинематограф

1895

Год официального рождения кинематографа. Публичные платные сеансы братьев Огюста и Луи Люмьер оказались наиболее популярны и успешны с коммерческой точки зрения, нежели все прочие начинания, поэтому именно Люмьер принято считать родоначальниками кинематографии.

Звуковой кинематограф

1927

Первым в истории полнометражным фильмом с синхронной речевой фонограммой в 1927 году стал музыкальный фильм «Певец джаза», созданный по технологии «Вайтафон» со звуком на грампластинке.

Последние тенденции

Кинематограф стал средой, в которой зародился моушн-дизайн, он получил значительное развитие в 50-х годах в США, благодаря таким дизайнерам, как Сол Басс, Морис Биндер и Пабло Ферро. В то время на телевидении стали появляться анимированные титры и логотипы. Так произошел переломный момент: анимация перестала быть исключительно инструментом развлечения и получила функциональные задачи.

Области применения моушн-дизайна в жизни

Кино

Основное применение — титры и футуристические интерфейсы. Титры можно считать прародителем такого современного направления, как моушн-айдентика.

Видеоклипы

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

Реклама

Моушн используется в ней повсеместно. Эмоциональные ролики с коротким, но емким сюжетом, рассчитанные на эмоциональное восприятие.

Мой любимый рекламный ролик — Ford Mustang

Презентации

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

3D-mapping

Это лазерное шоу, где «экраном» для 3D-проекции выступают фасады зданий — при этом обыгрывается геометрия постройки, ее архитектура и местоположение.

Интерактивный дизайн

Это достаточно новое направление, симбиоз дизайна, программирования и шоу. Интерактивность помогает сделать пользовательские интерфейсы выразительными и простыми в использовании. Моушн-дизайн — одно из самых востребованных направлений на сегодняшний день. Применяется в таких областях:

  • создание иконок;
  • прелоадеров;
  • микровзаимодействия;
  • видеобэкграундов;
  • прототипов;
  • оформления кейсов;
  • презентаций.
Пример анимации интерфейса сайта от Sergey Gurov

Профессиональный софт

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

Adobe Photoshop

Популярный и мощный инструмент, который входит в линейку Adobe-продуктов Creative Cloud и отлично с ними интегрирован.

Для чего может пригодиться:

  • создание Matte Painting;
  • редактирование текстур;
  • объединение изображений;
  • создание GIF;
  • наложение покадровой анимации;
  • ротоскопинг (обрисовка кадр за кадром).

Adobe Illustrator

Софт для работы с векторными изображениями. Применяется в основном для создания логотипов, векторных иллюстраций и фонов для последующего использования в моушн-графике. Так же, как и Photoshop, легко интегрируется, например, с After Effects.

After Effects

Пожалуй, одна из самых главных программ для освоения моушн-дизайна. After Effects — это 2,5D-программа для анимации.

Возможности After Effects:

  • анимация логотипов;
  • персонажная анимация;
  • 3D композитинг;
  • моушн-трекинг (отслеживание движения);
  • удаление объектов;
  • UX/UI дизайн;
  • создание обучающих роликов и презентаций;
  • эффекты симуляции;
  • анимационные слайд-шоу;
  • кинетическая типографика;
  • визуальные эффекты.

Premiere Pro

Также входит в линейку продуктов Adobe — Creative Cloud. Premiere — это редактор видеомонтажа, который лучше всего подходит для сборки всей работы воедино: склейка роликов, добавление звука, музыки и визуальных эффектов.

Cinema 4D

Это редактор 3D-моделирования с очень дружественным интерфейсом и низким порогом входа по сравнению с такими монстрами индустрии, как Maya, 3ds Max или Blender.

Cinema 4D широко используется в моушн-графике для моделирования, анимации и эффектов симуляции.

Инструменты покадровой анимации — Adobe Animate и Moho

Animate входит в линейку продуктов Adobe — Creative Cloud. Animate — по сути, тот же Flash, который сыграл свою немалую роль в становлении моушн-графики. 

Заключение

Если пытаться самостоятельно получить нужные навыки в такой динамичной области, как моушн-дизайн, можно просто не успеть за меняющимися трендами. Поэтому рекомендуем учиться у профессионалов. На нашем курсе вы освоите профессию моушн-дизайнера интерфейсов, сможете устроиться на стажировку параллельно с учебой — и со временем сделать любимое занятие своей работой.

Курс «Анимация интерфейсов»
Вы сможете самостоятельно создавать любую анимацию в интерфейсах и эффективно доносить концепцию проектов до клиентов. Мы начнем с анимации простейших элементов, таких как иконки, и дойдем до создания полноценных кейсов и шоурилов.
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы
Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку Skillbox