Что было дальше эмблема
Повторил заставку «Что было дальше?» за 24 часа
Я продолжаю рассказывать о своих проектах, и в этот раз, решил повторить заставку одного из популярных youtube шоу «Что было дальше?». Я нейтрально отношусь к нему и смотрю не часто, но мне стало жутко интересно посмотреть на его заставку глазами дизайнера. Получилось ли у меня хоть что-то, об этом вы узнаете ближе к концу статьи. Если вам интересен формат видео, ссылку на ролик, я, как всегда, оставлю под текстом.
Ещё во времена СССР специалисты центральных телеканалов, никто тогда не называл их моушн-дизайнерами и 3D моделлерами, разрабатывали по-настоящему интересные заставки. Для меня остаётся загадкой как они, имея такие ограничения могли делать что-то подобное.
Телевидение развивалось, а вместе с ним и качество заставок, многие из которых до сих пор вызывают у взрослых людей неконтролируемый приступ приятной ностальгии. Я никогда раньше не задумывался каким образом создавались все эти видео, но их авторам точно удавалось передать всю суть программы за несколько секунд.
Вместе с развитием тв, развивался и софт для создания и обработки графики. Можно смело сказать, что сейчас возможности ограничены лишь фантазией авторов.
Всё больше создателей программ приходит в интернет, и в конце концов наступает эра youtube шоу. Одно из самых популярных современных шоу, каждый выпуск которого попадает в тренды — «Что было дальше?». Кто-то считает это шоу чересчур агрессивным, кто-то фанатеет от него, но а мне однажды просто стало интересно насколько сложно создать такую заставку.
Забегая вперёд скажу, что это видео стало для меня одним из самых сложных и трудоёмких, из тех, которые я когда-либо пытался создавать. Наверное это было бы не так сложно, если бы я делал всё с нуля и не опирался на конкретное видео и конкретные футажи. С первого взгляда на заставку можно и не заметить сколько графики на самом деле используется в ней.
Я подумал, поставлю себе цель в 24 часа и спокойненько повторю всё то же самое в After Effects. Но после того как я скачал заставку и пролистал по кадрам, был немного в шоке. Да, я догадывался, что в заставке используется много графики, но чтобы настолько много.
Так как я уже решил, что на всё про всё у меня есть 24 часа, отступать было некуда. Я отвлекался на еду и сон, поэтому, как обычно, не учитывал это время в своём челлендже.
У меня 24 часа, заставка с тонной графики и сомнения в том, что я вообще что-то успею за это время. Увидеть то, что получилось в итоге, вы, как всегда, сможете в конце видео. Погнали. Чтобы добавить разнообразия в видео, я решил использовать старые фотографии ведущих, на которых они местами совсем непохожи на самих себя нынешних.
Кроме того, заставка шоу менялась, когда из него уходили ведущие, а вместо них приходили другие. Дизайнер не просто менял фото и видео отрывки, а добавлял новую графику, которая связана с каждым из них.
Нужно сказать, что я действительно считаю эту заставку произведением искусства. Будем надеяться, что она создавалась просто очень творческим человеком.
Если вы когда-нибудь видели заставку, вы могли заметить самурая из Аниме в первых кадрах, портрет которого висит позади ведущих в студии. Это видео — отрывок из Аниме с рейтингом R+ под названием Манускрипт ниндзя 1993 года. Я добавил оригинальную заставку в проект и начал разбираться с первой сценой.
В этот раз я использовал старую добрую маску и вырезал фото по контуру. Кстати, маска, чуть ли ни самый популярный инструмент в After Effects.
Мне хотелось, чтобы видео было максимально похоже на оригинал, но в то же время я понимал, что не смогу найти точно такие же футажи, которые дизайнер использовал в своём видео, поэтому я старался искать что-то похожее, и не копировал заставку один в один. Что удивительно, в каких-то кадрах мне всё-таки удалось найти футажи из оригинала.
Создавать одну и ту же графику в After Effects можно огромным количеством способов. Но я считаю, что если есть задача сделать что-то конкретное, то неважно как это было сделано, главное, чтобы дизайнер умел это делать и итоговый вариант ему подошёл.
Я не использовал плагины, с помощью которых многие вещи можно сделать в два клика. Только в одном месте, когда мне нужно было клонировать картинки.
Мне почти сразу удалось подобрать похожий шрифт для плашек с именами и названием программы, но так как у этого шрифта не было курсива, я просто наклонил его с помощью 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 с небольшим часа.
Уже сейчас я готов показать то, что получилось.
Это, как всегда, было трудно и на самом деле я не знал многих приёмов монтажа перед тем, как стал разбирать видео, но благодаря этому я прокачал свои навыки в моушн-дизайне ещё больше.
Думаю, что получилось достаточно похоже на оригинальное видео.
Казалось бы, что из такого количество совершенно разных футажей, видео и эффектов сложно собрать что-то красивое и стильное, но как вы смогли увидеть — это возможно.
Не бойтесь ставить себе невыполнимые на первый взгляд задачи, ведь именно в их решении и заключается прогресс.
Пишите комментарии, если эта статья и видео были вам интересны. И до встречи.
Как менялись логотипы Apple
Мало кто знает, но на фото выше – реальный логотип Apple.
Главный символ Apple обновлялся уже несколько раз. Смена логотипа — своеобразная контрольная точка, знаменующая переход к новым взглядам и принципам компании. Причём эти изменения никогда не носили случайный характер.
Ты точно помнишь старые лого компании? Давай разбираться.
Лого «Ньютон» (1976 — 1977)
Первый логотип Apple далёк от современного лаконичного символа. По большом счёту, он выделялся и в те времена. Лого создал один из основателей Apple — Рональд Уэйн, который быстро продал свою долю в компании. Идея крутая — воспользоваться растиражированной историей об открытии гравитации Исааком Ньютоном. Но её реализация оставляет желать лучшего.
Минимализм? Не, не слышали. Логотип больше похож на герб: щит, геральдическая лента, высокопарная подпись. Абсолютно не пригоден для нанесения на продукцию, а всё из-за своей громоздкой геометрии и обилия мелких деталей. К счастью, просуществовал он недолго.
Радужный логотип (1977 — 1998)
Амбициозной компании жизненно необходим узнаваемый символ. Именно поэтому основатели Apple обратились к дизайнеру Робу Джейноффу из агентства Regis McKenna. Именно он создал широко известное надкушенное яблоко в радужных тонах.
В одном из интервью дизайнер рассказал, что просто купил пакет яблок и экспериментировал с ними в течение недели. Многие фанаты-мистификаторы любят приписывать скрытые смыслы этому логотипу. Но Роб Джейнофф развенчал все мифы, по его словам, он не делал никаких отсылок к Алану Тьюрингу или к Райскому саду:
Монохромный логотип (1998 — настоящее время)
К концу девяностых Apple была на грани провала. После своего возвращения в компанию, Стив Джобс наделал шороху — закрыл бесперспективные проекты, обновил штат сотрудников и перестал продлевать лицензии на фирменное программное обеспечение. Чтобы навсегда откреститься от провального старого курса, изменили и логотип. С 1998 года и до сих пор — это однотонное яблоко.
Если размер прошлого логотипа редко превышал 1,5 х 1,5 см, то монохромный вариант, как правило, крупнее, ярче и заметнее. Сейчас «яблоко» рисуют в трёх цветах: чёрном, белом и сером. Но раньше было больше разновидностей, вот самые известные:
Лого iMac G3
Выход iMac G3 в 1998 году ознаменовал возвращение Apple. На стильные моноблоки ставили именно такой логотип, причём он был того же цвета, что и часть корпуса. Вышедшие годом позже PowerMac, Apple Studio Display и iBook получили похожие логотипы.
Логотип “Aqua”
Такой логотип впервые появился на PowerMac G4 Cube и использовался ещё несколько лет в рекламе и баннерах. Плюс его можно было заметить в ранних версиях OS X, ведь лого как нельзя лучше вписывался в концепцию Aqua-интерфейса.
«Стеклянный» логотип
Пользователи настольной ОС от Apple впервые увидели этот логотип в 2002 году при обновлении до OS X Panther. С выходом iPhone в 2007 этот символ переехал на мобильные устройства. Его заменили только в 2013 в связи с релизом iOS 7 и отказом от скевоморфизма.
Металлический логотип
Металлические логотипы — одна из любимых и узнаваемых фишек Apple. Появившись в моноблоках iMac G4, такие лого кочевали по всем категориям продукции Apple. Чехлы для iPhone с дыркой? Всё ради заветного металлического яблока.
Лого “Product.RED”
Apple сотрудничает с Product Red, помогая последним собирать средства для Глобального фонда борьбы со СПИДом, туберкулёзом и малярией. На официальном сайте компании из Купертино можно найти товары, часть выручки от которых идут в данный фонд. Раз в год, первого декабря, во Всемирный день борьбы со СПИДом Apple окрашивает свой логотип в красный цвет.
А что дальше?
Конечно, Apple не изменит форму своего логотипа. Ждать от компании экзотичных цветовых решений тоже не стоит, сейчас в моде минимализм. Возможно, в скором времени мы увидим привычный логотип, выполненный из новых материалов. Может аморфный сплав?
Максим Клименчук
Автор, инженер, кофеман и отец маленького «почемучки». Стараюсь не обрастать гаджетами. Не получается.
История создания логотипов известных брендов
За логотипом каждого известного бренда скрывается интересная и насыщенная история его создания и изменения. В этой статье мы расскажем вам о некоторых из них, а если вам самим нужно заказать логотип бренда, сделать это вы можете в студии Kinesko!
Черточка за 35 долларов: история создания логотипа Nike
Каждый раз, когда вам говорят, что логотип бренда должен быть сложным, содержать скрытый посыл или демонстрировать деятельность компании, «просто сделайте это», напомнив им о логотипе Nike. В 1971 году руководитель компании Blue Ribbon Sports, которая вскоре была переименована в более знакомое нам название, Фил Найт нанял студентку-дизайнера из Портлэнда Кэролин Дэвидсон, чтобы она создала лого, которое было бы простым и динамичным. История умалчивает, как в голову Кэролин пришла идея именно такого логотипа, но ее концепт все же приняли.
Найт испытывал определенные сомнения по поводу такой необычной эмблемы, но дедлайн был все ближе и ближе, и судьбоносное решение таки приняли. Что интересно, заплатили студентке за разработку лого всего лишь 35 долларов, что даже по тем временам было далеко не заоблачной суммой. Впрочем, в проигрыше она не осталась – спустя какое-то время, когда к Nike пришел настоящий успех (не в последнюю очередь из-за удачного лого), руководство решило отблагодарить Кэролин, прислав ей бриллиантовое кольца в форме логотипа и конверт с акциями компании.
Не Адамово яблоко: история логотипа, сделанного для Apple
Первый логотип бренда создал Рон Уэйн – один из сооснователей, и, по совместительству, главных неудачников в истории. Не прошло и двух недель с момента регистрации компании, как Уэйн, не особо долго думая, решил продать ее 10 процентов. За 800 долларов. Страшно даже представить, насколько огромным состоянием он бы обладал сейчас, если бы не тот опрометчивый поступок. С логотипом у Уэйна все тоже как-то не сложилось. Он представлял собой некое подобие гравюры, на которой были изображены Исаак Ньютон и то самое легендарное яблоко, готовое вот-вот на него упасть и открыть людям закон всемирного тяготения.
Идея логотипа была довольно оригинальной, но совершенно не пригодной для бизнеса. Поэтому через год Стив Джобс попросил дизайнера Роба Янова сделать простой, но современный и, главное, запоминающий логотип. Янов сразу понял, что должно быть в лого компании с названием Apple. Он отправился в ближайший супермаркет и купил там кучу яблок, а придя домой, начал экспериментировать с их формой. Что у него получилось, вы знаете и сами.
О логотипе Apple ходит немало слухов и теорий. Одна из них заключается в том, что надкусанное яблоко – это отсылка к Адаму и Еве. Но это не так. На самом деле оно обыгрывает созвучность двух слов bite (укус) и byte (байт). Согласно еще одной популярной теории, цвета радуги, присутствовавшие в логотипе с 1976 по 1998 году, это своеобразная поддержка не то ЛГБТ, не то Алана Тьюринга, гениального ученого и, по совместительству, представителя сексуальных меньшинств. Это еще одно заблуждение, так как Янов создал дизайн логотипа за год до того, как ЛГБТ начали использовать радугу в качестве своего символа.
Логотип на палочке: история создания лого Chupa-Chups
Идея самой конфеты на палочке пришла в голову ее создателю Энрике Бернату тогда, когда он увидел на улице мальчика, которого его мама ругала за испачканные сладостями ладони. Энрике понял, что дизайн конфет должен быть рассчитан на их главных потребителей и придумал идею, которая медленно, но верно начала покорять весь мир.
Вместе с увеличившимся объемом производства и количеством вкусов возникла необходимость в новой, более презентабельной обертке. И пригласил Бернат для этого не какого-то фрилансера, а, как вы уже поняли, самого Сальвадора Дали. Тот с энтузиазмом принялся за работу: позаимствовал цвета у флага Испании, округлил шрифт названия и поместил его в рамку. Всего час работы – и у Дали получил один из самых популярных логотипов в истории.
Мы не обещаем сделать дизайн логотипа всего за час, но и Дали такой лишь один. Зато мы разработаем несколько концептов лого, проведем дополнительные исследования и уместим работу в максимально короткий срок. Вас устраивает? Тогда закажите дизайн логотипа в студии Kinesko!