Motion graphics что это: Волшебство в движении: что такое моушн-дизайн

Содержание

Моушн дизайн: что такое motion графика и анимация

 

Картинка с текстом графический моушен дизайн

Картинка с текстом графический моушен дизайн

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

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

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

Придумано десятки способов 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)

Гиф картинка принцип motion design: сжимающийся и растягивающийся белый прямоугольник на чёрном фоне

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

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

Штриховой рисунок схема из чёрных кругов и линий на белом фоне

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

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

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

Гиф картинка motion graphics anticipation светлый прямоугольник на чёрном фоне

Гиф картинка motion graphics 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)

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

Картинка motion design exaggeration: черный прямоугольник

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

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

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

Гиф картинка моушн дизайн прямоугольника с линиями на чёрном поле

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

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

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

Гиф картинка чёрный прямоугольник с белым кубиком

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

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

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

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

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

Скриншот сайта с текстом моушн дизайн в программе After Effets

Скриншот сайта с текстом моушн дизайн в программе After Effets

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

Профессия motion дизайнер

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

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

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

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

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

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

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

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

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

5 советов по созданию впечатляющей моушн-графики / Блог компании Нетология / Хабр

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

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

Представьте конечный результат

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

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

Localeur iPhone app available on the App Store — Joah Spearman

Спланируйте все заранее

Анимация занимает немало времени. От создания слоев в Adobe After Effects до выбора подходящих визуальных эффектов для каждой детали. Чтобы получить идеальную картинку, над одной сценой можно сидеть часами. Вложить такие усилия в сцену, а затем осознать, что она не подходит и надо переделывать — напрасная трата времени и таланта может обескуражить. Логично заранее спланировать производство графики в во всех деталях, чтобы процесс анимации был более продуктивным.

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

От редакции: не ленитесь делать сториборд

Держите проект в порядке

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

От редакции: организуйте рабочий процесс

Выражайте ключевую идею ясно

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

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

От редакции: Nuclear Energy Explained: How does it work? — Kurzgesagt

Помните о главных целях проекта

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

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

От редакции

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

Если вы хотите стать востребованным моушн-дизайнером, создавать крутые проекты и при этом получать достойную оплату — регистрируйтесь на курс. Ждем вас!

Моушн-графика

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

 

Москва’2011(Moscow/Russia) from zweizwei |motion timelapse| on Vimeo.

7tv Countdown (2005) from Artem Kurenkov on Vimeo.

Count on Me from Gentleman Scholar on Vimeo.

Bee — 3d animated short from Vladimir Loginov on Vimeo.

Reader from Marcus Eckert on Vimeo.

7tv on-air clock from Artem Kurenkov on Vimeo.

História do Bikini from Carolina Simonetti & Fabio Lux on Vimeo.

Stars Burn (New Version) from Artem Kurenkov on Vimeo.

C&C — Transformer from manymany on Vimeo.

«_______ for a Change» / Opening Titles for TEDxPhoenix 2011 from safwat on Vimeo.

The 2012 Vimeo Festival + Awards: Submissions now open! from Vimeo Festival + Awards on Vimeo.

Buenos Aires Ciudad — Gobierno Abierto from Esteban Diácono on Vimeo.

TyC SPORTS — «LIBERO» — PACKAGE from LUMBRE on Vimeo.

UTILISIMA — SHOW OPENINGS 2011—2012 from LUMBRE on Vimeo.

«LIV» BECOMES «ID INVESTIGATION DISCOVERY» from LUMBRE on Vimeo.

FOX SPORTS — «COPA SUDAMERICANA 2012» from LUMBRE on Vimeo.

MiTV — CHANNEL BRANDING (REEL) from LUMBRE on Vimeo.

Demo Reel 2010 from Seagulls Fly on Vimeo.

Sean McClintock / Reel 2011 from Sean McClintock on Vimeo.

Motion Reel 2012 from we think things on Vimeo.

Coke — Parks from Gentleman Scholar on Vimeo.

Johnny Likens Reel 2010 from Johnny Likens on Vimeo.

Medusateam Showreel from Medusateam on Vimeo.

Alex Mikhaylov Montage 2012 from Alex Mikhaylov on Vimeo.

Gulp. The world’s largest stop-motion animation shot on a Nokia N8. from Nokia HD on Vimeo.

Pi from Thomas Blanchard on Vimeo.

Air Canada 75th — planes from Karim Zariffa on Vimeo.

ISType 2012 Transmit from ISType on Vimeo.

По материалам designrfix

Возможно, вас также заинтересуют статьи:

 

 

 

 

motion graphics Википедия

