Рассказываем на примерах, на что обращать внимание в дизайне и разработке сайтов с видео. Как готовить и проводить съёмки, как красить, какими кодеками сжимать интерфейсные видео.
5.5K открытий
Концепт, по которому был сделан сайт холдинга СДС. В нем и видео, и фото, и 3D.
«Чуваки, вот макет главной, потом мы сюда воткнём клёвый видос»
— плохой путь
Пре-продакшен
Сначала дизайн, затем ТЗ для съемки. Задание должно быть готово на этапе эскиза и в форме эскиза с готовыми блоками, которым нужно видео. Прикинуть и прописать, какими должны быть композиция видео, количество деталей, цвет.
Также следует сделать прототип с пустотой на альфа-канале, чтобы можно было поставить отснятый материал на месте и увидеть, как видео живет в дизайне.
Видеопродакшену:
Сначала — скаутинг. Производства изменчивы. На горных работах, например конфигурация может сильно измениться всего за сутки. Разведку лучше провести в то же время суток, в которое планируются съемки.
Как Сделать Красивый Фон Для Видео Своими Руками? Крутые Идеи Для Съемки Видео
После видеопродакшен должен принести в офис:
- фото всех локаций и объектов;
- контакты ИТР на местах — начальники участков, цехов, замы по производству, безопасности. Это те люди, которые создают условия для работы и решают проблемы.
Оборудование
Видеопродакшену:
- Основных объективов три: 35 мм, 50 мм и длиннофокусный — например 100 или 70-200. Экстремально широкий угол объектива искажает пропорции, “мажет” углы, меняет геометрию кадра. Он может понадобиться только в особых случаях;
- Важна компактность камер и систем стабилизации — на производстве приходится либо лезть, либо бежать;
- Штативы нужны в любом случае;
- ND и поляризационные фильтры обязательны, они дают больше свободы. В яркое полуденное солнце объекты с несолнечной стороны проваливаются в глухую тень. С солнечной — пропадает небо и объем;
- Для связи — рации с гарнитурой. Сотовая связь не везде, а докричаться уже с 10 метров часто невозможно;
- Накамерные мониторы и шторки от солнца, а также пара больших черных зонтов. Под ярким солнцем в карьере без этого придется снимать полностью вслепую — оголенная порода, отвалы и пыль отражают солнечный свет почти как снег;
- Кратко технические требования к исходникам выглядят так:
— Apple ProRes, RAW или S-Log, C-Log, V-Log;
— Максимальный битрейт и разрешение;
— Дроны: от 10 бит, так легче сматчить с картинкой с камер;
— Частота кадров зависит от концепта —100 FPS нужно нечасто. Достаточно 50-60 FPS.
Дизайнеру стоит быть на связи с продюсером, скинуть пробные файлы дизайнеру, чтобы убедиться в верности композиции бывает полезно
Видеопродакшену:
Под каждый вид съемки нужен отдельный человек с комплектом оборудования — камеры, объективы, допоборудование. Продюсер контролирует съемку, ведет учет “снято-неснято”, следит за соответствием материалов ТЗ, держит связь с дизайнером. Первый оператор снимает по раскадровке, второй ассистирует ему либо снимает требующие отдельной работы кадры, например таймлапсы.
Как снимать видеоблог на телефон в домашних условиях?📷🏠 | Начинающим влогерам на Ютубе 👶
Роли пилота дрона и оператора лучше не совмещать. Часто дроном приходится снимать внутри цехов, с сильными электромагнитными помехами. Это трудно и нервно.
Как монтировать фоновые видео
Стоит помнить про то, что фоновое видео это больше кино, чем обои. Поэтому планы должны монтажно сходиться по крупности и темпоритму. Здесь тон задает монтажёр, которому от дизайнера нужны ценные указания по композиции.
Также следует сразу решить, какова будет техническая реализация видео: несколько коротких последовательных роликов или потоковая загрузка. Это решение влияет на монтаж, а монтаж — на съемку. Так фронтендера нужно пытать заранее, перед съемкой, на этапе пре-продакшена.
Видеопродакшену:
Если видео предназначено для фона сайта, то оно будет сильно сжато. В этом случае уровень камеры не имеет решающего значения, а разрешения full HD будет достаточно. Но! Часто дизайн сайтов предполагает нестандартные разрешения и соотношения кадра, поэтому лучше снимать в 4К, будет резерв для кадрирования. 4К пригодится и если скаутинг был плохой или его не было.
При монтаже фоновых видео: первый кадр — это последний кадр, последний кадр — это первый кадр. Видеоспот таким образом замыкается в петлю. Важно проговорить с разрабами формат вывода видео и варианты оптимизации. От хронометража видео будет зависеть темп монтажа. В беседе с разработчиками главный вопрос — финальный размер видеофайла, который будет встроен в сайт.
Всё это нужно решить на пре-продакшене.
Цветокоррекция и кадрирование фоновых видео для сайтов
Стоит сразу определиться, будут ли видео на сайте перекрыты маской. Если да, стоит донести это до видеопродакшена. Чтобы он либо заморочился с камерами, цветовым профилем и серьезной цветокоррекцией. Либо, если предполагаются маски, которые цветокор убьют, не заострять на этом внимание и взять более простую и мобильную технику.
Видеопродакшену:
Для нормальной цветокоррекции нужно изначально понимать, какая дизайнерская идея заложена. Если предусмотрена маска, то нет смысла снимать в RAW, будет достаточно правильно выставить баланс белого.
Если масок не предполагается, то нужно делать всё наоборот. RAW, плоские профили позволяют получить больше информации в тенях и в дальнейшем дают большой простор колористу.
Как сжимать видео для сайта
Вот кодеки, которые вам понадобятся:
— H.264, H.265;
— VP9;
— AV1.
Чтобы видео можно было хорошо сжать, нужно, чтобы в исходном файле сразу было как можно меньше информации. Поэтому требования к исходникам таковы:
— Как можно меньше цветов
— Как можно больше статичных пикселей
То есть идеальный вариант — черно-белый таймлапс
А теперь посмотрим, на что способны указанные выше кодеки на разных типах исходного видео, и в чём разница. Ради эксперимента мы смонтировали три одинаковых по хронометражу и объёму рандомных ролика. Для удобства назовем их и распишем, до скольки мегабайт их удалось сжать:
- «Пёстрый». В нём минимум статичных пикселей, много цветов, много перерисовок экрана при выводе на монитор. Объём 14,1 Мб;
- «Таймлапс». В нём много статичных пикселей, перерисовки экрана не такие глобальные. Объём 11,7 Мб;
- «Квадрокоптер». Нечто среднее между первыми двумя. Объём 13,1 Мб.
Для самых дотошных — графики с работой кодеков:
Люди в кадре
Живые лица — это хорошо и повышает эмпатию. Но почти всегда элементы управления и текст начинают соприкасаться с изображением человека. Заказчик начинает истерить, что “буквы на лицо залезли” и начинаются пляски с бубнами. Поэтому можно просто взять за правило не использовать в фоновых видео лица людей акцентировано. Давайте коротко и на примере, почему люди в кадре — так себе идея.
Это концепт главной с людьми, которые вроде как заняты делом, но выглядит всё слегка рандомно.
Этот пример показывает и то, что к выбору сюжета также стоит относиться внимательно. Работающая бухгалтерия ≠ работающий литейный цех.
Та же главная, но для фона использовали более драматичные кадры.
Видеопродакшену:
Если так вышло, что вы снимаете лица для фоновых видео, то делайте это в убойном разрешении и оставляйте много воздуха везде: справа, слева, сверху, снизу. Потом можно будет кропнуть.
Часто можно обойтись стоками
Ну кстати, да. Если нужно “просто показать производство”, то стоки сгодятся. Если нужно рассказать о конкретном производстве, устроить путешествие по бизнесу, то лучше снять на месте.
Видео и фото в дизайне сайта — годная альтернатива тоннам текста, которые обычно описывают производство и должны в чем-то пользователя убедить. Образы выразительнее рассказов. Поэтому мы используем в дизайне медиа.
Как сделать хромакей в ОБС и подложить нужный фон?
Как сделать хромакей в ОБС и подставить желаемый фон вместо скучной комнаты сзади? Если ранее вы не пробовали переносить собственное изображение в игру – самое время начать. Расскажем, как воспользоваться встроенными возможностями программы и получить принципиально новую картинку.
Как это работает
Хромакей в OBS Studio – это опция, которой может воспользоваться каждый, достаточно приложить лишь немного усилий. Если вы еще не поняли, о чем идет речь – мы будем настраивать специальный фон для отображения на стриме.
Чтобы понять, что представляет собой хромакей ОБС, можно обратиться к съемкам любого фильма или клипа. Особенно это касается фантастических сюжетов! Вы же не думаете, что сцены снимаются на фоне драконов и средневековых замков? Разумеется, нет!
Актеры играют на зеленом фоне – этот задник именуется Chroma key (или просто зеленый экран). С помощью специальной технологии на этот статичный фон подкладывается любое нужное изображение или видео. При этом актеры оказываются как бы внутри картинки – двигаются, разговаривают, взаимодействуют.
Настройка хромакея в ОБС предполагает помещение стримера в игру. По умолчанию в окно веб-камеры выводится изображение, которое попадает в кадр – не только ваше лицо, но и комната на заднем плане и так далее. Если вы настроите зеленый экран, сможете встроить себя в онлайн-трансляцию.
Отображаться будете только вы – по пояс (как фиксирует веб-камера). Задний план полностью исчезнет! Уже заинтересовались тем, как сделать хромакей в OBS Studio?
Как настроить
Снимаем дома #1: как создать фон для видео
Чтобы пользователи, которые просматривают профиль с компьютера, телефона, телевизора увидели основную информацию, ее необходимо размещать в «безопасной» зоне, подробнее об этом ниже.
Часть 2. Топ-5 приложений для создания видео на устройствах Android
1. Magisto
Приложение для создания и редактирования видео Magisto является одним из лучших производителей видеороликов с музыкой для устройств Android. Приложение имеет возможность создавать слайд-шоу из медиафайлов, таких как изображения, саундтрек и изображения. Приложение разработано с использованием простого интерфейса. Другие функции, присутствующие в приложении, включают автоматическую стабилизацию видео, фильтры, эффект распознавания лиц и переход. Вам определенно понравится использовать его.
Скачать из Google Play: https://play.google.com/store/apps/details?id=com.magisto
2. AndroVid Video Editor
Это профессиональный производитель фото-видео с музыкой для Android, который может помочь вам отрезать, обрезать и добавить музыку в любой момент при создании видео с помощью этого приложения на вашем телефоне Android. С помощью этого приложения легко обрезать и удалить любую часть видео, которое не требуется. Это приложение дает вам возможность добавлять текст, кадры и специальный эффект к вашим видео. Другие функции этого приложения включают бесплатное преобразование любого видео в mp3, замедленное воспроизведение видеоклипов и многое другое.
Скачать из Google Play: https://play.google.com/store/apps/details?id=com.androvid
3. Video Maker Pro
Video Maker Pro — это приложение для киностудии, чтобы сделать фото-видео на Android и редактировать, обрезать и добавлять медиафайлы в фильме. Он прост в использовании и, конечно, у вас не будет проблем при использовании приложения. У него также есть создатель слайд-шоу, который дает эффект каждому изображению. Это потрясающее приложение с хорошим рейтингом пользователей.
Скачать из Google Play: http://download.cnet.com/Video-Maker-pro/3000-2139_4-75792548.html
4. Andromedia Video Editor
Это приложение для создания видео и редактирования является одним из лучших инструментов для создания и редактирования видео в разных форматах профессиональным способом. Приложение бесплатное, и оно может создавать видео высокой четкости в 320, 480 и 720 пикселях. Он сочетает в себе те же функции других приложений для создания видеороликов с некоторыми дополнительными функциями, такими как поддержка других форматов, таких как MOV, WAV и другие. Он имеет простой дизайн макета, и он довольно прост в использовании.
Скачать из Google Play: https://play.google.com/store/apps/details?id=com.catflow.andromedia
5. VidTrimPro
Одно из самых популярных приложений для создания видео для пользователей Android и других платформ. Обычно это считается лучшим приложением в этой категории со многими замечательными функциями и простым в использовании дизайном интерфейса. Другие функции этого приложения включают транскодирование ваших видео, захват кадров, а также обрезку. Хотя на самом деле это не бесплатно. Тем не менее, есть пробная версия, которая поможет вам подтвердить, действительно ли вам это нужно, прежде чем приобретать приложение.
Скачать из Google Play: https://play.google.com/store/apps/details?id=com.goseet.VidTrimPro
б) вызвать эмоции у посетителей;
в) наглядно продемонстрировать продукт или услугу.
Рассмотрим, как это реализуется на практике.
Пример 1. Атмосфера
Американское дизайн-агентство Grain and Mortar разместило на главной странице видео с зарисовками из повседневной жизни компании. Показан офис, рабочие моменты и отдых после работы, и сразу ощущается дружественная и креативная атмосфера:
Интересного эффекта добился с помощью видео калифорнийский дизайнер Fernando J. Maclen — он встроил размытое видео, на котором едва различим процесс его работы. Выглядит это стильно, и создается творческая атмосфера:
Пример 2. Эмоции
Британская клининговая компания Eagleclean использовала забавный прием: когда пользователь листает лендинг, появляется едва заметное пятно, которое «с той стороны экрана» начинает протирать сотрудник компании. Такое видео не несет какой-то смысловой нагрузки, а просто вызывает улыбку. Радостная эмоция повышает шансы на позитивное восприятие бренда:
Пример 3. Демонстрация
Демонстрировать можно что угодно — от товара и процесса оказания услуги до интерьера помещения. Так, нью-йоркский ресторан Vandal разместил видео элементов интерьера. Оно не только создает стильную атмосферу на сайте, но и показывает пользователям, куда они попадут, когда придут в ресторан:
Когда видео в качестве фона неуместны?
Видеофон не всегда эффективен. Например, он мешает, если вы хотите, чтобы аудитория сосредоточилась на конкретном контенте. Дело в том, что видео перетягивает на себя слишком много внимания, и оно может попросту отвлекать. Вот почему видеофон, как правило, не подходит, если у вас сложный сервис или продукт, который требует подробного объяснения.
А вот если разместить фоновое видео на промостранице конкретного товара, то это другое дело — пользователь «с порога» будет понимать, что ему предлагают, и увидит продукт в действии.
Запомните: фоновое видео должно быть уместным и улучшать пользовательский опыт. Если оно мешает — лучше откажитесь от него!
Удаляем фон в картинках бесплатно
Я загрузил каждое изображение в бесплатные и платные сервисы по удалению заднего фона.
Проанализировал полученные результаты и отсортировал их по порядку в своем личном рейтинге.
| Сайт по удалению фона онлайн | Товар | Лого | Волосы | Сложная | Белый фон | Итого |
| https://www.remove.bg/ru/upload | 5 | 5 | 5 | 3 | 5 | 23 балла |
| https://photoshop.adobe.com/cutout | 2 | 1 | 4 | 5 | 12 баллов | |
| https://pixlr.com/ru/remove-background/ | 4 | 2 | 3 | 1 | 3 | 13 баллов |
| https://editphotosforfree.com/photoapps/remove-background-from-image-online | ||||||
| https://photoscissors.com | ||||||
| https://ru.clippingmagic.com (только платный) | 4 | 5 | 5 | 4 | 4 | 22 балла |
Убрать фон онлайн бесплатно с помощью RemoveBG
Классика жанра – именно на этот сервис чаще всего ссылаются в интернете. Из всех протестированных сервисов именно он оказался лучшим по совокупности параметров.
Да, он позволяет убрать фон на фото онлайн автоматически бесплатно, но есть ограничение по размеру картинки.
Кроме того, он достаточно хорошо убрал фон со всех тестовых картинок, только в картинке со сложным фоном удалил немного лишнего. Впрочем это можно было поправить там же во встроенном редакторе, но я не стал для чистоты эксперимента.