Как снимать и монтировать фоновые видео для сайта

Рассказываем на примерах, на что обращать внимание в дизайне и разработке сайтов с видео. Как готовить и проводить съёмки, как красить, какими кодеками сжимать интерфейсные видео.

Дизайнеру:

Сначала дизайн, затем ТЗ для съемки. Задание должно быть готово на этапе эскиза и в форме эскиза с готовыми блоками, которым нужно видео. Прикинуть и прописать, какими должны быть композиция видео, количество деталей, цвет.

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

Видеопродакшену:

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

После видеопродакшен должен принести в офис:

Видеопродакшену:

Дизайнеру:

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

Видеопродакшену:

Под каждый вид съемки нужен отдельный человек с комплектом оборудования — камеры, объективы, допоборудование. Продюсер контролирует съемку, ведет учет “снято-неснято”, следит за соответствием материалов ТЗ, держит связь с дизайнером. Первый оператор снимает по раскадровке, второй ассистирует ему либо снимает требующие отдельной работы кадры, например таймлапсы.

Роли пилота дрона и оператора лучше не совмещать. Часто дроном приходится снимать внутри цехов, с сильными электромагнитными помехами. Это трудно и нервно.

Дизайнеру:

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

Также следует сразу решить, какова будет техническая реализация видео: несколько коротких последовательных роликов или потоковая загрузка. Это решение влияет на монтаж, а монтаж — на съемку. Так фронтендера нужно пытать заранее, перед съемкой, на этапе пре-продакшена.

Видеопродакшену:

Если видео предназначено для фона сайта, то оно будет сильно сжато. В этом случае уровень камеры не имеет решающего значения, а разрешения full HD будет достаточно. Но! Часто дизайн сайтов предполагает нестандартные разрешения и соотношения кадра, поэтому лучше снимать в 4К, будет резерв для кадрирования. 4К пригодится и если скаутинг был плохой или его не было.

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

Дизайнеру:

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

Видеопродакшену:

Для нормальной цветокоррекции нужно изначально понимать, какая дизайнерская идея заложена. Если предусмотрена маска, то нет смысла снимать в RAW, будет достаточно правильно выставить баланс белого.

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

Чтобы видео можно было хорошо сжать, нужно, чтобы в исходном файле сразу было как можно меньше информации. Поэтому требования к исходникам таковы:

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

Для самых дотошных — графики с работой кодеков:

Дизайнеру:

Живые лица — это хорошо и повышает эмпатию. Но почти всегда элементы управления и текст начинают соприкасаться с изображением человека. Заказчик начинает истерить, что “буквы на лицо залезли” и начинаются пляски с бубнами. Поэтому можно просто взять за правило не использовать в фоновых видео лица людей акцентировано. Давайте коротко и на примере, почему люди в кадре — так себе идея.

Этот пример показывает и то, что к выбору сюжета также стоит относиться внимательно. Работающая бухгалтерия ≠ работающий литейный цех.

Видеопродакшену:

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

Ну кстати, да. Если нужно “просто показать производство”, то стоки сгодятся. Если нужно рассказать о конкретном производстве, устроить путешествие по бизнесу, то лучше снять на месте.

Видео и фото в дизайне сайта — годная альтернатива тоннам текста, которые обычно описывают производство и должны в чем-то пользователя убедить. Образы выразительнее рассказов. Поэтому мы используем в дизайне медиа.

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