Создание анимации в cinema 4d after effects

Обновлено: 07.07.2024

В начале года отдел дизайна Noveo практически полным составом прошел онлайн-курс по Adobe After Effects и основам анимации. Senior Designer и Team Lead отдела дизайна Зарина рассказывает (и показывает), чему мы научились на курсе.

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

Принципы анимации

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

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

Шейповая анимация

Следующей была тема шейповых слоев. Несмотря на возможность создавать шейпы в After Effects, иллюстраторы предпочитают делать это в более гибких и мощных инструментах, таких как Adobe Illustrator или Adobe Photoshop. Импорт из этих программ позволяет сохранить некоторые свойства шейповых слоев (градиенты и прозрачность не сохраняются) и информацию о точках (их координаты) и продолжить работать с ними в After Effects, добавляя анимацию. Например, изменить форму векторного слоя можно, передвинув точки, а After Effects достроит плавное изменение формы в промежуточных кадрах. Для закрепления навыков мы взяли несложную иллюстрацию, подготовили в Adobe Illustrator слои, необходимые для анимации, и после экспорта добавили движения некоторым объектам:

  • добавили анимацию по Position луне, сияние луны сделали с помощью анимации Scale, зациклили расширение слоев в Expressions при помощи функции Loopout и Cycle;
  • чтобы задать движение дыму, пустили круглые шейповые слои по анимированному пути и настроили для них эффекты Gaussian Blur и Simple Choker;
  • для движения лодки сделали анимацию пути по дуге и добавили покачивание с помощью анимации параметра Rotate.

В результате статичная картинка ожила.

Анимация текста и кинетическая типографика

Создание титров

Анимация при помощи Puppet position pin tool

Часто, чтобы заанимировать несложные движения персонажей, применяется анимация при помощи Puppet pin tool. В ключевых точках расставляются пины, которые, как булавки, фиксируют части изображения. И передвигая эти булавки, можно заставить двигаться фигуру персонажа. Манипулировать этими пинами не всегда легкая задача, поэтому их привязывают к Null objects и анимируют параметры Position и Rotation нулевого объекта. Чтобы заанимировать, например, движение руки персонажа, необходимо сначала привязать части руки друг к другу и саму руку к телу. Тогда при повороте руки в локте остальная часть руки с кистью повернется следом. Кроме движения персонажей этот прием можно применять для оживления листвы, кустов или деревьев.

Анимация при помощи плагина Joysticks’n’Sliders

Трекинг камеры

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

Паралакс

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

Эта тема нас интересовала, пожалуй, больше всех, так как с ней мы сталкиваемся в процессе своей профессиональной деятельности. Чтобы создавать презентации возможных анимаций интерфейсов, прежде всего надо быть знакомым с концепцией Google Material design, ведь там подробно описано, как должны вести себя элементы интерфейсов. Средствами Adobe After Effects можно показать, какие микровзаимодействия, переходы и анимации могут быть применены в приложении, как это повлияет на общее восприятие приложения. Чтобы оживить приложение, нужно в первую очередь подготовить файл с элементами интерфейса в Adobe Illustrator, затем импортировать его со всеми необходимыми слоями в программу After Effect и там настроить переходы и анимации средствами программы. Обычно анимируются такие параметры, как opacity, position и scale. С их помощью можно показать, как разворачиваются и открываются элементы, как приложение реагирует на взаимодействие с пользователем, как происходит переход между экранами и многое другое.

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

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

Анимации выполнены дизайнерами Noveo Зариной и Людмилой.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Текущая версия After Effects (22.0) поддерживает только Cinema 4D версии R24 (установщик предоставляется). Однако актуальная версия Cinema 4D R25 совместима с After Effects более ранних версий, чем 22.0. Если рабочий процесс требует использования функций, доступных только в Cinema 4D R25, используйте After Effects 2021 г. (версия 18.4 или выше). В будущих выпусках After Effects 2022 будет добавлена поддержка функций, доступных только в версии R25.

В этом документе пойдет речь о CINEMA 4D и Cineware

Тесная интеграция с CINEMA 4D позволяет использовать Adobe After Effects совместно с Maxon CINEMA 4D. В After Effects можно создать файл CINEMA 4D ( C4D ) и работать со сложными 3D-элементами, сценами и анимациями.

Для обеспечения совместимости ядро рендеринга Maxon CINEMA 4D устанавливается вместе с Adobe After Effects. Это позволяет выполнять рендеринг файлов CINEMA 4D. На каждом слое можно управлять определенными аспектами рендеринга, камерой и содержимым сцены. Этот налаженный технологический процесс не требует создания промежуточных файлов или файлов наборов изображений.

