Как сделать свою маску в Instagram?

Когда появилась возможность самостоятельно делать маски с помощью Spark AR, сразу появилось множество специалистов, специализирующихся в этом направлении. Но сегодня я расскажу, какие маски можно сделать совершенно самостоятельно без необходимости разбираться в 3d моделировании, фотошопе и прочих различных программах. От вас требуется только Spark AR и 10-15 минут свободного времени.

Маска фон

Будем делать такую маску:

Для начала подберите понравившийся фон для маски. Картинку желательно брать с форматом под сторис, чтобы она не растягивалась.

Заходим в Spark AR и переходим во вкладку «Layers». Уже существующий слой переименуйте для удобства на «User», и рядом создайте еще один слой «background». Как вы поняли, первый слой — это будет человек, второй — наложенный фон сзади.

После этого находим кнопку «Add Asset», кликаем на нее и добавляем 2 материала. Называем их также, как и слои.

Также нам нужно будет добавить Canvas. Чтобы найти его, находим в верхнем меню «Add- 2D objects- Canvas».

Кликаем правой кнопкой на Canvas и находим там Rectangle. Добавляем сразу две штуки. Называем так же как и слои.

После этого нам необходимо добавить текстуру камеры и маски сегментации. Для этого находим Camera в левом меню, и ставим плюсы напротив Texture Extraction и Segmentation. После этого они сразу добавятся к вам в текстуры.

Далее необходимо растянуть наши полотна и сделать их пластичными. Для этого переходим для начала во вкладку «user» под canvas, кликаем на Size и растягиваем его на весь экран с помощью «Fill Width». Напротив Pinning выделяем верхнюю и левую стрелку. Должно получится как на картинке ниже. Со второй вкладкой «back» делаем то же самое.

Главное проверьте, чтобы вкладка соответствовала названию слоя. User=User, Back=Back.

После этого нужно привязать нужный материал. Для этого напротив «Material» кликаем на плюс и выбираем материал, соответствующий названию вкладки.

Далее переходим в материал User. Тип материала выбираем «Flat». После этого добавляем текстуру сегментации как показано на скрине ниже.

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

И вот, вы уже на финишной прямой, остается только выбрать нужный фон. Для этого перейдите в материал «Back», поменяйте тип на «Flat», как в прошлый раз, кликните на «New Texture» и выбирайте свою картинку. Всё — ваша первая маска готова.

Маска фильтр

Здесь я не только расскажу, как делать фильтр, но и как можно менять несколько масок с помощью касания по экрану телефона. Самое сложное здесь, скорее всего, найти действительно интересные текстуры, а само создание маски не займет у вас более 5-ти минут.

Вот какие фильтры вышли у меня:

Для того, чтобы найти текстуры, можете поискать интересные варианты в интернете. После того, как вы нашли то, что нужно, переходим в Spark AR.

Для начала нам нужно добавить уже известный вам Canvas. Это можно сделать предыдущим способом, либо с помощью кнопки «Add Object». В появившемся меню, в разделе 2D Object, вы найдете «Canvas».

К нему мы добавляем Rectangle, кликая на canvas правой кнопкой мыши.

Расширяем полотно на весь экран, используя кнопку «Fill Width» и добавляем новый материал, кликая на плюс рядом с ним.

Можно сразу переименовать новый материал для вашего удобства. Переходим во вкладку материала, меняем тип на «Flat» и добавляем вашу первую текстуру.

В выпадающем меню «Blend Mode» выбираем нужный тип наложения. Здесь нет правильного ответа, выбирайте тот вариант, который вам нравится больше всего. Степень видимости текстуры настраиваем с помощью ползунка Opacity. Также, можно поменять цвет текстуры возле значка Color.

Для того, чтобы добавить второй фильтр, нажимаем на Canvas и снова добавляем Rectangle. Оба rectangle должны находиться под canvas, как показано на примере ниже. Для того, чтобы первый фильтр вам не мешал, уберите галочку напротив «Visible».

После этого повторяем такие же действия, как рассказано выше и добавляем уже вторую текстуру. А теперь начинается самое интересное — будем делать так, чтобы с помощью тапа по экрану, ваши маски менялись. Для начала, выносим маски в Patch Editor. Переходим во вкладку Rectangle и кликаем на стрелочку возле Visible. После этого сразу появится снизу экрана Patch Editor. То же самое делаем и со второй маской.

