6 популярных программ для создания анимации
Быстро сменяющиеся кадры создают иллюзию движения, а аниматоры с её помощью — живые продукты. Разбираем инструменты для моушн- и UI-дизайна.
Изначально анимацию в интернете использовали для развлечения: создавали весёлых персонажей или рассказывали короткие истории. Сейчас она помогает улучшить юзабилити сайта или приложения, управлять вниманием пользователя и делать продукты интерактивными.
Для прототипов. С помощью анимации дизайнеры оживляют макеты сайтов и приложений. Создают интерактивные переключения между разными экранами приложений и страницами сайтов.
Для презентации кейсов. Дизайнеры используют анимацию для того, чтобы показать актуальные работы и продемонстрировать своё портфолио. Движущиеся элементы привлекают и удерживают внимание пользователей. А интерес и внимание — критерий хорошей презентации.
Анимация: какие программы использовать
Анимации создают в специальных программах, но универсального инструмента для решения всех задач не существует. Поэтому необходимо выбрать тот софт, который лучше всего подходит для конкретных целей.
Программы в нашей подборке условно разделены на два направления: для анимирования прототипов и создания полноценных анимаций.
Анимирование прототипов
С помощью таких программ создают бесшовные переходы между экранами и страницами сайта. При правильной настройке можно имитировать поведение элементов интерфейса и собрать несложную анимацию.Программы работают на основе макетов из графических редакторов. И создают анимацию, если задать начальное и конечное состояние экрана и триггер — событие, при котором запускается переход. Вид анимации, плавность, скорость и остальные параметры можно настроить.
Один из популярных инструментов для создания интерактивных прототипов и анимации интерфейса. Подходит для детальной настройки сложных переходов между экранами и разными состояниями. Работает только на macOS.Сценарии в PrincipleСФЕРА ПРИМЕНЕНИЯ: создание коротких сценариев в 2–4 экрана.Сценарии в PrincipleСФЕРА ПРИМЕНЕНИЯ: создание коротких сценариев в 2–4 экрана.
Сценарии в PrincipleСФЕРА ПРИМЕНЕНИЯ: создание коротких сценариев в 2–4 экрана.
САЙТ: principleformac.com.
Плюсы : Простой инструмент для несложной анимации, простой интерфейс.
Минусы : Неудобно работать со сложными сценариями, Работает только на macOS.
2. Marvel
Онлайн-сервис для создания прототипов. Работает из браузера или как дополнение к графическим редакторам. Позволяет не только создать и настроить переходы, но и изменить макеты при необходимости или посмотреть прототип на смартфоне.
СФЕРА ПРИМЕНЕНИЯ: удобное создание прототипов прямо из браузера.
ЦЕНА: несколько тарифных планов, есть бесплатный.
САЙТ: marvelapp.com.
ПЛЮСЫ : Кросс-платформенный, работает из браузера. Условно-бесплатный.
3. InVision Studio
Универсальный дизайн-редактор. Помогает легко работать с прототипом и редактировать анимацию, поддерживает все сервисы InVision. Находится в раннем доступе и пока распространяется бесплатно.
СФЕРА ПРИМЕНЕНИЯ: создание дизайна и прототипов.
ЦЕНА: бесплатный в раннем доступе.
САЙТ: invisionapp.com.
ПЛЮСЫ : Подходит для совместной работы. Работает на Windows.
МИНУСЫ :Ранний доступ. Иногда возникают ошибки во время работы.
Создание полноценных анимаций
Этими инструментами дизайнеры пользуются для создания презентаций, микровзаимодействий и движущихся баннеров. Чтобы решить, в какой программе делать анимацию, необходимо сформулировать цель: какая анимация будет и для чего она нужна.
Универсальные программы для анимирования — это продукты компании Adobe. Простую анимацию можно сделать и в Photoshop, для сложного подойдёт Animate или After Effects.
Последние две программы появились как логическое продолжение Photoshop и даже сейчас работают в связке с ним. В последних версиях After Effects нет возможности сохранить проект в GIF напрямую, поэтому это нужно делать через Photoshop.
4. Adobe Photoshop
Универсальный редактор для обработки графики. С помощью инструмента Timeline («Шкала времени») можно создавать покадровую анимацию работ. Photoshop — самый простой инструмент от Adobe, в котором имитируют движение. Интерфейс более сложных программ построен на основе Photoshop. Поэтому знакомство с созданием анимации лучше начать с него.
СФЕРА ПРИМЕНЕНИЯ: работа и анимация сайтов, фотографий, иллюстраций и другой графики.
ЦЕНА: подписка, 1 288 рублей в месяц.
САЙТ: adobe.com.
ПЛЮСЫ : Популярный редактор для обработки графики. Поддержка Windows и macOS.
МИНУСЫ : Универсальность, много лишних функций. Нет веб-версии.
5. Adobe Animate
Это одна из тех программ, которые используют для анимации изображений. Есть удобная шкала времени с раскадровкой. В Animate удобно работать с макетами из Photoshop. Идеально подходит для создания интерактивных презентаций и баннеров. Позволяет экспортировать анимацию в формате HTML и CSS.
СФЕРА ПРИМЕНЕНИЯ: анимация презентаций, баннеров, рекламы.
ЦЕНА: подписка, 1 288 рублей в месяц.
САЙТ: adobe.com.
ПЛЮСЫ : Работа с векторной графикой. Поддержка Windows и macOS. Развитое сообщество, много уроков.
МИНУСЫ : Иногда встроенного редактора не хватает. Нет веб-версии
6. Adobe After Effects
Продвинутый редактор для создания анимированной графики. Он пригодится и для обработки видеоклипов, оформления рекламных роликов и заставок.
After Effects требует значительных ресурсов и довольно сложен для изучения. Поэтому знакомство с ним лучше начать уже после изучения Photoshop и Animate.
СФЕРА ПРИМЕНЕНИЯ: создание спецэффектов, заставок, титров, анимаций.
ЦЕНА: подписка, 1 288 рублей в месяц.
САЙТ: adobe.com.
ПЛЮСЫ : Мультифункциональный инструмент. Поддержка Windows и macOS.
Развитое сообщество, много уроков.
МИНУСЫ : Сложно освоить. Запутанный интерфейс. Необходим мощный компьютер.
В какой программе сделать анимацию
Выбор программы зависит от вида анимации, поэтому мы составили таблицу, которая поможет определиться с нужной программой.
Программ для создания анимации много, каждая из них подходит для своей цели.