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

Эта техника была придумана американским фотографом Джейми Беком и дизайнером Кевином Бургом, которые изначально использовали эту технику для демонстраций показов мод. В этом уроке я покажу вам пример создания синемаграфов, который мы создали для Университета Стирлинга, начиная от съемки объекта, импорте видео файлов и работе с этими файлами в Photoshop. Вы научитесь обрабатывать кадры анимации в Photoshop, а также настраивать последовательность кадров так, чтобы получить непрерывную анимацию. Синемаграфы становятся все более популярными с каждым днем и уже частенько используются для оформления сайтов. Итак, давайте приступим к изучению создания синемаграфа, чтобы не отставать от модных тенденций!


1. Выбор тематики

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




2. Компоновка кадра

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




3. Съемка объекта

Попробуйте заснять различные варианты вашей сцены. На самом деле вам потребуется всего несколько секунд отснятого материала для создания анимации. Убедитесь, что штатив, на котором находится фотоаппарат (или камера) неподвижен и произведите съемку в наилучшем качестве. Избегайте излишних движений позади или впереди объекта съемки.




4. Импорт отснятого материала

Мы использовали программу «Final Cut» для переноса видео с камеры в формат Pro Res 422 для получения оптимального качества. Но видео можно импортировать сразу в Photoshop. Убедитесь, что ваше видео сохранено без сжатия в нужном формате и без потери качества.




5. Импорт видео в Photoshop

Загрузите ваш видео-клип в Photoshop и откройте панель анимации (Window > Animation). После того, как вы откроете панель анимации, вы увидите временную шкалу, на которой отображается ваш видео-клип.




6. Повтор движений в обратном порядке

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




7. Выбор нужной части видео

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




8. Выбор основного кадра

Теперь из выделенной части видео нужно выбрать кадр, который будет основным, т.е. неподвижным. После того, как вы подберете нужный кадр, выделите его (Select All (Ctrl + A)), скопируйте и вставьте это изображение на новый слой – таким образом на временной шкале у вас появится слой-изображение, которое будет неподвижным на протяжении всего видео.




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

Перейдите на слой со статичным изображением и возьмите Ластик (Eraser tool) с мягкой кистью. Для удобства отключите отображение вашего видео-слоя. Сотрите на этом слое тот участок, который у вас будет двигаться. В данном примере я стер руку и отражение в мониторе. Если хотите, вы также можете воспользоваться маской слоя.




10. Проверка замаскированной области

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




11. Рендеринг видео

Теперь нам нужно зарендерить видео. Выберите File > Export > Render movie, чтобы сохранить ваше видео. Я уменьшил частоту кадра этого клипа до 15 кадров в секунду. Чем меньше кадров, тем меньше вес результирующего видео, что крайне важно для выкладывания в сети.




12. Импорт видео-файла

Выберите File > Import > Video frames to layers – таким образом ваше видео будет разбито на кадры. Если вы используемые циклическое действие, то следующий шаг можно пропустить.




13. Дублирование и возврат действий

Выделите все кадры на вашей шкале и,удерживая клавишу ALT, перетащите их в конец выделенных кадров. Выделите все продублированные кадры и нажмите "reverse frames” в выпадающем меню временной шкалы. Теперь кадры будут проигрываться циклично.




14. Настройка временных интервалов

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






15. Ограничение количества цветов

Как известно, формат GIF поддерживает только 256 цветов, т.е.чем меньше цветов использовано в вашей анимации, тем лучше будет конечный результат. Вы можете уменьшить количество цветов во время съемки или обесцветив части изображения (как на картинке ниже) при помощи черно-белого фильтра




16. Оптимизация цветового фильтра

Я использовал бесплатный фильтр-экшн (Actions) - cross coloring, чтобы оптимизировать цвета, и визуально после применения этого Action’a , изображения стало менее шумным. Установите экшн в Photoshop – после этого он появится на панели "Actions”. Запустите этот экшн, чтобы применить цветовые настройки к вашему изображению




17. Уменьшение размера итогового файла

Изображения в формате GIF могут весить намного больше, чем изображения в других форматах, уменьшить их вес можно за счет размера изображения (обрезки ненужных областей) и удаления лишних промежуточных кадров. Помните, что дублирующиеся кадры не увеличивают вес файла. Я уменьшил изображение до размера 660 x 258.




18. Сохранение файла

Сохрание ваш PSD-файл. После этого выберите ”File > Save for web and devices”, убедитесь, что у вас выбран формат GIF и сохраните анимацию. Если размер вашего файла слишком большой, попробуйте уменьшить его способами, которые я описывал ранее – уменьшение количества цветов и удаление лишних кадров.




19. Boooom!

Ну вот, мы создали синемаграф!




Большой размер можно посмотреть тут

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

Несколько примеров синемаграфов:




Автор: Robbie Dickson
Перевод: Mangorielle