[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } } ]
{ "author_name": "Alexander Lashkov", "author_type": "self", "tags": ["ios","\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435_\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f","\u0432\u0438\u0434\u0435\u043e\u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438","\u043f\u0440\u043e\u043c\u043e_\u0432\u0438\u0434\u0435\u043e","\u043a\u0430\u043a_\u0441\u0434\u0435\u043b\u0430\u0442\u044c_\u0432\u0438\u0434\u0435\u043e_\u0434\u043b\u044f_\u043f\u0440\u043e\u0435\u043a\u0442\u0430"], "comments": 12, "likes": 13, "favorites": 2, "is_advertisement": false, "section_name": "default", "id": "4976", "is_wide": "1" }
Alexander Lashkov
4 665

Продвижение мобильных приложений: как создать эффектное промовидео

Разработчик и основатель студии по созданию мобильных приложений Collect3 Дейв Фамбергер опубликовал в своем блоге материал, в котором рассказал о том, как создаются успешные промовидео для мобильных проектов.

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

Видео запуска приложения

Первым видео, которое снимала команда Фамбергера, стал ролик с запуском приложения:

Для него требовалась запись работы приложения на устройстве — весь процесс проходил одним планом, без «склеек». Съемка производилась с помощью Blackmagic Cinema Camera при естественном освещении — только свет из окон и ничего более. Фабергер говорит, что главной сложностью являлось получение четкого изображения экрана смартфона — из-за слишком близкого расположения устройства к камере возникало искажение изображения:

Этот эффект удалось минимизировать с помощью расфокусировки камеры, но поскольку в съемках участвовал актер, который работал с приложением, то при движении его рук по экрану искажение возникало вновь. В дальнейшем убирать эти искажения пришлось с помощью средства Adobe After Effects.

Съёмки

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

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

Видео о новых возможностях приложения

Следующее видео о приложении Beatwave преследовало цель показать во всей красе нововведения новой версии проекта.

Для съёмок этого проморолика не использовались никакие камеры — все видео было снято с помощью захвата экрана смартфона, а затем искусственно наложено на изображение iPhone с помощью графического пакета.

Съёмка осуществлялась с помощью инструментов ScreenFlowReflector и функции записи экрана в 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 для передачи прикосновений с мобильного устройства на ноутбук.

#iOS #мобильные_приложения #видеоинструкции #промо_видео #как_сделать_видео_для_проекта

Статьи по теме
Подсказки в интерфейсе: как обучить пользователя и убедить его не удалять приложение
UI-дизайнер Stripe: Как улучшить юзабилити форм оплаты с помощью анимаций
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Компания отказалась от email
в пользу общения при помощи мемов
Подписаться на push-уведомления