Технологии
Павел Скор
11 830

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

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

В закладки
Аудио

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

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

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

Приветственное окно 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

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

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

Выбираем нашу текстуру

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

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

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

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

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

Интерфейс приложения Spark AR Player

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

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

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

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы рассказать свою историю.

Написать
{ "author_name": "Павел Скор", "author_type": "self", "tags": ["\u043b\u0438\u0447\u043d\u044b\u0439\u043e\u043f\u044b\u0442","\u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438","\u0438\u043d\u0441\u0442\u0430\u0433\u0440\u0430\u043c"], "comments": 69, "likes": 66, "favorites": 182, "is_advertisement": false, "subsite_label": "tech", "id": 111982, "is_wide": true, "is_ugc": true, "date": "Wed, 21 Aug 2019 16:47:16 +0300", "is_special": false }
0
{ "id": 111982, "author_id": 161780, "diff_limit": 1000, "urls": {"diff":"\/comments\/111982\/get","add":"\/comments\/111982\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/111982"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 214344, "last_count_and_date": null }
69 комментариев
Популярные
По порядку
Написать комментарий...
14

Маску зелёного слоника сделать бы))0)

Ответить
0

Там всё легко) Можно и её сделать

Ответить
1

Сколько раз по 15 минут уйдёт у человека который этим не занимался? + Установка софта и попытки понять что к чему.

Ответить
0

Если учесть, что софт установлен, то уёдет 15-30 минут. Для тех кто знает фотошоп или люстру, как раз 15 минут и уйдёт.

Ответить
1

А как маска получит объём/глубину? Вижу на примере просто плоскую плашку прикрепили.

Ответить
2

Про скульптинг автор ничего не знает, очевидно же

Ответить
0

На то она и простая)

Ответить
0

ок как сделать "сложную"?

Ответить
1

Об этом позже расскажу)

Ответить
0

А в данном случае ничего про глубину и не сказано. Это просто плоскость присобаченная к глазам.

Ответить
11

Ничо не понял.
Давай с простого начнём: сколько к ВВП страны добавляет создание такой маски?

Ответить
1

Если человек после этого заинтересуется 3D-софтом или анимацией, то потом может начать изучать эти области сам и в итоге уйти в графику для кино и рекламы, например. Так что потенциал увеличения ВВП имеется

Ответить
0

О! Неплохо. А есть туториал по дополненной реальности. Я б почитал. А может и увлёкся б ею.

Ответить
0

На сайте Spark AR всё есть и написано довольно простым языком. Там размещены и примеры и видеоуроки наглядные. Но нужно будет потратить какое-то время и немного усилий, чтобы вникнуть

Ответить
0

Вот спасибо. Заклал.

Ответить
3

А зачем для такой простой маски столько действий? На самом деле всё куда проще:
1. Создаёшь объект FaceTracker — он сразу отслеживает лицо;
2. Создаёшь объект Plane — он будет самой «маской»;
3. Делаешь Plane зависимым от FaceTracker перетаскиванием;
4. Создаёшь материал для объекта Plane;
5. Добавляешь свою картинку No Signal в текстуры.
6. Да, это всё.

Ответить
9

Это подробный туториал для тех, кто вообще ни разу не запускал Спарк Эйар. Я когда захотел сделать в первый раз маску, я наткнулся на такой же "туториал" как у тебя. Поверь, нихера не понятно.

Ответить
1

В смысле «нихера не понятно»?) У тебя в инструкции на порядок больше лишних действий, а результат на выходе тот же

Ответить
0

Тут нету лишних действий, тут РАСПИСАНО как сделать маску. Я расписал всё по пунктам.

Ответить
0

Так я тебе расписал выше тоже по пунктам, только без лишних объектов вроде квадратов и канвасов. Для такой простой маски это всё не нужно. В твоём варианте ещё и фотошоп нужен. Так чей вариант сложнее?)

Ответить
0

А как сделать маску без стороннего графического ПО? Чтобы по твоему "туториалу" сделать шестой пункт, нужно сделать "Картинку No Signal". А в спарке её не сделаешь)

Ответить
0

ну ты гений конечно, а как открыть в фотошопе маску с лицом так как она показана на скрине?

Ответить
1

Скачиваешь джипег, в винде нажимаешь ПКМ, "открыть с помощью.." и выбираешь фотошоп или люстру. Я уж думал что да такого не дойдёт)

Ответить
0

А чего её делать? В гугле по первым же запросам все есть)

Ответить
0

Плашка должна быть определённого размера.

Ответить
0

Её можно обрезать в чём угодно, а размеры подогнать в самом Spark

Ответить
0

Если софт годный, в нём можно делать одно и то же разными методами. Какие-то проще, какие-то детальнее, но методы одинаково применимы, а значит ок.

Ответить
0

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

Ответить
0

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

Ответить
0

На телефоне тестить необязательно — с этим слишком много гемора (нужно скачать приложение на андроид, включить режим разработчика, подключить телефон к компу по USB и ещё разрешить режим отладки по USB). На macOS можно просто врубить режим симуляции по веб-камере: и сразу в реальном времени смотреть, как на тебе сидит. Включается этой кнопкой:

Ответить
2

С телефона отслеживать тоже легко, тоже в один клик, нажал отправить на телефон и всё. Если проверять в телефоне будет сразу понятно где ошибки, сколько фпс и тд. А ещё на ноутах с виндой чаще всего камера говно, ну и я делаю маски на компе, на ноуте не удобно мне.

Ответить
0

Если что, тут за 3 минуты можно подглядеть, как сделать нечто посложнее
https://sparkar.facebook.com/ar-studio/learn/documentation/tutorials/quick-start-guide/

Ответить
1

Мой туториал для чайников. Там не расписано много чего.

Ответить
0

На Spark туториалы тоже для чайников

Ответить
10

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

не читай
@
комментируй

Ответить
2

он только проснулся

Ответить
2

не изменяю традициям тж

Ответить
2

эй урод че статью не читаешь и комментируешь

Ответить
6

Оскорбление, кинул репорт, жди бан петушок.

Ответить
3

Оскорбление, кинул репорт

Ответить
0

Оскорбление

Ответить
1

В этой статье просто расписан подробнее вот этот пункт из статьи Дамира.
Но без понимания того, что и как работает, делать всё придётся наугад, поэтому лучше изучить инструкции, которые есть только на английском языке.

Ответить
0

Доброе! Статья же не месяц назад была опубликована) Я только сейчас собрался и сделать туториал.

Ответить
1

все уже поняли что я проебался, так что мог ничего и не говорить)

Ответить
2

Я может уже старый, но может кто-нибудь объяснить, что это за маски и нахуя они нужны?

Ответить
0

Сложный вопрос на который нету ответа.

Ответить
0

Это загадка человечества

Ответить
0

Ну воспитывать ребенка и учиться сложно, как и работать, легче нахуй в телефон зависнуть и смареть чужие жизни

Ответить
0

Если этот видос сделан для этого комментария, то респект.

Ответить
0

Нашел для этого комментария.

Ответить
0

спасибо, сохранил в закладки, как только придумаю идею маски, попробую

а вообще у меня хобби, собираю прикольные маски инстаграм (правда пока только 2 штуки в коллекции)

Ответить
1

Вдохновляйтесь уже готовыми масками) Это как веб-дизайнеры вдохновляются на Беханс)

Ответить
0

Нихуя себе, это же ссылка на инсту, а не на телегу! Что ж творится-то!

Ответить
0

Не, могу и телегу указать)

Ответить
0

Можно тег инстаграм и отписаться или забанить его

Ответить
0

Можешь пожалуйста подсказать в чем проблема? И с твоей маской такое и когда свою загружаю в текстуры...

Ответить
0

когда загружаю свою текстуру пишет это

Ответить
0

Хз. Но судя по ошибке, что-то с папками))

Ответить
0

Не добавляются текстуры в Spark. И вообще никакой файл, постоянная ошибка.. Почему так?...((

Ответить
0

Как делают макияж, звездочки, реснички?

Ответить
0

не получается загрузить текстуру в программу, выдает ошибку

Ответить
0

Попробуй убрать кириллицу из пути к файлу.

Ответить
0

Вот только хотел это написать)

Ответить
0

подскажите как в конце закрепить результат, т.е. я хочу добавить текст на лоб или там под глаз ,только не понимаю как его там сохранить.Заранее спасибо

Ответить
0

Светлана, вы имеете ввиду что текст не движется за лицом?

Ответить
Обсуждаемое
Новости
Фигурант «московского дела» Устинов получил 3,5 года колонии за вывих плеча нацгвардейца
Прокурор просил приговорить его к шести годам тюрьмы.
Кино и сериалы
Пять причин полюбить «ОА» и не печалиться его закрытию
Жанровая солянка, русские в сюжете, почерк Дэвида Линча, преданная фанбаза и другое.
Наука
Инженеры MIT объявили о создании нового «самого чёрного в мире материала»
Они утвержают, что он в 10 раз чернее предыдущего рекордсмена — Vantablack.
Популярное за три дня
Интернет и мемы
Раздевалки, ночёвки, обои рабочих столов: как в мемах обыгрывают разницу между парнями и девушками
В соцсетях давно иронизируют над гендерными различиями, но к лету 2019 года это превратилось в полноценный тренд со своими шаблонами.
Разборы
СМИ развернули кампанию против Юрия Дудя. Его критикуют за речь на премии GQ, фильм о Беслане и высказывания о митингах
Дудь то ли новый Зеленский, то ли просто хайпит на российских бедах, считают разные издания.
Новости
«Узник Tor» математик Богатов уехал в США
Дмитрий Богатов, бывший одним из операторов выходного узла сети Tor в России, объяснил своё решение покинуть страну тем, что, несмотря на прекращение следствия по его делу из-за сильного общественного давления, никто не был наказан за его незаконное преследование со стороны государства.

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "i", "ps": "cndo", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovy", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "ezfk" } } }, { "id": 6, "disable": true, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byswn", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "cndo", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223677-0", "render_to": "inpage_VI-223677-0-130073047", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=cndo&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudv", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "ccydt", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "cndo", "p2": "fzvc" } } } ]