Синемаграфия. Как сделать? (Примеры, Программы и Приложения)


Сегодня разнообразим вашу Инста-ленту с помощью «волшебных» фотографий и покажем, как интересно презентовать товар.

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

Несколько примеров:

из Инстаграма @toutifr

из Инстаграма @flixelphotos

из Инстаграма @flixelphotos

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

Примеры синемаграфий

Посмотреть эту публикацию в Instagram
@selenagomez @laflare1017 Fetish ? (?: Petra Collins)

Публикация от Apple Music (@applemusic) 12 Июл 2019 в 9:34 PDT

Сервис Apple Music использовал данный пост для контекстного продвижения своего продукта в сети Инстаграм.

Фокусный объект, который расположен на динамичном фоне.

Anne Green Gables Cinemagraphy

Вот так выглядит презентация книги «Энн из Зеленых Крыш» канадской писательницы Люси Мод Монтгомери. Синемаграфия отлично передает легкое настроение книги, побуждая к прочтению.

Представьте такую синемаграфию на сайте фотографа. Она свидетельствует о профессионализме, нестандартном мышлении фотографа и о его навыках работы с редакторами.

А такая заставка на экранах в кафе/ресторане пробудит аппетит даже у сытого посетителя, заставив его купить еще.

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

Каким аккаунтам подходят «живые» фото

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

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

Зарегистрируйтесь в SMMplanner и запланируйте посты в Инстаграм и Инстаграм Истории.

Топ программ и приложений в которых можно сделать синемаграфию

Приложения для синемаграфии могут скачать пользователи компьютеров на ОС Windows и Mac OS, а также владельцы смартфонов на Android и iOS. Разберем детальнее программы для каждого типа устройств.

Photoshop

Adobe Photoshop

Принцип создания «живого фото» в Adobe Photoshop подразумевает работу с анимацией.

Для начала нужно импортировать видео в слои, после чего можно работать с отдельными кадрами. Они отображаются на шкале времени, что упрощает поиск цикличного момента видео. Если его не удалось найти, можно отзеркалить видео.

Имея базовые навыки работы в Photoshop, вы без проблем сможете создать синемаграфию.

Premiere Pro

Premiere Pro

В программе Adobe Premiere Pro пользователь может создавать анимации благодаря удобной временной шкале и разделению видео на кадры.

Анимировать объекты помогает кейфрейм – ключевой кадр. При помощи программы объекты на видео можно замораживать, перемещать, изменять размер ит.п.

Сохранить синемаграфию можно в форматах: gif, mp4, mwv.

Рекомендуем к использованию «1500+ Переходов для Adobe Pemiere и After Effects СС (с инструкцией)».

Cinemagraph Pro для Apple

Sinemagraph Pro

Владельцы компьютера на Mac OS имеют возможность создавать «живые фото» в специализированной программе Cinemagraph Pro.

Программу для создания синемаграфий разработала компания Flixel, которая в 2019 году получила награду от Apple Design Award.

Адаптивная версия приложения доступна для смартфонов на iOS.Особенности приложения: удобный интерфейс и неограниченные возможности создания синемаграфий.

Cinemagraph для Android

Cinemagraph

Cinemagraph – одно из самыхпопулярных платных приложений для создания синемаграфии на андроид. Разработанокомпанией Factyle.

Программа имеет встроенное обучение, которое поможет новичку. По инструкции вылегко сможете создать синемаграфию в формате GIF. Для этого в программе можно использовать отрывок видео до 3секунд.

Как самому сделать «живые» фото

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

Cinemagraph Pro

Самое мощное приложение в этой области. Не из дешевых: годовая подписка стоит $199, бессрочная лицензия — $299. Компания Flixel, создатель приложения, здорово ведет свой Инстаграм: можно подписаться и черпать там идеи.

Приложение подойдет только для тех, кто сидит в iOS:

Cinegraph

Приложение попроще и подоступнее: 149 рублей, .

И приложение для тех, кто сидит на Андроиде: Cinemagraph.

Правила эффективной синемаграфии

Сценарий

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

Фокус

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

Съемка

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

Обработка

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

Размещение

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

Зная, как сделать синемаграфию на телефоне и компьютере самому, вы сможете выделиться среди конкурентов или просто наполнить свой профиль в социальной сети качественным контентом.

Рекомендуем также посмотреть «33 урока по созданию анимации». А так же «Как сделать гифку из видео за 30 секунд».

  • Пин
  • Репост
  • Поделиться

Чем отличаются «живые» фото от бумерангов, гифок или видео

В «живых» фотографиях внимание сразу акцентируется на одном конкретном предмете — это идеальный способ заинтересовать пользователя каким-либо товаром. Гифки и видео не дают такого эффекта.

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

из Инстаграма @flixelphotos

из Инстаграма @flixelphotos

Эволюция синемаграфии

Сложно точно сказать, когда впервые появились в интернете «живые» фотографии, но определенно известно, что Apple сделала их популярными, когда стала использовать их в iPhone 6S. Но синемаграф – это все же немногим большее по продолжительности и чуть более насыщенное, чем изображение звездного неба. Позже анимационные картинки стали появляться в рекламе на билбордах, представляя образы, которые подмигивают или моргают.

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

Прозрачность

Тут мы будем совмещать тряску и прозрачность одновременно. Хочется сказать, что выглядит очень красиво и не обычно :-)

В демо берём блок под номером 12, которого трясёт как бешеного, и опять же только не много изменится скрипт вызова:

