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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 сделать плавную смену кадров?

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

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

11
Начать дискуссию