Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. hat Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. path40

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

Что такое анимация? По сути — это несколько быстро сменяющихся кадров, за счет которых создается иллюзия движения на картинке. Разбираем необходимые инструменты для моушн- и UI-дизайнера.

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

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

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

Nike — Parallax Effect by Jardson Almeida

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

Voximplant, Behance.net

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

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

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

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

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

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

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

Вид анимации, плавность, скорость и остальные параметры можно настроить.

1. Principle

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

Сценарии в Principle

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

Цена: 129 $.

Сайт: principleformac.com

Плюсы

Простой инструмент для несложной анимации

Простой интерфейс

минусы

Неудобно работать со сложными сценариями

Работает только на macOS

2. Marvel

Онлайн-сервис для создания прототипов. Работает из браузера или как дополнение к популярным графическим редакторам. Позволяет не только создать и настроить переходы, но и изменить макеты при необходимости или посмотреть прототип на смартфоне.

Сфера применения: удобное создание прототипов прямо из браузера.

Цена: несколько тарифных планов, есть бесплатный.

Сайт: marvelapp.com

Плюсы

Кросс-платформенный, работает из браузера

Условно-бесплатный

минусы

Долго загружается при медленном интернете

3. InVision Studio

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

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

Цена: бесплатный в раннем доступе.

Сайт: invisionapp.com

плюсы

Подходит для совместной работы

Работает на Windows

минусы

Ранний доступ

Иногда возникают ошибки во время работы

4. Atomic.io

Работает из браузера и позволяет создавать неограниченное количество прототипов и проектов в бесплатной версии. Сервис похож на смесь Marvel и Principle. Подходит для совместной работы, можно делиться работами и комментировать экраны.

Сфера применения: создание быстрой анимации в браузере.

Цена: бесплатно в начальном тарифе.

Сайт: atomic.io

плюсы

Работает из браузера, хранит данные в облаке

Частые обновления

минусы

Долго загружается при медленном интернете

Нет десктоп-версии

Создание полноценных анимаций

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

Универсальные программы для анимирования — это продукты компании Adobe. Простую анимацию можно сделать и в Photoshop, для сложного подойдет Animate или After Effects.

Последние две программы появились как логическое продолжение Photoshop и даже сейчас работают в связке с ним. В последних версиях After Effects нет возможности сохранить проект в GIF напрямую, поэтому это нужно делать через Photoshop.

5. Adobe Photoshop

Универсальный редактор для обработки графики. С помощью инструмента Timeline («Шкала времени») можно создавать покадровую анимацию работ. Photoshop — самый простой инструмент от Adobe, в котором можно создавать движение. Интерфейс более сложных программ построен на основе внешнего вида Photoshop. Поэтому знакомство с созданием анимации лучше начать с него.

Создание анимации в Photoshop

Сфера применения: работа и анимация сайтов, фотографий, иллюстраций и другой графики.

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

Сайт: adobe.com

Плюсы

Популярный редактор для обработки графики

Поддержка Windows и macOS

Минусы

Универсальность, много лишних функций

Нет десктоп-версии

6. Adobe Animate

Это одна из тех программ, которые используют для анимации изображений. Есть удобная шкала времени с раскадровкой. В Animate удобно работать с макетами из Photoshop. Идеально подходит для создания интерактивных презентаций и баннеров. Позволяет экспортировать анимацию в формате HTML и CSS.

Сфера применения: анимация презентаций, баннеров, рекламы.

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

Сайт: adobe.com

плюсы

Работа с векторной графикой

Поддержка Windows и macOS

Развитое сообщество, много уроков

минусы

Иногда встроенного редактора не хватает

Нет десктоп-версии

7. Adobe After Effects

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

After Effects требует значительных ресурсов и довольно сложен для изучения. Поэтому знакомство с ним лучше начать уже после изучения Photoshop и Animate.

Tuts+ Web Design

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

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

Сайт: adobe.com

ПЛЮСЫ

Мультифункциональный инструмент

Поддержка Windows и macOS

Развитое сообщество, много уроков

МИНУСЫ

Сложно освоить

Запутанный интерфейс

Необходим мощный компьютер

Программ для создания анимации много, каждая из них подходит для своей цели. Узнать, какими программами пользуются для анимации интерфейсов, научиться с ними работать и разобраться в правилах создания можно на курсе «UI-анимация» от Skillbox.

Курс «Анимация интерфейсов»
Вы сможете самостоятельно создавать любую анимацию в интерфейсах и эффективно доносить концепцию проектов до клиентов. Мы начнем с анимации простейших элементов, таких как иконки, и дойдем до создания полноценных кейсов и шоурилов.
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

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

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

ПРОГРАММА

ПРОСТЫЕ АНИМАЦИИ

РАБОТАЕТ В БРАУЗЕРЕ

ПРОФЕССИОНАЛЬНАЯ

БЕСПЛАТНАЯ

InVision

Нет

Нет

Нет

Да

Adobe Photoshop

Да

Нет

Нет

Нет

Principle

Да

Нет

Нет

Нет

Marvel

Да

Да

Нет

Да

Adobe Animate

Нет

Нет

Нет

Нет

Adobe After Effects

Нет

Нет

Да

Нет

Atomic.io

Нет

Да

Нет

Да

Комментарии

0
Чтобы оставить комментарий,  авторизуйтесь
Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку Skillbox