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

Предыстория

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

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

Таким образом, я получил размытый файл gif с нерезким текстом. "Какого черта? Как другие дизайнеры делают это?» – подумал я. И я приложил все усилия, чтобы получить больше информации от более профессиональных интерактивных дизайнеров, чем я. Во время моих неудачных исследований я столкнулся с фактом, что многие дизайнеры не знают, как это сделать! Последней каплей в море отчаяния был разговор с дизайнером, который точно знал, как это сделать, но молчал. [caption id="attachment_39576" align="aligncenter" width="516"] И молчание было его ответом…[/caption] Я задавался вопросом, как я могу найти способ поделиться решением с сообществом и пролить свет на проблему. И я это понял! Включите кофеварки – мы будем работать!

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

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

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

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

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

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

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

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

Прежде чем мы перейдет к After Effects, вам надо скачать макет устройства в PSD формате (например, этот: http://bit.ly/2fCvKXI). Я бы рекомендовал использовать PSD макеты, которые содержат 1 вид устройства, в противном случае After Effects спросит вас, какие папки совместить. [caption id="attachment_39579" align="aligncenter" width="1235"] Ссылка на макет — http://bit.ly/2fCvKXI[/caption] Откройте After Effects и создайте новый проект. Переключите рабочее пространство в режим «Эффекты» (Window — Workspace — Effects) и перетащите .mov видео и макет устройства на панель «Проект». А затем перетащите файл .mov и макет PSD на панель «Временная шкала». Вы увидите следующий результат: Возможно, вы боитесь интерфейса After Effects, но, помните, мы работали в Photoshop, так что уже ничто не может нас пугать Большая часть работы будет выполнена в рабочем пространстве «Preview». Прежде чем идти дальше, нам нужно изменить разрешение композиции. Вы можете получить «Настройки композиции», нажав правую кнопку на элементе композиции и применив настройки. Я хотел использовать этот прототип как gif-шот на Dribbble и установить разрешение 800x600 px. Вы можете выбрать любой цвет для фона Готово. Давайте продолжим работу с панелью предварительного просмотра. Вы заметили, что окно предварительного просмотра стало меньше? Выберите дорожку на панели «Временная шкала» и шаг за шагом измените размер слоев, чтобы они могли вписаться в шот. Потяните углы, чтобы изменить размер объекта и используйте Shift, чтобы оставить его без искажений. Мы подходим к самой интересной части этой истории – мы собираемся поместить видео в устройство. Нажмите на слой видео и выберите эффект «Corner Pin» (Effects — Distort — Corner Pin). И затем аккуратно поместите углы видео на экран устройства. Не спешите, этот шаг требует точности. Отключите панель «Временная шкала», если у вас маленький экран (Windows — Timeline). Как только вы закончите, нажмите пробел на клавиатуре, чтобы увидеть результат. Первый цикл будет медленно отображать видео, но второй будет воспроизводиться плавно. Я не знаю, как вы будете реагировать, ребята, но в первый раз, когда я это сделал, я танцевал!

Совет!

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

Экспорт

Выберите композицию и перейдите в «File — Export — Add to Render Queue», и новая вкладка будет добавлена в нижнюю панель. Нажмите на значок выпадающего списка рядом с «Output Module» и выберите пункт «Custom». Выберите «Quicktime» в качестве формата и нажмите кнопку «Format Options». Найдите видеокодек H.264 в списке и выберите его. Затем дважды нажмите OK и нажмите на синюю кнопку «Render».

Получение GIF

Сделайте еще один рендер, но с другой настройкой (выберите «Photoshop» в модуле вывода). Файлы будут сохранены на рабочем столе в папке под названием Project. Перейдите в Photoshop, найдите файл _00000.psd, откройте PSD как последовательность и выберите частоту кадров. У меня было 5-секундное видео, поэтому я решил использовать 30 кадров в секунду. Постарайтесь, чтобы ваши gif-файлы были меньше 7 МБ. Нажмите Shift + Option + CMD + S, чтобы вызвать окно “Save for Web” и выберете следующие настройки:

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

Результат

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

Хэппи-энд

[caption id="attachment_39592" align="aligncenter" width="511"] Я хотел закончить так[/caption] Я рад по двум причинам:

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

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

Перевод статьи Alex Kukharenko