Дизайн  •  25 ноября  2022  •  5 мин чтения

Начинающим дизайнерам: 9 программ для создания анимации

Собрали подборку программ для 2D- и 3D-анимации на компьютере и телефоне. Покажем возможности приложений, разберём плюсы, минусы и конкретные кейсы.

Программы для анимации на компьютере

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

В работе с анимацией на компьютере дизайнеру нужно учесть следующие факторы:

● Программы для создания анимации много весят, долго прогружают объекты и рендерят готовые видео. Чтобы эти действия шли быстрее, необходимо мощное «железо» — процессор, видеокарта, большой объём и высокая частота оперативной памяти.

● Создание 2D- и 3D-анимации в них — кропотливый и ответственный процесс, который требует времени, терпения и усидчивости. Начинающим дизайнерам это может быть сложно, но освоить анимацию в программах для ПК стоит, если есть желание дальше работать с ней и создавать интересные сайты.

Наставники курса «Дизайнер лендингов» учат проектировать сайты в конструкторах Tilda, Readymag и Figma, разрабатывать простые, но креативные решения, узнавать потребности целевой аудитории и бизнеса.

Освойте профессию UI/UX-дизайнера с нуля за 8 месяцев
Создайте 6 проектов мобильных и веб-приложений для своего портфолио. После обучения получите первый оплачиваемый заказ в «Мастерской» — студии дизайна внутри Практикума. Сделайте первый шаг и попробуйте бесплатную вводную часть курса «Дизайнер интерфейсов».
Топ программ для анимации на компьютере — это внушительный список. В него входят не программы для анимации для начинающих, а в основном те, которые используются профессионалами для создания мультфильмов или игровой графики. Разберём программы, которые пригодятся UX-дизайнерам.
Figma
Figma — база для дизайнеров интерфейсов. Программа постоянно развивается, поэтому там действительно можно создать что-то крутое. В Figma для анимации предусмотрено два функционала: интерактивные компоненты и плагины.

С помощью интерактивных компонентов создаётся анимация элементов — кнопок, чекбоксов, тумблеров, всплывающего меню, загрузки экрана. Изменения настраиваются или вручную через цепочку взаимодействий во вкладке Prototype, или через Smart animate. Умная анимация ищет совпадающие слои, анализирует различия и задаёт анимированный переход между существующими фреймами.

Анимация из Figma Community с использованием интерактивных компонентов
Анимация из Figma Community с использованием интерактивных компонентов

Плагины помогают создавать 3D-анимацию и объёмные иллюстрации. Всё делается в Figma, без обращения к сторонним программам:

Addjust — набор объёмных иллюстраций и иконок, у которых можно изменить цвет, размер и перспективу.

Figmotion — сборщик гифок или видео, сохраняет анимацию в расширении CSS или JSON, чтобы встроить потом на сайт.

Beatflyer Lite — анимация по слоям с комбинированием различных эффектов: масштабирования, вибрации, свечения, размытия.

В Figma Community много вдохновляющих работ по анимации — это расширяет технические возможности для дизайнеров
В Figma Community много вдохновляющих работ по анимации — это расширяет технические возможности для дизайнеров

На данный момент в России заблокирован доступ только для коммерческих аккаунтов Figma. Личные работают без изменений.

Плюсы:
● много инструментов для веб-дизайна;
● большой функционал для командной работы;
● удобная работа с базовыми компонентами;
● есть интерактивные объекты, Smart animate, плагины для анимации;
● созданный в прототипе сайт можно сверстать;
● понятный интерфейс;
● быстрая работа программы;
● бесплатный продукт с минимальными ограничениями.

Минусы:
● работает только с подключённым интернетом;
● ограниченный функционал для создания проектов с обилием интерактивных элементов.

ОС: Windows, macOS.

Цена: бесплатно. Есть платные тарифы для профессионалов: с расширенными возможностями — $15 в месяц (оплата за год по $12 в месяц), для организаций — $45 в месяц.

Adobe Photoshop
Программа для работы с растровой графикой, в которой можно создать простую гифку при помощи шкалы времени или инструмента Timeline. С Photoshop стоит познакомиться перед тем, как пробовать более сложные программы для анимации — Adobe Animate и Adobe After Effects.

Adobe приостановил работу в России, однако программами можно пользоваться до окончания оплаченного периода или оплатить подписку с зарубежных карт.

Обучающая инструкция по созданию гифки в Photoshop от Adobe Creative Cloud

Плюсы:
● понятный интерфейс (относительно After Effects);
● высокое качество гифок;
● синхронизация с экосистемой Adobe;
● много инструкций в интернете.

Минусы:
● ограниченный функционал для анимации;
● высокая цена, если постоянно не заниматься анимацией.

ОС: Windows, macOS.

Цена: в месяц — $20,99. По подписке Creative Cloud — $54,99. Скидки для студентов и бизнес-аккаунтов. Есть бесплатный пробный период.

Adobe Animate
В этой программе работают с 2D-графикой. В ней есть временная шкала, где формируется раскадровка, и готовая библиотека объектов. Adobe Animate используется для создания интерактивных презентаций, баннеров, сайтов, простых мультфильмов, инфографики. Отлично подойдёт новичкам, которые хотят разобраться в принципах работы анимации. В её создании также пригодится знание Adobe Illustrator.
В Adobe Animate можно создавать ролики из 2D-иллюстраций, а также анимировать объёмные объекты — 3D в ней условное, построенное на добавлении теней и перспективы

Плюсы:
● простой интерфейс;
● поддерживается наложение звука;
● синхронизация с экосистемой Adobe;
● много инструкций в интернете.

Минусы:
● знакомство с программой требует времени;
● высокая цена, если постоянно не заниматься анимацией.

ОС: Windows, macOS.

Цена: в месяц — $20,99. По подписке Creative Cloud — $54,99. Есть скидки для студентов и бизнес-аккаунтов. Есть бесплатный пробный период.

Adobe After Effects

База для моушн-дизайна, монтажа и создания визуальных эффектов. Программа ориентирована на работу с моушн-графикой и 2D-анимацией, для 3D есть стандартный набор инструментов. С помощью After Effects создаются анимированные интерфейсы, инфографика, заголовки, титры, заставки, музыкальные клипы, рекламные ролики, мультфильмы, короткометражное кино.

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

Пошаговая инструкция от Graphic Tools Lab, как текстовому блоку добавить ликвид-эффект

Плюсы:
● можно оживить любые объекты;
● библиотека эффектов и готовых шаблонов;
● поддерживаются плагины сторонних производителей;
● синхронизация с экосистемой Adobe;
● много инструкций в интернете.

Минусы:
● сложный интерфейс;
● долгий процесс обучения;
● высокая цена, если постоянно не заниматься анимацией.

Интерфейс Adobe After Effects имеет несколько тулбаров. За счёт большого количества окон с инструментами и настраиваемых параметров новичку легко в них потеряться

ОС: Windows, macOS.

Цена: в месяц — $20,99. По подписке Creative Cloud — $54,99. Есть скидки для студентов и бизнес-аккаунтов. Есть бесплатный пробный период.

Если не хочется углубляться в моушн-дизайн, то знаний Figma и её плагинов будет достаточно. Дизайнерам, которых привлекают визуальные эффекты и программы для 3D-анимации, стоит пробовать работу в Adobe After Effects и Adobe Animate.

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

Советы эксперта

Александр Старинский

● Смиритесь с тем, что хорошего результата с первого раза достичь не удастся, особенно если решили осваивать After Effects. Сделайте сценарий, только потом пробуйте анимировать. Не торопитесь и запаситесь терпением. Если в работе с анимацией что-то пошло не так — это нормально, просто совершите те же действия в программе заново.

● Прежде чем рисовать анимацию, научитесь работать со статичным изображением в Figma, Adobe Photoshop или Adobe Illustrator.

● Не надо запоминать расположение всех инструментов в программе, это придёт с практикой.

Программы для анимации на телефоне

У анимации на телефоне есть свои преимущества перед работой на ПК. Главное из них в том, что эти программы проще освоить. Мобильная анимация используется в основном для SMM и маркетплейсов: рекламных баннеров, постов и сторис, гифок. Если нужно сделать ярко и быстро, это отличный вариант.

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

Программы для мобильной анимации не предусматривают, что готовый файл можно встроить на сайт. Чтобы это получилось, у программы должен быть специальный формат экспорта — CSS-анимация, когда экспортируемый объект включает вшитую в него информацию о движении. На данный момент программ для телефонов с такими возможностями нет.

Обычно дизайнеры в работе используют несколько программ для мобильной анимации: в одной применяют спецэффекты, в другой задают движение по траектории, в третьей добавляют 3D-объём.

Adobe Express: Graphic Design
Программа пригодится для оформления изображений и создания видео в соцсети, обложек на YouTube и музыкальных альбомов, логотипов, плакатов, листовок, коллажей, презентаций. Подписка даёт возможность интегрироваться с экосистемой Adobe — другими программами, стоками фото, шрифтами.
В Adobe Express: Graphic Design доступны как статичные шаблоны, так и анимированные. В режиме редактирования можно изменить тип анимации
В Adobe Express: Graphic Design доступны как статичные шаблоны, так и анимированные. В режиме редактирования можно изменить тип анимации

Плюсы:
● много бесплатных шаблонов;
● легко избавиться от белого фона на картинке и сделать PNG;
● большая база стоковых изображений;
● автоматическое сохранение изменений;
● синхронизация с Adobe;
● сохранение качества при рендере;
● отсутствие водяного знака;
● интуитивно понятный интерфейс.

