Предыстория

В прошлом году многие дизайнеры заметили широкую тенденцию анимации мобильного дизайна и представление его в приятном виде в персперктиве. Я думал: «Как они это делают?

Я точно знал, что это было бы возможно, если бы я переместил все активные элементы пользовательского интерфейса в After Effects и затем сделал анимацию. Я не собирался тратить часы, чтобы получить хорошую gif-анимацию без возможности открыть прототип на устройстве.

Итак, я попытался найти способ (это был неправильный путь):

  • Я создал дизайн интерфейса в Sketch
  • Я переместил Sketch-файл в Flinto и сделал его интерактивным
  • У меня был файл .mov, который я преобразовал в .gif
  • Я добавил файл .gif в Photoshop
  • Я применил инструмент «Свободная трансформация» для .gif, чтобы изменить угол интерфейса

Таким образом, я получил размытый файл gif с нерезким текстом. «Какого черта? Как другие дизайнеры делают это?» - подумал я. И я приложил все усилия, чтобы получить больше информации от более профессиональных интерактивных дизайнеров, чем я.

Во время моих неудачных исследований я столкнулся с фактом, что многие дизайнеры не знают, как это сделать!

Анимированный прототип в перспективе с помощью After Effects

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

Анимированный прототип в перспективе с помощью After Effects
И молчание было его ответом…
Я задавался вопросом, как я могу найти способ поделиться решением с сообществом и пролить свет на проблему. И я это понял! Включите кофеварки — мы будем работать!

Программы, которые понадобиться

Программы, которые понадобиться

У вас уже есть почти все, что вам нужно (если вы UI дизайнер):

  1. Sketchинструмент для создания дизайна +этот плагин.
  2. Flinto или Principleинструменты прототипирования, которые помогают записать видео взаимодействия. У Flinto есть 14-дневный пробный период и он позволяет открывать прототипы на устройстве.
  3. Adobe After Effects — мощное программное обеспечение для редактирования видео. Оно поможет переместить записанное видео на макет устройства. Вы можете скачать бесплатную пробную версию поссылке.
  4. Adobe Photoshop — инструмент для создания gif-файлов.

Создание дизайна

Подготовьте макет в Sketch. Имейте в виду, что если вы хотите попробовать себя в дизайне взаимодействия, вам нужно подготовить несколько экранов или 1 экран с разными состояниями. Я взял мой дизайн процесса обучения новых пользователей из приложения ZeTour App, соучредителем которого я являюсь.

ZeTour App

Создание прототипа

Экспортируйте свои экраны во Flinto при помощи плагина «Send to Flinto». Для этого выберите артборды с левой стороны и запустите плагин (PluginsSend to Flinto). Мы должны экспортировать артборды только в высоком разрешении. Я экспортирую свой дизайн в 2X-разрешениях для iPhone 7 и получаю, например, файлы 750×1334.

Я использовал это руководство, чтобы анимировать свой дизайн. Если вы неопытный пользователь Flinto, попробуйте другое руководство.

Я записал свои взаимодействия, используя функцию записи в Flinto и сохранил файл в формате .mov.

Размещение видео внутри макета устройства

Прежде чем мы перейдет к After Effects, вам надо скачать макет устройства в PSD формате (например, этот: http://bit.ly/2fCvKXI). Я бы рекомендовал использовать PSD макеты, которые содержат 1 вид устройства, в противном случае After Effects спросит вас, какие папки совместить.

iPhone в перспективе мокапы
Ссылка на макет — http://bit.ly/2fCvKXI
Откройте After Effects и создайте новый проект. Переключите рабочее пространство в режим «Эффекты» (WindowWorkspaceEffects) и перетащите .mov видео и макет устройства на панель «Проект».

дизайн в перспективе с помощью After Effects - 1

А затем перетащите файл .mov и макет PSD на панель «Временная шкала». Вы увидите следующий результат:

дизайн в перспективе с помощью After Effects - 2
Возможно, вы боитесь интерфейса After Effects, но, помните, мы работали в Photoshop, так что уже ничто не может нас пугать
Большая часть работы будет выполнена в рабочем пространстве «Preview». Прежде чем идти дальше, нам нужно изменить разрешение композиции. Вы можете получить «Настройки композиции», нажав правую кнопку на элементе композиции и применив настройки. Я хотел использовать этот прототип как gif-шот на Dribbble и установить разрешение 800×600 px.

дизайн в перспективе с помощью After Effects - 3

дизайн в перспективе с помощью After Effects - 4
Вы можете выбрать любой цвет для фона
Готово. Давайте продолжим работу с панелью предварительного просмотра. Вы заметили, что окно предварительного просмотра стало меньше? Выберите дорожку на панели «Временная шкала» и шаг за шагом измените размер слоев, чтобы они могли вписаться в шот. Потяните углы, чтобы изменить размер объекта и используйте Shift, чтобы оставить его без искажений.

дизайн в перспективе с помощью After Effects - 5

Мы подходим к самой интересной части этой истории — мы собираемся поместить видео в устройство. Нажмите на слой видео и выберите эффект «Corner Pin» (EffectsDistortCorner Pin). И затем аккуратно поместите углы видео на экран устройства. Не спешите, этот шаг требует точности.

Отключите панель «Временная шкала», если у вас маленький экран (WindowsTimeline). Как только вы закончите, нажмите пробел на клавиатуре, чтобы увидеть результат. Первый цикл будет медленно отображать видео, но второй будет воспроизводиться плавно. Я не знаю, как вы будете реагировать, ребята, но в первый раз, когда я это сделал, я танцевал!

Совет!

Вы можете продолжать играть с этим PSD-файлом. После сохранения изменений он будет применен к проекту After Effects. Я решил изменить фон макета в Photoshop, и он был мгновенно обновлен в After Effect. Отдаю должное экосистеме Adobe.

дизайн в перспективе с помощью After Effects - 6

Экспорт

Выберите композицию и перейдите в «FileExportAdd to Render Queue», и новая вкладка будет добавлена в нижнюю панель.

Нажмите на значок выпадающего списка рядом с «Output Module» и выберите пункт «Custom».

дизайн в перспективе с помощью After Effects - 7

Выберите «Quicktime» в качестве формата и нажмите кнопку «Format Options». Найдите видеокодек H.264 в списке и выберите его. Затем дважды нажмите OK и нажмите на синюю кнопку «Render».

дизайн в перспективе с помощью After Effects - 8

Получение GIF

Сделайте еще один рендер, но с другой настройкой (выберите «Photoshop» в модуле вывода). Файлы будут сохранены на рабочем столе в папке под названием Project.

дизайн в перспективе с помощью After Effects - создание gif

Перейдите в Photoshop, найдите файл _0.psd, откройте PSD как последовательность и выберите частоту кадров. У меня было 5-секундное видео, поэтому я решил использовать 30 кадров в секунду. Постарайтесь, чтобы ваши gif-файлы были меньше 7 МБ.

дизайн в перспективе с помощью After Effects - сохранение

Нажмите Shift + Option + CMD + S, чтобы вызвать окно «Save for Web» и выберете следующие настройки:

  • GIF
  • Adaptive
  • Colors: 256
  • Transparency: On
  • Quality: Bicubic Smoother
  • Looping options: Forever

Результат

дизайн в перспективе с помощью After Effects - результат

Я полностью удовлетворен этим результатом. Его было трудно найти, но легко достичь. Каждый, кто может создать дизайн в Sketch, может повторить этот путь и сделать свою собственную креативную анимацию.

Хэппи-энд

Анимированный прототип в перспективе с помощью After Effects
Я хотел закончить так
Я рад по двум причинам:

  • Я нашел решение
  • Я могу поделиться им с дизайнерами

Желаю вам удачи с After Effects!