Как сделать простую маску для Инстаграма за 15 минут

Подробный рассказ, примеры на гифках и исходники.

Привет! Меня зовут Павел, я делаю маски в инстаграм и решил для TJ сделать туториал по созданию простой маски.

На днях TJ написал о том, что создание масок для «Историй» в Инстаграме стало доступно для всех желающих. Сейчас я расскажу, как сделать простую маску всего за 15 минут.

Для начала нам понадобится программа Spark AR. Она есть для macOS и Windows, скачать можно тут. После установки запускаем Spark AR и авторизуемся через аккаунт в Фейсбуке. После этого у вас появится приветственное окно.

В правом нижнем углу нажимаем «Create project».

Мы попали в интерфейс Spark AR, пока ещё непонятный и страшный. Для начала добавим трекер лица. Нажимаем «Add Object» и в открывшемся окне два раза щёлкаем на «Face Tracker».

Теперь у нас есть трекер лица, с помощью которого наши элементы будут изменять своё местоположение при движении.

Теперь нам нужно добавить изображение, которое будет отображаться перед глазами. Для этого опять же нажимаем на «Add Object» и в открывшемся окне два раза щёлкаем на «Rectangle».

У нас в Сцене (Scene) под «Face Tracker» должны появиться «canvas0» и «rectangle0». Нажимаем на «canvas0» и перетаскиваем в «Face Tracker», чтобы «canvas0» стал подгруппой.

Чтобы «canvas0» следил за лицом, нужно в правом блоке, в «Mode», выставить «World space».

Отлично, теперь полотно двигается вместе с лицом. Теперь нам нужно сделать маску. Скачиваем «faceFeminine.jpg» отсюда и открываем этот файл в Adobe Photoshop или Adobe Illustrator.

Делаем прямоугольник, который закроет глаза, и что-нибудь придумаем в нём. Я сделал плашку «No signal».

Наша маска почти готова! Теперь выключаем слой с лицом и экспортируем маску на рабочий стол в PNG. Закидываем наш файл в текстуры.

Далее объясню коротко, так как вы уже немного знаете интерфейс Spark AR. В левой панели кликаем на «rectangle0». Далее в правой панели нажимаем на плючик рядом с «Materials».

У нас появился материал — теперь полотно залито белым цветом. Сейчас мы это исправим. В правой панели кликаем на «material0», в левой панели в «Texture» выбираем наш файл.

Теперь на полотне отображается наша текстура, но она слишком маленькая. Чтобы это исправить, в левой панели кликаем на «rectangle0», а в правой панели в «Size» изменяем размер. В нашем случае я поставил 420x420.

Мы в шаге от успеха! Осталось только поправить положение маски.

Для этого ставим видео на паузу, что делается в левом верхнем углу окна. После этого нажимаем на «canvas0» и редактируем высоту нашего полотна.

Подсказка: зелёная стрелочка перемещает полотно вверх/вниз, красное — вправо/влево, синее — вперёд/назад.

Наша маска готова! Теперь скачайте Spark AR Player на телефон, подсоедините его в компьютеру и отправьте маску на телефон для теста.

Всё отлично! мы протестировали маску, и если всё нас устраивает, то сохраняем её. В верхнем меню нажимаем «File». Проверяем, что маска не превышает максимальный размер, и нажимаем «Export». Сохраняем маску в любом месте.

Далее мы переходим в Spark AR Hub. В правом верхнем углу нажимаем на кнопку «Загрузка эффекта» и следуем инструкции. Там всё легко и объясняется.

Спасибо, что прочитали этот туториал. В него было вложено много сил: если хотите, чтобы я рассказал, как сделать более сложные и крутые маски, то подписывайтесь на мой инстаграм. У меня там скоро будут новые крутые масочки.

Вопросы писать можете здесь в комментариях или мне в директ.

#личныйопыт #инстаграм #инструкции