Привет!
На заключительном уроке мы будем создавать репродукцию заставки этого курса. Для этого к уроку будет прикреплен файл Adobe Illustrator с картинкой в векторе.
Открываем файл в Illustrator и видим, что все элементы картинки находятся на одном слое, т. е. при импорте в After Effects у нас будет сплошная картинка с одним слоем. Так что нам нужно его разобрать. Выбираем слой и открываем меню в панели слоев, там выбираем Release to Layers (Sequence). Так мы разобьем все элементы картинки на отдельные слои. Выбираем все слои и перемещаем их вверх. А пустой слой удалим. Теперь следует назвать каждый слой понятным и удобным именем, чтобы при импорте в After Effects не запутаться. Нижний слой — это просто фон, назовем его BG. Далее идут три слоя с линиями, или палочками, назовем их stick 01, stick 02 и stick 03. Потом два круга в центре и маленькие круги за ними. Большие назовем big 01 и big 02, а маленькие — просто small 01 и small 02. Еще есть такой шарик, назовем его mid 01, потому что он среднего размера. Теперь остались плашки. Это перенесем сюда, назовем просто — 03, 02, 01. И текст, назовем text 03, text 02 и text 01. У нас будут вылетать лучи, потом будет проявляться большой круг, из него — второй большой круг и затем средний круг и маленькие круги. И будут прилетать плашки, а на них проявляться текст. Файл для анимации готов. Логика продумана. Можно сохранить — Ctrl-S.
В следующих частях этого урока мы будем импортировать его в After Effects и анимировать.
У нас уже есть подготовленный файл с картинкой, разбитой по слоям. Теперь мы будем воспроизводить такую анимацию. Так выглядит мой оригинал.
Для начала импортируем в проект наш файл Illustrator. Выберем Composition Rectain Layer Sices при импорте. Автоматически создается композиция, в ней мы и будем работать. Заходим по двойному клику. Внутри — наша заставка в слоях. Сперва будем делать анимацию линий. Вот три слоя с линиями, выбираем их и «перекомпозим», назвав как-нибудь. В композиции с линиями видим, что эти слои мы никак не можем редактировать, нам нужно перевести их в Shape. Но можно поступить иначе. Просто возьмем Pen Tool и, выбрав белый цвет обводки шириной 20 пикселей, нарисуем линии поверх. Для этого кликаем у основания одной из них, зажимаем Shift и ставим вторую точку сверху.
Теперь рисуем вторую и третью линию в отдельных слоях. Эти слои теперь можно удалить или скрыть в Shy. Далее заходим внутрь слоя: Contents — Shape — Path, и в нем есть параметры, отвечающие за форму Shape, в нашем случае — за линию.
Будем его анимировать. Сдвинем бегунок Timeline на вторую секунду, поставим там ключ — это исходное состояние линии. Теперь двигаемся на первую секунду — ставим еще ключ. Выбираем слой, потом выбираем Рen Tool и после этого у нас появляется возможность выбирать отдельные точки нашего пути — линии. Возьмем верхнюю и передвинем ее с Shift за край вверх. Третье состояние нашей линии на нулевой секунде, передвигаемся и ставим ключ. Теперь, выбрав слой с линией и взяв Рen Tool, нам надо перетащить нижние точки линии с зажатым Shift за верхний край, тем самым уменьшив линию и скрыв ее из виду. Получается такая анимация: линия выезжает сверху, достигнув своего места, линия будет подтягивать к себе свой хвост. Сейчас немного медленно, поэтому я сдвину ключи, сократив интервалы между ними до 10 кадров вместо 15.
Теперь выбираем первый и последний ключи. С помощью F9 их сгладим. Перейдем в графики, там по двойному клику на точку открывается окно, где можно ввести точное значение для интерполяции. У первого ключа на выходе ставим значение 60%, у последнего ключевого кадра мы на входе ставим 60%. Получается такой график. А выглядит вот так.
Ту же самую операцию мы проделаем для других двух линий. Заходим внутрь слоя, находим путь линии, выставляем ключ на исходное положение линии. Сдвигаемся назад, ставим ключ, с помощью Рen Tool убираем верхнюю точку за край. Еще сдвиг назад на Timeline, и с помощью Рen Tool убираем нижнюю точку вверх. Потом выбираем первый и последний ключевые кадры. В графиках по двойному щелчку у первого ключа на выходе ставим 60%, теперь у последнего ключа на входе — 60%. С последней линией проводим ту же манипуляцию.
Смотрим, что получилось. Прилетают так, как и должны. Возьмем слои с линиями и поменяем им цвет Label на оранжевый. Продублируем. Передвинем дубликаты наверх и сдвинем на два кадра. Label им мы сменим тоже, чтобы отличать эту группу слоев. Потом снова дублируем, снова двигаем на самый верх, еще Offset на два кадра, и изменим цвет этих трех слоев. У обводки нижних линий мы выставляем какой-то такой розовый цвет, как в оригинале. Средним трем линиям меняем обводку на оранжевый цвет. Вы всегда можете брать цвета пипеткой из оригинальной картинки, если хотите точного соответствия.
В начале видим — есть Offset, а в конце нет. Поэтому в тот момент, когда белые линии долетают до своего места, мы, выбрав слои с нижними линиями, нажимаем комбинацию клавиш Ctrl + Shift + D, так слои у нас разрежутся по времени ползунка на Timeline. Эти новые слои мы перетаскиваем вверх, под слой с белыми линиями, а на Timeline найдем место, где хвосты линий начинают долетать до своих мест. Теперь можно сделать обратный Offset новыми слоями с нижними линиями так, чтобы хвосты стали разноцветными.
И у нас получается на Timeline пропасть между слоями. Мы просто потянем слой за край, чтобы ее заполнить и создать ощущение неразрывности.
В очередной части 7 урока мы будем анимировать центральные окружности.
В нашей композиции находим слои с большими кругами. Выберем оба и «перекомпозим» их, как-нибудь назвав. В этой новой композиции видим, что эти круги в формате Illustrator, т. е. мы можем перевести их в шейповые слои After Effects. Для этого кликаем правой кнопкой мыши по слою и выбираем Create – Create Shapes from Vector Layer. Создается точная копия слоя, но с редактируемыми параметрами. То же самое делаем со вторым слоем. А эти слои теперь можно удалить или скрыть.
В оригинале эти круги появляются из центра по размеру. Нажмем S и поставим два ключа с разницей 20 кадров. Еще ставим третий ключ через 10. Вначале будет появление с нуля процентов, потом перелет и колебания. Для колебания создадим еще два ключа с интервалом в 10 кадров, где последний ключ — исходные 100% размера. Ставим 0% в начале. Потом — 110%. Потом — значение меньше 100%, где-то 95%. Дальше — 105% и 100%. Имея равный интервал, мы создаем колебания за счет разброса значения, которые постепенно уменьшается.
Мне кажется, не хватает сглаживания. Нажмем F9 и поправим графики. Посмотрим, как выглядит. Похоже, вот здесь уменьшается слишком сильно. Исправлю на 98%, а здесь — 106%. И вот здесь что-то вроде 102%. Да, так гораздо лучше.
Потом я захожу у первого слоя в Contents — Group — Stroke, и нахожу там ширину обводки — Stroke Width. Сейчас — на 10, обнулю, поставив ключ со значением 0. Потом сдвинемся на 20 кадров, поставим еще ключ. Потом на 10 кадров вперед и ставлю значение 20 пикселей. И в самом конце еще через 30 кадров выставляю значение 10 пикселей. Сдвину второй ключ поближе к началу. И сглажу ключи. А первый вообще удалю.
Странное движение вышло. Лучше последний кадр подвину поближе. Так в самый раз.
Дальше сделаем поворот. Нажмем Shift-R. Создадим ключ. Потом через 20 кадров — второй со значением минус 45 градусов. Теперь надо это зациклить. Alt + клик по «Часики» — открывается поле ввода Expression. Там вводим Loop out, потом — скобки и в них кавычки, а в них слово Offset. Это позволит анимации продолжаться дальше, делая сдвиг на дополнительные 45 градусов каждые 20 кадров, а не скакать от 0 до 45 при атрибуте Cycle.
Посмотрим, не быстро ли крутится. Мне кажется это быстро, так что выставлю 15 градусов.
Теперь то же самое сделаем со вторым кругом. Находим параметр Stroke Width. Ставим ключи. Повторим рисунок ключей, как у первого круга. Три ключа, в последнем — 10, в среднем — 20, в первом — 0 пикселей обводка. Сгладим. Нажмем Shift+R. Выберем ключи по повороту у первого Shape, скопируем их, нажав Ctrl+C. И выбрав параметр Rotation у второго Shape, вставим ключи с помощью Ctrl+V. Вместе с ними скопировался и Expression. Изменим значение второго ключа на минус 20 градусов, чтобы поворот был в противоположную сторону. Честно говоря, не нравится анимация обводки у второго Shape. Сдвину ключ, поставлю просто 10, а последний — уберу. Ключи обводки первого Shape сдвину к началу. И еще изменю скорость вращения: у второго Shape минус 15 градусов, у первого — 10 градусов. И теперь верхнему Shape задам Offset на Timeline в 5 кадров от первого Shape.
Теперь мы будем анимировать вот эти плашки с текстом.
Для начала переместим слои надписей над соответствующими плашками для удобства. Теперь берем третью надпись и третью плашку вместе, чтобы их «прикомпозить». Назовем text 03. Внутри этой новой композиции видим наши слои. Все на месте.
В оригинале плашка вылетает из угла экрана и в этой точке зеркально отражается. Чтобы это сделать, инструментом Pen behind переместим якорную точку у плашки влево. Сдублируем этот слой в размере с собранной связью, изменим значение по горизонтали на минус 100%. Так мы развернем нашу фигуру. Добавлю параметр позиции, ставлю у него ключи для анимации. Один — в начале, другой — через 5 кадров. В первом ключе на глаз уведу плашку за границу экрана. Когда она прилетает, начинается анимация размера. Тоже два ключа с разницей в 5 кадров. На первом — минус 100% и 0 — во втором. Теперь в тот момент, когда плашка прилетает, я выберу второй слой с плашкой и тоже анимирую его по Scale. Поставлю три ключа с интервалом в 10 кадров. Сделаю перелет, в среднем будет 105%, в первом — 0 и в последнем ставлю 100%. Этот слой подрежу на Timeline.
Здесь в оригинале у меня плашка трехцветная. Мы это повторим и сдублируем для этого слоя два раза. На Timeline их заоффсетим, сдвинув на 2 кадра. Теперь кидаем эффект Fill для изменения цвета, нижний из них будет белым, средний — оранжевым. Напомню, для большего соответствия цвета можно брать пипеткой из оригинала.
Выберем эти три слоя, нажмем U, и под конец ключевых кадров подвину нашу основную плашку, чтобы переход получился вовремя.
И отсюда я буду анимировать надпись. Тоже перемещу у слоя с текстом якорную точку влево. Вообще текст никогда не стоит растягивать или сужать, но в редких случаях, как художественный прием для придания некоторой маргинальности, это можно сделать. Поставим ключ по размеру, сдвинемся вперед на 10 кадров, поставим еще ключ, еще вперед на 5 кадров и там ставим ключ. В среднем кадре 105% для небольшого перелета, а в первом ключе — 0%.
В оригинале я добавлял для надписи немного хроматической аберрации. Делал это самым простым способом. Дублировал надпись, переместил под надпись и накинул Fill. Перекрасил в голубой цвет. Потом сдвинул ключи и добавил дополнительное колебание. Потом дублировал уже этот слой. Поменял цвет на красноватый и снова сдвинул ключи немного. И мне показалось, что глитчовость этой анимации придаст, если все кадры будут стоп-кадрами. Поэтому правой кнопкой мыши — по ключам и выбираем Toggle Hold Keyframes.
Возможно, стоит ускорить эти колебания. Да, побыстрее лучше.
В этой части урока мы анимируем среднюю надпись. Выбираем слои плашки и надписи и делаем их Pre-compose. Внутри можно заметить, что при выборе слоя на окраине просмотра пропало отображение границ слоя и якорной точки. Включить обратно можно здесь. Продублируем плашку. Верхнюю отключим.
Нам нужно сделать, чтобы плашка справа налево прилетала и собой проявляла текст. Переместим якорную точку влево у плашки. Изменим размер по горизонтали на 175%, чтобы ушло за край. Теперь ставим ключи по позиции, и за 15 кадров плашка будет прилетать. В районе последнего ключа по позиции ставлю первый ключ по Scale. Через 10 кадров ставлю еще один и меняю значение на 0%. Сглаживаю ключи и захожу в графики. В оригинале у меня здесь под 100% замедление. А здесь, соответственно, около 0. И то же самое по Scale: 100% и 0%. Обрезаю слой и вешаю на него эффект Fill. Два раза дублирую слой. Поменяем местами слои. Теперь можно сделать Offset на Timeline в один кадр. И перекрашиваю нижний слой в белый, средний — в малиновый и верхний — в оранжевый.
Примерно в этот момент будет проявляться оригинальная подложка и надпись. Я их просто вот так подтяну на Timeline.
То, что надо!
В очередной части 7 урока, где мы анимируем заставку, нам осталось сделать анимацию верхней плашки с текстом.
Выбираем слои плашки и текста и делаем Pre-compose, назвав как-нибудь. В оригинале надпись проявляется по букве, а сверху и снизу прилетают два луча, которые начинают это проявление.
Сейчас мы имеем векторный слой с надписью. При подготовке в Illustrator слои с надписью можно экспортировать в PSD (формат Photoshop) и импортировать в After Effects, тогда эти слои можно конвертировать в текстовые слои самого After Effects. Но так как мы импортировали нашу заготовку в векторном формате Illustrator, After Effects не даст нам сделать такую конвертацию.
Вообще странно, хотелось бы, чтобы Adobe в новых версиях сделали эту совместимость.
Мы могли бы конвертировать надпись в шейповый слой и воспользоваться скриптами, такими как Simple Tennel, чтобы автоматически разобрать шейповый слой на буквы. Но я предлагаю сделать все средствами самого After Effects с помощью масок.
Рисуем маску для одного слова и вторую — для другого. Просто будем анимировать форму маски, чтобы буквы постепенно открывались. Для этого внутри масок слоя находим параметр Mask Path. Ставим ключевые кадры. Так как буквы будут проявляться резко, мы изменим вид ключей на стоп-кадры. Два раза кликаем по контуру маски и, потянув за края бокса трансформации, скрываем все буквы, кроме буквы Р. То же самое делаем у второй маски и скрываем все буквы, кроме буквы L Вперед на 1 кадр, и первую маску раздвигаем до буквы У, получается УР. Еще вперед на 1 кадр, и маску раздвинуть до полного слова КУРС. Теперь вернусь обратно и у второй маски проявлю букву R. Теперь буду проявлять по 1 букве с каждой стороны каждый шаг.
Получается очень быстро, поэтому выберем все ключи и потянем, зажав Alt, чтобы ключи увеличили интервал пропорционально. Слои подвинем от начала. Плашку анимируем по горизонтальной стороне размера. Сгладим в графиках, поставим 70% у ключей. Возможно, чуть попозже. Или, наоборот, чуть пораньше. Переместим ползунок на момент, когда видны все буквы. Это нужно, чтобы рисовать лучи.
Возьмем Pen Tool и от основания буквы Р вниз по стволу нарисуем луч, зажав Shift. Должна получиться линия с выключенным Fill и включенной обводкой белого цвета. Ширина обводки у меня 10 пикселей. И стрелочками подвинем. Лучше поставлю обратно 9 пикселей. И точно так же у буквы L вверх с Shift рисую линию. Ничего страшного, если линия чуть меньше ствола буквы, на скорости это будет незаметно.
Добавляем модификатор Trim Path в один из слоев с линиями. У Start ставлю вначале 100%, перемещаюсь на 15 кадров и вперед ставлю 0%. И тут же ставлю ключ у параметра End со значением 100%. Перемещаюсь еще на 15 кадров вперед и ставлю значение 0%. Таким образом, луч будет прилетать, полностью растянувшись, и дальше будет уменьшаться.
Сгладим ключи. В графиках выставим скорость замедления до 90% у первого и последнего ключа, а у ключей в середине — 0%. Получается вот такая фигура.
Посмотрим, как получилось. Можно вот здесь сделать небольшой Gap между ключами, чтобы луч немного постоял. И сокращу прилет линии по времени.
То же самое делаем со второй линией. Добавляем Trim Path. У параметра Start ставим ключ на 100% и через 10 кадров ставим 0%. У параметра End ставим 100% и через 10 кадров — 0%. Между ними делаю Gap в 5 кадров и, возможно, на пару кадров еще сокращу прилет, потому что эта линия короче.
Также сглаживаю. В графиках у первого ключа старта ставлю на выходе 90%, у последнего ключа по Start ставлю 0% на входе. У первого ключа End на выходе ставлю 0%, у последнего ключа на входе — 100%. Обрежу слой. Тут я заметил, что верхняя линия прилетает раньше. Верну обратно, чтобы линии прилетали в один момент.
Мне надо, чтобы лучи одновременно достигали своего положения, и тогда начиналось проявление надписи, поэтому в этом моменте я подвину слой с текстом. Теперь вот эти слои продублирую, перенесу ниже. Выберу им другой Label и изменю цвет обводки на розовый. Еще раз продублирую и выберу голубоватый цвет обводки. Мне нужно, чтобы у лучей был разноцветный хвост. Поэтому я беру эти дубликаты и сделаю сдвиг на Timeline в один кадр.
Надпись готова!
