Як зробити свою маску в 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 (за допомогою кнопки Add Object), а потім  face mesh.

Створюємо матеріал за допомогою плюса.

Переходимо до створеного матеріалу й у розділі текстури вибираємо ваш створений напис.

У цілому, маска вже готова, проте ми з вами ще трохи відретушуємо обличчя, зробимо його більш гладким. Для цього знову натискаємо на Face Tracker і створюємо новий Face Mesh.

Для нового face mesh створюємо новий матеріал і переходимо до нього у вкладку. У верхньому меню міняємо тип на Retouching.

Після цього залишається тільки відрегулювати ступінь згладжування обличчя і насолоджуватися готовою маскою.

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