Разработчик и основатель студии по созданию мобильных приложений Collect3 Дейв Фамбергер опубликовал в своем блоге материал, в котором рассказал о том, как создаются успешные промовидео для мобильных проектов .
Фамбергер говорит, что при текущем уровне конкуренции в App Store крайне важны любые средства, помогающие представить приложение в лучшем свете. По его мнению, для этого идеально подходит видео, поэтому каждый проект должен позаботиться о создании собственного проморолика.
Видео запуска приложения
Первым видео, которое снимала команда Фамбергера, стал ролик с запуском приложения:
Для него требовалась запись работы приложения на устройстве — весь процесс проходил одним планом, без «склеек». Съемка производилась с помощью
Blackmagic Cinema Camera при естественном освещении — только свет из окон и ничего более. Фабергер говорит, что главной сложностью являлось получение четкого изображения экрана смартфона — из-за слишком близкого расположения устройства к камере возникало искажение изображения:
Этот эффект удалось минимизировать с помощью расфокусировки камеры, но поскольку в съемках участвовал актер, который работал с приложением, то при движении его рук по экрану искажение возникало вновь. В дальнейшем убирать эти искажения пришлось с помощью средства
Adobe After Effects.
Съёмки
Фамбергер говорит, что его команда работала в условиях строгих дедлайнов, поэтому было необходимо как можно точнее объяснить задачу актеру, чтобы не делать много дублей. Для облегчения его задачи предприниматель создал тестовое приложение, в которое заранее заложили реакции, на действия — актеру не требовалось проделывать ничего самостоятельно, а лишь имитировать работу с приложением.
Фамбергер рекомендует создавать подобные имитирующие приложения в тех случаях, когда необходимо снять видео со сложными взаимодействиями человека с интерфейсом.
Видео о новых возможностях приложения
Следующее видео о приложении Beatwave преследовало цель показать во всей красе нововведения новой версии проекта.
Для съёмок этого проморолика не использовались никакие камеры — все видео было снято с помощью захвата экрана смартфона, а затем искусственно наложено на изображение iPhone с помощью графического пакета.
Съёмка осуществлялась с помощью инструментов ScreenFlow, Reflector и функции записи экрана в iOS 8.
Анимация
Изображение iPhone в этом видео моделировалось c помощью Adobe After Effects и плагина Element 3D, который позволяет создавать анимации объёмного контента. 3D-модель смартфона была взята из одного из платных
наборов моделей техники Apple.
Отдельно моделировалась человеческая рука, выполняющая различные движения для взаимодействия с интерфейсом приложения. Саму «руку», имитирующую жест прикосновения к экрану смартфона, он нашел на
YouTube, а наложил её на видео с помощью технологии хромакей.
Теперь у Фамбергера было изображение руки, 3D-модель смартфона, записанное видео экрана приложения и оставалось только совместить все это в одном ролике, слоями наложив друг на друга в After Effects. Он говорит, что реальное видео получилось бы более естественным, однако на такие съёмки просто не хватало времени.
Демо-видео (комбинация реальных и виртуальных съёмок)
Последним видео для Beatwave стала инструкция по использованию приложения — оно показывается в ходе начального тура, после установки приложения на телефон.
Изначально команда Фамбергера планировала произвести запись с помощью камеры Canon 6D, однако тесты показали, что в таком случае качество видео получается неудовлетворительным. Устройства с подсветкой, вроде iPhone и iPad не так-то просто снять так, чтобы все детали были освещены равномерно:
Поскольку речь шла о видеоинструкции, то интерфейс приложения должно должен был виден идеально. Это означало, что экран смартфона должен быть показан с максимальным качеством — добиться его можно только сняв видео экрана отдельно, а затем наложив его на съёмки устройства обычной камерой.
В отличие от предыдущего видео, на этот раз планировались более сложные взаимодействия с интерфейсом, поэтому воссоздавать их с помощью анимаций было бы слишком долго и сложно. Это означало необходимость комбинирования реальных и виртуальных съёмок.
Съёмки движения рук
Сцена взаимодействия с планшетом записывалась на рабочем столе Фамбергера с помощью камеры Canon 6D и настольной лампы. Фон и стороны iPad должен был быть зеленым для дальнейшего использования хромакея:
В код приложения были также внесены изменения, чтобы фон в нем стал зеленым — это требовалось для дальнейшего наложения на него записанного видео экрана:
Запись содержимого экрана
Требовалось суметь использовать записанное видео экрана iPad для хромакея — для этого требовался зеленый фон самого дисплея. Проблема заключалась в том, что в таком случае и итоговое видео было зеленым.
В итоге Фамбергеру удалось решить проблему, соединив iPad и ноутбук — прикосновения к интерфейсу приложения на iPad зеркально отображались в приложении, запущенном в симуляторе iOS на ноутбуке, экран которого уже снимался с помощью специального приложения для записи видео.
Код для перехвата прикосновений и их «переправки» в другой экземпляр приложения Фамбергер написал самостоятельно.
Наложение
Далее все в том же After Effects видео с изображением экрана и съёмки движения рук соединили в один ролик. В качестве устройства, на котором работало приложение, снова использовалась модель и плагин Element 3D. Голубой фон, который выступает в роли стола был сгенерирован с помощью пакета Cinema 4D, в качестве остальных элементов на столе использовались платные и бесплатные модели со специализированного сайта.
Использованные средства
В общей сложности для создания видеороликов Фамбергер использовал восемь различных устройств, ресурсов и программ:
- Камера Canon 6D для «живых» съёмок;
- Cinema 4D для рендеринга фона демовидео;
- After Effects CC для пост-обработки видео;
- Видеоредактор Final Cut Pro;
- Video Co-Pilot Element 3D для рендеринга виртуальных устройств;
- ScreenFlow для съёмок экрана приложений, запущенных в симуляторе iOS (iOS Simulator);
- Reflector для съёмок изображения отображенного на ноутбук с мобильных устройств;
- Программа собственной разработки CTMirror для передачи прикосновений с мобильного устройства на ноутбук.
About the author