Как сделать анимированную картинку?

Как создать гифку из изображений

Для этого подойдут такие сервисы, как Brush Ninja, Ezgif, Gifovina, Canva и многие другие. Подробнее о них мы поговорим чуть позже, а пока давайте рассмотрим незаменимый инструмент для коррекции фото – Photoshop. Это не онлайн-сервис, но умение делать в нем гифки не будет ни для кого лишним.

Приложения для живых фотосинемаграфии

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

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

Существует два способа делать живые фото: Фотошоп и мобильные приложения для Андроид и iOS.

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

Как сделать анимированную картинку онлайн

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

Как только все картинки будут подготовлены, откройте сайт http://www.makeagif.com/, кликните по иконке «Pictures to GIF» (изображения в GIF), расположенной в центре страницы, а затем загрузите все картинки. Далее следуйте инструкциям.

Промежуточные кадры

В Photoshop анимируют двумя способами:

  • Рисуют несколько кадров, вручную изменяя положение и свойства элементов. Если анимация достаточно длинная, то прорисовка каждого кадра занимает много времени.
  • Вставляют промежуточные кадры. Необходимо вручную задать лишь состояния макета: в начале и в конце анимации. Нужные кадры между этими состояниями добавит сам Photoshop. Этот способ подойдёт, чтобы сделать постепенное появление и исчезновение объекта или показать его перемещение.

Сначала я анимирую изображение балалайки. Для плавного появления изображения использую инструмент «Вставка промежуточных кадров». Чтобы Photoshop самостоятельно анимировал элемент, необходимо задать два состояния для элемента — начальное в первом кадре и конечное в следующем.

Поэтому добавляем ещё один кадр в «Шкалу времени» с помощью кнопки «Создать копию кадров».

После добавления нового кадра переключаюсь на первый и убираю видимость слоя с балалайкой. Также можно задать непрозрачность слоя 0%.

На следующем кадре проверяю, виден ли слой с балалайкой.

После работы с изображением балалайки настраиваю появление текстовой строки. В первом кадре я выделяю текст «Soul sings» и сдвигаю его вправо за пределы макета. С текстом «3 strings» поступаю так же — сдвигаю влево, пока он не исчезнет.

Во втором кадре возвращаю текст назад.

Отлично. Теперь вставим промежуточные кадры между ключевыми.

Для этого нажимаю кнопку «Создание промежуточных кадров» на «Шкале времени».

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

Чем больше кадров, тем дольше анимация и плавнее двигается элемент. Если кадров слишком мало — элементы будут двигаться рывками.

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

Первая часть анимации готова. Теперь её можно воспроизвести и посмотреть, что получилось.

Нажимаю на кнопку воспроизведения на «Шкале времени».

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

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

Живое фото для Айфона

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

  1. Теперь в меню выберите кнопку Ripple в виде капельки;

    Нажмите в приложении на кнопку Ripple
    Нажмите в приложении на кнопку Ripple

Что такое синемаграфия и где она может использоваться?

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

Сохранение иnbsp;экспорт

Теперь сохраняем проект. Чтобы открыть анимацию в браузере или графическом редакторе, экспортируем её в HTML или GIF.

Выбираем «Файл → Экспортировать → Сохранить для Web».

В окне предпросмотра можно ещё раз просмотреть анимацию и изменить настройки сохранения.

По умолчанию после воспроизведения анимация останавливается. Поэтому меняю режим воспроизведения на «Повторение» и сохраняю.

Вот какая анимация получилась в результате:

«Шкала времени»

Перед созданием анимации необходимо подготовиться — включить отображение «Шкалы времени», которая помогает управлять кадрами в анимации.

Открываем вкладку «Окно» и ставим галочку напротив строки «Шкала времени».

Внизу окна в Photoshop должна появиться широкая строка, с помощью которой управляют кадрами в анимации.

Чтобы создать первый кадр, нажимаем «Создать анимацию кадра» на «Шкале времени».

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

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

Покадровая анимация вручную

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

Я несколько раз скопирую последний кадр, чтобы создать движение стрелки и текста «go to shopping».

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

Теперь можно запустить анимацию и посмотреть результат.

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

Поэтому я увеличил длительность последнего кадра: нужно нажать на стрелку около надписи «0 сек.» и выбрать другое время из списка.

Для последнего кадра я задал длительность в две секунды. Теперь воспроизведение замедляется в конце.

Как сделать живое фото в Фотошопе?

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

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

Ну а мы желаем вам терпения и быстрого обучения!

Официальный сайт синемаграфа

Создатели этого типа анимации сделали свой блог, на котором разместили собственные работы. Их здесь немного, но они совершенны. И доступны для скачивания бесплатно.

Официальный блог синемаграфа
Официальный блог синемаграфа

В сети есть и русскоязычный фан-сайт, на котором можно найти такие же картинки. А также узнать о том, как создать их в своём устройстве при помощи Фотошоп.

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

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

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

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

Чем синемаграфия отличается от анимации?

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

Из бесплатных приложений для анимации изображений можно попробовать, к примеру, Werble (только iOS). В Werble есть большой выбор анимационных эффектов, но большинство из них, к сожалению, платные. Анимация — простой, но действенный способ привлечь внимание подписчиков, пролистывающих ленту в соцсетях.

Чтобы было понятнее, посмотрите видео о возможностях приложения Werble для создания креативных фото с эффектами