Как создать пиксельную анимацию в After Effects

На реальном примере показывают как сделать крутой текстовый эффект.

Ловите большую подборку уроков по анимации иллюстраций в Adobe After Effects.

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

Анимированние иллюстраций штука крайне интересная и может вдохновить на создание чего-то классного.

Посмотреть можно тут

​​Уроки по анимации в ProtoPie.

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

01 Экспорт и подготовка дизайна для прототипирования
Делаем экспорт проекта из AdobeXD (По аналогии экспорт делается в Sketch и Figma) в ProtoPie. Так же настраиваем дизайн в ProtoPie для последующего прототипирования

02 Прототипирование экрана авторизации
Научимся работать с анимацией элементов, текстовыми полями и переменными. Так же разберем как создавать состояния элементов.

03 Прототипирование экрана Профиля
Разберем как передавать данные с экрана на экран с помощью переменных, как работать с формулами.

04 Прототипирование экран выбора цвета
Завершаем прототипировать дизайн в ProtoPie. Используем переменные для передачи цвета, исправляем ошибки в формулах и закрепляем пройденное.

Scroll Container & Padding Container
Добавил видео, в котором быстро разберемся как сделать Scroll и Padding контейнеры.

Circle Progress Bar
Учимся делать круговой прогресс бар с использованием макси-слоя

Уроки по After Effects для начинающих.

Базовые знания и навыки | Урок 1

00:00 - для чего нужен After Effects?
01:48 - настройка интерфейса
04:40 - импорт файлов
05:20 - основные параметры футажа
06:30 - просмотр footages
07:50 - информация о png файле
08:20 - обрезка футажа
09:37 - глобальные настройки (preferences)
12:00 - установка скриптов (FX Console)
14:12 - сохранение файла (auto-save)

Работа со слоями | Урок 2

00:22 - создание композиции и ее настройки
02:15 - трансформация слоев
05:17 - обозначения слоев
12:24 - трансформация объектов
16:00 - монтаж в After Effects

Эффекты и маски | Урок 3

00:00 - популярные эффекты в After Effects
02:53 - применение эффектов
09:00 - Shortcuts для эффектов (FX Console)
11:05 - работа с Lumetri Color (цветокоррекция)
23:30 - для чего нужен Adjustment layer?
27:20 - знакомство с масками (mask)

Анимация текста | Урок 4

00:45 - скрытие слоев на таймлайне
01:20 - вкладка Transform
04:55 - ключевые кадры и интерполяция
10:35 - анимация текста в After Effects
18:10 - размытие фона (Blur)
21:30 - исчезновение и размытие текста
25:00 - анимация межбуквенного интервала

Абстрактный, но красивый моушен от испанского арт-директора Гонзало Родригес

Гонзало Родригес и его дизайн-студия представили вымышленный проект NT&C, который был создан с целью сделать процесс выпуска мерчандайза более доступным для дизайнеров. В рамках этого проекта студия разработала множество элементов, включая сайт, иллюстрации и 3D/2D анимацию. Главной концепцией проекта являются абстрактные шейпы, которые отдаленно напоминают штрих-коды продуктов, что выглядит очень интересно в сфере продажи одежды.

Подробнее тут: https://dsgners.ru/novosti/574-abstraktnyiy-no-krasivyiy-moushen-ot-ispanskogo-art-direktora-gonzalo-rodriges

9 шагов, чтобы начать использовать анимацию в интерфейсах

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

Мы, люди, привыкли видеть, как мир движется вокруг нас, и если какая-либо часть программного обеспечения имеет последовательную анимацию, оно ощущается живым и естественным.

Читать: https://ux.pub/editorial/9-shaghov-chtoby-nachat-ispolzovat-animatsiiu-v-intierfieisakh-1dfj

​​Курс After Effects для начинающих

Идеально подходит для людей, которые только начали знакомство с программой After Effects. В результате курса мы воссоздадим проект, который я продаю на Envato маркете и на момент создания курса этот проект принес мне уже более 700$. Никакой воды, только практика и самые необходимые знания в АЕ

Смотреть:
https://www.youtube.com/playlist?list=PL8gQrG8M4T5s7o9XOvq_--tgits5vd6vH

Почему моушн-дизайн не должен быть сложным

Моушн-дизайн помогает сделать интерфейсы выразительными и простыми в использовании. Несмотря на большой потенциал, он, пожалуй, наименее понятая из всех дисциплин дизайна. Это может быть связано с тем, что он является одним из новичков в семействе дизайна интерфейсов. Если визуальный дизайн и дизайн взаимодействия восходят к ранним графическим интерфейсам, то моушн-дизайн вынужден был ждать, пока современное оборудование начнет плавно рендерить анимацию. Частичное совпадение моушн-дизайна и традиционной анимации также вносит неразбериху. Можно потратить целую жизнь на освоение 12 принципов анимации Диснея, означает ли это, что моушен-дизайн интерфейсов также сложен? Люди часто говорят мне, что сложно проектировать движение или, что выбор правильных значений неоднозначен. Я утверждаю, что в наиболее важных областях интерфейса, моушен-дизайн может и должен быть простым.

https://ux.pub/editorial/pochiemu-moushn-dizain-nie-dolzhien-byt-slozhnym-2j02

Новый логотип Adobe

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

Подробнее тут: https://dsgners.ru/graphic-design/961-novyiy-logotip-adobe

Быстрое создание 3D-модели флакона по референсу реальной косметики

Часто у дизайнеров возникает потребность быстро сделать что-то для маркетинга конкретного продукта. Например сверстать презентацию для отдела продаж, разработать медиа-контент для маркетплейсов или просто выложить на сайт производителя несколько визуалов под разными ракурсами.
Хорошо, если у продукта уже была фотосессия. А если её не было, где взять визуализацию продукта, чтобы вставить в слайд?

https://dsgners.ru/3d/221-byistroe-sozdanie-3d-modeli-flakona-po-referensu-realnoy-kosmetiki

Является ли анимация ключом к отличному дизайну продукта?

Наличие хороших визуальных эффектов и идеального до пикселя интерфейса недостаточно, чтобы выделиться среди множества приложений. Без анимации даже самые продуманные интерфейсы могут запутать пользователей и заставить их чувствовать, что они делают выбор без контекста. Хорошая анимация поднимает пользовательский опыт вашего дизайна на новый уровень, делая его приятным и плавным. Анимации, иногда в сочетании со звуковой и тактильной обратной связью (в случае мобильных приложений), делают абстрактный опыт использования приложения более тактильным и приближенным к реальности, что уменьшает когнитивную нагрузку, поскольку пользователь при использовании приложения может быстрее распознать контекст и все соединения. Цель этой статьи – собрать все ключевые принципы, которые необходимы при создании анимированных интерфейсов, независимо от того, какой инструмент, фреймворк или методы вы используете.

Источник

Анимация в adobe after effects / Как оживить арт Midjourney

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

Зачем киноделу работать с графическими изображениями?

Уже сейчас создаются и набирают популярность нейросеть-клипы, например: Кровосток - "Биография" или Виктор Цой "Группа Крови", поэтому выпуск обещает быть полезным, ты сможешь еще больше прокачать свои монтажные навыки и создавать трендовые видео.

Смотреть: https://www.youtube.com/watch?v=5Ra_2kXPhF0

Дизайнеры и автоматизация: кого заменят роботы и как этого избежать

До сих пор многие думают, что дизайнеры — это те, кто делают красивые картинки. Но на самом деле это люди, которые проектируют опыт и совсем не обязательно умеют рисовать. Чем же занимаются дизайнеры, в чем уникальность их роли и какие скилы не сможет заменить вездесущая автоматизация — разбирается Алексей Кулаков, CEO digital-продакшена JetStyle и сооснователь издательского сервиса Rideró

https://dsgners.ru/graphic-design/964-dizayneryi-i-avtomatizatsiya-kogo-zamenyat-robotyi-i-kak-etogo-izbejat

Как повысить ценность дизайна благодаря анимациям в интерфейсе

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

Читать: https://ux.pub/editorial/kak-povysit-tsiennost-dizaina-blaghodaria-animatsiiam-v-intierfieisie-14i6