Далее мы будем прописывать патчи. Добавлять их удобно с помощью кнопки в правом нижнем углу.

Добавляем для начала такие патчи: Screen Tap, Counter, Option Sender. Объединяем их стрелками, как показано на примере ниже.

В настройках патча Option Sender выбираем «Boolean». А для того, чтобы найти настройки, кликните на патч и нажмите на выпадающее меню. И не забываем поставить галочку возле Value.

В Counter напротив Maximum Count пишем количество ваших фильтров. В моем примере их два, поэтому я пишу эту цифру.

Для того, чтобы проверить работу маски, выберите Simulate Touch из выпадающего меню и кликните по экрану.

Маска тест

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

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

Мой формат для картинки: ширина — 288 пикселей, высота — 216 пикселей, расширение — 72 пикселя/дюйм.

Первым делом добавляем Face Tracker. Для этого кликните на Add Object, он будет первым в появившемся окне.

Правой кнопкой мыши кликаем на Face Tracker и добавляем Plane. Сразу переименовываем plane, для того, чтобы не запутаться.

Сразу создаем новый материал и называем его также, как и plane.

Переходим в созданный материал, меняем тип на Flat и подставляем вашу обложку.

Теперь снова вернемся в plane и подправим размер вашей картинки.

Теперь необходимо добавить сами варианты. Для этого снова нажимаем на Face Tracker и добавляем новый Plane. Выставляем такие же размеры и создаем новый материал.

Переходим в созданный материал, меняем тип на Flat и добавляем новую текстуру «New Animation Sequence».

А уже туда выгружаем сразу все ваши варианты ответов.

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

Для этого выносим наши plane на patch editor, кликая на стрелочку возле Visible.

Для начала создаем рандомный выбор из анимации. Для этого кликаем на Add Patch и добавляем: Runtime, Offset, Less Then, Loop Animation, Random и Round.

Связка Runtime, Offset, Less Then нужна для того, чтобы обозначить, сколько будет длиться анимация. Значение ставим в указанное окно. У меня это 3 секунды.

Loop Animation определяет скорость анимации, если будет стоять 1 — то картинки будут сменяться достаточно долго, поэтому ставим как можно меньшее число. Я поставила 0,05.

В патче random нужно указать количество ваших ответов.

Объединяем random и round. После этого выносим анимацию в patch editor и завершаем ею нашу цепочку.

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

Для начала создаем патч камеры:

Нижнюю стрелку «Video Recording» объединяем с Offset (патч Pulse появится автоматически) и оттуда же ведем стрелку на выпадающие варианты(у меня это вопросы). А для того, чтобы обложка показывалась, когда не идет видео запись, добавим еще один патч «Not». От Video Recording ведем стрелку к Not, а уже Not объединяем с обложкой. Вот как это будет выглядеть:

На этом ваша маска готова 🙂

Маска с летающими объектами

Для примера я сделала такую маску:

Для начала подготовьте ваш «летающий объект» на прозрачном фоне. Такой фон можно быстро сделать в фотошопе с помощью пары кликов.

После этого в Spark AR кликаем Add Object и в самом конце выпавшего списка выбираем Particle System. После этого, перетаскиваем ее в самый низ, чтобы она была как бы «за камерой». Вот как должно это у вас выглядеть:

Я настроила такие параметры:

 

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

Переходим в созданный материал и добавляем вашу текстуру, которая и будет тем самым «летающим объектом». После мелких правок ваша маска будет готова.

Маска с надписью на лице

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

У меня вышла такая маска:

Первым делом необходимо скачать Face Assets. Именно с этими материалами мы и будем работать.

В скаченном архиве открываем папку Textures. В фотошоп подгружаем картинку faceFemenine. На лицо наносим надпись или картинку (главное, чтобы она была без фона).

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

Далее все еще проще: заходим в Spark AR, добавляем face tracker (c помощью кнопки Add Object), а потом добавляем face mesh.

Создаем материал с помощью плюса.

Переходим в созданный материал и в разделе текстуры выбираем вашу созданную надпись.

В принципе, маска уже готова, однако мы с вами еще немного отретушируем лицо и сделаем его более гладким. Для этого снова кликаем на Face Tracker и создаем новый Face Mesh.

Для нового face mesh создаем новый материал и переходим к нему во вкладку. В верхнем меню меняем тип на Retouching.

После этого остается только отрегулировать степень сглаживания лица и наслаждаться готовой маской.

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