Как создать свою первую Instagram-маску за 20 минут — гайд
В августе Facebook запустила публичную версию редактора Spark AR. С его помощью создавать и загружать новые AR-маски и эффекты в Instagram могут все пользователи, а не только разработчики и digital-дизайнеры. Компания даже сделала специальный сайт с обучающими материалами, но Spark AR пока далек от массового использования.
Мы попросили Дмитрия Корнилова, сооснователя компании по производству AR-контента FFFACE, сделать гайд, который поможет создать Instagram-маску. Даже если вы раньше никогда не слышали о Spark AR.
Этот гайд решит три задачи:
- Переведет все с языка Spark AR на русский и объяснит, за что отвечает каждая кнопка в программе;
- Предоставит пошаговое руководство, как создать базовую маску;
- Познакомит с набором инструментов для создания более сложных масок.
Как сделать первую AR-маску с помощью Spark AR
1. Зайдите на сайт Spark AR и установите программу на свой компьютер.
2. Откройте ее и нажать «Create Project». В меню будет три области:
3. Давайте разберемся, что может сделать каждая кнопка. Предлагаем сначала прочитать наши определения, а потом просто поклацать самостоятельно.
4. Теперь попробуем пошагово создать Instagram-маску. Сначала добавляем «Face mesh». Для этого нажимаем «Add» в верхней панели, выбираем «3D Objects», а затем «Face mesh». На лице модели появится шахматная маска — это первый слой маски.
5. Нажмите «Face mesh» на левой панели и посмотрите на противоположную — теперь на ней можно настроить слои маски. Найдите строчку «Material» и нажмите на «+» возле нее. Маска станет белого цвета, он установлен по умолчанию.
6. Теперь перекрасим материал в другой цвет и сделаем его прозрачным. Для этого нужно выбрать его в левой панели. Рекомендую сразу правильно назвать этот материал, например «Plastic». Так же переименуйте и «Face mesh» — «Plastic».
Напомню, в левой панели выбираем составные элементы для маски или эффекта, в правой — настраиваем их. Ею нужно снова воспользоваться после того, как выбрали материал. На ней находим пункт «Color» и выбираем любимый цвет. Должно получиться примерно так:
7. Затем превращаем наш материал в полупрозрачный глянцевый пластик: ставим галочку напротив «Specular» (блик) и задаем ему значение 100%, а в «Blend Mode» выбираем режим «Screen».
8. Теперь на лицо наложена маска из полупрозрачного блестящего пластика. Можно добавить на маску еще и надписи под глаза. Для этого нужно создать текстуру: откройте Word/Блокнот/Google Doc и посередине листа напишите два слова на расстоянии толщины носа друг от друга. Примерно так:
9. Сделайте скриншот этого белого квадрата с текстом и сохраните как картинку — это наша первая текстура.
10. После этого по уже знакомому алгоритму нужно сделать еще один «Face mesh» на левой панели (в этот раз называем его «Text»). Снова добавляем этому «Face mesh» материал. Для этого нажмите кнопку «Material» и «+», затем в списке выберите «Create New». Должно получиться вот так:
11. Это первый материал, которому мы назначим текстуру, которую создали в пункте 9. Выберите слева материал «Text». Затем в правой панели в разделе «Shader» нажмите на drop down возле поля «Texture» и выберите «New Image Texture». Загрузите файл с текстурой.
Вверху правой панели в поле «Shader Type» выбираем «Flat». Теперь на правой панели в меню «Blend Mode» ставим для этого материала режим «Multiply». Должно получиться так:
12. Теперь зайдите в «Texture» на левой панели и назовите ее «Text», а затем в правой панели поставьте галочку в поле «No compression».
13. Теперь самое время выставить свет. Найдите на левой панели «Direct Light» и «Ambient Light» и сделайте «Intensity» на 100% (можно и меньше, как вам нравится). Также можно поиграться с цветом и эффектом освещения маски.
14. Выберите на левой панели «Direction Light», на правой нажмите на стрелочку возле надписи «Rotation» — внизу откроется меню патчей. Это более сложные настройки эффектов. Сейчас просто добавьте к патчу «Direction Light» еще два — «Loop Animation» и «Transition». Сделать это можно кнопкой «Add Patch» (нажмите на нее дважды — и патч появится в меню).
15. В поле «Start» в Transition задайте значение 360 для всех трех осей, а потом любой параметр в поле «Curve». Наконец, соедините появившиеся патчи в таком порядке (просто нажимайте на стрелочку на патче и соединяйте появившуюся ниточку со стрелочкой на втором):
16. Поздравляем, ваш первый эффект готов. Осталось сохранить его и загрузить в Instagram. Нажмите «Save» — файл будет в формате arproj.
17. После этого перейдите по ссылке и загрузите эффект с помощью пошаговой инструкции (в первом шаге укажите, что эффект нужно загрузить в Instagram). Перед загрузкой маски убедитесь, что ваш Instagram-аккаунт синхронизирован с аккаунтом в Facebook. Посмотреть это можно в настройках: Instagram — Account — Linked Accounts — Facebook.
18. В процессе нужно создать иконку эффекта. Для этого просто сделайте селфи с использованием своей маски при хорошем освещении. Или сделайте вручную, как прописано здесь.
19. Финальный шаг — запишите превью эффекта с помощью тестовой ссылки, которую получили во время пошаговой загрузки. Также можно сгенерировать ее в Spark AR, нажав на кнопку «Send to App».
20. Эффект отправлен на модерацию и скоро появится у вас в профиле.
Список полезных ссылок:
- Наш гайд по созданию другой простой маски.
- Материалы от Spark AR — они проще, чем кажутся.
- Keynote c презентацией, которую мы читали на «Маскараде».