Maxon CINEMA 4D R24 устанавливается вместе с After Effects в папке с названием Maxon Cinema 4D R24. Файлы CINEMA 4D можно создавать, редактировать и импортировать. Для создания экструдированного текста и сплайнов можно использовать такие инструменты, как заглавные буквы и фаска.

  • Внешний модуль Cineware можно использовать как обычно, импортируя и экспортируя файлы проектов .c4d. Это особенно полезно при рендеринге с использованием файлов R24.
  • Модуль рендеринга Cineware по умолчанию предоставляет те же возможности рендеринга, что и Cinema 4D R24.

Приложение CINEMA 4D предоставляет возможность редактировать, создавать и использовать собственные файлы Cinema 4D. По умолчанию используется наиболее поздняя версия установленного приложения CINEMA 4D.

Чтобы научиться использовать CINEMA 4D Lite с камерами и источниками света в After Effects, см. это учебное пособие.

Установка Cinema 4D

Установите After Effects как обычно. Процесс установки приостанавливается на компоненте Maxon Cinema 4D R24, достигнув 80 %.

Удаление Cinema 4D

Вручную перетащите папку Maxon Cinema 4D R24 на значок «Корзина».

  • Windows:
    • Используйте деинсталлятор из папки Maxon Cinema 4D R24.
    • Также можно использовать элементы «Панель управления\Программы\Программы и компоненты» или «Параметры системы > Установка и удаление программ».
    • Mac: /Users/имя_пользователя/Library/Preferences/MAXON
    • Windows: C:\Users\имя_пользователя\AppData\Roaming\MAXON

    Не рекомендуется удалять одну только папку Maxon, так как это повлияет на функциональные возможности After Effect Cineware и 3D-рендеринга.

    Существует несколько способов создания, импорта и редактирования файлов CINEMA 4D в After Effects.

    Импорт файлов CINEMA 4D

    Чтобы импортировать файлы CINEMA 4D в After Effects, выполните указанные ниже действия.

    Выберите Файл > Импорт > Файл .

    Выберите файл CINEMA 4D и нажмите Импорт . Файл будет помещен на панель Проект в качестве элемента видеоряда. Можно поместить элемент видеоряда в текущую композицию или создать соответствующую композицию.

    При размещении на панели проекта видеоряда в новой композиции с использованием значка новой композиции создается новая композиция, которая соответствует настройкам файла Cinema 4D. Затем создается слой CINEMA 4D, и на нем — 3D-сцена. Если перенести видеоряд в существующую композицию, он будет принят с использованием размера/пропорций композиции.

    Перед импортом включите настройки Сохранить многоугольники для меланжа и Сохранить анимацию для меланжа в настройках приложения CINEMA 4D. Эти настройки оказываются особенно полезными в случае зависимости кадров CINEMA 4D от предыдущих кадров.

    Редактирование файлов CINEMA 4D

    В окне «Проект» можно изменить файлы CINEMA 4D, помещенные в композиции, а также исходные элементы CINEMA 4D. Файлы открываются в приложении CINEMA 4D Если имеется другая версия CINEMA 4D, то для редактирования файлов будет использоваться она. См. раздел Редактирование видеоряда в исходном приложении.

    Можно выбрать нужную версию CINEMA 4D для использования с командой Редактировать оригинал . См. раздел Работа с разными экземплярами CINEMA 4D в Cineware Effect.

    Создание файлов CINEMA 4D

    В After Effects можно создавать файлы CINEMA 4D. Для этого выберите Файл > Создать > Файл Maxon CINEMA 4D или Слой > Создать > Файл Maxon CINEMA 4D .

    Укажите имя и расположение файла.

    Откроется приложение CINEMA 4D.

    Создайте сцену C4D и выберите Файл > Сохранить для сохранения файла.

    Подробнее см. в этом видеоролике Джеффа Сенгстака (Jeff Sengstack). Создание файлов CINEMA 4D.

    Экспорт в Maxon CINEMA 4D и интегрированная обработка правок с помощью канала Live 3D

    Можно экспортировать композиции с анимированным 3D-текстом и слоями-фигурами в Maxon CINEMA 4D с помощью канала After Effects Live 3D в рамках интегрированного рабочего процесса для 3D.

    Слои 3D-фигур экспортируются в виде экструдированных сплайнов и включают в себя анимацию свойств слоя-фигуры.

    При выборе варианта «Экструдировать текст как фигуры» трехмерные текстовые слои экспортируются как экструдированные сплайны в файл .c4d. Этот параметр сохраняет точность слоя: форматирование символов и абзацев и анимацию свойств текстового слоя. Нельзя изменить шрифт и текстовое содержимое в CINEMA 4D.

    При выборе варианта «Сохранить редактируемый текст» трехмерные текстовые слои экспортируются как экструдированные текстовые объекты в файл .c4d. В этом случае можно изменять шрифт и текст в CINEMA 4D. В то же время, этот вариант обеспечивает ограниченную поддержку форматирования символов и абзацев, а также анимации свойств текстового слоя. Не поддерживаются следующие функции анимации текста: аниматоры текста, кернинг, отслеживание, вертикальный текст, текст абзаца и текст по контуру.

    Обводки 3D-текста и слои-фигуры экспортируются в файл .c4d. В то время как модуль 3D-рендеринга с трассировкой лучей в After Effects не преобразует обводки для слоев 3D-текста, обводки экспортируются, если они включены. Чтобы просмотреть обводки слоев 3D-текста перед экспортом убедитесь, что выбран режим рендеринга композиции «Classic 3D».

    Экспорт в Maxon CINEMA 4D

    Чтобы выполнить экспорт в функции CINEMA 4D, выполните следующие действия.

    Выберите Файл > Экспорт > Средство экспорта Maxon CINEMA 4D и сохраните файл C4D.

    В диалоговом окне Экспорт в Maxon CINEMA 4D выберите один из следующих вариантов:

    • «Экструдировать текст как фигуры»: создает файл .c4d с основной экструзией.
    • «Сохранить редактируемый текст»: экспортирует слои 3D-текста как экструдированные текстовые объекты в файле .c4d, что позволяет изменять шрифт и текст в CINEMA 4D.
    • Если маловероятно, что текст изменится после экспорта, рекомендуется выбрать вариант «CINEMA 4D: экструдировать текст как фигуры» в диалоговом окне «Экспорт текста».
    • При экспорте координаты сцены для родительского нулевого объекта сдвигаются так, чтобы центр композиции After Effects соответствовал центру CINEMA 4D в точке с координатами 0,0,0.
    • Экспортированные файлы .c4d сохраняются в версии 17.0 CINEMA 4D.

    Импорт и редактирование файла .c4d в Maxon CINEMA 4D

    Можно импортировать созданный файл .c4d в композицию After Effects для редактирования. Выберите «Редактировать» > «Редактировать оригинал», чтобы отредактировать файл .c4d в CINEMA 4D.

    При импорте и добавлении в композицию файла .c4d, созданного средством экспорта версии Cineware 3.1, можно просмотреть сцену через камеру After Effects. Для этого сначала необходимо добавить камеру, а затем добавить настройку «Камера» в эффекте Cineware и выбрать вариант «Камера композиции по центру».

    Все добавляемые к композиции слои After Effects 3D выравниваются со слоем сцены CINEMA 4D после экспорта. Извлеченные данные 3D-сцены из файла .c4d, например нулевые объекты, камеры и источники света, также выравниваются при условии, что все новые объекты, добавленные в файл .c4d, группируются под тем же родительским нулевым объектом, который создан в экспортированном файле .c4d.

    Чтобы открыть экспортированный файл Cinema 4D в After Effects и CINEMA 4D для внесения дополнительных правок, выполните следующие действия:

    Выберите Файл > Импорт и укажите файл C4D, который требуется импортировать в композицию.

    Чтобы настроить 3D-элементы, используя CINEMA 4D, выберите слой Cineware , затем выберите команду Редактировать > Редактировать оригинал (или нажмите сочетание клавиш Command+E в Mac OS или Ctrl+E в Windows). Файл C4D откроется в приложении CINEMA 4D, входящем в состав After Effects CC.

    Внесите изменения и сохраните файл. Композиция After Effects автоматически обновляется в соответствии со всеми изменениями.

    Интеграция модуля CineRender, который основано на ядре рендеринга CINEMA 4D, позволяет выполнять рендеринг слоев на основе файлов CINEMA 4D прямо в программе After Effects. Эффект Cineware позволяет управлять настройками рендеринга и обеспечивает определенный контроль над сочетанием качества/скорости рендеринга. Можно также указать камеры, проходы или слои C4D, используемые для рендеринга. Эффект Cineware автоматически применяется при создании слоя на основе видеоряда C4D в композиции. Каждый слой CINEMA 4D имеет собственные настройки рендеринга и отображения.

    Синхронизация слоя

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

    Когда установлен флажок Синхронизировать слой AE вверху на панели «Элементы управления эффектами», настройки рендеринга и параметры камеры во всех экземплярах слоя автоматически синхронизируются, но слои CINEMA 4D можно настраивать по отдельности. Если для определенного слоя сцены CINEMA 4D этот флажок снят, то ни одна из настроек этого слоя не будет синхронизироваться с остальными слоями в композиции.

    Live Link

    Live Link обеспечивает синхронизацию таймлайнов CINEMA 4D и After Effects.

    Для работы с Live Link нажмите кнопку «Включить» для Live Link. Текущий файл будет открыт в указанной версии CINEMA 4D. Чтобы включить Live Link в CINEMA 4D, введите команду «Редактировать» > «Установки» > «Связь» > «Live Link», затем выберите пункт «Включать Live Link при запуске». Синхронизация таймлайнов выполняется при переключении между After Effects и CINEMA 4D. Когда выбирается другой слой C4D в After Effects, нажмите кнопку Enable (Включить), чтобы синхронизировать этот слой.

    Настройки рендеринга

    Настройки рендеринга Cineware определяют, как следует выполнять рендеринг сцены в After Effects. Эти настройки позволяют ускорить рендеринг, позволяя при этом выполнять другие действия.

    Определяет используемый модуль рендеринга. Возможны следующие варианты.

    • Текущий . Использует стандартный модуль рендеринга, указанный в файле C4D. Для редактирования этих настроек используйте приложение CINEMA 4D.
    • Текущий (черновое качество) . Использует стандартный модуль рендеринга, но отключает замедляющие настройки, такие как сглаживание, для более быстрого взаимодействия.
    • Окно просмотра (черновое качество) . Использует настройки для обеспечения наиболее быстрого рендеринга, позволяя менять Настройки отображения . Шейдеры и многопроходные операции не отображаются. Используйте этот модуль рендеринга, чтобы продолжить работу с композицией.
    • Окно просмотра . Аппаратно ускоренный рендеринг обеспечивает более высокое качество и более высокую скорость по сравнению с рендерингом «Окно просмотра (черновое качество)». Этот модуль рендеринга в CINEWARE поддерживает тот же повышенный уровень качества OpenGL, как и CINEMA 4D в отношении свойств «Прозрачность», «Тени», «Эффекты завершающей обработки» и «Шумы».

    Если при сохранении файла .c4d в полной розничной версии CINEMA 4D в настройках рендеринга выбран физический или аппаратный рендеринг, файл рендерится с этими настройками в случаях, когда в CINEWARE выбран режим рендеринга «Текущий» или «Текущий (черновое качество)».

    Этот параметр доступен только при использовании модуля рендеринга Окно просмотра (черновое качество) . Доступные параметры: Текущие тени , Каркас и Рамка . Режимы «Каркас» и «Рамка» предоставляют упрощенное представление сцены.

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

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

    Хранить текстуры в ОЗУ

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

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

    Настройки проекта

    Эффект Cineware поддерживает следующие настройки проекта:

    • Камера
    • Слои CINEMA 4D
    • Несколько проходов (линейный рабочий процесс)
    • Команды

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

    Камера CINEMA 4D . Используется камера, определенная как камера представления рендеринга в CINEMA 4D, или камера по умолчанию, если определенная камера не указана.

    Выбрать камеру CINEMA 4D . Используйте этот параметр для выбора камеры. Если этот параметр доступен, щелкните элемент «Задать камеру».

    Камера композиции по центру . используйте этот параметр, чтобы задействовать камеру After Effects и повторно вычислить координаты CINEMA 4D и адаптировать их к координатам After Effects. При импорте существующего файла C4D (как правило, моделируется около 0,0,0) для рендеринга с использованием новой камеры After Effects (которая центрируется по композиции) используйте модель C4D по центру композиции After Effects. В противном случае модель может быть неожиданно смещена в силу разницы начал.

    Камера композиции . Используйте этот параметр для включения активной камеры After Effects. Чтобы этот параметр был доступен, необходимо добавить камеру After Effects. Например, используйте этот параметр для камеры, добавленной путем извлечения из проекта CINEMA 4D (поскольку такие камеры ссылаются на координатную систему CINEMA 4D, согласно которой точка 0,0,0 находится в центре окна просмотра CINEMA 4D). Этот параметр подходит для камер, добавленных в After Effects с помощью команды Слой > Создать > Камера .

    Выбор камеры. если сцена CINEMA 4D содержит камеры помимо камеры по умолчанию, нажмите на эту кнопку и выберите камеру.

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

    Включите и выберите слои CINEMA 4D для рендеринга.

    Несколько проходов (линейный рабочий процесс)

    Используйте параметр Несколько проходов Cinema 4D для определения проходов рендеринга. Функции с несколькими проходами доступны только для стандартного модуля рендеринга.

    Несколько проходов предоставляют возможность быстро вносить точные изменения в сцену C4D путем составления различных типов проходов в After Effects, например изменения теней или отражений в сцене. Чтобы результаты соответствовали настройке проекта CINEMA 4D Линейный рабочий процесс по умолчанию, необходимо работать в проекте с наложением цветов в линейном свете (в линейном рабочем пространстве с управлением цветами или с применением набора Смешивать цвета, используя гамму 1.0 в диалоговом окне Настройки проекта ).

    Установить несколько проходов

    Щелкните для выбора прохода, рендеринг которого следует выбрать на этом слое. Этот параметр доступен только в том случае, если включен параметр «Несколько проходов» в CINEMA 4D.

    Определенные несколько проходов

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

    Добавить слои изображений

    Используйте этот параметр для создания слоев с несколькими проходами с определенными режимами наложения в зависимости от настройки Определенные несколько проходов . Если параметр «Определенные несколько проходов» включен, то параметр Добавить слои изображений позволяет добавлять только проходы, заданные в настройках рендеринга CINEMA 4D, а не все поддерживаемые типы.

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

    В этом уроке мы узнаем, как очень просто можно одновременно работать в программах Cinema 4D и After Effects.

    По заданным фильтрам ничего не найдено

    Попробуйте изменить критерий поиска, или сбросить фильтры.

    Комментарии 55

    Помогите пожалуйста, что я делаю не так?

    Версия Cinema 4D R14

    Версия Adobe After Efects CS6

    установил плагин обмена C4DImporter как вы демонстрировали в видео уроке

    делаю рендер в синеме, Но при импорте в A.E. у меня разноцветная картинка. И нет моей анимации даже если кручу ползунок.

    Секвенция не подхватилась, импортируйте её самостоятельно по Ctrl+I

    можно между ними использовать трекинг ?

    Добрый день, смотря, как именно собираетесь применять трекинг в работе с CINEWARE

    Здравствуйте, подскажите: почему after effects не видит движок cinema 4d?

    Уточните вопрос, пожалуйста. О каком именно движке идёт речь? И какая у вас версия АЕ?

    а где плагин скачать?

    Он встроен в последние версии AE

    Подскажите пожалуйста как решить вот такую проблему: из C4D (R17) проекта в AE (CC 2015) не переносится источник света появляется только tga файл и камера. Заранее спасибо.

    В добавок скажу что пробовал и cinema r15.008 r16 эффект 0. бывает одновременно открывает и maxon lite .

    ДОбрый день ! подскажите пожалуйста , не могу заредрендить из синема 4д - 14 в афтер эффект ( в настройках - многопроходное изображение : нету Афтер эффектс) Спасибо

    Какая версия и редакция Cinema 4D?

    Здравствуйте! Почему-то After Effects не видит материал, применённый к объекту в Cinema4D.

    Всем привет! у меня стоит синема R15 когда я нажимаю layer - maxon c4d file. у меня почему то открывает cinema 4d lite! откуда она не знаю в компе ее нет

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

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

    • Профессия из 4 курсов

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

    Компании ищут специалистов, которые разбираются в законах композиции и цвета, понимают принципы анимации и умеют работать в After Effects, Cinema 4D, Photoshop.

    сейчас ищут motion-дизайнеров

    Кому подойдёт этот курс

    Новичкам в дизайне

    Новичкам в дизайне

    Вы научитесь создавать анимацию. Освоите профессиональные программы, сделаете первые работы и получите востребованную профессию.

    Начинающим дизайнерам

    Начинающим дизайнерам

    Вы освоите Adobe After Effects и Cinema 4D. Создадите работы с анимированной графикой и сможете претендовать на более сложные и дорогие проекты.

    Чему вы научитесь

    Разбираться в дизайне

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

    Анимировать объекты

    Сможете создавать анимированную инфографику, персонажную 2D-анимацию, оживлять логотипы и презентации.

    Моделировать 3D-объекты

    Научитесь создавать модели, работать с текстурами, материалами, светом.

    Применять спецэффекты в работе

    Создавать рекламные ролики

    Научитесь работать с брифом заказчика. Сможете монтировать видео, работать с кадром и светом. Узнаете, как использовать анимации, 3D-модели и эффекты в ролике.

    Ваши будущие работы

    Превью видеозаписи

    Превью видеозаписи

    Превью видеозаписи

    Работа студента

    Работа студента

    Акция!

    Акция!

    Все участники курса получат доступ к полугодовой подписке Cinema 4D со скидкой 99,5%. В неё также входит рендер Redshift и пакет плагинов для After Effects Red Giant Complete.

    О Skillbox

    Анжела Каменская

    Денис Бобкин

    Ирина Черкашина

    Андрей Ершов

    Как пользоваться платформой

    Изучаете тему

    Изучаете тему

    Выполняете практические работы

    В том темпе, в котором вам удобно.

    Выполняете практические работы

    Работаете с куратором

    Закрепляете знания и исправляете ошибки.

    Работаете с куратором

    Презентуете итоговый проект

    И дополняете им своё портфолио.

    Презентуете итоговый проект

    Курс записан совместно со студией Trehmer CG

    C 1996-го создаёт компьютерную графику, эффекты и видео для рекламы и кино. Студия работала над фильмами «Вторжение», «Ленинград», «Вратарь Галактики». Среди клиентов «Мегафон», Bork, Mondelez и десятки других компаний.

    Работа партнёра

    Шоурил студии Trehmer CG

    Превью видеозаписи

    Содержание курса

    Вас ждут онлайн-занятия и практические задания на основе реальных кейсов.

    • 37 тематических модулей
    • 202 онлайн-занятия

    Motion-дизайн. Часть 1

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

      1. Введение в профессию
      2. Основы дизайна
      3. Базовые принципы. Психология восприятия. Композиция в дизайне
      4. Цвет
      5. Введение в шрифты
      6. Графический дизайн

    After Effects c нуля до PRO

    Освоите один из важнейших инструментов motion-дизайнера. Научитесь монтировать видео, создавать 2D- и 3D-анимации.

      1. Интерфейс и начало работы с After Effects
      2. Интерфейс: продолжение
      3. Текст в After Effects
      4. Шейпы
      5. Инфографика
      6. 3D-слои и камера
      7. Введение в анимацию
      8. Анимация 2D
      9. Expressions
      10. Video tracking. Работа с футажами
      11. Работа с рендером
      12. Важные плагины для After Effects

    Motion-дизайн. Часть 2

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

      1. Создание анимации персонажей PRO
      2. Кинетические шрифты
      3. Монтаж в Premiere PRO
      4. Маркетинг — как добраться до сути брифа

    Cinema 4D с нуля до PRO

    Научитесь создавать 3D-модели, работать с текстурами, светом и материалами.

      1. Введение в 3D CG
      2. Основы интерфейса
      3. Моделинг. Генераторы
      4. Продвинутый моделинг
      5. Симуляция. Твёрдые тела
      6. Симуляция. Мягкие тела. Ткань. Частицы
      7. Создание объектов с помощью MoGraph / Cloner / Volume Mesher
      8. Свет
      9. Материалы
      10. Анимация
      11. Анимация в моушене
      12. Настройки рендера и композитинг
      13. XPresso
      14. Финализация проекта
      15. Дополнительные инструменты Cinema 4D
      16. Итоговый проект: анимационный ролик по брифу

    Итоговый проект

    Разработаете анимационный ролик по брифу от настоящего заказчика: от идеи до финального рендера.

    Уже прошли какие-нибудь курсы?

    Скажите об этом менеджеру — за этот курс платить не придётся!

    Получить презентацию курса и консультацию специалиста

    Ваша заявка успешно отправлена

    Спикеры

    Павел Куфтерин

    Павел
    Куфтерин

    Владимир Танаевский

    Владимир
    Танаевский

    Игорь Ирбитский

    Игорь
    Ирбитский

    Motion-дизайнер, основатель студии анимации «Птичьи очкИ»

    Демьян Карпунов

    Демьян
    Карпунов

    Кирилл Клейменов

    Кирилл
    Клейменов

    Работы спикеров

    Превью видеозаписи

    Шоурил коммерческих работ за 2020 год

    Превью видеозаписи

    Реклама службы доставки «ПиццаФабрика»

    Превью видеозаписи

    Сквозь время: история развития искусства и анимации

    Студия «Ключевой кадр»

    Отзывы студентов

    Отзывы студентов

    Иван Медведев, г. Ивантеевка

    Если какой-то материал тяжело даётся, есть вопрос по ДЗ, достаточно написать преподавателю, который поможет разобраться с информацией и подскажет как решить задачу.
    По итогу 9-месячной учебы стал по-другому смотреть на сайты. Замечаю «баги», разбираюсь в вёрстке, веду репорты. Узнал, как работать со специфическим ПО.
    Уже сейчас нисколько не жалею, что выбрал Skillbox. Спасибо.

    Отзывы студентов

    Валентина Нарушевич, г. Санкт-Петербург

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

    Отзывы студентов

    Яна Щербицкая, г. Санкт-Петербург

    Курс очень круто структурирован, там есть все знания, которые мне нужны, чтобы освоить программу. Сама бы я точно что-нибудь пропустила.
    Преподаватели всё спокойно и терпеливо объясняют. Если ты что-то не понял, снимут дополнительный видеоролик и покажут ещё раз.
    Самое крутое в курсах Skillbox — постоянная связь с теми, кто подскажет, как правильно.
    Мой сайт

    Отзывы студентов

    Алла Комиссаренко, г. Москва

    Работать дизайнером мне очень нравится, от UX я вообще в восторге, тяга к аналитике у меня была всегда. После долгих поисков работы в новой сфере подруга помогла мне получить заказ на редизайн сайта большой компании.
    Отдельно хочу сказать спасибо преподавателю Александру Свобода, он очень подробно расписывал все недочёты и ошибки решений в дизайне.
    Мой сайт

    Отзывы студентов

    Елена Кальво, г. Ницца, Франция

    «Почему бы не сделать из хобби источник заработка?», — однажды подумала я.
    Недолго размышляя, записалась на курс в Skillbox и встала в ряд претендентов на гордое звание копирайтера.
    Работа с текстом помогла мне вернуть свою жизнь, вдохновила. Я начала снова ухаживать за собой, читать. Увидела, что я не только мать, но и писатель.
    Читайте мои тексты в Instagram

    Отзывы студентов

    Ирина Семёнова, г. Бельцы, Молдова

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

    Ваше резюме после прохождения курса

    Андрей Семёнов

    • Должность Motion-дизайнер
    • Зарплата от: 80 000 ₽

    Профессиональные навыки:

    • Подбор референсов
    • Моделинг, текстуринг и лайтнинг
    • Создание типографических макетов
    • Монтаж видео
    • Работа с цветом, светом и перспективой
    • Создание стилфреймов
    • Работа с кинетическим шрифтом
    • Работа с саунд-дизайном
    • 2D- и 3D-анимация
    • Композитинг
    • VFX
    • Рендер-трекинг

    Сертификат Skillbox

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

    Диплом Skillbox

    • Старт курса: 21 ноября
    • Осталось: 6 мест

    Стоимость курса

    • 3 610 ₽ /мес
    • 111 907 ₽
    • 203 467 ₽

    Скидка 45% до 20 ноября

    Записаться на курс или получить бесплатную консультацию

    Ваша заявка успешно отправлена

    Часто задаваемые вопросы

    Я никогда не занимался motion-дизайном. У меня получится?

    Какие программы понадобятся для работы? Мне нужно будет их покупать?

    • Cinema 4D;
    • Redshift Renderer;
    • Adobe After Effects;
    • Adobe Photoshop.

    Мой компьютер потянет профессиональные программы?

    Посмотрите системные требования на официальных сайтах разработчиков:

    Какой график занятий? Получится ли совмещать их с работой?

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

    Сколько часов в неделю мне нужно будет уделять занятиям?

    Всё зависит только от вас. В среднем пользователи платформы занимаются от 3 до 5 часов в неделю.

    Кто будет мне помогать в обучении на платформе?

    У вас будут кураторы на платформе и в Telegram-чате курса. Они прокомментируют практические работы, дадут полезные советы и ответят на любые вопросы. Вы сможете перенять их опыт, профессиональные знания и лайфхаки.

    Действуют ли какие-нибудь программы рассрочки?

    Получите консультацию и курс в подарок при покупке

    Мы свяжемся с вами и ответим на любые возникшие вопросы

    Ваша заявка успешно отправлена

    Записаться на курс

    Наш специалист свяжется с вами и ответит на любые ваши вопросы

    Ваша заявка успешно отправлена

    Спасибо за заявку!

    Наш менеджер свяжется с вами
    в ближайшее время

    Купите со скидкой 5595 ₽

    Условия рассрочки

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

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

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

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

    Оживление иллюстраций

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

    Упрощение реализации

    Моушн-дизайн помогает быстрее реализовать ваш проект. Как?

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

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

    Улучшите свое портфолио

    Слайд-шоу — это здорово, но давайте будем честны — людям нравятся видео. Они просты, впечатляющи, интересны и информативны.

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

    Если вы UI/UX-дизайнер, даже простая прокрутка и раскрытия помогут привлечь больше внимания к вашему дизайну и сделать портфолио более выдающимся.

    Импорт из Sketch

    Импорт из Sketch выполняется просто. Для этого вам понадобится плагин AEUX для After Effects и Sketch.

    1. Организуйте все в группы и дайте правильные названия всем слоям

    2. Настройте параметры импорта в плагине AE. В настройках плагина вы можете выбрать, куда импортировать: в новую или уже существующую композицию. Также плагин умеет предварительно создавать артборды, группы, изменять частоту кадров и размер композиции и т.д. (подробную информацию о настройках плагина вы можете прочитать здесь).

    Импорт из Figma

    Для этого вам понадобится помощь плагина AEUX для After Effects и онлайн-плагина Figma (инструкция здесь).

    1. Убедитесь, что вы скачали шрифты, используемые в дизайне.

    2. Убедитесь, что все слои названы правильно. Это очень важно, ведь в противном случае вы потратите массу времени на организацию работы в After Effects.

    3. Настройте параметры импорта в After Effects, тут всё как и в работе со Sketch.

    4. Перейдите в панель плагинов > development > AEUX. При необходимости измените настройки и нажмите «send to AE». В последней версии плагина исходный код из Figma будет автоматически открываться в After Effects.

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

    Как мы знаем, есть два типа людей:

    • Любят precompose и используют их все время;
    • Предпочитают не использовать precompose.

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

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

    Кроме того, некоторые эффекты слоя могут не работать должным образом, если вы создали анимацию в предварительной композиции (CC bend, 3D-слои и т.д.).

    Если вы не используете Precompose, вам в любом случае необходимо организовать свои слои.

    Мы всегда используем цветовой код для распределения слоёв по группам и NULL-объектам, что помогает быстрее анимировать и находить нужные нам слои.

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

    Первый вариант — применить одинаковый цвет ко всем элементам экрана, второй — применить уникальный цвет к каждому столбцу. Затем создайте объекты NULL и сделайте все слои экрана родительскими для этого NULL.

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

    Основные бесплатные плагины для упрощения вашей работы

    Motion Tools

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

    Это ещё один простой, но удобный плагин. У него есть только одна простая функция — копирование динамики из одного ключевого кадра в другой. Как это использовать? Просто выберите ключевые кадры, когда вы уже настроили динамику, нажмите «копировать», выберите нужные кадры, для которых вам нужна такая же динамика и нажмите «вставить». Легко и полезно!

    Bodymovin и Lottie Files

    Также мы используем плагины для экспорта наших иллюстраций, предварительных загрузок и анимаций значков.Эти плагины преобразуют композиции After Effects в файлы формата JSON, которые можно использовать на iOS, Android и React Native без изменений.

    Хорошее смягчение — самое главное в анимации и ключ ко всему. Так как же научиться делать хорошее смягчение?

    В движении пользовательского интерфейса вы все время будете анимировать две вещи: прокрутки и раскрытие.

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

    Например, вы анимируете прокрутку: все ваши слои готовы и организованы, вы уже создали NULL для прокрутки и родительские слои для него (мы говорили о создании NULL для каждого экрана). Теперь вам нужно сделать их родительскими для прокрутки NULL. Хорошо, пора творить чудеса.

    • Нажмите на scroll NULL и активируйте свойство Position (нажмите «P» на клавиатуре);
    • Создайте ключевые кадры для начальной и конечной точек;
    • Выберите ключевые кадры и перейдите в редактор графиков. Выберите график скорости, если он еще не активен.
    • Отрегулируйте кривую, как на изображении.
    • Вернитесь к временной шкале и при необходимости отрегулируйте время.

    Теперь пора поговорить об анимации раскрытия объектов. Вы уже анимировали движение прокрутки, но этого все ещё недостаточно. Чтобы движение выглядело хорошо, необходимо анимировать отображение слоев, которые вы прокручиваете.

    Как оживить раскрытие?

    • Выберите слои, нажмите «P» и «T» на клавиатуре, чтобы выбрать положение и свойства непрозрачности;
    • Переместитесь на 20 кадров вперед и создайте ключевые кадры;
    • Вернитесь назад, анимируйте непрозрачность до 0, положение Y до +20;
    • Создайте динамику, как показано на графике ниже.

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

    Итак, вы анимировали движение прокрутки, раскрытия и добавили динамику, но чего-то всё еще не хватает… Смещений! Без них никуда, они всегда имеют большое значение.

    Что из себя представляет «Смещение»?

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

    • Создайте смещения — переместите каждый слой на 2 кадра дальше (перемещайте ключевые кадры каждого слоя по одному или используйте плагин MDS, чтобы сделать это одним щелчком мыши).
    • Просмотрите и при необходимости настройте анимацию. Теперь вы увидите большую разницу. Так что не забывайте использовать смещения, это всегда помогает!

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

    Раскрытие фото

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

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

    Фотоэффекты

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

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

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

    Анимацию текстовых эффектов достаточно легко освоить. Если вы наберете «текстовая анимация в After Effects» на YouTube, там будет представлено множество руководств. Но если вы не хотите тратить свое время на изучение анимации текста — можете использовать уже готовые пресеты. Их можно использовать как для заголовков, так и для основной текстовой анимации.

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

    Оживите свои иллюстрации и ваш дизайн на 100% станет более впечатляющим.

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

    Когда анимация будет завершена, разработчикам потребуются файлы в формате JSON. Для их создания мы используем плагин Bodymovin или Lottie files для After Effects. В большинстве случаев эффекты не работают в формате Lottie, поэтому мы пытаемся создать красивую анимацию с основными свойствами: положением, вращением, масштабом, непрозрачностью и анимацией пути.

    Когда вы закончите создание анимаций, проверьте пару вещей:

    1. Предварительно просмотрите все анимации несколько раз. Не один раз, а хотя-бы пять. Убедитесь, что все выглядит так, как вы хотели.

    2. Сделайте так, чтобы в панели проекта все выглядело красиво. Все источники должны находиться в отдельных папках. Предварительные композиции правильно названы и собраны вместе в одной папке. Создайте папку «Архив» и храните здесь все версии анимаций (просто сделайте это, так будет лучше).

    3. Выполните визуализацию и снова проверьте визуализированную анимацию. Наберитесь терпения и проверьте всё это еще хотя-бы 5 раз, уверяю, вы найдете там ошибки.

    Советы по публикации и рендерингу в социальных сетях

    Если вы новичок в анимации, у нас есть для вас несколько советов.

    Используйте Adobe Media Encoder. Да, вы можете рендерить .mov прямо в After Effects, но это не самый лучший формат. MOV имеет большой вес, и не всегда правильно воспроизводится. Конечно, вы можете выполнять рендеринг в MOV, а затем использовать онлайн-конвертеры для рендеринга в формате MP4 или GIF.

    В Media Encoder рендеринг проходит в формате h.264. Чаще всего вам будет достаточно стандартных настроек. При необходимости можно изменить частоту кадров или размер видео здесь, не возвращаясь к AE. Просто убедитесь, что для вашего рендера установлено «Ускорение графического процессора Mercury Playback Engine (металл)».

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

    Советы по социальным сетям

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

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

    Читайте также: