Всем привет!

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

Ещё во времена СССР специалисты центральных телеканалов, никто тогда не называл их моушн-дизайнерами и 3D моделлерами, разрабатывали по-настоящему интересные заставки. Для меня остаётся загадкой как они, имея такие ограничения могли делать что-то подобное.

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

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

Всё больше создателей программ приходит в интернет, и в конце концов наступает эра youtube шоу. Одно из самых популярных современных шоу, каждый выпуск которого попадает в тренды — "Что было дальше?". Кто-то считает это шоу чересчур агрессивным, кто-то фанатеет от него, но а мне однажды просто стало интересно насколько сложно создать такую заставку.

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

Я подумал, поставлю себе цель в 24 часа и спокойненько повторю всё то же самое в After Effects. Но после того как я скачал заставку и пролистал по кадрам, был немного в шоке. Да, я догадывался, что в заставке используется много графики, но чтобы настолько много.

Так как я уже решил, что на всё про всё у меня есть 24 часа, отступать было некуда. Я отвлекался на еду и сон, поэтому, как обычно, не учитывал это время в своём челлендже.

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

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

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

Если вы когда-нибудь видели заставку, вы могли заметить самурая из Аниме в первых кадрах, портрет которого висит позади ведущих в студии. Это видео — отрывок из Аниме с рейтингом R+ под названием Манускрипт ниндзя 1993 года. Я добавил оригинальную заставку в проект и начал разбираться с первой сценой.

В этот раз я использовал старую добрую маску и вырезал фото по контуру. Кстати, маска, чуть ли ни самый популярный инструмент в After Effects.

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

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

Я не использовал плагины, с помощью которых многие вещи можно сделать в два клика. Только в одном месте, когда мне нужно было клонировать картинки.

В первой сцене появляется небольшой восьмибитный взрыв. Я взял гифку, покрасил её и добавил в нужное место. После взрыва появляется человечек в скафандре, который меняет цвет через пару кадров. Я подумал, что было бы круто добавить бойца из Mortal Kombat, и менять для него цвет. Я нашёл Сабзиро и поменял ему цвет в нескольких кадрах. Наверное так делали и создатели Mortal Kombat, когда хотели разнообразить бойцов, Рептилией и Ермаком.

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

Во всей заставке часто используется Wave эффект. Судя по названию можно понять, что он создаёт волну из объекта.

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

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

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

Но попробовав сделать так, я полез искать другие способы, так как не получалось сделать похоже на оригинал. И я нашёл вариант, где используется эффект Displacement Map. Для изображения создаётся что-то вроде карты, на которой тёмные части находятся ближе к зрителю, а светлые дальше от него и After Effects искажает изображение на основе этой карты. Получается такое псевдо-3D.

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

В итоге я нашёл похожий эффект, который называется Duatone. Если совсем просто — это изображение, в котором используется только два контрастных цвета. В нашем случае чёрный и зелёный. Готового эффекта Duatone нет в After Effects, поэтому я добавил сразу пачку других эффектов на слой, и несколько раз после этого добавлял или удалял эффекты, чтобы картинка стала похожа на оригинал.

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

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

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

Для каких-то кадров я скачал готовые футажи на зелёном фоне. Они отлично встраиваются в видео, достаточно вырезать зелёный фон с помощью кеинга, который используют повсеместно.

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

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

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

Дело в том, что стандартными средствами After Effects можно клонировать только шейп нарисованный в программе, то есть многоугольник или круг. Можно также использовать частицы, каждую из которых заменить на картинку, но в этом случае нельзя будет контролировать их расположение, так как мне нужно. Поэтому именно в этом месте и один раз за весь проект я использовал сторонний плагин Trapcode Form. Ещё немного повозившись с его настройками я получил подходящую картинку.

Потом я добавил несколько эффектов при появлении и создал карту для псевдо-3D. Посмотрите, как круто выглядит карта. Можно было всё оставить и так.

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

Я продвинулся на 5 секунд и прошло уже почти 9 часов.

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

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

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

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

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

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

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

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

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

Добавляю кота с огнём и сцена готова.

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

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

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

Спустя какое-то время эффекты местами начали повторяться, поэтому работать стало чуть легче.

Следующая сцена снова с эффектом Duatone и клонированием. В оригинальном видео на заднем плане можно заметить гифку с ребёнком. Лучший вариант для поиска Baby fail gif.

Прошло 13 часов. И я сделал чуть меньше половины. Думаю, что пора снова ускоряться.

Из всех сцена эта мне понравилась больше всего. Ведь здесь используется настоящее и моё любимое 3D. За основу здесь взято видео, но я вырезал силуэт из фотографии и анимировал для него голову и руку. Я выбрал узор для фона, который мне понравился и скачал осьминога. А потолстевшего человека паука нашёл точно такого же, как в оригинале. Основа сцены готова. Теперь к 3D.

Я создал камеру и выставил для слоёв галочку 3D, а потом клонировал основу и развернул под нужным углом. Осталось добавить руки, летающие по кадру и исказить их с помощью эффекта волны.

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

Я сделал ровно половину видео и прошло уже чуть больше 15 часов. Не знаю почему, но работа пошла чуть быстрее.

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

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

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

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

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

Я совсем близко к последним сценам видео. В первой части две фотографии и псевдо-3D. А следующая уже интереснее. Зацикленный кусочек из видео, а на заднем плане кадры из игры Donkey Kong. Я взял точно такие же кадры из игры и нарезал несколько масок. А для всей сцены добавил эффект Duatone.

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

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

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

Ура! Настало время последней сцены. 21 час позади и я вышел на финишную прямую.

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

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

Самый последний штрих цветокоррекция всего видео.

Я не верю в это, но кажется я закончил и успел вовремя, потратив 23 с небольшим часа.

Уже сейчас я готов показать то, что получилось.

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

Думаю, что получилось достаточно похоже на оригинальное видео.

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

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

Пишите комментарии, если эта статья и видео были вам интересны. И до встречи.

Оригинальное видео:

Повторил заставку «Что было дальше?» за 24 часа