Использование масок

Доступна видеоверсия данной инструкции. Ссылка внизу страницы.

Сервис оживающих фотографий поддерживает наложение масок на видео. Маска — ограничение зоны видео. Это позволяет видео проигрываться в рамках заранее оговоренных границ. Эти границы — и есть «маска».

Для наложения маски на оживающую фотографию нам понадобятся уже три файла: фото, которое вы хотите оживить, видео и файл маски.

Формат маски может быть jpg или png. Приложение воспринимает строгий белый цвет (RGB: 255, 255, 255) как разрешенную зону и все остальные цвета, как запрещенную. Везде, где в маске белый цвет, видео будет видно, где любой другой — видео станет прозрачным.

Создание маски подробно описано здесь.

Как и всегда, ссылки на все используемые файлы вы сможете найти внизу страницы.

Итак, мы создадим оживающую фотографию с поздравлением с Днем Рождения от Мерлин Монро и наложим маску на видео. Исходные данные: макет, маска и фотография.

Наша цель: видео должно проигрываться внутри окантовки.

Создаем живую фотографию внутри нашего альбома. Загружаем фото и видео. Получается так:

Создание оживающей фотографии

Теперь мы нажимаем на синюю кнопку «Маска» и выбираем нужный файл. Получится так:

Загрузка маски

Давайте детальнее посмотрим, что же произошло…

  • Вы загрузили маску
  • Приложение включило хромакей и установило оптимальные параметры
  • Приложение обработало маску и наложило поверх фотографии

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

Выделение области видео для обрезки

Далее жмем кнопку «Обработать видео». Дожидаемся окончания перекодирования и нажимаем «Создать». Новая оживающая фотография появится в списке живых фотографий альбома:

А теперь давайте проверим, как это получилось!

Скачиваем альбом по коду 1179 или отсканировав из приложения QR-код:

QR-код альбома.

И наводим камеру на наш макет:

Макет страницы

Заметна синяя окантовка…

Но это не беда! Мы можем менять параметры хромакей прямо в альбоме, не создавая заново видео! Нажимаем на карандашик справа от оживающей фотографии и открывается окно с параметрами хромакей для данного видео:

Параметры хромакей

Давайте слегка увеличим чувствительность. Установим значение 0.25 вместо 0.2. Нажимаем «Обновить». Удаляем альбом с устройства и загружаем его заново. Проверяем результат…

Упс… Синяя окантовка почти незаметна, но видео стало местами прозрачным… Продолжим эксперимент! Поставим значение сглаживания в 0.05 вместо 0.1. Сохраняем. Заново загружаем альбом. Проверяем…

Видео с маской

Цель достигнута!

Макет можно скачать здесь

Маску можно скачать здесь

Часть макета для оживления — здесь

А видео здесь

Видеоверсия инструкции на нашем канале YouTube. Не забывайте подписываться!

Использование маски для оживающей фотографии. Видеоинструкция.

Создание маски

Доступна видеоверсия данной инструкции. Ссылка внизу страницы.

Сервис оживающих фотографий поддерживает наложение масок на видео. Маска — ограничение зоны видео. Это позволяет видео проигрываться в рамках заранее оговоренных границ. Эти границы — и есть «маска».

Формат маски может быть jpg или png. Приложение воспринимает строгий белый цвет (RGB: 255, 255, 255) как разрешенную зону и все остальные цвета, как запрещенную. Везде, где в маске белый цвет, видео будет видно, где любой другой — видео станет прозрачным.

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

Для наложения маски на оживающую фотографию нам понадобятся уже три файла: фото, которое вы хотите оживить, видео и файл маски. Вот о создании файла маски мы сперва и поговорим.

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

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

Макет страницы альбома

Вот так с подложенной фотографией:

Макет страницы с установленной фотографией

Мы же хотим оживить вот это место, но чтобы видео не выходило за рамки окантовки:

Выделение области для оживления

А сейчас будет момент, разный в разных редакторах. Нам необходимо создать две фотографии: одна для создания маски только из слоя макета, вторая для загрузки для оживления в приложение из двух слоев. У фотографов с этим проблем не возникнет. В приложении GIMP это делается нажатием правой кнопки мыши и выбором «Правка» — «Копировать», находясь на верхнем слое макета, под который мы подкладывали фотографию. Создаем новый файл для маски из скопированного. И затем нажатием там же правой кнопки и выбором «Правка» — «Копировать видимое». И создаем новый файл для загрузки в приложение. Вот так это выглядит в редакторе GIMP:

Для создания маски
Для создания фотографии для оживления

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

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

А вот маску необходимо доработать. Помните, в начале я писал, что приложение воспринимает белый цвет, как указание к показу видео, а любой другой — к прозрачности? Давайте закончим с файлом маски.

Выделите прозрачную зону. В GIMP есть инструмент — «выделение смежных областей». Выглядит, как волшебная палочка.

Инструмент выделения смежных областей
Зона для заливки белым цветом

И залейте эту зону 100% белым цветом. Далее инвертируйте выделение:

Инвертирование выделения для заливки черным цветом.

И залейте черным цветом. Получится следующий результат:

Маска готова

Дальше необходимо сохранить (экспортировать) эту маску в формат png или jpg. Мы рекомендуем сохранять маски в формате PNG, но JPG не возбраняется.

И вот у нас в результате есть два изображения:

Теперь мы готовы к созданию оживающей фотографии!

Макет можно скачать здесь

Видеоверсия инструкции на нашем канале YouTube. Не забывайте подписываться!

Создание маски для оживающей фотографии. Видеоинструкция.

Хромакей

Доступна видеоверсия данной инструкции. Ссылка внизу страницы.

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

Давайте разберемся, как это работает в нашем сервисе оживающих фотографий на небольшом примере.

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

Давайте сперва создадим альбом.

Создание альбома с оживающими фотографиями

Далее внутри альбома мы нажимаем на кнопку «Создать живую фотографию» и переходим на страницу создания оживающего фото.

Как обычно загружаем фото, затем видео. У нас должно получиться следующее:

Скроем фото, чтобы увидеть полностью первый кадр нашего видео:

Отлично. Сердечки ровно в центре. Включаем хромакей соответствующим переключателем. У нас появляются параметры хромакея:

  • R — красная составляющая цвета. Может быть от 0 (полное отсутствие красной составляющей) до 255 (максимальное значение)
  • G — зеленая составляющая цвета. Может быть от 0 (полное отсутствие зеленой составляющей) до 255 (максимальное значение)
  • B — синяя составляющая цвета. Может быть от 0 (полное отсутствие синей составляющей) до 255 (максимальное значение)
  • Поле с отображением выбранного цвета хромакей
  • Чувствительность с соответствующим ползунком. Может быть от 0 до 1
  • Сглаживание с соответствующим ползунком. Может быть от 0 до 1

Параметры хромакей

Нам необходимо указать параметры хромакея, чтобы приложение знало, какие цвета делать прозрачными.

Базовый цвет

Базовый цвет, RGB-компоненты которого мы задаем, определяет основу хромакей. Все остальные параметры применяются к данному базовому цвету. Как вы можете заметить, после включения уже стоят параметры (Красный: 0, Зеленый: 248, Синий: 1). Данные параметры были определены приложением, как наиболее вероятный и подходящий базовый цвет хромакей. Безусловно, приложение может ошибаться. Если вы не согласны с приложением, легко можно поменять RGB-компоненты на более подходящие. Но в нашем случае, кажется, приложение правильно определило базовый цвет хромакей.

Чувствительность

Чувствительность определяет, какие еще близкие к базовому цвета должны стать прозрачными. Например, съемка на фоне зеленого сукна не дает в качестве фона строго один определенный цвет, а дает целую гамму близких цветов в зависимости от освещенности, тени, да и вообще реальная съемка, как понимаете, не может дать один строгий цвет. И специально для этого есть параметр «Чувствительность». Данный параметр определяет, как сильно может отличаться цвет от базового, чтобы быть прозрачным. Параметр может принимать значение от 0, строго только базовый цвет, и до 1 — все цвета будут прозрачными.

Сглаживание

Сглаживание определяет дополнительную палитру цветов, которые будут становиться все более непрозрачными, в зависимости от удаленности от сферы (базовый цвет + чувствительность). Этот дополнительный параметр позволяет хромакею выглядеть более реалистично. Благодаря такому сглаживанию, границы объектов становятся слегка размытыми и мягкими. Значение сглаживания равное 0 соответствует абсолютному отсутствию сглаживания. Значение равное 1 — все цвета будут становиться все более непрозрачными по мере удаления от базового цвета + чувствительность.

Стандартные параметры чувствительности и сглаживания

Экспериментируя с различными образцами видео, мы установили подходящие значения для чувствительности и сглаживания: 0.12 и 0.1 соответственно. Данные значения устанавливаются по умолчанию и могут быть изменены. Более того, после сохранения оживающей фотографии можно легко их изменить, заново загрузить альбом на устройство и посмотреть результат. Наилучший результат в данном случае достигается через эксперимент.

Обработка и сохранение оживающей фотографии

Нас устраивают данные параметры хромакей, которые приложение нам заполнило за нас. Цвет — RGB(0, 248, 1), чувствительность 0.12, сглаживание 0.1. Нажимаем кнопку «Обработать фотографию», чтобы приложение вырезало соответствующий фрагмент по габаритам фотографии. И сохраняем оживающую фотографию, нажав на кнопку «Создать». Созданная оживающая фотография отобразится в списке фотографий альбома.

Оживающая фотография

Теперь мы можем проверить результат. Скачиваем альбом по коду 1179 или отсканировав из приложения QR-код альбома:

QR-код альбома

И после загрузки альбома в память устройства необходимо навести камеру на фотографию:

Оживающая фотография

Результат оказался не совсем корректным — видна зеленая окантовка вокруг сердечек и звездочек:

Но это не беда! Приложение позволяет редактировать параметры хромакей уже после создания оживающей фотографии! Для этого переходим на страницу альбома и нажимаем на синий карандашик справа от оживающей фотографии. Откроется окно редактирования оживающей фотографии:

Изменение параметров хромакей оживающей фотографии

Судя по всему, базовый цвет был установлен правильно — основная часть зеленого фона стала прозрачной. Давайте тогда изменим параметры чувствительности и сглаживания. Установим чувствительность 0.2, а сглаживание 0.15. Нажимаем кнопку «Обновить». Удаляем альбом с устройства и загружаем его заново, чтобы обновились параметры хромакей на устройстве. Смотрим результат:

Уже гораздо лучше, но темно-зеленая окантовка не пропала полностью. Еще раз редактируем параметры хромакей. Устанавливаем чувствительность 0.25, а сглаживание давайте вернем обратно на 0.1. Сохраняем, заново загружаем альбом на устройство. Проверяем:

Отлично! Мы настроили параметры хромакей и добились желаемого результата!

Фото из данного примера можно скачать здесь.

А видео с сердечками из данного примера можно скачать здесь.

Видеоверсия инструкции на нашем канале YouTube. Не забывайте подписываться!

Использование хромакей при создании оживающей фотографии. Видеоинструкция.