Моушн дизайн: анимационная графика для видео

 

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

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

Давайте начнем с основного вопроса, по названию статьи: что такое моушн дизайн? Если в двух словах, то это графический дизайн, приведённый в движение. Графический дизайн использует визуальные образы для передачи сообщения, а умело встроенные движения могут подчеркнуть это сообщение, добавив энергии и визуального интереса. Кроме того, моушн дизайн не только помогает передать сообщение, но и сам может быть этим сообщением.

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

Приёмы моушен графики:

1. Тайминг: графические элементы должны двигаться, встряхивать, покачиваться и скользить в нужные моменты. Зрители замечают, когда действие происходит поздно или рано, поэтому старайтесь сделать это правильно.
2. Продолжительность. Как и в видеопроизводстве, слишком быстрое мигание изображения на экране может вызвать раздражение и не передать сообщение. И наоборот, если оставить изображение на экране слишком долго, аудитория может потерять интерес.
3. Темп: скорость повторяющихся движений и музыки. Любой ритм создает эмоциональный эффект, и должен вписываться в сценарий видеоролика и постановку.
4. Переходы: то, как автор переходит от одной сцены или изображения к другому, влияет на то, как зрители интерпретируют сообщение. Переходы должны соответствовать тематике, чтобы аудитория оставалась погруженной в историю. Для плавных переходов делайте раскадровка видео вручную или в программах – редакторах.
5. Естественное движение: старайтесь, чтобы движения были органичными и естественными. Пример моушн дизайна – движение автомобиля. Он не сразу переходит от остановки к полной скорости — между ними есть много шагов. То же самое относится и к приёмам motion graphics. Чем естественней движения, тем убедительней они будут для зрителей.

Анимационный дизайн

На ютубе публикуют моушн ролики, называемые анимацией, и бывает трудно отличить одно от другого. Грань между анимацией и моушн дизайном размыта.

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

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

Почему моушн дизайн работает

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

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

Тысячи зрителей в социальных сетях смотрят ролики с выключенным звуком на телефоне. Поэтому донесение сообщений только через визуальные средства шире охватывает аудиторию.

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

Вот каналы, где моушен дизайнеры применяют анимационный дизайн:

1. Традиционная реклама: маркетологи вставляют моушн графику в онлайн-видео или телевизионные рекламные клипы для демонстрации товаров.
2. Промо-видео. Все виды редакционных или рекламных клипов: вирусные ролики, тематические исследования, отзывы пользователей.
3. Эксплейнеры: маркетологи добавляют элементы 3d motion design в видео объяснениях. Это введение в новые продукты или услуги, обзоры, бизнес-процессы и учебные пособия.
4. Видео в социальных сетях. Форма анимационной графики – видео в социальных сетях записывают для подписчиков в Facebook, Instagram, Snapchat и YouTube.

По исследованию Tubular Insights, 64% зрителей мотивируют к покупке просмотры видео в соцсетях.

Как моушн дизайн влияет на взаимодействие со зрителями

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

По опросу WyzOwl, 81% бизнесменов добавляют видео на сайт в качестве маркетингового инструмента, потому что это стимулирует вовлеченность.

Как вставить видео на сайт мы писали в блоге.

Вот 4 атрибута моушен дизайна для продвижения продуктов:

1. Motion дизайн создаёт эмоциональный материал. Помимо того, что моушн видео привлекает внимание зрителей, оно играет жизненно важную роль в захвате эмоций. Это физиологическая реакция. Благодаря феномену эмоционального заражения зрители сопереживают тем чувствам, которые изображены на экране.
2. Помогает понять сложные процедуры. Моушн графика подаёт информацию так, что её легко понять обычному зрителю. Данные легче усваиваются и запоминаются, когда они отображаются визуальным способом. Вот почему моушен графику добавляют в видео о сложных процессах, визуализации абстрактных идей.
3. Отражает индивидуальность бренда. Motion design показывает индивидуальность бренда. Если бренд игрив или серьезен, анимация должна показывать то же самое. Хотя рисованные персонажи в брендинге не новая деталь, сегодня моушн анимация и дудл видео становится обычным явлением.
4. Анимация лаконична. Длина моушн видео в диапазоне от 30 секунд до 3 минут, что очень полезно, когда моушн дизайнеру нужно быстро произвести впечатление на зрителя.

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

То, что делает статья из 1500 слов, чтобы объяснить словами, может быть визуально передано менее чем за 15 секунд.

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

12 принципов анимации

В 1981 году в своей книге “Иллюзия жизни” диснеевские аниматоры Олли Джонстон и Фрэнк Томас представили двенадцать принципов анимации. Эти два человека была частью диснеевских “девяти стариков” – основной группы аниматоров, которые сыграли важную роль в создании анимационного стиля Диснея.

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

Вот эти принципы:

1. Сжатие и растяжение (Squash and Stretch).
2. Подготовка к действию (Anticipation).
3. Инсценировка (Staging).
4. Спонтанное действие и поза-к-позе (Straight Ahead Action and Pose-to-Pose).
5. Инерция и нахлёст (Follow Through and Overlapping Action).
6. Замедление движения в начале и в конце (Ease In, Ease Out).
7. Дуги (Arcs).
8. Вспомогательное действие (Secondary Action).
9. Тайминг (Timing).
10. Гиперболизация (Exaggeration).
11. Прорисовка (Solid Drawing).
12. Харизматичность (Appeal).

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

Сжатие и растяжение (Squash and Stretch)

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

Это и подразумевается под сжатием и растяжением:

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

Принцип имитируют реальность и немного преувеличивает, чтобы смотрелось веселее и интереснее.

Подготовка к действию (Anticipation)

Представьте, что вы собираетесь пнуть футбольный мяч. Что вы сделаете? Скорее всего, качнёте ногой назад, чтобы иметь размах для пинка. А ещё поддержите себя руками, чтобы не потерять равновесие.

Это и есть моушн анимация anticipation. Принцип Anticipation – это подготовка к главному действию. Игрок, ударяющий по футбольному мячу, будет главным действием, а размах ноги перед ударом – это подготовка.

Инсценировка (Staging)

Когда вы снимаете сцену, куда помещаете камеру? Куда идут актеры? Что вы заставляете их делать? Сочетание всех этих вопросов и есть то, что мы называем инсценировкой.

О том, как написать сценарий к видеоролику мы писали в блоге.

Это один из самых недооцененных принципов. Он направляет внимание аудитории на наиболее важные элементы сцены для развития сюжета.

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

Спонтанное действие и поза-к-позе (Straight Ahead Action and Pose-to-Pose)

Это два способа рисования моушн анимации. Спонтанное действие – это когда вы рисуете каждый кадр один за другим.

Способом “поза-к-позе” сначала рисуют начальные и конечные кадры, затем переходят к среднему и начинают заполнять промежуточные кадры.

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

Спонтанное действие менее спланировано, а потому более свежо и удивительно. Но это похоже на бег с завязанными глазами… вы не можете понять, где вы должны быть в любой момент. Этот способ анимации применяют для непредсказуемых действий – горящее пламя, льющаяся вода, взрывы, облака пыли и т.д. Этим способом в моушн дизайн передают стихийные явления, исход которых сложно предугадать.

Обучение обеим техникам и их сочетанию – способ стать успешным аниматором и получить как структуру, так и спонтанность.

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

Инерция и нахлёст (Follow Through and Overlapping Action)

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

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

Однако движение инерции может также описать движение первичного элемента. Если персонаж приземляется на корточки после прыжка, прежде чем встать прямо, то это инерция.

Замедление движения в начале и в конце (Ease In, Ease Out)

Когда вы заводите свой автомобиль, вы не сразу разгоняетесь до 60 миль в час. Нужно время, чтобы разогнаться и достичь устойчивой скорости. На языке motion дизайнера это будет называться замедление в начале.

Точно так же, если вы затормозите, то не сразу остановитесь полностью. (Если только не врежетесь в дерево или что-нибудь в этом роде). Вы нажимаете на педаль и замедляетесь в течение нескольких секунд, пока не остановитесь. Аниматоры называют это замедление в конце.

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

Дуги (Arcs)

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

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

Скорость и время прохождения дуги задают динамику видео. Иногда дуга так быстра, что расплывается до неузнаваемости. Это называется анимационным размытием – но это тема для другого раза.

Вспомогательное действие (Secondary Action)

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

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

Но вспомогательное действие не должно отвлекать от главного.

Тайминг (Timing)

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

Тайминг – это то, где на временной шкале вы помещаете каждый кадр действия. Когда двигаете объект быстрее или медленнее, чем он обычно движется в реальном мире, эффект не будет правдоподобным.

Правильный тайминг позволяет контролировать настроение и реакцию персонажей и объектов. Это не значит, что вы не можете немного подтолкнуть (особенно если рисуете воображаемый мир), но если вы это сделаете, будьте последовательны.

Гиперболизация (Exaggeration)

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

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

Прорисовка (Solid Drawing)

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

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

Харизматичность (Appeal)

Персонажи, предметы и мир, в котором они живут, должны привлекать зрителя.

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

Люди запоминают настоящих, интересных персонажей. На ваших анимированных персонажей зрителям должно быть приятно смотреть, это также относится и к антагонистам.

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

Программы для моушн дизайна

Для моушн анимации разработали программное обеспечение. Самый частый инструмент дизайнера Adobe After Effects, в котором рисуют и изменяют графику на таймлайне.

Программу Adobe Flash устанавливают для моушн дизайна веб-приложений. Кроме этого, среди профессиональных инструментов известны Maxon Cinema 4D и Softimage.

Профессия motion designer

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

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

Чтение топовых анимационных блогов – это обучение моушн дизайну и ещё один метод познакомиться с новыми техниками. Получение опыта работы над проектами и добавление его в свой портфель – способ стать моушн дизайнером.

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

В этой отрасли также очень высокий процент (59%) самозанятых работников, что указывает на то, что удаленная работа очень возможна в этой области.

«Наша студия специализируется на услугах брендинга и графического дизайна для стримов на Twitch, YouTube и Facebook Gaming», – говорит Ник Авола из Visuals от Impulse. Авола объясняет, что все их дизайнеры работают удаленно. «Мы находим, что это делает наших дизайнеров более счастливыми и эффективными. Наша команда может управлять своим временем, по желанию. Отвлечение сведено к минимуму, поэтому дизайнеры могут полностью сосредоточиться на работе».

Какие навыки нужны motion дизайнеру:

1. 3-D моделирование.
2. Анимационная перспектива.
3. Организованность.
4. Знание процедурной анимации.
5. Текстурирование и световые эффекты.
6. Видение дизайна в общем контексте.
7. Способность подстраивается под нужды заказчиков.

На этом закончим обзор про моушн дизайн в бизнесе. Пишите вопросы в комментариях.