Шейповый слой что это
WWW.IURAF.RU Уроки видеомонтажа в Adobe
Adobe After Effects. Урок 6
Cлои. Виды слоев.
Свойства слоев. 3D слой.
Задачи на этот урок:
1. Что такое слой в After Effects? Виды слоев.
Основным объектом, над которым совершаются действия в программе, является слой. Слои – это элементы, из которых состоит композиция. Слои располагаются друг над другом в панели Timeline в указанном пользователем порядке, и в этом же порядке их изображения будут накладываться друг на друга, создавая тем самым кадры композиции. Можно использовать любое количество слоев по мере необходимости, чтобы создать свою композицию.
Виды слоев в After Effects:
1. Слои, содержащие визуальные элементы, созданные в After Effects:
2. Слои, созданные из импортированных элементов видеоряда, изображений, аудиодорожек:
3. Слои для выполнения специальных функций:
4. Слой, состоящий из других слоев:
Изменения, внесенные на один слой, не влияют на другие слои, если слои не связаны между собой родительскими связями. Порядок наложения слоев влияет на порядок рендеринга композиции.
2. Создание слоя.
Создать новый слой мы можем несколькими способами:
После того, как мы добавили слой на панель Timeline, можем изменить место слоя в порядке наложения слоев (зажмите слой левой кнопкой мыши, и, не отпуская ее, перетаскивайте в требуемое место в списке слоев).
Чт такое слой, и какие бывают слои мы рассмотрели на уроках:
3. Базовые свойства слоя.
Мы аналогичный раздел рассматривали в теме:
в пунктах: «1. Три категории Эффектов», где «Базовым свойствам слоя» в Adobe Premiere соответствуют «Фиксированные эффекты» – эффекты которые автоматически включаются в любой клип помещенный на Таймлайн.
Другие типы эффектов находятся на панели Effects & Presets аналогичны Adobe Premiere:
Различные типы слоев имеют свои группы Базовых свойств, тем не менее, у каждого слоя имеется основная группа свойств, называемая Transform – трансформации. Давайте рассмотрим эту группу свойств:
4. Базовые свойства для 3D слоя.
Включите опцию «3D Layer» для слоя. Видно, что количество опций Transform увеличилось:
5. Свойства Material Options для 3D слоя.
6. Свойства Аудио.
Если в слое есть аудио дорожка, например видео-клип с аудио дорожкой, появляется еще одна группа опций Audio:.
При изменении Audio Levels изменяется WaveForm.
Как сделать анимацию для сайта в After Effects: на примере прелоадера
Чтобы закрепить навыки по освоению новой программы, дизайнеру нужна практика. Показываем, как сделать прелоадер в After Effects.
В предыдущем уроке мы рассмотрели базовые возможности After Effects, познакомились с интерфейсом программы и создали прекрасную анимацию иконки меню.
Создадим красивую анимацию прелоадера в After Effects.
Создание проекта
Создайте новую композицию.
Укажите разрешение композиции 1200х800. Продолжительность 10 секунд.
Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикую переводы на хабре.
Создайте новый шейповый слой 1 на панели слоев. Для этого правой кнопкой мыши откройте контекстное меню и выберете пункт New — Shape Layers.
Фигурные слои, для анимации векторной графики
Создание прелоадера
Композиция готова. Переходим к созданию прелоадера или загрузчика, смотря где будет применяться.
Выберите на панели инструментов Ellipse Tool и нарисуйте круг, как показано на скриншоте. Толщину линии выставьте, например, 50 px.
Продублируйте Shape Layer, нажав сочетание клавиш (Ctrl + D), либо выберите в меню пункт Edit — Duplicate.
Отключите видимость верхнего слоя, чтобы вы могли работать с нижним.
На панели Effects & Presets выберите Fill и примените этот эффект к видимому слою.
Выберите цвет — лучше, если он будет близким к фоновому, но при этом контрастным. Например, это может быть тот же цвет, но чуть светлее.
Включите видимость верхнего слоя.
Создайте слой Null Object. В предыдущем уроке мы узнали, что это за слой и зачем он нужен, в этом будем использовать его для гибкого управления шкалой прелоадера. На самом деле, можно было обойтись и без этого слоя, но так удобнее, плюс закрепить материал не помешает.
На панели Effects & Presets выберите Slider Control и перетащите на слой Null Object.
После этого перейдите на слой Shape Layer 2 и в свойствах слоя во вкладке Add выберите Trim Paths. Это «рисующая линия», которая будет эмулировать шкалу загрузки.
Теперь практически все готово для анимации шкалы прелоадера. Осталось установить параметры анимации.
Перейдите на вкладку Trim Paths, зажмите Alt и левой кнопкой мыши нажмите на иконку секундомера напротив End. Появится иконка спирали, нажмите на нее и, не отпуская левую кнопку мыши, перетащите на Slider Control слоя Null Object, как показано на скриншоте.
Теперь, изменяя значения Slider Control, мы управляем видимостью нашей шкалы. Правда, у нас осталась задача правильно анимировать прелоадер и синхронизировать анимацию с цифрами загрузки шкалы в процентах от 0 до 100.
Займемся цифрами, которые будут отображать статус загрузки. Выберите Horizontal Type Tool (Ctrl + T) на панели инструментов и создайте текстовый слой, нажав в любом месте нашей композиции.
Затем в свойствах текстового слоя Text — Source Text нажмите на иконку секундомера с зажатой клавишей Alt. В появившемся поле панели Timeline вставьте следующий код:
beginCount = 0;
stopCount = 100;
beginTime = 0; // start counting at time = 0
countDur = 5; // count for 5 seconds
«» + Math.round(linear(time,beginTime,beginTime + countDur,beginCount,stopCount)) + «%»
Этот код нужен для того, чтобы цифры, отображающие статус загрузки, динамически менялись от 0 до 100%.
Выровняйте текстовый слой по центру композиции, воспользуйтесь для этого панелью Align, как показано на скриншоте.
Теперь давайте синхронизируем загрузку нашей шкалы и цифр.
Для этого необходимо выставить в свойствах эффекта Slider Control слоя Null Object два ключа — начало и конец анимации.
Выставьте маркер на панели Timeline в нулевой кадр и нажмите на иконку секундомера напротив свойства Slider эффекта Slider Control для того, чтобы поставить ключевой кадр. Значение свойства Slider при этом должно быть равно нулю.
Переместите маркер на пятую секунду, установите ключевой кадр, а в свойстве Slider укажите значение 100.
Если вы все сделали правильно, должно получиться вот так:
Дело вкуса, конечно, но я немного скруглил окончания линии, мне кажется, что так шкала выглядит более аккуратно. Сделать это очень просто — в свойствах шейпового слоя выберите Round Cap из выпадающего списка.
Noveo
Adobe After Effects и основы анимации: освоено!
В начале года отдел дизайна Noveo практически полным составом прошел онлайн-курс по Adobe After Effects и основам анимации. Senior Designer и Team Lead отдела дизайна Зарина рассказывает (и показывает), чему мы научились на курсе.
Как и любой курс по инструменту, мы начали с основ, интерфейса программы и основных принципов анимации.
Принципы анимации
Всего их 12, сформулировали их аниматоры студии «Дисней». Не все эти принципы могут понадобиться в анимации интерфейсов или иллюстраций, но многие из них все еще актуальны, и их использование может значительно улучшить создаваемый ролик или анимацию.
Один из главных принципов — смягчение начала и завершения движения (Spacing). При движении большинству объектов в нашем мире нужно время, чтобы набрать скорость и остановиться, поэтому движение лучше выглядит, когда оно не равномерное, а ускоряется в начале и замедляется в конце.
Принцип сжатия и растяжения создает иллюзию веса и эластичности формы. Например, прыгающий мяч будет сжиматься, ударяясь о землю.
Принцип дуги говорит о том, что в природе все объекты движутся по параболическим траекториям, поэтому нужно использовать этот принцип для достижения эффекта естественности движений.
Первым боевым заданием была анимация мячика. Простое на первый взгляд задание — заанимировать падение резинового мяча — обернулось серьезным испытанием нервов и наблюдательности. Чтобы мяч падал, “как в жизни”, нужно точно знать, как меняется его скорость, когда он ударяется о поверхность и отскакивает. Пришлось проверить графики затухающих колебаний и позапускать физический мячик вживую.
Шейповая анимация
Следующей была тема шейповых слоев. Несмотря на возможность создавать шейпы в After Effects, иллюстраторы предпочитают делать это в более гибких и мощных инструментах, таких как Adobe Illustrator или Adobe Photoshop. Импорт из этих программ позволяет сохранить некоторые свойства шейповых слоев (градиенты и прозрачность не сохраняются) и информацию о точках (их координаты) и продолжить работать с ними в After Effects, добавляя анимацию. Например, изменить форму векторного слоя можно, передвинув точки, а After Effects достроит плавное изменение формы в промежуточных кадрах. Для закрепления навыков мы взяли несложную иллюстрацию, подготовили в Adobe Illustrator слои, необходимые для анимации, и после экспорта добавили движения некоторым объектам:
В результате статичная картинка ожила.
Анимация текста и кинетическая типографика
Еще одна интересная и очень востребованная тема курса — анимация текста. Для этого в программе After Effects есть много мощных инструментов, таких как анимация линии, к которой привязан текст, различные эффекты появления и исчезания знаков, слов и строк, рандомизация букв, 3D-эффекты и прочие. Все эти эффекты могут быть скомпонованы между собой, что дает практически бесконечное число манипуляций с текстом. Но чтобы создать крутой и интересный ролик, одних инструментов недостаточно. Тут нужно и придумать идею, и создать уравновешенную композицию, и выстроить кадры так, чтобы удержать внимание зрителя.
Отдельная тема — 3D-текст. Сейчас этот эффект стал очень популярен, и его можно увидеть во многих рекламных роликах и анимированных постерах. Тут на помощь приходит 3D-редактор Cinema 4D, в котором создается форма и натягивается текстура. Сама анимация выполняется в специальном плагине для After Effects.
Создание титров
Тема создания титров — это тоже часть большого раздела по анимации текстов. С этой задачей нам приходится сталкиваться регулярно, когда мы делаем видеовакансии и ролики про нашу компанию. В основном это титры вступления и low third, те самые, в которых пишут имя и фамилию. В создании титров активно применяются принципы анимации студии «Дисней», о которых упоминалось выше. А еще нужно медитативно перебирать разные варианты значений (ну или выставить их сразу, если опыта хватает), чтобы добиться нужной плавности появления, движения и исчезания элементов.
Анимация при помощи Puppet position pin tool
Часто, чтобы заанимировать несложные движения персонажей, применяется анимация при помощи Puppet pin tool. В ключевых точках расставляются пины, которые, как булавки, фиксируют части изображения. И передвигая эти булавки, можно заставить двигаться фигуру персонажа. Манипулировать этими пинами не всегда легкая задача, поэтому их привязывают к Null objects и анимируют параметры Position и Rotation нулевого объекта. Чтобы заанимировать, например, движение руки персонажа, необходимо сначала привязать части руки друг к другу и саму руку к телу. Тогда при повороте руки в локте остальная часть руки с кистью повернется следом. Кроме движения персонажей этот прием можно применять для оживления листвы, кустов или деревьев.
Анимация при помощи плагина Joysticks’n’Sliders
Для ускорения анимации мимики персонажа часто используют платные плагины, такие как Joysticks’n’Sliders. Чтобы с его помощью создать движение лица и эмоции персонажа, необходимо сначала зафиксировать нулевое положение всех деталей лица. Например, формы и положения глаз, рта, бровей и волос. Следующие шаги — это прописывание крайних состояний анимации лица. И тут нужно изменить положение и форму деталей персонажа так, чтобы они соответствовали этим крайним состояниям. Например, при повороте головы нос нужно сдвинуть и изменить его форму, чтобы он был в профиль, сдвинуть глаза и брови, изменить форму прически. И проделать эту процедуру для всех ключевых кадров анимации. Когда крайние положения для всех элементов прописаны, можно запускать анализ в плагине. Проанализировав все данные, плагин создает контроллер, так называемый Joystick, привязанный к элементам лица. При перемещении этого джойстика плагин анализирует возможные промежуточные положения элементов, и становится возможным записать плавную анимацию любых перемещений в пределах наших крайних положений.
Трекинг камеры
Трекинг камеры — это прием, который активно используют в рекламных роликах и спецэффектах. Суть в том, чтобы вписать искусственно созданную анимацию в реально отснятый на камеру ролик. Для этого нужно отследить движение одной или нескольких точек на исходном видео. Пользователь находит наиболее контрастные места на видео, устанавливает туда маркер, и программа отслеживает перемещение этого набора пикселей и строит путь его перемещения. Впоследствии по этому пути можно пустить любой объект, такой как выноска с текстом или титры.
Кроме того, если отслеживание сделано по 4 точкам, можно вписать другой заанимированный объект в границы этих точек. Именно таким способом мы сделали к 1 апреля шуточное видео про дорожные знаки, которые немного сошли с ума.
Паралакс
Паралакс — это направление в спецэффектах, которое недавно вошло в моду. Его используют в рекламе и web-дизайне, но особенно оно востребовано в рекламе картинных галерей и всевозможных выставок. Ведь с его помощью можно оживить знакомые произведения искусства и привлечь таким образом новых зрителей. Чтобы добиться эффекта паралакса, нужно разделить объекты выбранного изображения, вынести их на отдельные слои. Затем нужно дорисовать недостающие части изображения, ведь там, где мы вырезали объект из фона, образовалась дыра, она должна быть заполнена (обычно это делают методом копирования соседних участков). Затем изображению придают плановость, разнося объекты на разное расстояние по оси Z (в глубину). Последнее действие — оживление, то есть создание анимации отдельных объектов. При этом можно добавить движение камеры сквозь пространство картины. Это создает иллюзию погружения в мир, созданный художником.
Анимация интерфейсов
Эта тема нас интересовала, пожалуй, больше всех, так как с ней мы сталкиваемся в процессе своей профессиональной деятельности. Чтобы создавать презентации возможных анимаций интерфейсов, прежде всего надо быть знакомым с концепцией Google Material design, ведь там подробно описано, как должны вести себя элементы интерфейсов. Средствами Adobe After Effects можно показать, какие микровзаимодействия, переходы и анимации могут быть применены в приложении, как это повлияет на общее восприятие приложения. Чтобы оживить приложение, нужно в первую очередь подготовить файл с элементами интерфейса в Adobe Illustrator, затем импортировать его со всеми необходимыми слоями в программу After Effect и там настроить переходы и анимации средствами программы. Обычно анимируются такие параметры, как opacity, position и scale. С их помощью можно показать, как разворачиваются и открываются элементы, как приложение реагирует на взаимодействие с пользователем, как происходит переход между экранами и многое другое.
Еще одним заданием было вписать заанимированный интерфейс в фото или видео. Для этого нам опять пришлось обратиться к трекингу, цветокоррекции и инструментам деформации.
Итак, на этом суперинтересном и полезном курсе мы освоили множество мощных инструментов, узнали принципы моушен-графики и анимации, выполнили много сложных, но интересных заданий и уже вовсю применяем полученные знания в нашей повседневной работе!
Анимации выполнены дизайнерами Noveo Зариной и Людмилой.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Виды 2D моушн-дизайна
Мы в студии Effectno любим и делаем анимацию и моушн-дизайн. И кажется, что все дизайнеры вокруг так же увлечены анимаций, как и мы. Но часто среди непосвященных в профессию людей встречаем мнение, что это сложно, и дизайнеру без многолетнего изучения 3D никогда не сделать анимационный проект. Попробуем в статье побороть этот миф.
Знакомство с анимацией проще начать с 2D и уже впоследствии переходить к 3D анимации, потому что порог входа в первом случае ниже. Для создания 2D чаще используется After Effects, который по интерфейсу похож на Photoshop или Illustrator, а незнание отдельных функций софта не так критично, как в 3D.
В этой статье расскажем о видах анимации, доступной базе, о софте, сложности освоения, плюсах, минусах и актуальности направлений.
Шейповые ролики
Это самый простой тип анимации, собирается из послойных иллюстраций. Иллюстрация для шейповых роликов подготавливается в Illustrator, разбивается на слои, так, чтобы двигать отдельные слои, анимируя их.
Раньше этот типа анимации назывался перекладная анимация (или перекладка). Так, к примеру, сделан South Park. Интересно, что первые серии мультсериала сделаны на основе съемки бумажных слоев и уже впоследствии стали создаваться цифровым способом.Чем детальнее иллюстрация разбита на части, тем более сложную анимацию можно сделать. Слои переносятся в After Effects, где уже каждый слой двигается самостоятельно. Или же, в случае, например, с персонажами, слои сцепляются друг с другом (ручки и ножки с туловищем и так далее) и двигаются как система.
Минусы:
Хороший пример шейповой анимации — ролик Mobile Team. Здесь технически несложная, но качественная и аккуратная анимация, сделанная на основе движения слоев.
Что важно знать и уметь: качественно продуманные переходы, продуманная композиция. Также на итоговый результат сильно влияет работа иллюстратора.
Сложность освоения: одно из самых доступных в освоении направлений, для подобного уровня роликов будет достаточно месяца-двух изучения After Effects. Первый осмысленный результат можно получить уже через неделю.
Актуальность: направление проходит пик популярности, но по-прежнему найдёт клиента.
Рисованная анимация
Что делать, если есть неудовлетворенность шейповой анимацией? Идти дальше, к истокам, к классике, к рисованной анимации.
В этом типе анимации каждый рисунок создаётся с нуля или почти с нуля, перерисовываясь кадр от кадра.
Рисованную анимацию можно разделить на два направления: просто рисованная анимация и тотальная анимация. В первом случае часть рисунка пытаются сохранить (например, если персонаж передвигается по фону, фон в каждом кадре не нужно перерисовывать, достаточно его просто двигать как слой). Тотальная анимация — это вызов для аниматора. Здесь каждый кадр специально перерисовывается с нуля. Тем самым кадр получается максимально живой, но и вложение в такой проект — значительно большее.
Плюсы:
Рисованная покадровая анимация позволяет сделать то, в чём шейповая ограничена. Например, поворот головы, сложные искажения персонажа, ракурсы, прыжки, взрывы — всё, что только можно себе представить.
Сейчас все переходят в рисованную покадровую анимацию, потому что людям начали надоедать жесткость и картонность шейповых роликов. И в то же время здесь чувствуется попытка дистанцироваться от шейпа. И хотя в шейповой анимации тоже можно сделать хороший качественный проект, порой сложно объяснить клиенту, почему он такой дорогой. В то время как, говоря о рисованной анимации, таких вопросов и сомнений зачастую не возникает.
Минусы:
Рисованная покадровая анимация — это долгий технологический процесс. Сначала делается черновой мультипликат, потом — чистовой с дополнительными фазами, рисунок уточняется, обводится, заливается. То есть, сделать конечную анимацию сразу — не получится.
Небольшая выработка. За день возможно успеть сделать с нуля буквально несколько секунд полноценной анимации (в сериалах или недорогой анимации, как правило, 12 кадров в секунду, а в более дорогой — 24 или даже 30, в зависимости от выбранной частоты кадра в проекте).
За счёт большего репертуара — такая анимация дороже шейповой. В реальности применяют комбинированное решение, пытаются максимально переиспользовать фазы.
Софт: Toonboom, Adobe Animate и Moho. Но их несложно изучить, если уже работаете в After Effects.
Что важно знать и уметь: нужно достаточно долго учиться рисовать. Здесь уже нужно уметь не просто двигать готовые слои, а делать серию рисунков так, чтобы они жили в движении. Отыгрывать двухмерного персонажа.
Сложность освоения: если хотите развиваться в этом направлении — закладывайте год.
Актуальность: сейчас растёт интерес к рисованной покадровой анимации, потому что внезапно это стало жутко трендовым и ценным.
Stopmotion
С рисованной анимацией всё вроде ясно. Много свободного времени на освоение и талант художника. Есть ли что-то, более простое в освоении и приближенное к реальным задачам, например к продуктовой рекламе? Да, Stopmotion.
Это фиксация анимации на реальную камеру. То есть, с помощью фотоаппарата или телефона делается кадр предмета, потом он чуть двигается, снова делается кадр и так далее. Эта серия кадров потом ставится друг за другом, и возникает движение.
В кино, до появления компьютера, именно таким образом анимировали роботов. Например, в Star Wars шагоходы, космические корабли анимировались таким образом: создавались игрушки-миниатюры для покадровой съёмки.
Плюсы:
Есть реальный предмет, который уже обладает своей фактурой. Его не нужно рисовать и делать цифровой дублёр — достаточно просто сфотографировать.
Высокая скорость работы, так как исчезает необходимость рендерить, рисовать.
В ролике присутствует реальный предмет, а не его нарисованная копия. Это важно для рекламы, потому что такому изображению зритель верит больше.
Stopmotion всегда поражает фантазию: сложно поверить, что это было снято именно так.
Минусы:
Вносить правки в такую анимацию невозможно — только если переснимать. Сценарий должен быть абсолютно выверен. Часто перед тем, как снимать stopmotion делают превизы: сначала анимируют в 3D, чтобы точно убедиться в правильности хронометража, порядка, а потом уже создают stopmotion.
Вот ещё один пример использования stopmotion — ролики для ЦУМа.
Софт: Dragon Motion. Он позволяет снимать на фотоаппарат, без дополнительных программ. С помощью программы можно контролировать процесс съемки на компьютере: подключить к нему камеру, видеть предыдущий-следующий кадр. Это полезно, так как дизайнер в режиме реального времени видит, как нужно подвинуть модель, что поправить. Софт даже умеет управлять светом: зажигать, тушить, менять цвет. Разве что пока не научился сам двигать фигурки. Чтобы собрать анимацию — отлично подойдёт After Effects. Для бытового применения stopmotion — есть много программ на телефон (например, Stop Motion Studio, Life Lapse Stop Motion Maker, Clayframes).
Сложность освоения: для профессионального stopmotion потребуется просторная студия. Потому что даже для съёмки небольшого объекта нужен длинный предметный стол, много света. И аренда самого оборудования стоит недёшево. Но чтобы учиться — вполне будет достаточно куска ватмана, двух настольных ламп (можно, конечно, снимать и при солнечном свете, но не советуем, потому что свет сильно меняется, и вы будете привязаны к внешнему освещению).
На Dragon Motion снимают профессиональное кино: Труп Невесты, Остров Собак, Франкенвини.
Итак, мы поговорили о том, какие направления существуют внутри 2D. Стоит отметить, что, вне зависимости от того, какое направление вы для себя выбираете, важна база: понимание композиции, физики движений и того, как цвета работают друг с другом. Эту базу вы можете приобрести на нашем курсе, следующий запуск — 14 сентября. Если вам это актуально — переходите по ссылке, читайте подробнее и регистрируйтесь.
И уже после того, как освоили базу — дерзайте, пробуйте и ищите себя!