Как сделать классное изображение Cinemagraph в Photoshop

Без сомнения, вы слышали о термине Cinemagraph, так как он взорвался в Интернете. Изначально созданный фотографами Кевином Бургом и Джейми Беком, кинематограф представляет собой умное возрождение классического анимированного GIF. Он сочетает в себе функции видео и фотографии, создавая иллюзию неподвижного изображения, но с крутыми эффектами движения. Давайте посмотрим, как создать свой собственный анимированный GIF-синеграф, играя с инструментами анимации Photoshop.

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

С ростом популярности cinemagraph мы стали свидетелями появления мобильных приложений, таких как Cinemagram, которые позволяют легко создавать любительские cinemagraphs, используя встроенную камеру устройства. Эти приложения предоставляют быстрое и простое решение для кинематографа, но, как всегда, вы можете достичь наилучших результатов, когда у вас есть полный контроль над всем процессом производства, поэтому давайте посмотрим, как создать наш собственный кинографограф с нуля.

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

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

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

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

Откройте Photoshop и перейдите в «Файл»> «Импорт»> «Видеокадры в слои». Оставьте флажки по умолчанию «От начала до конца» и «Сделать анимацию кадра». Пользователям Mac, получающим какую-то 32-битную / 64-битную ошибку, эта ссылка может оказаться полезной.

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

Это интересно: Как создать скейт-колоду с классным рисунком черепа — изучаем все нюансы

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

Откройте окно анимации, чтобы увидеть кадры в последовательности. В настоящее время вы увидите, что 99% фреймов имеют прозрачный фон благодаря маске слоя, чтобы исправить этот щелчок на первом (нижнем) слое и проверить значок Unify Layer Visibility.

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

Затем выберите параметр «Вставить кадры», чтобы добавить кадры в конец исходной последовательности анимации.

Прежде чем отменить выбор этих новых кадров, откройте всплывающее меню и выберите «Обратить кадры», чтобы переключить их порядок на воспроизведение анимации вперед, а затем обратно на начало, чтобы сформировать цикл.

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

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

Добавление эффектов коррекции цвета в стиле ретро не только делает изображение модным, но и помогает ограничить цвета, поэтому конечный файл GIF выглядит лучше с его ограниченной 256-палитрой. Добавьте корректирующий слой Color Balance в верхнюю часть стека слоев и настройте ползунок на 100% синего цвета в тенях. Убедитесь, что функция «Сохранить светимость» отключена.

Выберите опцию «Средние тона» и настройте цвета в сторону голубого и пурпурного.

Измените выделение на Highlights и измените ползунки в сторону красного, зеленого и синего.

Добавьте корректирующий слой Gradient Map и установите градиент от очень синего (# 020413), среднего синего (# 2b4a61), зеленого (# a8c6a0) до бледно-желтого (# feffe6). Измените Режим смешивания этого слоя, чтобы Осветлить.

Добавьте корректирующий слой Кривые и настройте тени и блики, чтобы увеличить контраст изображения.

Это интересно: Как создать ледяной синий вектор геометрический дизайн — поясняем все нюансы

Анимированное GIF-изображение с таким большим количеством деталей в каждом кадре скоро составит колоссальный размер файла. Лучший способ уменьшить размер файла — это физически уменьшить размер изображения.

Перейдите в Файл> Сохранить для Web и измените тип файла на GIF. Измените параметры дизеринга, чтобы добиться наилучшего качества воспроизведения. Дальнейшее уменьшение цветовой палитры с помощью двойного или черно-белого эффектов также может помочь улучшить качество изображения.

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