Объединить контуры в after effects
Обновлено: 06.07.2024
Morphing, в переводе с английского, означает "трансформирование", "смешивание". Если речь идет об анимации, то само понятие "морфинг" можно описать, как эффект плавного трансформирования одного объекта в другой. Подобные эффекты часто применяют в различных рекламных моушен-роликах и выглядет это достаточно привлекательно.
Морфинг в After Effects можно условно разделить на несколько видов, в зависимости от способа реализации. Существует шейповый морфинг, который подразумевает работу с фигурами,
построеных на кривых. Есть еще морфинг изображений - это трансформирование каких-либо изображений или фото с помощью наложения на них различных эффектов.
1. Шейповый морфинг
Начнем с шейпового морфинга, который представляет собой трансформацию фигур. Данный вид морфига в After Effects достаточно легко реализовать способом копирования параметров от одной фигуры к другой.
Для примера можно взять стандартные фигуры из арсенала программы, допустим звезду и круг. Разместим эти две фигуры друг на друга, подгоним по размеру и отцентрируем, относительно друг друга.
Данные шейпы в After Effect имеют ряд индивидуальных параметров.
Для трансформации данные параметры не нужны, поэтому эти обе фигуры нужно конвертировать в формат "Bezier Path", т.е. в обычную векторную фигуру. Для этого кликаем по параметру правой кнопкой мыши и выбираем "Convert To Bezier Path".
Чтобы реализовать морфинг шейпов в After Effects нам нужен именно этот основной параметр фигуры - "Path", по-русски звучит, как "путь". Данный параметр отвечает за форму фигуры и для создания анимации трансформирования достаточно скопировать параметр Path от одного шейпа и применить его ко второму.
Устанавливаем ползунок на шкале времени в начальную точку, откуда будет начинаться анимация и фиксируем ключевые точки данного параметра у обеих фигур, кликая по пентаграмме часов, напротив "Path" у каждой из фигур.
Перемещаем ползунок немного вперед и здесь у нас будет конечная точка анимации. Теперь для того, чтобы сделать морфинг звезды в круг необходимо скопировать параметр "Path" круга, выделив его и нажав комбинацию клавиш "Ctrl + С" и вставить его в звезду, выделив у данной фигуры параметр "Path" и нажав комбинацию клавиш "Ctrl + V".
После этого фигуру круга можно скрыть или удалить. Если проиграть анимацию, то мы увидим эффект трансформации звезды в круг. Если нужно наоборот из круга сделать звезду, то соответственно, наоборот, нужно параметр звезды скопировать и вставить в конечную точку анимации у круга. Ну или просто поменять точки местами.
Если нам нужна еще и третья фигура, например, квадрат, то точно также берем эту фигуру, подгоняем её по размеру и центрируем с остальными. Затем преобразуем параметр в Безье, выставляем в начальную точку ползунок и задаем первый ключ параметра Path. Копируем эту ключевую точку и вставляем немного дальше по шкале времени от первых двух.
После этого скрываем или удаляем слой с квадратом и анимация морфинга из трёх фигур готова. Для плавной трансформации фигуры необходимо подгонять по размеру друг к другу, если одна будем раза в два меньше другой, то анимация будет выглядеть не естественно.
Кроме основного параметра "Path", который отвечает за форму фигуры, можно еще взять и параметр "Color", тогда будет происходить морфинг не только формы фигуры, но и цвета. Перенесем ползунок снова в начало временной шкалы и откроем параметры цвета у фигур.
На данный момент у нас все фигуры синего цвета, чтобы реализовать морфинг цвета, давайте сделаем у всех фигур заливку разного цвета. Для этого кликаем по пентаграмме "Пипетка" и устанавливаем индивидуальный цвет у каждой фигуры. Первую фигуру можно оставить синей.
Теперь эафиксируем первоначальные точки цвета у всех фигур, кликая по пентограмме "часы" у каждого из параметров.
Теперь опять же берем, копируем цвет каждой из фигур и вставляем их в точках, на шкале времени, в параметр цвета нашего слоя с анимацией. В результате получаем трансформацию шейпов и их заливки.
2. Морфинг импортированных векторных фигур
Теперь рассмотрим случай, когда вы импортируете векторные фигуры в After Effects для дальнейшего морфинга. After Effects прекрасно ладит с Adobe Illustrator, а так же просто с векторным форматом файлов, например EPS. Если мы импортируем векторную фигуру в данном формате, то увидим, что у слоя нет параметра "Path".
Для того, чтобы получить данный параметр и в дальнейшем иметь возможность делать трансформацию с этой фигурой, необходимо из неё создать шейповый слой. Кликаем правой кнопкой мыши по слою и выбираем "Create" - "Create Shapes from Vector Layer".
В результате у нас создаётся шейповая фигура, которая имеет параметры "Path" и "Color" и мы уже можей её заморфить, а слой с фигурой EPS формата, после данной процедуры можно просто удалить.
3. Морфинг объектов из нескольких фигур
Ну и еще один случай с шейповым морфингом рассмотрим - это когда у нас имеется не просто две фигуры, а два объекта, которые состоят из нескольких фигур и из них нужно сделать анимацию трансформации.
С помощью инструмента "Перо" изобразим два объекта, которые будут состоять из нескольких фигур, например яблоко и грушу, после чего анимируем их трансформацию. Первым изобразим яблоко, устанавим заливку красного цвета, чтобы оно у нас было красным и рисуем фигуру самого плода.
Теперь нарисуем яблоку хвостик и листик. Для того, чтобы все фигуры были у нас в одном слое, перед тем, как изобразить хвостик, нужно выделить этот слой. Выделяем, кликнув по нему левой кнопкой мыши и отрисовываем пером фигуру.
После этого, кликаем по настройке заливки и меняем цвет хвостика на коричневый. Листочек рисуем таким же способом. В результате у нас получился слой с объектом "Яблоко", состоящим из трёх шейповых фигур: листик, хвостик и сам плод.
Теперь точно таким же способом создадим второй объект - грушу. Слой с яблоком пока можно заблокировать, активировав на против него пинторграмму замочка, чтобы он не мешал нам при создании груши.
Как и в первом случае, берем инструмент "Перо", выставляем нужный цвет и рисуем объект. Как и в случае с яблоком, груша у меня так же будет состоять из трёх фигур: самого плода, хвостика и листика. Грушу рисуем сразу поверх яблока, предусматриваем её размеры и расположение. И так, груша с яблоком у нас готовы, со слоя с яблоком можно снять блокировку.
Как и в случае с простыми фигурами, здесь не важно какой слой будет сверху, а какой снизу. Раскроем у обоих объектов параметры и шейпы. Здесь, как и у простых фигур имеются параметры "Path" и "Color", которые нам и нужны для морфинга.
Делается всё точно так же, как и с простыми шейпами, только копировать нужно параметры из каждой фигуры по отдельности. Фиксируем все необходимые параметры объектов в начальной точке анимации. Параметр "Path" у листика груши, затем "Path" у хвостика, потом "Path" и "Color" у самого плода.
С яблоком проделываем тоже самое. Теперь перемещаем ползунок на таймлайне немного вперед и по очереди копируем параметры каждой фигуры от одного объекта в другой. Сделаем морфинг яблока в грушу, для этого копируем параметр "Path" у листочка груши, переходим к листочку яблока, выделяем "Path" и вставляем параметры от груши. Далее переходим к хвостику. Ну и у самого плода копируем "Path" и "Color", которые вставляем в яблоко. Вообщем, всё происходит так же, как и у простых шейпов. В результате получаем анимацию морфинга яблока в грушу.
При морфинге сложных объектов, состоящих из нескольких фигур, стоит учитывать не только размеры самих объектов, но и количество фигур из которых они состоят. Например, если бы у яблока был не один листочек на хвостике, а два, то пришлось бы делать их трансформацию из одного листочка груши или просто появление второго листочка, что смотрелось бы менее привлекательно. Чем больше у фигур общего, тем их проще заморфить и анимация получается в таких случаях более плавной и естественной.
4. Морфинг изображений
В отличии от фигуры, изображение не имеет составных точек и линий, поэтому его морфинг делается иначе, всё делается с помощью различных эффектов. Давайте рассмотрим морфинг изображений, на примере эффекта "timewarp". Данный способ морфинга изображений заключается в использовании стандартного эффекта After Effects, который называется "timewarp", в переводе это звучит, как "искревление времени".
Для работы я взял четыре фотографии лиц девушек, из которых и буду делать анимацию трансформации. При создании такого морфинга важно иметь в виду, что для плавной трансформации лица человека или допустим, морды животного нужно делать привязку к таким точкам, как глаза, нос и рот.
Под привязкой, я имею в виду подгонку изображений по данным параметрам, чтобы у нас эти точки были в одном положении. Например, за основу берем первое фото. Скрываем слои с третьим и четвёртым фото. Открываем параметры у второго и выставляем "opacity" - непрозрачность примерно на 50%, чтобы через него просвечивало первое фото и подгоняем положение, а если надо, то и размер второго изображения к первому. Чтобы максимально точнее совместились глаза, нос и рот подгонять положение удобнее стрелочкамина клавиатуре, а не мышкой.
Проделываем тоже самое с остальными фото по очереди. Если же вы морфите не лицо, а допустим автомобиль, то за основу можно взять размер, т.е. подгонять объекты именно по размеру авто, ну или прицепиться к колёсам, тут все зависит от того, какой результат вы хотите получить.
И так, я подогнал все фото, теперь их необходимо разместить на шкале времени так, чтобы каждое фото отображалось какое-то время, потом исчезало и включалось другое. Для этого мы просто подгоним сами дорожки слоёв по времени. Сделаем так, чтобы каждое фото отображалось одну секунду. Настраиваем время отображения слоёв вот таким образом, по секунде каждое.
Последнее мы сделаем не одну секунду, а две, чтобы после эффекта у нас само изображение сразу не исчезало, а отображалось еще какое-то времы. Если провести по таймлайну ползунком, или проиграть анимацию, то можно увидеть, что изображения теперь отображаются по очереди с интервалом в одну секунду и последнее длиться две секунды.
Так как у нас вся анимация длится пять секунд, необходимо такое же времы выставить всей композиции. Выбираем в верхнем меню "Composition" - "Composition settings" и выставляем время
в пять секунд.
Теперь все слои с изображениями нужно объединить в прекомпос, чтобы эффектом воздействовать сразу на все фото. Выделяем все слои, кликаем правой кнопкой мыши и выбираем "Pre-compose".
Далее необходимо выполнить переназначение времени, для этого зажимаем комбинацию клавишь "Ctrl + Alt + T" и у нас появляется вот такой параметр "Time Remap" и на шкале времени появились точки начальная и конечная.
Теперь в панели эффектов и пресетов ищем "timewarp" и накладываем его на прекомпос, просто перетаскиваем левой кнопкой мыши.
Далее нужно настроить скорость эффекта "Timewarp". Тут важно учитывать тайминг вашей композиции. У меня стоит 30 кадров в секунду, поэтому скорость эффекта я выставлю где-то на
1.2.
Теперь, если проиграть анимацию, то мы увидим эффект морфинга изображений. Таким образом делается морфинг изображений при помощи эффекта "timewarp", вообще морфинг можно реализовывать с помощью практически любого эффекта, поэтому способов трансформации изображений существует достаточно много.
В заключении можно сделать следующий вывод: для создания эффектной анимации морфинга необходимо продумывать заранее композицию и подбирать или отрисовывать похожие объекты. А так же, в случае шейпового морфинга, нужно учитывать такие нюансы, как количество элементов в объекте и параметров фигур.
djouns222 Подскажите как можно объединить маски в одном слое.artguk Подскажите как можно объединить маски в одном слое.
1) Клацаем инструмент создания масок и рисуем маску
2) жмякаем ESC на клаве и еще раз выбираем инструмент рисования маски и снова рисуем на том же слое
3) Выбираем слой с масками и жмем "М" на клаве, что бы раскрыть слой и увидеть маски
Взаимодействия между масками ниже.
-. STOP: 0x0000007E (0xC0000005, 0x804E518E, 0xFC938104, 0xFC937E04) SYSTEM_THREAD_EXCEPTION_NOT_HANDLED" . -
- . Видимо пришло время переосмыслить выполненную работу. djouns222 Спасибо конечно, но я спрашивал про другое. Необходимо из нескольких масок в одном слое (допустим трех) сделать одну, а не пользоваться смешением масок. Может кто подскажет какой нибудь скрипт или может есть горячие клавиши.
artguk Спасибо конечно, но я спрашивал про другое. Необходимо из нескольких масок в одном слое (допустим трех) сделать одну, а не пользоваться смешением масок. Может кто подскажет какой нибудь скрипт или может есть горячие клавиши.
Собственно штатных инструментов нет, Но всегда есть НО
Вариант 1 собственного приготовления (простой и элегантный. используя функцию Auto-Trace)
1) создаем маски на нужном нам слое
2) заходим в меню Layer -> Auto-trace.
3) В параметре Channel выставляем значение Alpha (т.е. трассировать АЕ будет по прозрачности слоя) и снимаем галочку с Apply to new layer (дабы маска сразу легла в нужный нам слой). Не забываем снять галочку с параметра Blur (у нас ведь нет размытия ) и переключить на параметр Current Frame (нам ведь не нужны маски для каждого кадра отдельно )
4) В новой маске полученной трассированием устанавливаем параметр Add т.к. при создании она имеет параметр None (не активна)
5) Радуемся нашей ловкости и хитрости
Если у нас как в этом примере 4 маски и одна из них внутри используется как отверстие например (3 маски контур, 4-я делает дырку), то при помощи данной операции у нас в итоге будут две маски (5-я и 6-я). Одна из них будет создавать общий контур, вторую придется выставить на вычитание. Это связано с тем, что АЕ отверстия в масках не поддерживает, ну не может он. ему в любом случае надо две маски. одна общий контур, вторая для вычитания
hint 2: Скопировать, обработать в AI, вставить обратно
hint 3: С этапом "вставить обратно" будут проблемы: по умолчанию в ai не включен режим AICB (AI ClipBoard).
Решается через Edit -> Preference->File handling & Clipboard
hint 4: Да и с обработкой могут быть проблемы:
1) копируем AE маски
2) Назначаем обводку черныйм цветом (без спец. кистей)
3) Палитра View ->Pathfinder
4) Убеждаемся, что все что нужно - выделено
5) На палитре View ->Pathfinder нажимаем первую кнопку (add to shape area)
6) Разбиваем Составной контур в обычный : Edit - >Expand Apperance
7)Разбиваем группу в контур (хотя не обязятельно)
8)Копируем в буфер обмена (см. hint 2)
9) Вставляем в Ae новую маску
Несмотря на то, что первое время Вы не будете использовать группирование в каждом проекте, все же стоит знать возможности After Effects, ведь это безусловно облегчит Вам жизнь в будущем и Вы сэкономите массу времени. Выражения довольно сложны на первый взгляд, поэтому им будет посвящена отдельная статья. А сейчас речь пойдет о вложении, прекомпоновке и создании иерархий.
Рассмотрим пример вложения. В прошлых статьях мы создали композицию из движущихся квадратов. Если у Вас сохранился этот проект откройте его. Если же Вы успели удалить его, ничего страшного подойдет любая другая композиция. Итак у нас имеется готовая композиция, например «квадраты».
Обратите внимание кроме исходных материалов, из которых мы создали композицию, в панели Project располагается файл композиции, в нашем случае он называется «Квадраты». Этот файл мы можем поместить в любую другую композицию, что и будет называться вложением. Создадим новую композицию и разместим там интересующие нас файлы. Например какую-нибудь текстуру.
Теперь поместим в эту композицию анимированные квадраты, с которыми можно будет работать в дальнейшем как с отдельным слоем. Для этого перетащим с панели Project файл композиции «Квадраты» на панель Timeline композиции Радуга.
Расположим файл композиции первым слоем, чтобы наша текстура не загораживала вложенную композицию.
Теперь мы можем работать с композицией «Квадраты» как с отдельным слоем, изменять масштаб, непрозрачность или задавать вращение. Но мы так же можем в любой момент открыть исходную композицию и работать с ней как с самостоятельной композицией. Все изменения будут отражаться и в композиции содержащей вложенную. Для этого нужно два раза кликнуть мышкой на названии слоя состоящего из композиции. Если при этом удерживать нажатой клавишу слой будет открыт в окне Layer. Далее мы сможем новую композицию «Радуга» поместить в другую композицию или вложить в нее еще одну композицию.
Перейдем к понятию прекомпоновка. Если в нашей композиции накопилось слишком много слоев, мы можем в любой момент объединить некоторые из них в отдельную композицию. Этот процесс и будем называть прекомпоновкой (pre-compositing). Вернемся к композиции «квадраты». Добавим нижним слоем нашу текстуру.
Кроме этих пяти слоев в композиции могут содержаться еще десятки слоев. И так как вложение мы использовать уже не можем, используем прекомпоновку. Выделим нужные нам слои и выполним команду layer->Pre-compose (Ctrl+Shift+C).
Появилось окошко Pre-Compose. Здесь мы зададим имя новой композиции, например «pre квадраты».
После нажатия кнопки ОК будет создана вложенная композиция в виде отдельного слоя в уже существующей композиции.
Теперь вы можете открыть новосозданную композицию отдельно или использовать данный слой при создании новой прекомпозиции.
Чтобы объяснить принцип работы со связанными иерархиями обратимся к только что созданной композиции «Pre квадраты». Откроем ее отдельно. Два раза щелкните левой кнопкой мыши по слою содержащему композицию.
На панели Timeline появилась новая вкладка содержащая слои композиции.
Для простоты «эксперимента» удалим желтый и зеленый слои, а для оставшихся слоев, (синий и красный) отменим все анимации свойств, а значение масштаба оставим у обоих слоев на 50.
Если у Вас на панели Timeline не отображается столбец Parent, щелкните левой кнопкой мыши на названии любого из столбцов и в контекстном меню выберите пункт Columns->Parent.
Данный столбец предназначен для присоединения одного слоя к другому. Зададим слой Red родительским для слоя Blue, для этого в меню столбца Parent слоя Blue выберем название родительского слоя, в нашем случае выбрать можно только один слой — Red.
Слой Red теперь родительский для слоя Blue. А слой Blue будем называть дочерним для слоя Red. Это означает что любые изменения свойств трансформации родительского слоя будут повторяться и на дочернем слое. Но изменения вносимые в дочерний слой на родительском никак не отражаются. Данное правило действует только для трех из пяти свойств трансформации, на свойство Opacity и Anchor Point оно не распространяется. Попробуйте сами поиграть со значениями свойств одного и другого слоя. Как видите, масштабируя вращая или перемещая родительский слой тоже самое происходит и с дочерним. Но если мы будем вносить изменения в дочерний слой, то они никак не отразятся на родительском.
Стоит отметить, что у одного слоя может быть несколько дочерних слоев, но родительский — только один. Так же любой дочерний слой можно указать в качестве родительского для другого слоя.
Добавим еще один квадрат, зеленого цвета, размерами 300×300.
Зададим для него родительским слой Blue.
Как видите мы могли так же выбрать в качестве родительского и слой Red. При изменении свойств Красного квадрата, будет так же изменены свойства для синего и зеленого квадратов, так как он является родительским для обоих слоев. Но изменение свойств синего квадрата приведет к переменам значений свойств только зеленого квадрата, так как он является родительским только для зеленого квадрата. Ну, а изменение свойств зеленого квадрата не повлечет за собой изменений на синем и красном квадратах, так как изменения на дочерних слоях не влияют на родительские слои. Это и есть связанная иерархия. Выделите все три слоя и нажмите клавишу. Для всех трех слоев отобразилось свойство Scale.
Для всех трех слоев значение разное. Когда устанавливается связь между слоями, значения свойств изменяются, чтобы изображение осталось в прежнем состоянии. При разрывании связей происходит новая «подгонка» свойств, чтобы установка или разрыв связей никак не отражались на состоянии композиции. Так как размеры синего и красного квадрата одинаковы, то масштаб синего по отношению к красному — 100%. Если мы разорвем связь между красным и синим квадратами, то значение масштаба синего квадрата изменится на 50%.
Обратите внимание, что масштаб зеленого квадрата относительно синего так и остался на значении 200%, так как сторона зеленого квадрата вдвое больше стороны синего. Надеюсь теперь Вы не будите путаться в относительности свойств связанных иерархий. До встречи в следующих курсах по Adobe After Effects.
В этом уроке мы продолжим изучать шейпы и, при помощи них, создадим потрясающую шейповую анимацию. Заставку, которую мы получим в результате, с легкосьтю можно использовать для своих видео.
По заданным фильтрам ничего не найдено
Попробуйте изменить критерий поиска, или сбросить фильтры.
Комментарии 81
Добрый день, подскажите. Авторские права на данное аудио кто имеет?
а как аудио скачать?
как скачать проект?
По ссылке выше, под уроком.
Урок супер! Идеальной решение для какой-нибудь заставки!
Здравствуйте всем пользователям сайта, я бы хотел задать вам не большой вопрос, не совсем по теме, у меня вот след. ситуация: Вместо звездочки, у меня рисует какой-то 4-ох угольник. Подскажите что делать, заранее спасибо.
В уроке 10:30 в этом временном отрезке звезда рисуется с наклонными линиями а не белым фоном,что я делаю не так,подскажите пожалуйста,Спасибо!
добавь fill на свою звезду:
Здравствуйте! Помогите пожалуйста с выполнением урока: у меня не получается нарисовать звезду с белым фоном,а она рисуется с наклонными линиями как в предыдущем шаге когда применяли эффект venetian Blinds.За раннее Спасибо!
Укажите соответствующий момент в уроке и приложите скриншот, пожалуйста
где скачать музыку
А есть для версии цс 4? А то хочу скачать проект, а он не открывается :(
К сожалению, нет
Спасибо! Как не странно,но у меня все получилось! Все что вы делаете,все на высшем уровне! У вас лучшие уроки. Молодцы!
Переместите Iris Center в центр фигуры
спасибо большое, но надо как-то делать желательно без привязки к кадрам, а то сначала кадр 6 потом 13. хотя вы и объяснили, что все дело в аудио, но по мне так лучш потом подогнать по таймлайну
Здравствуйте, Артём. Возникла проблема. При нажатии на кнопку Fit to 100% происходит вот, что. Была ли у вас похожая проблема и знаете ли вы как её решать?Заранее спасибо.
можете выслать именно тот звук, который был в конечном видео?
В файлах к уроку можно скачать нужный звук.
Здравствуйте, может подскажете, где можно обзавестись набором звуков, подобных использованным в проекте? Спасибо. ;)
Подскажите пожалуйста, когда в magnification ratio popup ставишь fit или fit up to 100% ну и вобще меньше 100% если ставишь, то в ефекте iris wipe изменения значения outer radius не отабражаются да и вобще непонятно что отображается, а на 100% нормально, почему?
Читайте также: