Создание коллажа из кадров видеоклипа

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

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

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

Так вот, вернёмся к нашим пирогам, сегодня утром, после того как две 6-литровые ёмкости родниковой воды самодоставились ко мне на кухню, пришла занятная идея - а что если совместить приятное с полезным, и выложить в блоге инструкций тот классный ролик с новосибирскими хороводами, а ниже рассказать о том, как можно вытащить красивые кадры из этого видео и сделать из них оригинальный коллаж (Чем не инструкция? И главное всё по делу!). Этим и займёмся.

К вашему вниманию предлагается:

ФЛЕШМОБ по-русски - дружные пляски на площади
Новосибирск, 16 сентября 2012 года

Организатор акции - Государственный Академический Сибирский русский народный хор



Смотрим онлайн с ютуба или качаем для возможности просмотра с компьютера без подключения интернета.
Предлагается два варианта качества, оба в формате WebM, смотреть который желательно плеером VLC Media Player .

Качество 720p :
Видео: WebM, VP8, 1280*720, 1000fps, ~3070 Kbps
Звук: Ogg Vorbis, 44 kHz, ~192 Kbs, stereo
Продолжительность: 3'55''
Размер: 95.4 Мб

Ссылка для скачивания:
https://dl.dropbox.com/s/bcth9shr32mc84k/Russian_flashmob_horovod_720p.webm?dl=1 
Прямая ссылка для просмотра в браузере из интернета (нужна последняя версия браузера FireFox, Opera или Google Chrome):
https://dl.dropbox.com/s/bcth9shr32mc84k/Russian_flashmob_horovod_720p.webm
Ссылка для расшаривания файла через dropbox:
https://www.dropbox.com/s/bcth9shr32mc84k/Russian_flashmob_horovod_720p.webm

Качество 1080p :
Видео: WebM, VP8, 1920*1080, 1000fps, ~5991 Kbps
Звук: Ogg Vorbis, 44 kHz, ~192 Kbs, stereo
Продолжительность: 3'55''
Размер: 180 Мб

Ссылка для скачивания:
https://dl.dropbox.com/s/vgkfvb7ti5k4cn2/Russian_flashmob_horovod_1080p.webm?dl=1
Прямая ссылка для просмотра в браузере из интернета (нужна последняя версия браузера FireFox, Opera или Google Chrome):
https://dl.dropbox.com/s/vgkfvb7ti5k4cn2/Russian_flashmob_horovod_1080p.webm 
Ссылка для расшаривания файла через dropbox:
https://www.dropbox.com/s/vgkfvb7ti5k4cn2/Russian_flashmob_horovod_1080p.webm

Ниже читайте о том, как я делал коллажики по мотивам этого клипа.


На тему хоровода в Новосибирске сделал 3 коллажа (нажимайте, чтобы увеличить):

Вам же расскажу порядок действий, по созданию одного из них (самый хороводистый из этих трёх будет выступать в качестве примера).

Для удобства, создание коллажа разобью на несколько этапов.

1) Подготовка изображений для работы

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

Лично мне удобно это делать следующим образом:
открыть проигрыватель с клипом в оконном режиме; перемотать на нужный кадр, после чего сделать скриншот всей области экрана программой FastStone Capture 7.2 (использую способ захвата в два клика; для точного захвата обращаю внимание на увеличенную область под курсором, которая отображается во время захвата в левом верхнем или правом нижнем углу экрана). Сохраняя кадр из видео, можно сразу же изменять разрешение на подходящее для вас (или для вашего коллажа).

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

Другой способ, который может оказаться полезным - это создание снимка, используя возможности плеера, в котором вы смотрите видео. У разных проигрывателей расположение кнопки для создания снимка того эпизода, на котором сейчас открыто видео, отличается.
В моём случае (VLC Media Player 1.1.11), для фотографирования экрана проигрывателя, нужно в верхней панели нажать Видео, после чего в выпадающем меню кликнуть по пункту Снимок. По умолчанию, папка для сохранения сфотографированных из VLC кадров видео : C:\Users\Имя пользователя\Pictures , эту папку можно изменить в настройках ( Верхняя панель -) Инструменты -) Настройки -) в левой колонке выбрать пиктограмму Видео -) Группа опций Видео-снимки - поле Directory ).

Для того чтобы перейти к созданию коллажа, нужно подготовить достаточное количество снимков любым из предложенных способов. Снимки кадров из видео рекомендую называть порядковым номером скриншота (первый сфотографировали - назвали 1.jpg, второй - назвали 2.jpg и так далее). Также, вам удобнее будет работать со снимками одинакового разрешения, поэтому между фотографированием экрана плеера, не нужно расстягивать-сужать область просмотра (если меняете разрешение при сохранении каждого файла, рекомендую ставить одинаковое для всех кадров).

2) Рисование макета коллажа на бумаге

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

Придуманную конфигурацию для коллажа из прямоугольных снимков рисуем на бумаге. У меня получается примерно так: сначала вижу, куда хочу разместить ключевой кадр (большего размера), потом подбираю расположение других кадров.
Всевозможных комбинаций, которые можно получить, только, комбинируя горизонтальную и вертикальную склейку изображений с помощью программы XnView огромное количество!
Я рисую схему коллажа на чистом листе А4, можно для этого также использовать листочек в клетку (типа трафарета - проводите линии фломастером по подходящим линиям квадратиков и получайте картину для коллажа).

Итак, перед тем как перейти к созданию коллажа вам нужно сделать следующее:
1) Нарисовать макет коллажа на бумаге, отталкиваясь от положения ключевого (ключевых) кадров;
2) Подобрать из вашей коллекции кадров видеоклипа для каждого прямоугольника из коллажа подходящий кадр. Нанести имена кадров (в моем случае это числа, соответствующие порядковому номеру скриншота с экрана видеоплеера) на макет коллажа в соответствующие прямоугольнички;
3) Определится с шириной всего коллажа и отдельных его элементов.
Например, в рассматриваемом примере изначально хотел делать склейку: верхний ряд из 3х кадров + центральный ряд из одного кадра + нижний ряд из 3х кадров. В качестве ширины для коллажа выбрал 1200 пикселов, размеры кадров одинаковые -) для верхнего и нижнего ряда ширина каждого маленького прямоугольничка будет 400 пикселов (треть от 1200).

Как придумывал геометрию коллажа о хороводах, а также по какому принципу размещал кадры коллажа, смотрите ниже на GIF-анимации, которую сделал с помощью Ulead GIF Animator 5:

В результате у меня получился вот такой макет для коллажа:

На центральном кадре с хороводом я заметил часть пространства на изображении, которое можно было бы заполнить чем-то полезным (были колонны здания, а можно использовать место и покруче). Для центрального кадра с хороводом перед склейкой я применил фишку "коллаж - картины на стене" с помощью программы Ulead Photoimpact 12, но об этом ещё скажу ниже.

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

3) Создание коллажа

Для рассматриваемого коллажа я использовал горизонтальную и вертикальную склейку, а также эффект "картины на стене".
Склеивать изображения очень удобно в программе XnView, описал эту процедуру в одной из прошлых моих инструкций - "XnView - удобная программа для создания коллажей и панорамной склейки фотографий" . Создание коллажей способом "картины на стене" также уже описывал в теме "Живая Книга в формате HTML5" в разделе Статические изображения .

Ниже смотрите видео, где продемонстрированы обе фишки (склейка и картины на стене):



Опишу вкратце порядок действий, благодаря которым я получил вот эту картинку:

В первую очередь я привел ширину каждого кадра в соответствие с положенной ему в рамках принятой схемы коллажа:

• Верхний и нижний ряды (где по 3 кадра) - уменьшаю каждое из 6 изображений до ширины в 400 пикселов (файлы 7.jpg, 14.jpg, 38.jpg , 4.jpg, 21.jpg и 24.jpg ).
• Для центрального кадра с хороводом (26.jpg) меняю ширину на 1200 (для того чтобы картинка была достаточно чёткой, изначальная ширина этого кадра должна быть не ниже 1200 пикселов).
• Ширину кадров внутри ключевого кадра с хороводом (файлы 5.jpg и 8.jpg) подбирал экспериментально. 

