Как сделать плавную анимацию в гиф? (GIf-формате). Сохраняем и конвертируем анимацию из Adobe After Effects в GIF

Как сделать плавную анимацию в гиф? (GIf-формате). Сохраняем и конвертируем анимацию из Adobe After Effects в GIF

Иногда встает вопрос, как сделать очень плавную и реалистичную анимацию в формате GIF, чтобы она смотрелась не как набор пролистываемых или сменяемых кадров/слайдов.

Есть один из вариантов с использованием программы Adobe After Effects.

1. Создаем анимацию в программе Adobe After Effects, в которой можно делать очень плавные анимации.

Как создавать анимации в этой программе , было подробно рассказано в статье:

https://pikabu.ru/story/kak_sdelat_animirovannyie_stikeryi_dlya_telegram_risuem_vcoreldraw__i_animiruem_vadobe_after_effects_9307631

2. Выбираем в верхнем меню "Composition" - "Add to Render Queue" ( Добавить в очередь рендеринга ).

Adobe After Effects. Композиция. Добавить в очередь рендеринга.

В настройках рендеринга(в нижней части программы):Возле надписи "Модуль вывода", выбираем пункт - "Без потерь", нажимаем на него.

Adobe After Effects. Рендеринг. Модуль вывода", "Без потерь".

В появившемся окне, в разделе "Формат", вместо формата AVI (который стоит по умолчанию), выбираем пункт "Photoshop Sequence" (Эпизод Photoshop).

Adobe After Effects. Рендеринг. Модуль вывода", "Photoshop Sequence" (Эпизод Photoshop).

Далее , возле надписи "Вывод в", нажимаете то, что справа будет написано, и попадаете в новое окно.

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

Нажимаем кнопку Render.

Adobe After Effects. Рендеринг. "Вывод в".

3. Открываем Adobe Photoshop. В верхнем меню "Файл" выбираем - "Открыть как".

Заходим в папку с сохраненными ранее файлами-кадрами, выбираем самый последний файл (по нумерации в конце названия файла).

Ставим галочку "Последовательность изображений" и нажимаем кнопку "Открыть".

Открыть кадры из Adobe After Effects в GIF в Adobe Photoshop. "Последовательность изображений"

4. В появившемся окне устанавливаем нужную частоту кадров. Можно оставить как было в проекте After Effects.

Но можно и немного уменьшить значение частоты кадров.

Чем больше частота кадров, тем плавнее и качественнее будет выглядеть Gif-анимация, но она будет и больше весить, а значит- дольше грузиться в веб-браузере.

Нажимаем кнопку "ОК"

Adobe Photoshop в GIF. Частота кадров анимации.

5. Переключаем рабочую среду на пункт - "Движение", чтобы проиграть видео, если хотите проверить его.

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

Adobe Photoshop в GIF. Переключаем рабочую среду на пункт - "Движение".

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

Анимация в Adobe Photoshop. Проиграть анимацию.

6. В верхнем меню выбираем пункт - "Файл" - "Экспортировать" - "Сохранить для Web".

Но не забудьте обратить на настройки в этом окне, чтобы формат стоял именно GIF.

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

Далее в появившемся окне выбираем формат "gif", и нажимаем на "Сохранить".

Adobe Photoshop в GIF. Сохранить для Web

Как здесь видно, в окне сохранения, немало разных параметров.

Adobe Photoshop в GIF. Сохранить для Web. Параметры сохранения.

Итоги.

Данная инструкция ответила на такие частые вопросы как:

Создание GiF анимации в Adobe After Effects.

Как Сохранить GIF из Adobe After Effects?

Как сохранить анимацию After Effects в GIF?

Как конвертировать из Adobe After Effects в GIF-файл?

Экспорт из Adobe After Effects в GIF-файл.

Как сделать GIF-анимацию в Adobe After Effects?

Как создать плавную gif-анимацию?

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

Как сделать гифки более плавными?

Создание плавной веб-анимации.