Минусы:
● шаблонный дизайн и анимация;
● не все шрифты поддерживают кириллицу.

ОС: iOS, iPadOS, Android.
Цена: бесплатно, со встроенными покупками. Месяц — 899 рублей.

Alight Motion
Приложение для моушн-дизайна, где можно выстроить композицию, задать уникальный характер движения, использовать 3D-эффекты. Поддерживается растровая и векторная графика. В платной версии убирается водяной знак и предоставляется доступ к премиум-эффектам.
С сайта Alight Motion можно экспортировать несколько шаблонов и разобрать на примерах, как работает приложение

Плюсы:
● много функций в бесплатной версии;
● создание анимации на прозрачном фоне;
● векторная графика;
● 3D- и цветовые эффекты;
● монтаж видео с заданием траектории движения;
● инструкции внутри приложения.

Минусы:
● на телефоне нельзя двигать слои;
● нужно время, чтобы разобраться в функционале;
● может вылететь на рендере или редактировании;
● водяной знак в бесплатной версии.

ОС: iOS, iPadOS, Android.
Цена: бесплатно, со встроенными покупками. Неделя — 199 рублей.

Legend: Intro & Animated Text
Программа для создания видео из фраз и 2D-анимации шрифтов. Используется для гифок, интро, обложек, коротких роликов.
Функционал ориентирован только на работу с текстом, итоговой анимации можно задать фон

Плюсы:
● большая библиотека бесплатных эффектов;
● можно повлиять на композицию шрифта;
● подключён фотосток Flickr;
● понятный интерфейс;
● нет встроенной рекламы.

Минусы:
● водяной знак;
● нет вертикального формата шаблона, например, для сторис;
● может вылететь и не сохранить файл;
● доступно только для Android.

ОС: Android.
Цена: бесплатно.

Motionleap
Из любой фотографии легко создать живой снимок — самостоятельно задать анимацию, наложить анимированные объекты, спецэффекты, 3D-движение, музыку. Приложение интересно тем, что в нём можно поиграть с пейзажем, где есть вода или небо. Например, обычное голубое небо заменить на закатное или ночное, добавить радугу или северное сияние. Анимируются все элементы, которые будут выделены: волосы, одежда, природа.
В Motionleap хорошо получается анимировать воздух, огонь, воду, а также работать со световыми эффектами и фактурами
В Motionleap хорошо получается анимировать воздух, огонь, воду, а также работать со световыми эффектами и фактурами. Анимация и фото: Елена Ларионова

Плюсы:
● интересные эффекты и декоративные элементы;
● возможность анимировать воду и небо;
● создание реалистичных снимков за счёт анимации;
● понятный интерфейс;
● экспорт в формате живых обоев.

Минусы:
● приложение полностью платное, даже используя «бесплатные» инструменты, нельзя сохранить файл;
● небольшая библиотека эффектов;
● потеря качества при сохранении.

ОС: iOS, iPadOS, Android.

Цена: платно. Месяц — 749 рублей, год — 4390 рублей, навсегда — 18 990 рублей.

Пошаговая инструкция от команды приложения, как задать статичному фото анимацию и «оживить» снимок
Google Фото
Не самая очевидная программа для анимации, однако в ней можно не только редактировать фото, но и создавать стоп-моушн-видео. Достаточно выбрать кадры из галереи, и гифка готова. Если нужна 3D-анимация, то можно собрать её на основе уже созданных 3D-иллюстраций со стоков или использовать реальные предметы.

В стоп-моушне важно зафиксировать телефон на одном месте, придумать раскадровку и подобрать объекты для съёмки.

Google Фото — базовый инструмент для знакомства со стоп-моушн-анимацией, где можно выстроить покадровое видео и сделать свой первый проект. Видео: Елена Ларионова

Плюсы:
● интуитивно понятный интерфейс;
● синхронизация с облачным хранилищем Google;
● создание гифки за пару кликов.

Минусы:
● нельзя отследить движение и смещение кадров;
● все материалы для монтажа готовятся заранее;
● нет эффектов, ускорения, наложения музыки.

ОС: iOS, iPadOS, Android.
Цена: бесплатно.

Советы эксперта

Елена Ларионова

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

● Не бойтесь программ. Инструкции и отзывы — это хорошо, но пока сами не попробуете, не поймёте, подходит ли приложение под ваши задачи и возможности. Мастерство не в таланте, а в потраченных часах на работу.

● Пробуйте работать с простыми программами, где всего несколько функций. Это стимулирует творческий процесс и помогает выделиться среди коллег.

Поделиться
Fri Dec 30 2022 14:02:48 GMT+0300 (Moscow Standard Time)