Графика движения, моушен дизайн или анимационный дизайн (англ. Motion graphics) — визуальное оформление для видео, телевидения и кино. Создаётся в основном при применении компьютерных технологий. Но нередко встречаются и работы, созданные при использовании классических приёмов съёмок на видео, в основном комбинированных или анимационных.

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

Последние годы моушн-дизайн также получил широкое применение в контент-маркетинге и рекламе. В связи с тем, что глобальная технологическая компания Cisco планирует, что к 2022 году 82% всего веб-трафика будет приходиться на видео  , маркетологи и рекламодатели сосредоточили большую часть своих усилий на выпуске высококачественного фирменного видео и анимационного графического контента.

Графика движения, созданная на компьютере[ | ]

Термин «графика движения» появился вместе с видеомонтажом, возможно, чтобы идти в ногу с новейшими технологиями. Перед тем как компьютеры были общедоступны, графика движения была дорога и трудоёмка, что ограничило её использование в высокобюджетном кино и телевидении. На рубеже 1980-х и 1990-х годов дорогие фирменные графические системы британской Quantel были довольно обычным явлением во многих телевизионных станциях. Рабочие станции Quantel были графическим стандартом вещания своего времени С уменьшением стоимости производства графики движения на компьютере она получила более широкое применение. Со способностью таких компьютерных программ, как Adobe After Effects, Discreet Combustion и Apple Motion, она стала ещё более доступной. Современные символьные генераторы (англ. character generators) от Aston Broadcast Systems и Chyron Corporation включают графику движения.

Термин «графика движения» был популяризован книгой об использовании Adobe After Effects Криса и Триш Мейер (Chris & Trish Meyer) под названием Creating Motion Graphics. Это было началом компьютерных приложений, которые специализировались на производстве видео, но не были редакторами или 3D-программами. Эти новые программы собрали вместе специальные эффекты, композитинг (соединение нескольких изображений для получения одного) и наборы инструментов для цветной коррекции и первоначально появились между обычным редактированием и 3D-технологиями. Этот «посредник» и есть понятие графики движения и конечный стиль анимации, именно поэтому иногда его называют 2.5D.

Графика движения продолжает развиваться как форма искусства, объединяя sweeping camera paths и 3D-элементы. Несмотря на их относительную сложность, продукты Autodesk и 3D Studio Max широко используются в анимации и дизайне графики движения.

История[ | ]

В 1960 году Джон Уитни одним из первых признал место моушн-дизайна в мире и начал использовать термин в разговорной речи. Название его компании: Motion Graphics Inc. Так же первыми людьми, начавшими создавать моушн графику, были Сол Басс и Элейн Басс . Пионеры в художественных фильмах, чьи работы включают «Человек с золотой рукой» (1955), « Головокружение» (1958), « Психо» (1960) . По своей сути, основа всей работы Саула и Элейн — это использование простой графики, чтобы передать настроение фильма.

Технологии[

Графики движения — Motion graphics

Эта статья о цифровых графиках. Для экспериментального электронного альбома, см Motion Graphics (альбом) .

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

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

Сфера применения термина

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

История термина

Поскольку не существует общепринятого определения графика движения, официальное начало формы искусства оспаривается. Там были презентации , которые могут быть классифицированы как графики движения еще в 1800 — х годов. Майкл Бетанкур написал первый углубленный исторический обзор области, выступая за ее основ в визуальной музыки и исторических абстрактных фильмов 1920 — х годов по Walther Руттмана , Ганс Рихтер , Viking Эггелинга и Oskar Фишингер .

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

Одним из первых применений термина «графика движения» был на аниматора Джона Уитни , который в 1960 году основал компанию под названием Motion Graphics Inc.

Saul Bass является одним из основных пионером в разработке названия последовательностей полнометражных фильмов. Его работы включены название последовательности для популярных фильмов , таких как Человек с золотой рукой (1955), Vertigo (1958), Анатомия убийства (1959), Северо — северо — запад (1959), Psycho (1960), и Консультировать и согласия ( 1962). Его проекты были простыми, но доводились настроение фильма.

Компьютерная графика движения

До компьютеров были широко доступны, графики движения были дорогостоящими и трудоемким, что ограничивает их использование для высоких бюджетного кино и телевизионного производства . Компьютеры стали использоваться еще в конце 1960 — х годов , как супер — ЭВМ были способны оказывать неочищенные графику. Джон Уитни и Чарльз Кери можно считать пионерами компьютерного анимации.

В конце 1980 — х до середины 1990-х годов, дорогие проприетарные графические системы , такие как те , от британского на основе Quantel были довольно обычным явлением во многих телевизионных станций . Quantel рабочих станции , такие как Hal, Генри, Гарри, Мираж, и Paintbox были широковещательной графика стандартом времени. Многие другие в режиме реального времени графические системы были использованы такие как Ampex ADO, Abekas и K-Scope для живых видео эффектов Digital . Первые запатентованные 3D компьютерные системы были разработаны специально для дизайна вещания , таких как Bosch FGS-4000 , который был использован в музыкальном видео для Dire Straits » денег впустую . Появление более мощных настольных компьютеров , работающих под управлением Photoshop в середине 90-х годов резко снизили затраты на производство цифровой графики. С уменьшением стоимости производства графики движения на компьютере, дисциплина видел более широкое применение. При наличии настольных программ , таких как Adobe After Effects , Discreet Combustion и Apple Motion , графики движения становятся все более доступными. Современные генераторы символов (CG) от Aston широковещательных систем и Chyron корпорации использовать графики движения «s.

Термин «графика движения» популяризировал Триш и Крис Майер книгу об использовании Adobe After Effects , под названием Создание Motion Graphics . Это было началом настольных приложений , которые специализируются на производстве видео , но не редактировали или 3D программ. Эти новые программы собраны специальные эффекты , композитинга и цветокоррекция наборы инструментов, и в первую очередь разлучила редактирования и 3D в производственном процессе. Этот «промежуточный» понятие графики движения и в результате стиль анимации , почему иногда называют 2.5D .

Motion график продолжает развиваться как форма искусства с включением широких путей камеры и 3D — элементами. Maxon в CINEMA 4D , плагины , такие как MoGraph и Adobe After Effects . Несмотря на свою относительную сложность, Autodesk «s Maya и 3D Studio Max широко используется для анимации и дизайна графики движения, как Maya и 3D Studio , которая использует узел на основе системы частиц генератор , похожий на Cinema 4D » Thinking Particles плагин s. Есть также некоторые другие пакеты в панораме Open Source, которые набирают больше возможностей и адептов, чтобы использовать в анимационной графики рабочего процесса, в то время как Blender интегрирует несколько функций его коммерческих партнеров.

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

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

система частиц

Одним из наиболее популярных графических движения инструментов является система частиц : графики движения технологии , которая используется для создания нескольких анимированных элементов. Этот тип анимации обычно называют процедурную анимацию. Система частиц доступна как плагин, как автономное приложение, или включено в качестве составной части пакета графики движения. Частицы являются точками в 3-D или 2-D пространство , которое может быть представлено широкое разнообразие станции и анимированных объектов , таких как шар света, видеоклипа или выбор текста, чтобы назвать несколько. Частицы генерируются частицы эмиттера и может выделяться в небольших количествах или в тысячи, в зависимости от проекта. Среди прочего, эмиттер частиц может быть в виде одной точки, линии, сетка, плоскость или объект , такой как поле или сфера, хотя она может также использовать пользовательский объект , чтобы служить эмиттер, например как логотип, который, например, может быть разобранном, топленого или превращается в песок дует. Популярная система частиц для графики движения является Trapcode частности.

Другие примеры отдельных частиц включают в себя помутнение сферы, которую можно использовать в больших количествах для создания дыма или тумана и видеоклипа человека, который может быть дублирован, чтобы создать массовку. Частицы могут выделяться как один элемент, хотя он обычно используется в больших количествах, например, при создании дыма или дождя. Они находятся под контролем направленных сил, моделируемые ветрами и гравитацией, объекты, предназначенные для притягивать или отталкивать их. Другие управляемые атрибуты могут включать в себя такие вещи, как изменение цвета, размера или прозрачности. В зависимости от системы, можно также объединить несколько одновременных излучатели, например, при имитации взрыва, который сочетает в себе огонь, дым и летящих обломков. В усовершенствованной системе 3-D частица может быть использована для управления анимированный шарнирный характер, узнаваемый примером является воинов в бою последовательностей фильма Властелин колец.

Анимация

Элементы проекта графики движения могут быть анимированы различными способами, в зависимости от возможностей программного обеспечения. Эти элементы могут быть в форме искусства, текст, фотографии и видео клипов, чтобы назвать несколько. Наиболее популярная форма анимации ключевые кадры , в котором свойство объекта может быть определены в определенные моменты времени, установив ряд ключевых кадров таким образом , что свойства объекта могут быть автоматически изменены (или , анимация ) в рамках между ключевыми кадрами. Другой способ включает в себя систему поведения , такие , как найти в Apple Motion , которая контролирует эти изменения путем имитации природных сил , не требуя более жесткий , но точный метод Keyframing. Еще один метод предполагает использование формул или сценариев, такие как функции выражения в Adobe After Effects или создания ActionScripts в Adobe Flash . Компьютеры способны расчета и рандомизации изменения в образы , чтобы создать иллюзию движения и трансформации. Компьютерные анимации можно использовать меньше информационное пространство ( компьютерная память ), автоматически твининг , процесс визуализации ключевых изменений изображения в указанном или расчетное время. Эти ключевые позы или кадры обычно называют ключевыми кадрами или низкой CP. Adobe Flash использует компьютерную анимацию анимацию, а также кадр за кадром анимации и видео.

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

Заметные графика движения художников

Студии

Ранний новаторская конструкция движения студия включает в себя:

дизайн Motion и цифровые пакеты композитинга программного обеспечения

Поскольку движение дизайн создается с помощью изображений и видеофрагментов, дополнительный инструмент представляет собой 3D — пакет программного обеспечения. Maya имеет новый модуль МАШ специально разработанный для графики движения с большим количеством узлов для сложной , но интерактивной анимации и бесшовно экспортирует объекты камеры в Adobe After Effects. Cinema 4D широко используется для его интуитивно понятный интерфейс, слоистые экспорт в Adobe After Effects, и дополнительный модуль MoGraph, но есть и другие пакеты программного обеспечения , а также. Такие пакеты могут генерировать изображения или видео последовательности с альфа — каналом , который хранит всю информацию о прозрачности.

Приложения дизайн движения включают в себя Adobe After Effects , Eyeon Fusion , Nuke , Autodesk Combustion , Apple Motion , Max / MSP , различные VJ программы, Smith Micro Software Anime Studio , Adobe Flash , натра и Synfig студии . 3D программы , используемые в графике движения включают Maxon Cinema 4D , Autodesk 3ds Max и Maya , NewTek Lightwave , электронная на Vue Infinite и Blender . Motion графика плагины включают в себя продукты Видео пилота , Red Giant Software и The Foundry Visionmongers .

Смотрите также

Рекомендации

Что такое анимационная графика? — Визуально

Анимированная графика обычно сочетается со звуком, что делает их ближе к фильмам, чем статическая инфографика. Возможно, «мультимедиа» также подойдет, но, опять же, мы углубляемся в семантику, где есть много совпадений. Скажем так, анимационная графика движется сама по себе и обычно отображается с помощью каких-то электронных средств массовой информации — по крайней мере, в настоящее время.

История анимационного дизайна

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

Но в целом, и по крайней мере здесь, когда мы используем термин «анимационная графика», мы следуем традиции Джона Уитни, одного из отцов компьютерной анимации и, возможно, первого, кто использовал термин «анимационная графика, », Когда он основал компанию Motion Graphics Inc. для создания фильмов и телепрограмм.К 1970-м годам Уитни использовала цифровые процессы, и родилась современная анимационная графика.

Как развивалась анимационная графика

До того, как компьютеры стали широко доступны, анимационная графика была дорогой и требовала много времени. Но наличие программ для настольных компьютеров, таких как Adobe Flash и After Effects, сделало анимированную графику более доступной. Ведущей программой, используемой дизайнерами анимированной графики, вероятно, является Adobe After Effects, которая немного похожа на Photoshop.

Конечно, новые продукты появляются каждый день.Их всех объединяет возможность комбинировать видео, текст, речь, визуализацию данных, специальные эффекты и даже 3D для создания анимации. Цель состоит в том, чтобы добавить элементы времени и пространства в мир инфографики и вдохнуть жизнь в статичный контент.

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

Нужна помощь с анимированной графикой? Обратитесь в Visually за помощью.

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

,

В чем разница между моушн-графикой и анимацией?

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

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

Один огромный сбивающий с толку аспект всего этого заключается в том, как онлайн-графические редакторы используют термин «анимация» для придания движения формам и частям данных. Термин правильный, но он просто делает грань между ними еще более размытой. И в анимированной графике, и в анимации, когда статическому визуальному элементу придается движение, он «анимируется». Конечно, некоторые хардкорные фанатики вместо этого скажут «дать ему движение».

Animation of boy walking. Eight walking frames + 1 static pose. Vector cartoon isolated character/frames.

Что у них общего?

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

Обе формы искусства используют один и тот же тип программного обеспечения для достижения нужных результатов; Maya, After Effects и другие.Анимационная графика и анимация также следуют Двенадцати принципам анимации. Эти принципы представляют собой набор визуальных правил, которые помогают художникам естественным образом оживлять предметы. Двенадцать принципов, от подпрыгивания до перекатывания и прыжков, применимы к любому объекту, движущемуся в процессе его анимации.

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

А теперь давайте посмотрим, чем они отличаются.

Основное отличие — повествование.

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

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

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

Подобно разнице между графическим дизайном и иллюстрацией

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

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

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

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

playing dice made with flowing particles background

А как насчет визуальных эффектов?

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

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

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

Перед вами

Вы занимаетесь анимацией или анимацией? Как вы относитесь к маркировке каждого из них?

,

Leave a Comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *