Создание анимированных GIF-файлов из After Effects Comps

1. 1. Photoshop CC
2. Шаг 1: Экспортируйте ваш комп из After Effects
3. Шаг 2. Импортируйте видеофайл в Photoshop
4. Шаг 3: измените размер видео
5. Шаг 4. Настройка параметров экспорта в GIF
6. Шаг 5: Экспортируйте свой GIF
7. 2. GifGun!
8. 3. gifmaker.me

Независимо от того, создаете ли вы анимированные элементы для веб-дизайна или пользовательского интерфейса, делаете простые циклические изображения или учебные пособия, или делаете следующий сумасшедший мем реакции, знание того, как экспортировать создание After Effects в анимированные GIF-файлы, может оказаться чрезвычайно полезным. Вот три инструмента, которые вы можете использовать, чтобы сделать идеальный GIF из ваших AE Comps!

1. Photoshop CC

Если у вас есть After Effects , возможно, у вас есть и Photoshop (он поставляется с полной подпиской на Adobe Creative Cloud). Вы можете использовать Photoshop вместе с After Effects, чтобы превратить ваши отрисованные композиции в GIF-файлы. Этот метод является наиболее сложным, но он дает вам максимальный контроль над качеством и размером файла конечного продукта GIF.

Шаг 1: Экспортируйте ваш комп из After Effects

Как только ваш анимированный шедевр закончен в After Effects , выведите его в видеофайл. Я на Mac, поэтому я рендеринг в файл ProRes .mov. Если вы делали анимацию с большим разрешением, вы можете сохранить себе шаг и уменьшить масштаб в After Effects , но это не является абсолютно необходимым; Вы можете сделать это в Photoshop так же легко.

Шаг 2. Импортируйте видеофайл в Photoshop

Знаете ли вы, Photoshop может импортировать видео файлы? Довольно круто, а? Это открывает всевозможные варианты для матовой живописи, ротоскопирования и т. Д., Но это темы для другого урока. В этом случае просто откройте видео, как любой другой файл в Photoshop. Это займет немного больше времени, чем обычно, чтобы открыть, но как только вы это сделаете, у вас будет дополнительная палитра «временной шкалы» вдоль нижней части, которую вы можете использовать для просмотра файла.

Шаг 3: измените размер видео

Если вы еще этого не сделали в After Effects , уменьшите масштаб видео в Photoshop. Это действительно легко сделать - просто перейдите к пункту «Изображение> Размер изображения…», как если бы вы изменили размер любого обычного файла изображения (в некоторых версиях Photoshop вам может потребоваться преобразовать видео в смарт-объект - иди вперед и сделай это).

Шаг 4. Настройка параметров экспорта в GIF

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

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

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

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

Один важный параметр, на который следует обратить внимание - внизу вы увидите «Параметры зацикливания». По умолчанию зацикливание отключено в Photoshop , поэтому не забудьте выбрать его, если хотите, чтобы ваш GIF зацикливался (вероятно, так и есть).

Шаг 5: Экспортируйте свой GIF

Когда вы наберете свои настройки, нажмите «Сохранить…» и скажите, куда идти. Чтобы посмотреть анимированный GIF, лучше всего открыть его в веб-браузере (Safari, Chrome и т. Д.).

2. GifGun!

Еще более простой способ экспортировать свой GIF из After Effects - использовать недавно выпущенный плагин под названием GifGun , После установки вам предоставляется простая панель пользовательского интерфейса с кнопкой « Make GIF» и кнопкой «шестеренка» для определения ваших настроек. Для этого примера я зашел в настройки и сказал, чтобы он менял размер до максимальной ширины 320 пикселей (как я делал в Photoshop).

Нажмите « Сделать Gif», дождитесь его обработки, и ваш GIF появится в самое короткое время! Если вы часто делаете GIF-изображения, метод с одним щелчком легко оправдывает свою цену.

Для быстрого сравнения GIF, экспортированный из Photoshop, составляет 446 КБ , а версия GifGun - 800 КБ. Ваш пробег будет широко варьироваться в зависимости от вашего GIF, но то, что вы получаете в простоте использования с GifGun, вы теряете в возможности специально просматривать и контролировать конечное качество вывода по сравнению с размером файла (хотя GifGun действительно хорошо оптимизирует) ,

3. gifmaker.me

Не хотите связываться с фотошопом и не хотите тратить деньги на GifGun? Там есть сайт под названием GifMaker.me он возьмет последовательность JPEG / PNG, созданную из After Effects, и создаст для вас GIF.

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

После завершения экспорта загрузите изображения в GifMaker.me :

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

Этот пример длится четыре секунды с 95 кадрами, поэтому быстрый математический анализ (4000 миллисекунд в общей сложности, разделенный на 95 кадров) равен примерно 42 миллисекундам на кадр (что запрашивает сайт).

Нажмите « Создать GIF-анимацию» , затем подождите несколько секунд, пока все не будет сшито.

Выходные данные, вероятно, будут довольно большими (у меня было 1,2 МБ), но на сайте есть встроенный оптимизатор.

Просто нажмите « Уменьшить размер файла GIF» , задайте для него настройку (я уменьшил размер до 32 цветов) и нажмите « Оптимизировать сейчас». «Он сообщает вам, насколько он уменьшил размер файла (до 780 КБ в моем случае), и позволяет загрузить новый GIF.

Итак, поехали: три способа сделать свои собственные GIF-файлы из After Effects. Что нужно иметь в виду: GIF большие, и они занимают много файлового пространства для того, что они есть. Сложная анимация может быстро увеличиваться в размере файла. Если вы размещаете GIF в сети, вы хотите, чтобы размер файла был как можно меньшим, чтобы они быстро загружались. Вот несколько вещей, которые помогут вам контролировать размер GIF:

• Ограничение цветов. Один из самых простых способов сохранить размер ваших GIF-файлов - ограничить себя только однотонными цветами, и только несколькими из них.
• Дизеринг - если вы используете сложные цвета, градиенты или затенение, это ваш друг . Это упростит цвета, используемые в затенении, чтобы уменьшить размер файла.
• Держите это коротким - чем больше кадров в анимации, тем больше конечный размер файла.
• Держите его маленьким - сделайте размеры как можно меньше.
• Сохраняйте заикание - если вы можете делать это с более низкой частотой кадров (возможно, 12 кадров в секунду, может быть, даже 8 кадров в секунду!), Это очень поможет контролировать размер.

Какой твой любимый способ делать гифки из композиций After Effects? Поделиться в комментариях ниже.

Похожие

Комментарии