Сделай сам: как изготовить видеоролик в домашних условиях

    Недавно нам понадобилось снять несколько видеороликов для своих продуктов. Ролики планировались достаточно короткими и, что характерно, всего их должно было быть около 20 штук. По сути, каждый из них должен был представлять собой «скринкаст» работы с нашими продуктами с тем или иным образом оформленными комментариями.



    Первой и самой логичной мыслью было обратиться к профессионалам (например, вот к этим товарищам). Они, действительно, делают всё по высшему разряду, но, очевидно, возникла пачка вполне логичных препятствий. Во-первых, перед самими съёмками мы должны были детально проработать сценарий, чтобы его мог воспроизвести человек, который понятия не имеет о специфике работы наших продуктов (мы занимаемся разработкой компонентов для .NET, в том числе под такого редкого пока зверя, как Windows 8). Во-вторых, нам было необходимо заранее написать полный «скрипт» с указанием всех реплик и точного времени, когда они произносятся. В-третьих, было крайне проблематично воспроизвести нашу весьма специфическую инфраструктуру (один Windows 8 с тач-интерфейсом и Visual Studio 12 могут ввергнуть в панику кого угодно). Ну и, конечно же, далеко не последней проблемой была весьма внушительная цена ролика. Безусловно сумма была вполне оправданная и логичная, но наш бюджет, выделенный на видео, мог вытянуть максимум один-два ролика в месяц.

    Поэтому мы решили отказаться от дорогих и классных роликов в пользу хэнд-мейд. Изначально мы пробовали подойти к проблеме «в лоб». Над результатом такого подхода можно посмеяться, например, здесь (особенно доставляет конец ролика). Впрочем, не могу сказать, что эти видео — откровенно неудачный опыт. Своё чёрное дело в индексации сайта гуглом они сделали вполне успешно.

    При попытках создать хорошее, годное (и, что характерно – дешёвое) видео мы столкнулись с несколькими проблемами. О них и о их решении мы и поговорим дальше.

    Трудности перевода


    Первой проблемой стал английский текст. Конечно, все мы знаем язык, а у нас в штате есть специалисты, закончившие ИнЯз и непрерывно практикующие письменный и разговорный язык. Но акцент остаётся акцентом в любом случае. Тем более что профессиональным диктором никто из нас, к сожалению, не являются. Мы также пробовали заказывать озвучку носителям языка из нашего американского офиса. Получилось, конечно, намного лучше, чем у нас, но всё равно до уровня профессиональных дикторов не дотягивает. Мы попробовали делать ролики вообще без озвучки и комментариев, но в них, к сожалению, было не понятно, что происходит.

    Вариант, который нас, как ни странно, устроил – заказать озвучку на замечательном ресурсе. Мы нашли неплохого диктора, который за крайне разумную цену озвучил 10-минутный ролик (посмотреть на качество озвучки можно здесь).

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

    Если подумать, эту проблему решали гораздо раньше нас в эпоху… немого кино. Причём, решали очень просто — тапёр за пианино и большой, во весь экран, текст с комментариями происходящего, диалогами и т.д. Мы попробовали, и у нас, похоже, получилось неплохо. Пример ролика можно посмотреть в конце поста.

    Дёргающаяся мышь и другие ошибки оператора


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

    Для обработки видео (равно, как и для его записи) мы использовали пакет Camtasia. Это замечательный пакет для записи и обработки скринкастов, который, пожалуй, стал стандартом де-факто в этой области. Я не буду рекламировать его здесь. Ограничусь только тем, что скажу – все необходимые для нормального монтажа функции он выполняет.

    Итак, какие могут встретиться проблемы при записи скринкаста, и как я с ними борюсь:

    Метание курсора по экрану – я вырезаю кусок видео, на котором мышь «убежала» в неправильном направлении до того момента, пока она не вернулась на верную траекторию. При ускоренном просмотре (а мы сразу же после записи ускоряем видео в полтора раза) перемещение мыши по экрану «резким скачком» практически незаметно. Кроме того, в последних видео я стал водить мышью очень медленно и вдумчиво, что позволяет мне заранее продумать её траекторию. После этого я ускоряю фрагмент в 3-5 раз, что делает скорость движения мыши вполне нормальной.

    Зависание курсора в одной точке – это самый частый артефакт видео. Оператор может о чём-то задуматься, его могут отвлечь и т.д. В это время мышь зависает в одной точке, и несколько секунд на экране ничего не происходит. Лечится простым вырезанием данного фрагмента. Главное – оставить немного времени в момент, когда мышь пришла в точку и в момент, когда мышь оттуда ушла. По 5-6 сотых секунды с каждой стороны вполне достаточно.

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

    Skype contact is online – одна из самых неприятных ошибок. Обычно, замечаешь это окошко только в процессе монтажа. Конечно, идеальный выход – выключать скайп, но про это вспоминаешь далеко не всегда. Обычно я просто размываю это окошко в итоговом видео. Его, конечно, видно, но отвлекает оно уже не так сильно.

    Выводы


    Вполне возможно снимать How-to ролики «в домашних условиях». При достаточных тренировках и хороших инструментах, получается видео вполне сносного качества. Сейчас весь процесс изготовления видео от нажатия кнопки «запись» до публикации ролика на Youtube занимает у меня около 6-7 часов. Таким образом вполне можно выпускать пару роликов в неделю. Примерно таких:



    А вы делаете видео про свои продукты?
    Поделиться публикацией

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

      +2
      делали видео процесса обсуждения дизайна диалогов
      видео, конечно, фановое, а не для презентации ))
        0
        Ну вот опять же, как писал уже ниже — прекрасная демонстрация возможностей! Даже для презентации самого API — прекрасно!
        Но никак для How-to. А вот так уже для How-to.
          0
          да, хорошее how-to видео
          как я писал выше – у нас не демо/how-to/презентация, а, скорее, визуализация размышлений о поведении пользователей при общении
        +1
        Слушайте… ну вот на вскидку:
        Смотрится на одном дыхании, ну просто как «Огни большого города» Чаплина, с удовольствием.
        Но ни хрена не понятно! Вернее понятно, что что-то программируют, но что конкретно? — для тех, кто не в теме, понять что либо шансов нет.
        Но и для тех, кто в теме, совершенно не очевидно, почему в меню выбрали те, или иные пункты, почему набрали те, или иные команды, и что, черт возьми!, вообще происходит на форме, если на нее все время что-то добавляют, а она все время пустая!?

        В общем, как демонстрация возможностей, и только для тех кто в теме — просто идеальный вариант. Ну вот просто честно — приятно смотреть.)
        Но как How-to — без закадровой озвучки, которая объяснит, почему ИМЕННО сюда и таким образом, никак не юзабельно…
        Извините.
          0
          Спасибо за комментарий!

          На самом деле, видимо — да, так и есть, так как уже далеко не первый с тем же содержанием :). В общем-то склоняюсь именно к тому, чтобы HowTo делать с профессиональной озвучкой, а такой формат оставить для демонстрации фич.
            0
            Ну, а что вы вкладываете в понятие «профессиональная озвучка»?)
            Пожалуй, достаточно будет, если голос будет мягкий, негромкий и четкий. Ну и мысль!, мысль должна литься не спеша, четко и ровно — Типичный образ программиста, в общем;)
            Вот, например, очень мне нравиться как человек подошел к описанию задачи и ее решению.
              0
              Интересно, как вы оцените информативность/понятность/скучность help-видео к моему хобби-проекту, которое я когда-то сотворил используя стандартный Windows Movie Maker и CamStudio. Сильно не пинайте, не знаю, но почему-то тогда мне частота скриншотов и невнятное разрешение казались вполне подходящими… наверно не спал долго :) А переделывать как всегда лень.
              rutube.ru/video/1b49ae929fd35a649c7bfde22668eb96/
                0
                Не информативно/понятно/скучно. (хотя первые 30 секунд рекламы Рэд Була выглядели очень ничего))))
                Но вы и сами ответили на свой вопрос, раз сказали, что сейчас воспринимаете видео иначе, чем тогда.
                Переделывать, скорее, надо программу. Оккультизм сейчас не в тренде, акцент нужен на «нано» и может озвучку поменять на R2D2… графики внизу оставить… по мере прохождения вопросов — раскручивать постепенно шпиндель HDD… перед результатом выдвинуть и задвинуть ЦД-ром… Как-то так.
                  0
                  На счет тренда вы правы))
          +2
          Сам занимаюсь подобными штуками, делал серию видеоуроков по обработке фото. Показать не могу из-за лицензий.
          1. В вашем ролике движения мышки ускорены? Странно. Вполне себе уверенная аккуратная нормальная работа мышкой. Вы разве в реальном времени не так работаете?
          2. Без комментариев смотреть невозможно. Вернее смотреть возможно, но понимать очень непросто. Однако в этом вопросе лично на мое мнение полагаться не стоит, так как я очень много сморю и записываю видеоуроков и привык к некому положению вещей.
          3. Из лекторов мне очень нравится Джефри Вэй, его курс по jQuery можно рассматривать в том числе и как учебное пособие по записи видеоуроков. Сейчас слушаю курс по работе в Премьере цс6, лектор просто изумительно рассказывает.
          4. Музыка на мой вкус слишком резковата, она прекрасная для немого кино, но для обучения, для вдумчивого изучения очень непростых вещей она резка.
          Удачи!
            +1
            А как для android видео записывают, кстати? Чтобы красиво было а не кто-то в руках телефон держит, а другой снимает что там на экране.
              0
              то, что вы написали это итак всё понятно. А что действительно интересно — умолчали, например, стоимость озвучки
                0
                По стоимости ответил в личку
                0
                Когда делал скринкасты для своих студентов тоже сначала отказывался от звука (у меня проблема была ещё и в том, что хотелось звук уж если записывать, то качественно), в итоге пришёл к такому вот варианту: www.youtube.com/watch?v=QTvW5HSEZ7k&hd=1

                ИМХО, pan & zoom эффект keit всего прочего помогает удерживать внимание зрителей на нужных элементах.
                  +1
                  Лично я особо оценил звук клика мышки, намного лучше воспринимаются действия на экране, когда слышишь «клик».
                  0
                  Пример того, как надо отказываться от звука: download.microsoft.com/download/c/e/2/ce28874c-4f44-4dbd-babb-727685e2be96/WinFS_IWish_720x486_2mbs.wmv (слабонервным не смотреть, черевато)

                  Пройдемся по вашим пунктам:
                  1. Метание курсора по экрану — это даже хорошо, видно «живость» скринкаста, а вот от идеальных движений порой тошнит
                  2. Если курсор застыл — он исчезает из поля зрения, становится незаметным. Опять же, по моему мнению трогать ничего не надо. Кого вы хотите обмануть?
                  3. Опечатки делают все — будте ближе к народу. Даже приятно видеть, как человек что-то не так набрал и быстро исправился.
                  4. Скайп и прочие — вопрос собственной подготовки. Но если уж три часа вели запись и тут оно всплыло — закройте масками из соседних кадров. Не размывайте, не делайте сопель на экране — просто уберите. И не надо говорить, что в вашем пакете редактирования скринкастов такой функции нет.

                  По вашему видео — окна появляются с низким FPS, равно как и ездиет мыша. Но если низкий FPS мышки незаметен, то низкий FPS анимации окон бросается в глаза. Решений как всегда масса: или отключить анимацию вообще, или хватать ее в виде 50 fps, а на готовом ролике включить motion blur/blend frames.

                  Совершенно неинтересно смотреть на экран, где на 1/30 части экрана происходит какое-то действие. Особенно если ролик засунут в ютуб и отображается внутри окошка 512х384, там банально ничего не видно что происходит.

                  Аналогично, совсем неинтересно смотреть на выбор пунктов, которые являются второстепенными для демонстрации. Ускоряйте время в эти моменты. И наоборот, на особенных пунктах имеет смысл замедлить время (тут поможет съемка в изначальные 50 fps) и наезд камерой, быть может даже анимация камеры. Только умоляю, не делайте зум/пан в приложениях для создания скринкастов, более говянного эффекта нигде не получить.

                  Стилизация конечно под немое кино хороша и сделано неплохо (а почему не мигает и кадры не скачут?), но первый ролик с кривым английским мне понравился больше, в нем есть своя душа.
                    0
                    Тут на любителя. Если я провожу вебинар, то там и мой английский, и метание курсора уместно. Меня всё равно будут слушать, раз уж пришли. Но в таких коротких роликах дорога каждая секунда. Пользователь просто выключит ролик. Если секунда бессмысленная (как в случае с застывшим или мечущимся по экрану курсором), то вероятность потерять человека гораздо выше. Проблема застывшего курсора не в том, что он застыл, а в том, что в это время на экране ничего не происходит.

                    Кроме того, при всей «душе», такие ролики, например, у меня создают стойкое чувство не слишком хорошо выполненной поделки. А это ощущение распространяется и на продукт, который они описывают. Но, конечно, каждый подход имеет право на существование, и тут — дело вкуса.

                    Насчёт FPS не думал. Спасибо. Мне в глаза не бросалось, но смысл увеличить есть. Про приложения для создания скринкастов не очень понял, что плохого в зуме? Ну и потом весь смысл создания роликов своими руками сведётся на нет, если купить какой-нибудь Премьер за 2к долларов.
                      0
                      Во втором ролике очень много этих самых «пустых секунд», если их вырезать — ролик будет раз в 5 короче.

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

                      Зум сам по себе отличная штука, но только когда есть полный контроль над ним, когда можно качественно настроить его параметры, поиграть с кривыми интерполяции и на выходе получить именно то, что нужно в данный момент, а не задравший все изи-изи в типичных приложениях скринкаста. Честно, я не понимаю зачем делать говно. Нету инструмента — откажись от наворотов, сделай проще, 50 лет назад премьера не было и в помине, хуже кино тех лет от этого не стало. Хочешь наворотов, но нет денег — купи Афтер на TPB, главное результат будет качественный. Но вот «я тут нашел клевую программу, она еще умеет делать перелистывание кадра уголком и еще прикольно зумить» не надо. От этого начинает тошнить через 5 минут. Хорошо хоть pagepeel в свое время всех дое**л и больше его никто не использует.
                        0
                        Да, в догонку.
                        Иногда нужно сделать акцент на каком-то мелком элементе интерфейса. Например, на адресной строке, на какой-то новой кнопке. Если сделать зум до этого элемента — мы получим «мыльное кинцо», в более продвинутых случаях будет пикселизация. Конечно же, на машине обычно включено сглаживание шрифтов и буковки, увеличенные в 50 раз, выглядят размазанными с кучей радужной обводки.

                        И вот тут уже все зависит от бюджета ролика, к примеру, можно реконструировать сцену в 3D, с нормальным и качественным текстом, без размытия и пикселизации рамок, по желанию можно поиграть с Z-depth и сделать несколько произвольный путь для камеры, не ограничиваясь простым зумом. В буржуйских роликах вообще много игр с 3D.
                    0
                    Неплохо, но сепия, как часть стилизации, на мой взгляд ни к чему. Можно было бы просто чуть прибрать насыщенность цветов. Цветовое выделение элементов интерфейса сделано не просто так, в данном случае получается, что часть важной для человека информации теряется. В ролике пользователь видит одну картинку, а в реальной среде разработки — совсем другую.
                      0
                      На самом деле, мониторы у всех давно не монохромные не зря.
                      Вы слишком увлеклись процессом работы над созданием ролика, имхо. В ущерб ролику.
                      Шрифт какой-то вычурный взяли, который разбирать с трудом приходится.
                      Рэгтайм этот в качестве музыки…
                      Типичный случай с презентациями в PowerPoint — куча текста, куча оформительских наворотов, всё летает, мелькает и обладает тенями. Но в итоге ничего не понятно.
                      С сайтами та же ерунда и была, и есть. Вместо простых лаконичных сайтов куча визуального мусора, много лишней информации, вместо того, чтобы на белом фоне чёрными буквами написать крупно только то, что нужно. Это работает лучше.
                      А по содержанию выше говорили: не ясно чего происходит и зачем.
                        0
                        Просто, не понятно какую задачу вы хотели решить.
                        Если дёшево объяснить как что-то конкретное делается, то отбросьте всю остальную мишуру. Просто объясните.
                          0
                          Я-то здесь при чём?
                            0
                            Действительно ни при чём :)
                            Хотел сначала вас прокомментировать, потом передумал, потом комментарий к посту оставил, а потом ещё комментарий добавил. Не принимайте на свой счёт.
                      0
                      Camtasia хороша. Но отказался в пользу BB FlashBack. Изумительная софтина!
                        +1
                        Для себя проблему всплывающих окон запущенных приложений решил двумя мониторами. На 1-ом сценарий для записи и все сторонние программы, а со второго монитора пишу не посредственно видео. Очень удобно.
                          0
                          Ни разу не программист, поэтому ничего не понял абсолютно, но с точки зрения обывателя не очень понравилась сепия, шрифт(сложно читается), длительность ролика, при относительно статичной картинке, начинает быстро наскучивать(опять же с точки зрения человека к программированию не имеющего никакого отношения) и хотелось приближения камеры туда где что то делают мышкой, хотя с другой стороны смотрю уроки иногда по видео и постоянно камера приближается еще и кружочек около курсора при клике вылетает, тоже напрягает как то потому что теряешь весь обзор, то есть если интерфейс известен, то здесь все нормально, хотя пока не развернешь видео на весь экран и не поставишь 720р все равно ничего не разглядеть. Комментарии вроде не большие, может быть использовать нечто такое?
                          image

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

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