Как перенести анимацию из adobe animate в after effects
Обновлено: 02.07.2024
В данном уроке мы разберём тему экспорта анимации или видео-ролика из After Effect в gif формат. В After Effect, помимо наложения различных эффектов на видео можно делать красивую, плавную анимацию, которая по качеству исполнения превосходит анимацию созданную в фотошопе или других программах. Многие новички сталкиваются с проблемой сохранения получившейся анимации в гифку, поскольку в After Effects стандартный экспорт не предусматривает возможности сохранения проекта напрямую в gif формат.
Мы разберём три самых распространённых способа сохранения проекта в гифку, каждый из них имеет свои преимущества и недостатки, ну а каким из них удобнее пользоваться - это уже выбирать вам. В качестве объекта для будущей гифки я взял короткий фрагмент видео-ролика, с любой созданной анимацией в After Effects - это будет работать точно так же, поэтому вы можете взять либо этот же фрагмент ролика, либо какую-то свою анимацию.
1. Сохранение в GIF с помощью плагина
Первый способ, который мы рассмотрим, является самым простым, речь идёт о популярном плагине GifGun, с помощью которого буквально за один клик можно экспортировать проект After Effects в gif формат. Поскольку плагин является платным, думаю желающих использовать данный способ будет не много, особенно среди новичков. Использование GifGun будет актуальным для профессиональной деятельности на платной основе, т.е. для пользователей, которые часто выполняют коммерческие проекты и сумма в 30 долларов, а именно столько стоит плагин на данный момент, будет для них не значительной, в сравнении с удобством использования плагина.
GifGun достаточно просто устанавливается, как и большинство плагинов After Effects. Для начала работы с ним нужно скаченный архив плагина распаковать в папку "Scripst", которая расположена в корневой директории папки "Support Files". После распаковки плагина запускаем After Effects, переходим в верхнем меню в пункт "File" - "Scripts" и запускаем скрипт GifGun. Далее в появившемся окне вводим лицензионный код, нажимаем "Ок" и у нас появляется окошко плагина.
Тут можно выставить нужные настройки для будущей гифки, такие как размер, количество кадров в секунду, выбрать место сохранения и другие мелочи, после чего просто нажимаем на кнопку "Make GIF" и плагин сохраняет проект в гиф файл.
Главный недостаток GifGun - это платная лицензия. Конечно, если вы не совсем чайник и термины типа "кряк","торрент" вам знакомы, то вы знаете где взять этот плагин бесплатно. Я же не собираюсь нарушать авторские права разработчика, тем более у нас ещё имеется целых два способа, которые абсолютно легальны и бесплатные.
2. Экспорт кадров в Photoshop и сохранение в GIF
Переходим ко второй способу, он пожалуй, самый распространённый, на него есть уже куча видео на Ютуб и заключается данный способ в экспорте из After Effects через Photoshop.
Первым делом, как и при обычном экспорте мы выбираем в верхнем меню "Composition" - "Add to Render Queue" и в настройках рендеринга вместо формата AVI, который стоит по умолчанию, выставляем "Photoshop Sequence" и указываем путь сохранения.
Лучше создать отдельную папку для сохранения, потому что файлов будет много. Нажимаем "Render" и ждём. По окончанию рендеринга переходим в нашу папку и видим тут кучу файлов в формате PSD, каждый файл представляет собой отдельный кадр из нашего видео-ролика. Т.е. After Effects разобрал наш ролик на кадры и каждый кадр сохранил в PSD файл. Теперь нам нужно с помощью Photoshop собрать все эти кадры в единый ролик или анимацию и сохранить уже всё это в гифку.
Открываем фотошоп, выбираем в верхнем меню "Файл" - "Открыть как" и в директории с нашими кадрами выбираем самый последний файл, ставим галочку "Последовательность изображений" и нажимаем открыть.
В появившемся окне устанавливаем нужную частоту кадров, можно оставить как и в проекте After Effects, а можно немного уменьшить. Тут важно иметь в виду, что чем больше частота кадров, тем плавнее и качественнее будет выглядеть Gif анимация, но тем и больше она будет весить, а соответственно, дольше грузиться браузером.
Теперь нажимаем "ок" и фотошоп преобразует все выбранные файлы в один видео-слой. Переключаем рабочую среду на "Движение", чтобы проиграть видео, как видим, оно работает.
Теперь стандартным способом сохраняем это видео в гифку. В верхнем меню выбираем "Файл" - "Экспортировать" - "Сохранить для Web", выбираем gif формат и сохраняем анимацию.
Видите, анимация будет весить слишком много, потому что у нас большой формат FullHD, можно перед сохранением просто его уменьшить раза в три. Выберем "Изображение" - "Размер изображения" и установим ширину, допустим на 400 пикселей. Снова сохраняем стандартным способом в гифку и увидим, что теперь она будет весить приемлемо.
Главные два минусам данного способа - это конечно же временные затраты, а так же наличие фотошоп и хотя бы не большой навык работы в нём. Хотя, оба минуса, кому-то будут вовсе и не минусами, а наоборот.
3. Экспорт видео в Photoshop и сохранение в GIF
Ну и наконец вишенка на торте - третий способ, который лично мне нравится больше, чем два предыдущих, но тут уже всё зависит конечно от ваших задач. Работает этот способ следующим образом: из After Effects мы рендерим нашу анимацию или видео в формат AVI и с помощью фотошопа просто сохраняем это видео в гифку. Фотошоп работает с AVI форматом, поэтому никаких танцев с бубном производить не нужно.
Просто открываем отрендеренное видео и стандартным способом сохраняем его в gif анимацию.
Единственный момент, который нужно учесть - это частоту кадров, потому что в отличии от второго способа здесь у нас нет возможности в фотошопе задать частоту кадров, поэтому это нужно делать непосредственно в самом After Effects перед рендерингом.
Вот такие три способа экспорта gif анимации из After Effects мы сегодня разобрали, а какой из них удобнее и эффективнее, думаю каждый уже из вас выберет для себя сам.
Можно переключаться между установками для экспертов и начинающих. Также можно экспортировать собственные настройки приложения, включая настройки панели инструментов, комбинации клавиш и настройки приложения в одном файле. Переносить свои установки на другие устройства так же просто, как выполнить экспорт или импорт файла.
Последовательность PNG
Можно экспортировать последовательность файлов изображений из отдельного клипа, кнопки или графического символа в библиотеке или рабочей области . В процессе экспорта Animate (ранее Flash Professional) создаст отдельный файл изображения для каждого кадра символа. Если выполняется экспорт из рабочей области , любые преобразования (например, масштабирование), примененные к экземпляру символа, сохраняются в выводе изображения.
Чтобы экспортировать последовательность PNG, выполните следующие действия.
Выберите отдельный ролик, кнопку, графический символ в библиотеке или в рабочей области.
Щелкните выбранный объект правой кнопкой мыши и выберите Экспортировать последовательность PNG .
В диалоговом окне «Сохранить как» выберите, куда следует поместить результат экспорта, и нажмите кнопку ОК .
В диалоговом окне Экспортировать последовательность PNG задайте необходимые параметры.
Ширина — ширина выходного изображения. Изменение этого параметра приведет к масштабированию выходного изображения. Значение по умолчанию соответствует ширине символьного содержимого.
Высота — высота выходного изображения. Изменение этого параметра приведет к масштабированию выходного изображения. Значение по умолчанию соответствует высоте символьного содержимого.
Разрешение — разрешение выходного изображения. Значение по умолчанию равно 72 точкам/дюйм.
Цвета — глубина цвета в битах для выходного изображения. Для этого параметра доступны значения 8, 24 или 32 бита. Значение по умолчанию — 32 бита, что обеспечивает поддержку прозрачности. При выборе значения 24 бита или 8 бит, при которых не поддерживается прозрачность, параметр «Фон» принимает значение «Рабочая область». См. ниже.
Сглаживание — этот параметр определяет, будет ли использоваться сглаживание краев объектов выходного изображения. Отключите этот параметр, если не используется прозрачный фон и изображения могут размещаться на фоне, цвет которого отличен от текущего цвета рабочей области.
При использовании команд экспорта Animate настройки экспорта не сохраняются отдельно в каждом файле, как при использовании команды «Опубликовать». (Чтобы создать все файлы, необходимые для размещения материалов Animate в сети, используйте команду «Опубликовать».)
Команда «Экспортировать ролик» экспортирует документ Animate в формат неподвижного изображения, создает нумерованный файл для каждого кадра в документе и экспортирует звук из документа в WAV-файл (только Windows).
Откройте документ Animate, который нужно экспортировать, либо выделите кадр или изображение, чтобы экспортировать его в текущий документ.
Выберите команду «Файл» > «Экспорт» > «Экспортировать ролик» или «Файл» > «Экспорт» > «Экспортировать изображение».
Установите параметры экспорта для выбранного формата. См. раздел О форматах экспорта файлов.
Если для выбранного формата требуется больше данных, то появляется диалоговое окно «Экспорт».
При сохранении растрового изображения Animate как растрового файла GIF, JPEG, PICT (Macintosh) или BMP (Windows) из изображения удаляется векторная информация и сохраняется только информация о пикселах. Изображения, экспортированные в растровом формате, можно редактировать в таких редакторах изображений, как Adobe® Photoshop®, но нельзя редактировать в векторных программах рисования.
При экспорте файла Animate в формате SWF текст кодируется в формате Юникод, что обеспечивает совместимость с международными наборами символов, в том числе двухбайтовыми шрифтами. Проигрыватель Flash Player 6 и более поздних версий поддерживает кодировку Юникод.
Содержимое Animate экспортируется как последовательности, а изображения экспортируются в отдельные файлы. PNG — единственный межплатформенный формат растрового изображения, который поддерживает прозрачность (в виде альфа-канала). Некоторые нерастровые экспортные форматы не поддерживают эффекты альфа-канала (прозрачности) и маскирующие слои.
В следующей таблице перечислены форматы, в которые можно экспортировать содержимое и изображения Animate.
Даже самая простая анимация в After Effects может удивить пользователей. Дизайнеры активно его используют, чтоб создавать подобные вещи. Это одна из самых популярных программ, в которой легко разобраться.
Рассмотрим процесс создания анимированного изображения для сайта в подробностях и по шагам:
- создание проекта: как создать анимированное изображение
- создание иконки
- аnchor Point
- свойства слоя — Position и Rotation
- создание анимации иконки
- улучшение анимации, добавление микроанимации
- плавность анимации, Easy Ease
- ключевые кадры анимации в adobe after effects
- выражения
- ресурсы в интернете, посвященные анимации
- редактор диаграмм
- ресурсы в интернете, посвященные редактору диаграмм
- указание свойств для отображения в редакторе диаграмм
- параметры диаграммы в редакторе диаграмм
- панорамирование и увеличение масштаба в редакторе диаграмм
- автоматическое масштабирование по высоте и подгонка
- результат работы
создание проекта: как создать анимированное изображение
Анимация — изменение картинки за определенное время. Это происходит из-за смены слоев. В результате можно получить динамичную картинку, которая активно двигается.
Все уроки по анимации в adobe after effects начинаются в того, что надо создать проект. Для этого нужно перейти по вкладке «Композиция» и создать новый проект. После того как файл назвали, его необходимо сохранить.
В начале создания можно указать:
- разрешение анимации;
- длительность;
- количество кадров.
Для простых анимаций достаточно 10 секунд и 30 кадров. Не стоит начинать с большего количества, иначе можно будет запутаться в слоях. Лучше постепенно увеличивать сложность, чтоб понять все тонкости.
После этого приступают непосредственно к работе. Сначала нужно создать новый слой. Это основа будущей анимации, на которую накладывают все другие элементы. Это делается с помощью кнопки Solid. Появится цветной фон. Это полотно, которое является основой для работы. Тон и интенсивность можно менять по своему желанию.
вернуться к оглавлению ↑
создание иконки
Следующее, что необходимо сделать: создать иконку. Есть прямоугольник с округлыми краями. Он находится в панели инструментов. Можно изменить форму или размеры фигуры.
Именно с ней будет происходить основная работа. Это макет изображения, на который будут накладываться все слои. Можно создать рисунок с нуля, либо же загрузить уже готовую иконку. Для этого нужно ее импортировать в Adobe или открыть с помощью вкладки «Файл». После загрузки она автоматически появится на панели Timeline.
вернуться к оглавлению ↑
аnchor Point
Точка, вокруг которой происходит все движение, называется Anchor Point. Автоматически она находится в самом центре будущей анимации. Тем, кто только начинает разбираться в том, как сделать анимацию в After Effects, стоит проверять ее положение. Иногда ее можно случайно сдвинуть в процессе работы. Тогда съедет весь рисунок. Чтоб изображение было по центру, надо всегда проверять контрольную точку.
Чтоб изменить положение нужно открыть Anchor Point и передвинуть ее в нужное положение. Это один из самых важных моментов, ведь от положения точки зависит исходный результат.
вернуться к оглавлению ↑
свойства слоя — Position и Rotation
Адоб позволяет самостоятельно выбирать и создавать свои. Можно выбирать их насыщенность, цветовую гамму и размещение. Функцию Position используют для изменения расположения объекта. Rotation — градус его вращение.
Именно эти два инструмента отвечают за положение и разворот всего изображения. Они позволяют устанавливать точку вращения, масштаб, поворот. Используя слои разной прозрачности, можно создать эффектную анимацию.
вернуться к оглавлению ↑
создание анимации иконки
Большую часть работы выполняют в панели Timeline. Там есть все необходимые инструменты, которые нужны для создания анимации. Важно следить за тем, чтоб во время изменения был включен секундомер. Это важный элемент, по которому происходят все изменения.
Поворот и особенности движения тоже играют свою роль. Поэтому нужно следить за показателями Rotation и Position. Чтоб облегчить работу, нужно изначально задать верные масштабы картинки. Тогда программа автоматически подтянет все слои.
Все элементы, которые добавляют, отображаются в Timeline. Там можно менять его свойства и добавлять в работу.
вернуться к оглавлению ↑
улучшение анимации, добавление микроанимации
Применяя все инструменты и функции Адоб, можно создать красивую, детализированную анимацию. Важно уделить внимание всем частям. Чтоб добавить микроанимацию нужно:
- добавить еще один слой;
- изображение привязать к нему;
- задать нужные параметры разворота на определенном участке;
- добавить нужное количество кадров;
- нажать Time Reserve Timeframes.
Последний пункт необходим, чтоб после цикла движений изображение вернулось в точку входа. Используя значение Null Object для первого слоя, можно повернуть любое изображение в начальную позицию.
вернуться к оглавлению ↑
плавность анимации, Easy Ease
Easy Ease — инструмент, который делает анимацию плавной, убирает все резкие движения. Прежде чем это сделать, необходимо скопировать кадры. После этого:
- на слой Null 1 перенести кадр со второй секунды десятого кадра;
- его же вставить на вторую секунду двадцатого кадра;
- включить Rotation на 190 градусов;
- в нижнем прямоугольнике продублировать все так же, как для Null 1, только с Rotation 45 градусов;
- изображение с третьей секунды десятого кадра перенести на Null 1;
- добавить двадцатый кадр с третьей секунды, указав Rotation 0;
- на нижнем прямоугольнике нужно все повторить.
Когда все сделано, выделяют ключевые кадры и выбирают инструмент Easy Ease. Если все желтые точки совпадают, анимация сглаживается и становится плавной. В случае если есть несовпадения, нужно проверить правильно ли скопированы и перенесены кадры.
по теме Фотошоп :
Как сделать прозрачный фон картинки в Photoshop (фотошоп)
Как нанести градиент на фото с помощью adobe photoshop
Фотошоп онлайн редактор, функции фотошоп — монтаж, рисование…
вернуться к оглавлению ↑
ключевые кадры анимации в adobe after effects
Ключевые кадры нужны, чтоб задать параметры, которые будут меняться. Это может быть:
- движения;
- эффекты;
- аудиосопровождение;
- текст;
- другие объекты.
Для создания анимации нужно минимум два кадра: начало и конец. Чтоб знать, как анимировать в after effects нужно включить секундомер. При изменениях параметра данные будут сохраняться. Если же таймер выключен, результат не сохранится.
Вставить кадр можно через «Вставку». Нужно выбрать временную шкалу и добавить ключевой кадр. Чтоб элемент занял свое место, стоит заранее указать нужную точку.
Если секундомер включен, программа автоматически добавляет или изменяет кадр. Чтоб добавить элемент нужно выбрать «Перо» и перенести его в нужную точку.
вернуться к оглавлению ↑
выражения
Для выражения используется язык Java. Фрагмент кода подключают к изображению, что помогает уменьшить количество слоев. С их помощью можно автоматизировать движение фрагмента анимации, связать разные свойства, создавать сложные анимации в несколько слоев.
Эту опцию чаще всего используют для:
- беспрерывного вращения;
- зацикливания точек входа и выхода;
- разнообразных покачиваний.
Чтоб создать adobe after effects анимация с выражением, нужно открыть редактор и кликнуть на область, которую нужно изменить. Затем нужно открыть таймлайн и выбрать секундомер рядом с функцией «Положение». Софт предложит стандартные варианты выражений. О том, что данный параметр включен, сигнализирует синий символ «равно». Рядом с ним есть кружок с треугольником внутри. Нажав на него, можно открыть редактор, чтоб ввести текст собственного выражения.
Выражение один из самых простых методов заставить двигаться часть рисунка. Это может быть нога спортсмена, или подмигивающий глаз на лице.
вернуться к оглавлению ↑
ресурсы в интернете, посвященные анимации
Детально узнать информацию об анимировании изображений можно в руководстве пользователей от Адоб. Там есть все основные термины и функции, которые используют в работе. Также есть уроки от Джефа Сэнгстер о том, как работать в программе.
Новичкам однозначно стоит изучить книги Афтер Эффект Классрум. В них есть много полезной информации, которая поможет понять все нюансы создания динамических картинок.
вернуться к оглавлению ↑
редактор диаграмм
Что увидеть свойства анимации в виде двумерного графика, нужно зайти в редактор диаграмм. Горизонтально в нем отображено время изменения объектов.
Есть два варианта диаграммы:
- значения (указаны все элементы);
- скорости (скорость их изменений).
Каждое свойство отображается в виде кривой. Работать можно только с одним значением, а просматривать сразу несколько. При работе с элементом при включенной кнопке «Привязать», он перетаскивается к тому же временному значению, ключевому кадру, точке входа и выхода. Линия становится оранжевой, когда к ней привязывают кадр.
В нижней части редактора есть кнопка «Разделить координаты». Нажав на нее, можно изменить элементы независимо друг от друга. Для этого используют разделение графика по разным осям.
по теме создания сайтов :
вернуться к оглавлению ↑
ресурсы в интернете, посвященные редактору диаграмм
Существует огромное количество роликов и статей, которые помогут изучить данную опцию. Новичкам стоит опираться на официальное руководство от Адоб, которое есть на сайте.
Энтони Боланте выпустил статью, которая поможет изучить все особенности изменений диаграмм. Детальные советы и иллюстрации существенно облегчат понимание этого процесса.
вернуться к оглавлению ↑
указание свойств для отображения в редакторе диаграмм
Чтоб указать свойства при покадровой анимации картинки в After Effects нужно:
- выбрать пункт «Показать свойства»;
- указать необходимую команду.
Можно просмотреть все свойства или же выбрать только анимированные. Также можно просмотреть те элементы, для которых была выбрана диаграмма.
вернуться к оглавлению ↑
параметры диаграммы в редакторе диаграмм
В разделе «Тип и параметры диаграммы» есть несколько функций. С помощью автовыбора редактор автоматически подберет наиболее подходящий тип. Там же можно менять свойства значения и скорости.
Помимо этого, можно просмотреть точки входа и выхода анимации, которая есть в данной диаграмме. Они отображены в виде скобок. Плюс, можно разрешить изменение ключевых кадров между кадрами.
В параметрах диаграммы видно, присвоены ли звуковые волны слоям. Эталонная диаграмма показывает, насколько элемент соответствует норме. Она серого цвета и доступна только для просмотра.
вернуться к оглавлению ↑
панорамирование и увеличение масштаба в редакторе диаграмм
Чтоб растянуть изображение по горизонтали или вертикали нужно использовать инструмент «Рука». Одновременно с другими его можно включить через длительное нажатие на пробел или среднюю кнопку мыши.
В зависимости от типа панорамирования стоит использовать:
- колесико мышки для вертикального;
- нажать SHIFT при прокрутке мышки для горизонтального.
Чтоб изменить масштаб нужно открыть функцию «Масштаб». Чтоб уменьшить размер нужно нажать ALT, при запуске инструмента. Это уменьшит размер по вертикали. Чтоб сделать это горизонтально, используют CTRL.
Для изменения размеров по горизонтали можно попробовать перетащить инструмент «Масштаб». Движение влево уменьшит, вправо — увеличит. Чтоб сделать то же самое во вертикали, инструмент нужно двигать вверх (для увеличения) или вниз (для уменьшения). При этом кнопка ALT должна быть зажатой постоянно.
Прежде, чем изменять масштабы анимации для Adobe After Effects нужно знать, что при автоматической настройке параметров по высоте, менять вертикаль нельзя.
вернуться к оглавлению ↑
автоматическое масштабирование по высоте и подгонка
Есть несколько видов автоматического масштабирования:
- по высоте;
- выбранной области;
- всего изображения.
В первом случае программа самостоятельно выставить вертикаль, исходя данных по диаграмме. Горизонтальные размеры нужно настраивать вручную. Чтоб автоматически изменить данные выбранной обрасти, нужно указать размеры. Эта функция поможет новичкам, как анимировать картинку в Adobe After Effects animation под заданные размеры.
При автоматическом масштабировании, редактор выставляет данные значения и времени исходя из информации, которая есть в предыдущих диафрагмах. Это позволяет сэкономить время на построение параметров проекта.
вернуться к оглавлению ↑
результат работы
Изучение того, как создать анимацию в Adobe After Effects занимает не сильно много времени. Это один из самых легких и простых вариантов оживить изображение.
Телеграм канал подпишись. Для вас самое важное и полезное по теме IT технологий и новостей мира!
Читайте также: