Съемка промо-ролика для мобильного приложения в домашних условиях


    Мы в EastBanc Technologies часто сталкиваемся с необходимостью снять демо- или промо-ролик о мобильных приложениях, которые разрабатываем. Цели могут быть разные — иногда мы делаем это для наших клиентов в качестве инструкции по применению приложения, иногда снимаем для широкой аудитории и выкладываем на свой Youtube-канал. Главное, что всегда хочется сделать это быстро и в приличном качестве.

    Первый наш ролик был посвящен обзору трех мобильных приложений для BFM.ru. В нем нам хотелось показать сходства и различия в линейке приложений для трех разных девайсов. Именно поэтому исторически так сложилось, что мы сразу отказались от screen movie (видео, захваченного с экрана): нам важно было продемонстрировать жесты, и мы сняли ролик на камеру – с персонажами, устройствами и декорациями. Такое видео выглядит более близким к реальности, оно понятнее для неопытного пользователя и, наконец, выгодно показывает наше программистское кунг-фу:)

    Тогда, снимая BFM, мы собрали много шишек и в итоге выработали некий успешный в нашем понимании процесс. Сейчас, после съемки ролика о мобильном приложении «Кассир-Бонус Склад», мы хотим рассказать о том, как это делать. Ролик, который мы снимали вместе с коллегами и заказчиками из S7, демонстрируется в конце статьи. Он призван донести до пользователей информацию о том, как нужно пользоваться приложением, чтобы оно помогало в работе.

    Мобильное Windows 8-приложение «Кассир-Бонус Склад» для региональных представителей S7 Airlines


    Для понимания о предмете съемки: региональные представители авиакомпании выполняют массу тяжелой «полевой» работы — обеспечивают наземное обслуживание самолетов и экипажей, регистрируют багаж и пассажиров, ищут пропавший багаж… И при этом они же осуществляют доставку призов кассирам, которые продают билеты на рейсы S7 и участвуют в программе лояльности «Кассир-Бонус». Ежемесячно на имя каждого регионального представителя приходят десятки посылок и сотни призов, которые надо забрать, распределить и доставить кассирам. Мобильное приложение облегчит эту часть их обязанностей: с его помощью можно будет сканировать код на посылке, смотреть ее содержимое, уведомлять авиакомпанию о бракованных призах, отслеживать статус посылки, отчитываться в получении и многое другое.

    На весь съемочный процесс у нас ушло примерно 2,5 часа:

    • 15 минут на написание сценария
    • 1 час на операторскую работу. Получилось 16 кусков (для удобства будем называть их use-case, то есть кусками, несущими определенную смысловую нагрузку. Например, части, описывающие «Поиск заказа» и «Сканирование QR-кода» — это юс-кейсы), включая перебивки.



    • 30 минут отснятое сливалось со съемочного девайса
    • 10 минут заняла нарезка видео
    • 40 минут заняли склейка и подписи на экранах.


    Итак, с чего начать.

    Шаг 1 – Театр начинается с вешалки, а съемка ролика начинается с реквизита и съемочной группы


    Что и кто точно понадобятся:

    1. Непосредственно само устройство, которое будем снимать.
    2. Камера, возможно использовать премиальный смартфон с камерой хорошего разрешения.
    3. Штатив.
    4. Лампа с рассеянным светом.
    5. Зеленая или синяя подложка – на них изображение получается контрастным.
    6. Актер.
    7. Режиссер.
    8. Оператор.


    Все вместе выглядит так:



    Шаг 2 – Пишем сценарий


    Очень важно – описать всю последовательность действий и главное – зафиксировать те данные, которые могут понадобиться в процессе. Например, это может выглядеть вот так:

    Глава 1. Открытие приложения

    1. Открываем приложение с экрана телефона.
    2. Проходим авторизацию (необходим логин и пароль).
    3. Ждем, когда произойдет загрузка данных и показываем несколько секунд, что увидит пользователь.


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



    (Обратите внимание, в финальном ролике процедура авторизации будет ускорена как и все рутинные процедуры).

    Глава 2. Выдача заказа

    У нас есть разные возможности найти нужный посылку, чтобы ее выдать — например, просканировав код или по номеру заказа или по ID кассира. Сначала покажем use-case целиком, потом покажем те части, которые могут быть выполнены другим способом.

    Часть 1. Поиск с помощью сканера и выдача заказа

    1. Сканируем QR код.
    2. Показываем найденный заказ.
    3. Нажимаем кнопку «Обработать».
    4. Подтверждаем выполнение в диалоге.
    5. Ждем выполнения запроса.
    6. Показываем результат.



    Часть 2. Поиск по номеру заказа

    1. В разделе «Сканер» нажимаем на кнопку «Ввести номер вручную».
    2. Вводим номер заказа (! Нужен заранее подготовленный номер)
    3. Нажимаем кнопку «Найти».
    4. Показываем найденный заказ.



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

    Шаг 3 – Учимся на чужом опыте


    Подсматривать чужие идеи и не повторять чужие ошибки не зазорно – это правильно!

    Например, можно посмотреть ролики:

    www.youtube.com/watch?v=k32xyP3KuWE
    www.youtube.com/watch?v=8zaXKD5qEpI
    www.youtube.com/watch?v=6bFueqtljwU

    Для себя мы сделали следующие выводы:

    1. Телефон нужно положить криво (намеренно) – это выглядит более естественно и объемно.

    2. Жесты руками нужно делать медленно и убирать руки от телефона после каждого жеста, чтобы зритель видел то, что произошло на экране устройства, и чтобы было удобнее монтировать ролик.

    3. Сделать яркость экрана максимальной, чтобы изображение не выглядело блекло.

    4. Использовать WiFi.

    5. Делать акцент не на всем устройстве, а на том, что отображается на экране.

    6. Использовать «стоп-кадр», чтобы акцентировать внимание зрителя.

    7. Использовать несколько общих планов, чтобы создать эффект объёмности происходящего.



    8. Комментируем текстом главы и нетривиальные действия.

    9. Используем музыку за кадром.

    Шаг 4 – Снимаем


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

    Шаг 5 – Хронометраж


    Хронометраж – это фиксация всех участков ролика, которые должны быть использованы. Вот вы сняли 10 роликов: 8 по юз-кейсам и два «по ошибке», теперь кто-то садится и просматривает их все внимательно, отмечая, с какой по какую секунду надо вырезать и какую часть использовать. Мы пробовали отмечать сразу же, что ускорить, что замедлить, где поставить стоп-кадр, но это оказалось не очень удобно: если кусочки сначала ускорять/замедлять, то отметки времени для нарезки смещаются, если же сначала резать – то смещаются отметки для ускорения и замедления.

    Итак, сначала мы просто отмечаем все нужные нам отрезки. Особенно важен этот шаг, если режиссер ролика (или человек, ответственный за ролик) и монтажер – это разные люди, или даже находятся в разных городах. Если же вы и монтируете, и определяете содержание ролика, то можно выполнить этот этап сразу, вырезая все нужное из роликов и компонуя в правильном порядке.

    Шаг 6 — Монтируем


    Готовим видео

    Первая часть монтажа – вырезать все нужные участки роликов и собрать в правильном порядке. Сразу же стоит удалить аудио-канал, т.к. в процессе съемки нередко произносятся довольно экспрессивные слова, которым не место в приличном ролике:). Для передачи информации можно использовать профессиональную озвучку или текст на экране; комментарии, которые получилось сделать во время съемки лучше удалить. В случае, если будет использован текст на экране (дешевле и проще реализуется), исходный звук стоит заменить на музыку.



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

    Следующее, что нужно сделать, – ускорить участки, где показан ввод текста (например, при авторизации, см. выше). Актеру не стоит торопиться, главное набрать правильно. На видео такие участки можно ускорить в 2-4 раза, и выглядеть будет очень хорошо. Можно ускорить и другие участки, где происходит какое-то медленное действие, например, загрузка данных с прогресс-баром. Заметим, что ускорять участки, на которых показаны стандартные анимации загрузки, не стоит – пользователи поймут, что ролик ускорен, поскольку стандартные анимации всегда работают с одинаковой скоростью.

    Добавляем текст

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

    Ориентируясь на сценарий, нужно составить для видео поясняющий текст. Он должен быть кратким и емким, обозначать то, что показано на видео, и сообщать о том, что на видео не показано; не нужно делать описание того, что показано на видео: если описание необходимо – значит, ролик снят не очень хорошо. Для каждого юс-кейса должно хватить одного-двух экранов с текстом. Текста на экране должно быть немного, до 10 слов. Можно оставить на продолжении всего юс-кейса общий заголовок, например «Выдача заказа», и менять подписи к различными частям: «сканирование QR-кода», «поиск заказа». Если возникает необходимость написать больше текста, вынесите его на отдельный экран и задайте ему время отображения, необходимое для того, чтобы средний пользователь успел прочитать весь текст.

    Местоположение текста, шрифт и цвета лучше выбрать в начале работы, и использовать одни и те же для всех поясняющих надписей в ролике. Цвета текста лучше иметь 2-3 для использования на разном фоне и для выделения ключевых слов.

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

    Последний шаг – добавляем музыку. Для использования музыки в видео-ролике у вас должны быть права. Если вы не хотите нарушать чужие права, попробуйте использовать музыку, распространяемую под лицензией Creative Commons – creativecommons.org/legalmusicforvideos

    Ссылки с него не все живые, но есть и вполне рабочие и активно пополняющиеся сайты:
    ccmixter.org
    audiofarm.org/explore/category/Soundtracks

    Шаг 7 – Наслаждаемся результатом и гордимся собой!


    EastBanc Technologies 64,47
    Компания
    Поделиться публикацией
    Комментарии 26
    • +45
      Ах, промо-ролика…
      • +21
        Вы меня успокоили, думал, я один такой )
        • +4
          Показалось.
          • +16
            Да, промо. Любительское.
            • +2
              Не понимал в чем дело до вашего комментария. Я один такой?
              • 0
                Нет, мне тоже пришлось сильно поднапрячься, чтобы увидеть в этом слове что-то похабное.
                • 0
                  Тут не надо напрягаться, тут надо очень быстро читать, чтобы глаз успевал ухватить только очертания слов.
          • 0
            — А если какое-то слово упорно читается как промо, его можно использовать в названии статьи?
            — Не можно, а нужно! ;)
          • +1
            Первое фото напомнило, как мы снимали купольные камеры для сайта, почти в домашних условиях. Тот еще ад был!
            В куполе все отражалось, потолок, пол, объектив и фотографирующий. Наш путь был тернист, но результат — отличный!

            Молодцы, главное упорство! )
            • +3
              Не очень хорошо подобран фон для съёмки и цвета заголовков и некоторого текста слева от телефона — мало контраста.
              Яркость экрана мне кажется можно было бы сделать чуть слабее, что бы не было эффекта засветки при съёмке.
              • +5
                Насколько я знаю, обычно стараются уложиться в 30-60 секунд. Сценарий писался с учетом того что пользователь может не досмотреть до конца?

                Вы показываете множество диалогов загрузки, при этом эти диалоги не несут в себе никакой информации, а только забирают время.
                • 0
                  В примере ролик не только рекламный, но и обучающий. За 30 секунд можно успеть показать что-то вроде «У вас есть проблема? — Гербалайф решит все ваши проблемы!» Но мы же хотим сделать ролик полезным для будущих пользователей. Поэтому же не вырезаны диалоги, которые есть в нормальном поведении программы: чтобы не вызывать у пользователя панику «А-а! Я что-то сделал не так!»
                  • +2
                    Всегда думал что это:
                    «У вас есть проблема? — Гербалайф решит все ваши проблемы!»

                    и есть промо-ролик.
                    • +1
                      Промо ролик в моем понимании — это когда ролик привлекает первичное внимание к продукту или услуге. У вас есть 3-5 секунд что бы зацепить внимание зрителя и тогда возможно он увлеченно досмотрит ролик до конца и купит то что ролик рекламирует.

                      У вас скорее обучающее видео для тех, кто уже в курсе что это за приложение и что то об этом уже слышал. И ваш ролик показывает как работает приложение, но ролик не способен привлечь внимание с первых секунд. По-этому вывод — можно сделать обучающий ролик в домашних условиях, со сценарием написанным за 15 мин. Но вы не получите промо ролика, который действительно заинтересует человека, не слышавшего ранее про этот продукт.
                  • +1
                    Когда меняется экран от тёмного к белому, скачет экспозиция.
                    • 0
                      Все круто но тени от рук это «адовоый треш и садомия например»… Лучше снимать при дневном свете (в облачность), если нет спец. света.
                      • +1
                        Выскажу свое личное ИМХО (конечно на вкус и цвет все карандаши разные), но ваш конечный результат выглядит скучно и уныло :( зря пожалели времени на постобработку. Убрать тени от рук, убрать тряску при съемке процесса сканирования (штатиф вам в помощь), выбрать хороший фон (красный текст на желто-коричневом читается плохо), а может даже раскошелиться на зеленый экран.

                        И самое главное — музыка в фоне должна сопровождать процесс а не отвлекать от него и никто не отменял диктора который бы расказал зачем нам все это надо.
                        • +1
                          Насчет текста вынуждена согласиться, небольшие проблемы с четкостью и контрастом возникли во время экспорта с изменением размера. Стоило проверить это на небольшом участке видео. Но как вы заметили, вкус и цвет у всех разный, а иногда накладываются даже не вкус и цвет исполнителя, а требования, корпоративный стиль и т.д.

                          Мы же хотели рассказать не о дизайне как таковом, а о том, что нужно, чтобы сделать ролик: вы можете выбрать другие цвета или оплатить профессионального диктора, но цена и время такого ролика будут совсем другие. Наша цель — рассказать, как это сделать самим. Тезис «заплатите тому, кто на специализируется на решении подобных задач» верен всегда. Но если так жить — то и хабра бы не было, по крайней мере рубрики DIY, ИМХО :)
                        • +1
                          Небольшой совет. Попробуйте запустить и сделать все действия в приложении на эмуляторе и потом видео наложить на качественную фотографию конечного устройства. И чтобы вместо рук был курсор мышки.
                          www.youtube.com/watch?v=ZlHe87wm9vk
                          Простой пример хорошего проморолика с приложением на борту.
                          • 0
                            В данном примере никаким эмулятором не пахнет. Это просто моушн дизайн в афтер эффекте, со скриншотами из приложения. Скриншоты двигаются в нужный момент времени, а любой интерактив, вроде нажатия кнопок можно сделать эффектами поверх. Только это как правило выходит дороже в производстве.

                            Здесь же мы видим что авторы сконцентрированы именно на быстром продакшене, немного пожертвовав качеством картинки на экране смартфона
                            • 0
                              Но поправляя самого себя, приведенный пример ролика по вашей ссылке, делается специалистом в афтер еффекте за день-два, и стоить он будет дешевле чем выше описаные действия
                            • +3
                              Статья напомнила мне, как я снимал ролик для своей первой игры :) Долго подбирал разные вещи в доме, для того что бы на видео был виден экран полностью, но не захватывалось ничего лишнего со стола. Итог виден на фото :)

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

                              Фото
                              image
                              • +1
                                Помню как-то делал приложение, чтобы маленькие дети учились считать устно. Получилось Android-приложение SimpleMath, похожая на обратный калькулятор. И тоже снимал промо сам. Поставил 3-4 лампы, попросил у знакомой зеркалку, у себя нашёл штатив, на стол постелил рубашку и немного поснимал. Потом немножко Final Cut Pro X и всё! (если интересно: www.youtube.com/watch?v=WlwIcO2QXZM)
                                • 0
                                  Вы конечно молодцы, что сделали видео сами и оно вам нравится, но способность к самокритике, на мой взгляд, тоже не лишняя.

                                  Вот пример хорошего промо и вместе с тем обучающего видео (при этом все равно в нем проблемы с качеством звука), вот так можно сделать неплохое промо с помощью графики и записи только экрана. Это так, первое, что я нашел на ютубе.
                                  У вас же, к сожалению, вырвиглазный фон, который как раз по идее должен быть нейтральным, чтобы не отвлекать от главного – вашего приложения, ужасно подобранные цвета и надписи, которые хороши только тогда, когда они хорошо стилизованы, или когда используется в основном графика, а не запись видео, плохой тайминг. Вы так все красиво расписали, что нужно, как лучше, что я уже был готов увидеть прям нечто восхитительное, а на деле…

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

                                  В общем, для меня, к сожалению, становится очевидно, что люди не очень понимают как ценность хорошего видео, так и способы, собственно, его производства. Всем кажется, что достаточно взять в руки зеркалку и сразу будет круто… По хорошему, лучше заказывать видео у тех, кто этим видео (как и фото) занимается. Это, кстати, ко всему относится: ремонтировать авто лучше у специалиста, заказывать дизайн у хорошего дизайнера, а если нужно написать код, то стоит обратиться к программисту. Специализация – важная штука, как ни крути.
                                  • 0
                                    Скажите, пожалуйста, а в чем вы монтировали видео?

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

                                  Самое читаемое