Изменить разрешение изображения можно, открыв его в программе XnView (по двойному клику, если эта программа установлена по умолчанию просмотрщиком изображений).
После того как открыли нужный файл, в верхней панели нажмите Изображение и выберите в выпадающем меню Изменение размера ... (проще окно изменения разрешения изображения в этой программе можно вызвать комбинацией клавиш Shift+S).
В открывшемся окне, убедившись, что опция Сохранять пропорции отмечена галочкой, задайте подходящую ширину в пикселах и нажмите кнопку Ок:

После этого сохраните получившееся изображение на компьютере с тем же или другим именем, нажмите соответственно Ctrl+S или Ctrl+Shift+S.

Порядок применения склейки опишу ниже.

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

Рассматриваемый коллаж я делал в следующем порядке:
1) Первым делом применил эффект "картины на стене" к центральному кадру, добавив на него 2 кадра поменьше (о том, как это сделать, смотрите видео, которое вставил выше).

Кроме этого, я поместил маленькие картинки в рамки (в той же программе Ulead Photoimpact 12), о том, как это сделать в двух словах ниже:
Выбираем в правой панели вкладку Galleries; открываем в списке поддиректорию Фото-рамки и выбираем раздел Фото-рамки (2D) {или другой подходящий}; кликаем на кнопку в виде дерева папок; находим в списке нужный тип рамки и дважды кликаем по нему.

2) Склеил верхний ряд из 3х изображений; склеил нижний ряд из 3х изображений
(подробнее о горизонтальной склейке читайте здесь)



3) Склеил вертикальной склейкой верхний ряд + центральный кадр дополненный "картинами на стене" + нижний ряд (подробнее о вертикальной склейке изображений читайте там же)

В результате получился довольно неплохой коллаж, как по мне :)

Спасибо за внимание и, надеюсь, эта инструкция оказалась полезной и познавательной.
И главное смотрите видео, которое в начале инструкции (то, что с хороводами), благодаря ему сочинилась эта инструкция  :)))

Читайте также другие мои инструкции связанные с темами близкими этой.

О создании коллажей в Windows:
XnView - удобная программа для создания коллажей и панорамной склейки фотографий

О создании коллажей в Linux:
Создание коллажей в Linux

О создании GIF-анимации:
Ulead GIF Animator - удобная программа для создания GIF-анимации

HTML5 и работа с этим форматом:
Живая Книга в формате HTML5 как способ подачи многослоевой информации, включающей текст, иллюстрации, видеоролики и звуковые файлы

Просто интересно:
Выбор удачного шрифта с Кириллицей. Внешний вид оных шрифтов для сравнения


Оффлайн-версию инструкции по созданию коллажей из красивых кадров отличного видеоролика качайте здесь:

• Видео о молодёжи с Новосибирска в формате WebM, смотреть которое можно с помощью VLC Media Player или Media Player Classic из K-Lite Mega Codec Pack:
  https://www.dropbox.com/s/bcth9shr32mc84k/Russian_flashmob_horovod_720p.webm
  Прямая ссылка
  Размер: 95.4 Мб
  MD5: 41B0FEDE6DFE68B1B2390152948E4E16
• Видеоинструкция по созданию коллажей в среде Windows в формате WebM, смотреть которую можно с помощью VLC Media Player или Media Player Classic из K-Lite Mega Codec Pack:
  https://www.dropbox.com/s/fg2guc7x39xhs5o/Sozdanie_kollazhey_v_Windows-Russian_Manual.webm
  Прямая ссылка
  Размер: 24.5 Мб
  MD5: 70184CD83329CE15FC6CA7EDBDCF4540
• PDF с картинками и активными ссылками:
  https://www.dropbox.com/s/mjjofi6e4jbi39w/Sozdaem_kollazhi_iz_kadrov_klipa_v_windows_Ru.pdf
  Размер: 2.39 Мб
  MD5: 3A0EE6A3704670E222E721795CEF91DF
• HTML-версия в архиве с возможностью просматривать видео при наличии последней версии FireFox, Opera или Google Chrome:
  https://www.dropbox.com/s/l0kj18wqrbtnw37/Sozdaem_kollazhi_iz_kadrov_klipa_v_windows_Ru.rar
  Прямая ссылка
  Размер: 129 Мб
  MD5: D519EB469CE3B1EC4257B82CD60D4CCC

Как проверить MD5 с помощью HashTab читаем здесь:
Работаем с программой HashTab!


Приятного просмотра и отличного настроения!!!