Гифки для банковских сервисов

Andrey Lukyanenko
Дизайн в Контуре
2 min readOct 12, 2017

Это адаптация поста из корпоративного интранета от 14 апреля 2016.

Для страницы про интеграцию контуровских сервисов с интернет-банками заказчик попросил короткие анимированные гифки с демонстрацией возможностей.

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

Процесс анимирования в ScreenFlow

Из их поста я узнал, что программа ScreenFlow, которую используют для захвата видео с экрана на Маке, обладает возможностями для анимации графики. У нее простой и понятный интерфейс в духе Скетча. Для движущихся объектов можно задать изинги (чтобы движения были плавными и реалистичными). А еще он умеет рендерить финальное видео в 60 кадрах в секунду с моушн-блюром (как в After Effects), что меня окончательно подкупило.

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

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

--

--