Меню
Дизайн
Дизайн
#подборки
  • 95013

6 популярных программ для создания анимации

Быстро сменяющиеся кадры создают иллюзию движения, а аниматоры с её помощью — живые продукты. Разбираем инструменты для моушн- и UI-дизайна.

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

Чтобы разобраться в правилах создания анимации, мы приглашаем начинающих и опытных дизайнеров на курс «Анимация интерфейсов» от Skillbox. А выпускникам с дипломами гарантируем трудоустройство в компании-партнёры.

Глеб Летушов

Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.


Для чего нужна анимация

Для прототипов. С помощью анимации дизайнеры оживляют макеты сайтов и приложений. Создают интерактивные переключения между разными экранами приложений и страницами сайтов.

Nike — Parallax Effect by Jardson Almeida

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

Voximplant, Behance.net

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

Анимация: какие программы использовать

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

Программы в нашей подборке условно разделены на два направления: для анимирования прототипов и создания полноценных анимаций.

Анимирование прототипов

С помощью таких программ создают бесшовные переходы между экранами и страницами сайта. При правильной настройке можно имитировать поведение элементов интерфейса и собрать несложную анимацию.

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

1. Principle

Один из популярных инструментов для создания интерактивных прототипов и анимации интерфейса. Подходит для детальной настройки сложных переходов между экранами и разными состояниями. Работает только на macOS.

Сценарии в Principle

Сфера применения: создание коротких сценариев в 2–4 экрана.

Цена: 129 долларов.

Сайт: 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. Поэтому знакомство с созданием анимации лучше начать с него.

Создание анимации в 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.

Tuts+ Web Design

Сфера применения: создание спецэффектов, заставок, титров, анимаций.

Цена: подписка, 1 288 рублей в месяц.

Сайт: adobe.com.

ПлюсыМинусы
Мультифункциональный инструментСложно освоить
Поддержка Windows и macOSЗапутанный интерфейс
Развитое сообщество, много уроковНеобходим мощный компьютер

В какой программе сделать анимацию

Выбор программы зависит от вида анимации, поэтому мы составили таблицу, которая поможет определиться с нужной программой.

ПРОГРАММАПРОСТЫЕ АНИМАЦИИРАБОТАЕТ В БРАУЗЕРЕPRO-УРОВЕНЬБЕСПЛАТНАЯ
InVisionНетНетНетДа
Adobe PhotoshopДаНетНетНет
PrincipleДаНетНетНет
MarvelДаДаНетДа
Adobe AnimateНетНетНетНет
Adobe After EffectsНетНетДаНет

Резюме

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

Курс

Анимация интерфейсов


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

Понравилась статья?
Да