Картинка на заднем фоне что было дальше

Повторил заставку «Что было дальше?» за 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 с небольшим часа.

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

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

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

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

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

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

Источник

Css картинка на задний план

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

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

Важно понимать, что браузер будет сравнивать z-index только у элементо расположенных на одном уровне вложенности и, даже если у внутреннего элемента z-index больше, чем у элементов расположенных на одном уровне с его родителем, то он будет отображаться на заднем плане по отношению к ним (в Демо пример №3).

Каждый блок html-элемента имеет фоновый слой, который может быть полностью прозрачным (по умолчанию) или заполнен цветом и/или одним или несколькими изображениями. CSS-свойства фона указывают, какой цвет background-color и изображения background-image использовать, а также их размер, расположение, способ укладки и т.д.

Фон не отображается у пустых элементов с нулевой высотой. Отрицательные значения свойства margin не влияют на фон элемента.

Свойства фона html-элементов

1. Базовый цвет: свойство background-color

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

Цвет фона обрезается в соответствии со значением background-clip самого нижнего слоя фонового изображения.

Свойство не наследуется.

Рис. 1. Свойство background-color для разных элементов

2. Источник изображения: свойство background-image

Свойство background-image устанавливает фоновое изображение (одно или несколько) элемента. Значение none считается слоем изображения, но ничего не рисует. Изображение, которое является пустым (нулевой ширины или нулевой высоты), которое не загружается или не может быть отображено (например, потому что оно не в поддерживаемом формате изображения) также считается слоем, но ничего не рисует.

Свойство не наследуется.

3. Укладка изображений: свойство background-repeat

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

Свойство не наследуется.

Рис. 2. Свойство background-repeat

4. Фиксация изображения: свойство background-attachment

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

Свойство не наследуется.

5. Позиционирование изображений: свойство background-position

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

Свойство не наследуется.

Пара ключевых слов может быть переупорядочена, в то время как комбинация ключевого слова и длины или процента не может. Например, center left — допустимое значение, а 50% left — нет.

Положительные значения смещают внутрь от края области расположения фона. Отрицательные значения смещают наружу от края области расположения фона.

Рис. 3. Свойство background-position

Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:

Рис. 4. Фоновое изображение по низу блока

Также благодаря свойству позиционирования, для одного блока можно использовать несколько фоновых изображений:

Рис. 5. Задание для блока нескольких фоновых изображений

6. Область рисования: свойство background-clip

Свойство background-clip определяет область рисования фона. Фон всегда рисуется под рамкой элемента, если таковая имеется.

Корневой элемент имеет другую область рисования фона, поэтому свойство background-clip на него не влияет.

Свойство не наследуется.

Рис. 6. Свойство background-clip

7. Область расположения фона: свойство background-origin

Свойство background-origin указывает область расположения фона для элементов, которые выводятся на экране как единый блок (например, не абзацы текста).

Свойство не наследуется.

Рис. 7. Свойство background-origin

8. Размер изображений: свойство background-size

Свойство background-size устанавливает размер фоновых изображений.

Свойство не наследуется.

Рис. 8. Свойство background-size

9. Краткая запись свойств фона: свойство background

10. Множественные фоны

Первое изображение в списке — это слой, отображаемый ближайший к пользователю, следующий отрисовывается за первым, и так далее. Цвет фона, если он есть, закрашивается под всеми остальными слоями.

Рис. 9. Пример использования нескольких фоновых изображений

Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).

Итак, требования к фоновому изображению у нас следующие:

Способ 1

Этот способ работает в

Chrome (любая версия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Способ 2

В случае если ширина окна будет меньше ширины изображения, будет использоваться media query для выравнивания бэкграунда по центру.

Этот способ работает в:

Способ 3

Еще один способ заключается в следующем: фиксируем изображение к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.

Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в

Этот способ работает в хороших браузерах и IE 8+.

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

Источник