$(function(){ $(‘#demo12’).jrumble({ x: 6, y: 6, rotation: 6, speed: 5, opacity: true, opacityMin: .05 }); $(‘#demo12’).hover(function(){ $(this).trigger(‘startRumble’); }, function(){ $(this).trigger(‘stopRumble’); }); });

В данном примере задано значение 6 по обеим осям. Параметр rotation равен 6, скорость 5. Прозрачность в скрипте вызывается — opacity со значением true — это обязательная строчка. А так же сила прозрачности — opacityMin: стоит 05. Чем больше будет это значение тем прозрачнее будет блок при наведении.

Особенности синемаграфии

Когда речь заходит о данной тенденции, то главное – простота. Не стоит уподобляться обычным GIF-картинкам, что буквально усыпаны блесками, звёздочками, различными мигающими эффектами. Это раздражает и в веб-дизайне совершенно не уместно. Анимация будет тогда красива, когда станет неожиданностью для человеческого глаза, но естественной в рамках сюжета. Именно поэтому, зачастую лучше использовать готовое видео, чем серию фотографий.

Но и кроме этого рекомендуется:

  • Придерживаться одной тематики и одного элемента анимации на всем сайте. Не стоит на каждой странице «напихивать» GiF-картинки и видеофайлы.
  • Реалистичность. Если берется фотография моря, неба, а корабль на горизонте приводится в движение, то и тени, и движение, и волны близ корабля должны соответствовать друг другу.
  • Соблюдение законов физики. Собственно относится к предыдущему пункту, а также к падению солнечных лучей, игре свето-тени, силе удара капли о листик цветка и т.д.
  • Сама анимация должна быть небольшой, скромной, но заметной. Это не полноценное видео, это – фотография с элементом анимации. Другой тип изображения.
  • Возможная интерактивность. Анимация может появляться только тогда, когда посетитель проведет по фотографии курсором мышки или одна анимация сменяется на другую при разных действиях (кликах). Например, jules-destrooper или 2ammedia скриншоты не смогут передать сути, увы, и лучше увидеть своими глазами

Другие примеры

Здесь будут представлены примеры скриптов блоков в демо под своим номером и классом:

Блок 14 (Клик)

$(function(){ $(‘#demo14’).jrumble(); $(‘#demo14’).toggle(function(){ $(this).trigger(‘startRumble’); }, function(){ $(this).trigger(‘stopRumble’); }); });

Блок 15 (Клик (удерживать))

$(function(){ $(‘#demo15’).jrumble(); $(‘#demo15’).bind({ ‘mousedown’: function(){ $(this).trigger(‘startRumble’); }, ‘mouseup’: function(){ $(this).trigger(‘stopRumble’); } }); });

Блок 16 (Без остановки)

$(function(){ $(‘#demo16’).jrumble(); $(‘#demo16’).trigger(‘startRumble’); });

Блок 17 и 18 (Удалённо)

Это интересный эффект, когда при наведении на правый блок двигается левый и наоборот.

$(function(){ $(‘#demo17’, ‘#demo18’).jrumble(); $(‘#demo17’).hover(function(){ $(‘#demo18’).trigger(‘startRumble’); }, function(){ $(‘#demo18’).trigger(‘stopRumble’); }); $(‘#demo18’).hover(function(){ $(‘#demo17’).trigger(‘startRumble’); }, function(){ $(‘#demo17’).trigger(‘stopRumble’); }); });

Блок 19 (Несколько сек. (Клик))

$(function(){ $(‘#demo19’).jrumble(); var demoTimeout; $(‘#demo19’).click(function(){ $this = $(this); clearTimeout(demoTimeout); $this.trigger(‘startRumble’); demoTimeout = setTimeout(function(){$this.trigger(‘stopRumble’);}, 1500) }); });

Блок 20 (Пульсирующий)

$(function(){ $(‘#demo12’).jrumble(); var demoStart = function(){ $(‘#demo20’).trigger(‘startRumble’); setTimeout(demoStop, 300); }; var demoStop = function(){ $(‘#demo20’).trigger(‘stopRumble’); setTimeout(demoStart, 300); }; demoStart(); });

Скорость

Здесь мы будем увеличивать и уменьшать скорость тряски. Для этого возьмём пример в демо под номером 5. В данном случае немного изменится сам скрипт вызова. Он будет выглядеть так:

$(function(){ $(‘#demo5’).jrumble({ speed: 0 }); $(‘#demo5’).hover(function(){ $(this).trigger(‘startRumble’); }, function(){ $(this).trigger(‘stopRumble’); }); });

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

Тряска

Теперь мы будем вызывать сам скрипт тряски.

Принцип работы скрипта очень прост. Он осуществляет беспорядочные движения по осям x и y, с определённой скоростью. Данные параметры мы можем настраивать сами.

Например, в демо у нас есть самый первый блок под номером один. Он при наведении двигается по заданным осям: x: 2 и y: 2, так же задан параметр rotation с значением 1. Этот параметр определяет сильнее будет тряска или нет, другими словами, он не даёт далеко выходить блоку за его границы. Таким образом визуально получается малый или сильный эффект.

Теперь давайте посмотри как это всё будет выглядеть в коде:

Экспортируем анимацию как GIF

Перейдите в File > Export > Save for Web (Legacy)… (Файл – Экспортировать – Сохранить для Web (Старая версия) …).

  1. В параметре Preset (Набор ) выберите GIF 128 Dithered (Gif 128 с дизерингом).
  2. Для Colors (Цвета) установите 256.
  3. Если вы используете GIF для web или хотите ограничить размер файла анимации, внесите изменения в поля Width (Ширина) и Height (Высота) в разделе «Размер изображения».
  4. Чуть ниже в разделе «Анимация» для опции Looping Options (Параметры повторов) установите Forever (Постоянно).

Нажмите на кнопку «Предварительный просмотр» в левом нижнем углу диалогового окна «Экспортировать», чтобы просмотреть анимацию в веб-браузере.

Нажмите Save (Сохранить) и выберите место для анимированного GIF-файла.

Анимированный GIF в Photoshop

Мои поздравления! Вы только что создали свой анимированный GIF-файл. Разместите его в интернете, чтобы показать всему миру. Обращаю ваше внимание на то, что вы так же можете использовать эту технику для любого многослойного файла Photoshop.

Анимированный GIF в Photoshop

Длинные анимации

Ооо, вот тут-то и начинается всё самое интересное!

Частенько ли вы, смотря мультики или аниме, восхищались анимацией и завидовали тем, кто умеет их делать? Все эти прекрасные сцены, пластика движений и мн. др.? Я честно признаюсь — да. Каждый раз, когда я что-то смотрю, я пытаюсь понять, как же аниматоры с этим работали? Как они всё это создавали?

Но, в силу того, что я не знаю, в каких они работают программах, я пытаюсь понять весь процесс, используя механизмы Photoshop-a.

И знаете, я ведь нахожу ответы на все свои вопросы!

Но давайте будем разбирать всё по порядку.

От теории переходим к практике

Давайте вот с этого момента вы немного подумаете над ИДЕЕЙ и, вообще, над пунктом «Процесс создания анимации». К чему это я? К тому, что сейчас вам будет нужен подопытный кролик, которого вы будете заставлять двигаться. Мы не будем делать клип, в котором 4320 кадров. Лучше всего и легче всего будет понять, как создать покадровую анимацию по 2472-кадровой анимации.

Что ж, начнём!

1. Создаём новый документ. Для своей анимации я взяла небольшой размер – 400 x 500 px.

2. Теперь, если у вас нет внизу слева окна «Анимация», смотрим наверх, открываем вкладку «Окно» — «Анимация».*

* — В примерах используется русифицированная версия Photoshop CS2.

Примечание: в новых версиях анимация создается в панели Window — Timeline (Окно — Шкала времени). Процесс создания анимации на примере Photoshop CC вы можете посмотреть в уроке — «Создание анимации в Photoshop CC».

Покадровая анимация в Фотошопе

На скриншоте выше мы видим окно анимации в котором есть первый кадр, ниже него небольшая панель, на которой расположены кнопки:

Всегда/однажды — выбрав «Всегда» вы зациклите анимацию. Если вы выберете «Однажды», анимация будет проигрываться только один раз. (Оба варианта анимаций в моём уроке есть: зацикленная — где показан принцип ДПД, воспроизводимая один раз — где показана смена сцен).

Выберите первый кадр — возвращает нас к самому началу.

Выбирает предыдущий кадр — не будем звать Кэпа. (=

Играет анимацию/Останавливает анимацию — Play/Stop.

Выбирает следующие кадры — следующий кадр. Ваш Кэп!

Tweens кадры анимации — с помощью этой кнопки мы можем добавить плавные переходы между двумя кадрами посредством добавления новых.

Дублирует выбранные кадры — не совсем верное название… Лучше бы было «Добавление нового кадра».

Удаляет выбранные кадры — корзина.

3. Теперь мы можем начинать рисовать. для этого созданный ранее вами фон поставьте на Background (Задний план / Фон).

Покадровая анимация в Фотошопе

4. Затем создайте новый слой (Ctrl+Shift+Alt+N) и нарисуйте на нём своего персонажа.

Покадровая анимация в Фотошопе

4. Теперь начинается самое трудное: нам нужно нарисовать мно-о-ого раз подряд одного и того же персонажа в разных позах.

Создаём новый кадр, и… Тут есть два варианта:

А) Либо вы начинаете каждый раз рисовать своего персонажа заново, либо..

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

Поднатаскавшись в анимации вы сможете безболезненно пользоваться обоими вариантами. (Можете попробовать каждый из них в отдельном документе).

Вариант А:

1. Мы нарисовали наш первый кадр.

2. Чтобы видеть, как изменять следующий, мы уменьшаем прозрачность слоя примерно до 30% и создаём новый слой, на котором уже рисуем кролика для второго кадра.

3. Дорисовываем второй кадр и отключаем видимость у предыдущего, первого слоя.

Покадровая анимация в Фотошопе

Вариант Б:

1. Создаем кадр с персонажем и делаем этот слой невидимым.

2. Затем дублируем его (Ctrl+J), перетащив слой на кнопочку «Создать новый слой» левее корзины.

3. Теперь делаем второй слой видимым и начинаем его изменять.

Таким образом, дублируя предыдущие слой, вы создаёте новые кадры и изменяете именно их, а не один и тот же.

5. Сидим, рисуем кадров 1015

6. И смотрим, что получилось.

Покадровая анимация в Фотошопе

Получился бегущий кролик.

Причём ни одна его часть не скопирована: каждый кадр нарисован заново.

Смотрите сами:

В процессе создания анимации следует помнить, что довольно-таки трудно переключаться между сотней слоёв, и поэтому не стоит откладывать покраску или изменение чего-либо на потом. Делайте сразу.

Устанавливаем цикл для анимации

В нижней части панели «Шкала времени» имеется меню повтора, кликните по маленькой стрелочке, чтобы раскрыть список, и выберите Forever (Постоянно). Этим мы создадим циклическую анимацию.

Анимированный GIF в Photoshop

Нажмите кнопку «Воспроизвести» в нижней части панели «Шкала времени» или клавишу пробела на клавиатуре, чтобы просмотреть анимацию.

Анимированный GIF в Photoshop

Сохранение GIF анимации в Фотошоп

В финальной части нашего руководства рассмотрим как правильно сохранить GIF анимацию в Фотошопе. Для этой цели используется знакомый всем инструмент Save for Web, однако в последних версиях Adobe Photoshop СС он располагается в новом месте меню (File — Export). К счастью горячая клавиша Alt + Shift + Ctrl + S все еще работает.

Инструмент Save for Web для GIF анимации

В открывшемся окне настроек надо выбрать формат GIF, а также убедиться, что настройка Looping Options установлена в Forever. В нижнем правом углу окна есть возможность запустить созданный вами анимированный GIF в Photoshop для предпросмотра.

Настройки и сохранение GIF анимации

Если все функционирует так, как нужно, кликаете Save и сохраняете файл на локальном компьютере. Чтобы проверить работоспособность GIF требуется открывать его в браузере, т.к. встроенный просмотрщик Windows анимацию не проигрывает.

Кстати вы также легко можете экспортировать ваш проект в видео формат. Порядок действий аналогичный как при сохранении GIF анимации, но в Фотошоп меню выбираете пункт File — Export — Render Video.

Экспорт GIF анимации в видео формат

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

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

Если у вас остались еще какие-то вопросы о том как сделать GIF анимацию в Фотошопе или есть дополнения, пишите в комментариях.

Добавление изображений GIF анимации в Photoshop

Первым делом нужно загрузить в графический редактор все картинки/фото, которые будут участвовать в анимации. Добавьте их в один проект разными слоями — этот будут кадры для результирующего GIF файла. Проверьте размеры картинок и их отображение чтобы все было как вам нужно. Слои можно скрывать (с помощью иконки глаза слева от слоя) дабы просматривать все объекты.

Картинки-слои для gif анимации

Далее в пункте меню Window (Окно) включаете отображение панели Timeline (Шкала времени). Инструмент отвечает за создание GIF анимации в Photoshop. Расположите его снизу в рабочей области.

Панель Timeline (Шкала времени)

В центре данной панели есть выпадающий список, где нужно выбрать вариант «Create Frame Animation» и кликнуть по кнопке. В результате этого действия Timeline немного преобразится, и вы должны увидеть в качестве первого кадра картинку из самого верхнего слоя.

На следующем шаге выделяете все слои в проекте (кликаете по ним удерживая клавишу Ctrl). После этого открываете контекстное меню в правом верхнем углу окна Timeline и по выбираете «Make Frames From Layers».

Добавление кадров в Timeline из слоев

Из всех видимых и выделенных слоев Adobe Photoshop создаст кадры анимированного GIF. В результате увидите их в панели Timeline.

Кадры анимированного GIF

Рейтинг
( 2 оценки, среднее 5 из 5 )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий