Користувачі Instagram можуть не лише застосовувати готові фільтри, але й створювати власні візуальні ефекти с додатковою реальністю, у вигляді незвичних кольорів, форм, написів і т. д. Ці маски можна накладати на Instagram Stories, наприклад, аби залучити нових підписників та зробити акаунт, що запам’ятовується. Як створити власну маску в інстаграмі та виокремитися з натовпу?
Як швидко зробити маску в Instagram
Протягом багатьох років фільтри Instagram створювалися лише самою платформою чи декількома студіями, що мали доступ до Spark AR Studio — спеціального інструменту Facebook. Це змінилося 13 серпня 2019 року, коли закрилась бета-версія Spark AR, та програмне забезпечення стало доступне всім, хто хоче створювати свої власні маски. Перш ніж ми перейдемо до процесу створення — кілька цікавих фактів:
Робити маски не так складно, як здається на перший погляд. Створення фільтра може бути нелегким, але все залежить від ідеї користувача. Якщо ви хочете зробити щось просте, можна швидко та без особливих зусиль створити цілий список 2D-ефектів в Spark AR.
Досвід не обов’язковий, але він значно полегшує життя. Якщо ви вже знайомі з програмами графічного редагування, такими, як Cinema 3D чи той же Adobe Photoshop, вам буде простіше орієнтуватися в Spark AR. Якщо це ваше перше знайомство з подібним інструментом, вивчіть можливості платформи та не бійтеся експериментувати.
Spark AR вже зробив велику частину роботи за вас. Коли Facebook відкрив Spark AR для публіки, він запустив і спільноту творців, аби допомагати його учасниками робити маски, інформувати та надихати їх. Існує навіть спеціальна платформа контенту, матеріалів та навчальних мануалів, котра допоможе початківцям.
- Перше, що ви побачите після завантаження Spark AR — це меню з все готовими проєктами, такими як анімована маска для обличчя у вигляді кролика, смуга світла та плаваючі частинки. Це дасть вам хороше уявлення про те, як працюють основні типи фільтрів.
- Якщо ви не боїтесь експериментів та хочете спробувати анімувати тривимірні об’єкти, існує ціла бібліотека елементів, котрі можна влаштувати у свої фільтри, включаючи навіть черепи, покеболи та аніме-персонажів.
- Якщо у вас відсутній досвід в створенні анімації, спробуйте попрацювати з мінімалістичними ефектами, створивши просту 2D-маску. Ви можете комбінувати 2D-елементи, використовувати їх окремо чи навіть об’єднувати в рамках одного проєкту, аби додати багатший ефект.
Урок 1. Області творення
1. Почніть з завантаження Spark AR Studio. Це безкоштовна програма, проста у встановленні та доступна для Windows та MacOS. Після встановлення ви можете працювати з різноманітними пресетами (збережені набори налаштувань для обробки фото) чи запустити власний проєкт з нуля.
2. Spark AR відкриється у робочому просторі, котре розділено на чотири області. У верхньому кутку знаходилася панель «Scene» (Сцена), котра показує базову структуру об’єктів у вашому фільтрі. По замовчуванню ви побачите «ambientLight0» та «directionalLight0», котрі являються елементами освітлення.
3. Нижче панелі «Scene» знаходиться панель «Assets» («Активи»), котра буде містити всі «Materials» («Матеріали»), що описують об’єкти на панелі «Scene». Матеріали в Spark — це різноманітні текстури, картинки чи просто кольори, котрими можна наділити об’єкти.
4. Простір посередині — це вікно перегляду. Це ваш основний робочий простір, що пропонує дві перспективи проєкту. Більший квадрат у центрі показує всі об’єкти у вашому фільтрі в межах діапазону камери вашого пристрою. Це допоможе створити ефекти у просторі камери (котрі рухаються разом з камерою) чи в навколишньому просторі (котрі залишаються на місці незалежно від того, куди рухається камера).
Це маленький прямокутник – ваш пристрій, а лінії, що з’єднує його з зображенням, показує радіус дії вашої камери.
5. В правому верхньому кутку вікна перегляду існує ще одна програма перегляду під назвою «Simulator» («Симулятор»), котра показує, як ваша маска буде виглядати. По замовчуванню ви побачите свою роботу так, як вона зображається на iPhone 8, але пристрій можна змінити в налаштуваннях. Опції охоплюють цілий ряд пристроїв iOS (включаючи iPad) та смартфони Android (включаючи декотрі версії Samsung Galaxy, Google Pixel та Google Nexus).
6. Нарешті, в правій частині вашого робочого пристрою є панель «Inspector», котра покаже властивість елементів «Scene» та дозволить редагувати кольори, текстуру, положення, кут повороту та інші деталі.
7. Spark AR містить в собі декілька тестових фігур, щоб ви могли приміряти свої фільтри. Ви зможете побачити, як вони виглядають на людях різної статі, раси та національності, на чистому полі чи на собі. Можете проекспериментувати з опціями, клацнувши значком камери зліва від панелі «Scene» та вибравши обличчя, котре ви прагнете використати у спливаючому меню. Якщо у вас є бажання примірити спецефект на собі, оберіть Facetime HD Camera у тому ж меню (назва може відрізнятися в залежності від того, на якому пристрої ви працюєте) – так ви створите маску для свого обличчя.
8. У вас є можливість у будь-який момент перевірити роботу у додатку Instagram. Просто натисніть на кнопку «Test On Device» («Протестувати на пристрої») зліва від панелі «Assets» та оберіть «Send To App» («Відправити в додаток»).Якщо вам потрібна додаткова допомога, познайомтесь з інтерфейсом Spark AR.
Урок 2. Телепортуйтесь куди завгодно, змінюючи фон
Заміна фону технічно називається «Segmentation» («Сегментація») та являється базовим ефектом, котрий пропонує багато можливостей. Як же це працює?
1. Оберіть зображення для фону. Ви можете використати певне фото чи створити щось нове, граючи з кольорами та ефектами у Photoshop чи в будь-якій програмі для редагування зображень.
2. Додайте два прямокутники. Один буде фоном (як зелений екран), а інший – зображати ваше обличчя, стираючи фон реального світу. Перейдіть у нижній правий кут панелі «Scene», натисніть «Add Object» («Додати об’єкт»), прокрутіть меню та оберіть «Rectangle» («Прямокутник»). Зробіть це двічі.
3. По замовчуванню ваші прямокутники будуть зображатися як «Rectangle0» та «Rectangle1». Ці незрозумілі назви можна змінити. Наприклад, «Rectangle0» на «Фон» та «Rectangle1» на «Передній план». Так буде простіше орієнтуватися. Для цього двічі клацніть по назві та з’явиться поле. Переконайтеся, що обидва прямокутники вкладені в canvas0. Це потрібно для того, аби вони стали «родичами» цього елементу та відображали зміни, які ви вносите в їх «потомство».
4. Встановіть розміри прямокутників. Оберіть прямокутник фону (раніше відомий як «Rectangle0»), й ви побачите його властивість на панелі з правого боку. Натисніть на поля поруч з написом «Size» («Розмір»), аби змінити ширину («Fill width») та висоту («Fill height») заповнення та розтягніть прямокутники на весь екран пристрою. Зробіть це і для іншого прямокутника. Ваш видовий екран буде повністю покритий прямокутниками, котрі будуть відображатися у вигляді кліткового малюнку під назвою «Альфа». Це означає, що вони прозорі, проте, вони все ще там.
5. Розділіть шари. По замовчуванню будь-який об’єкт, котрий ви додаєте, приєднується до шару, в якому ви останній раз працювали. Якщо вам це не потрібно, перемістіть його на інший шар. Аби ефект сегментації спрацював, вам знадобляться прямокутники у різних шарах. Так фон «змалюється» після переднього плану. Для цього і потрібен прямокутник фону на панелі «Scene». На панелі «Inspector» з правої сторони натисніть на поле «Layer» («Шар») та оберіть «Create New Layer» («Створити новий шар»). Якщо є бажання ви можете перейменувати шари, обравши вкладку «Layers» в правому верхньому кутку панелі «Scene» та двічі натиснувши на ім’я кожного шару по черзі.
6. Створіть нові матеріали. Час надати цим прозорим прямокутникам тверду, видиму форму. Для цього і потрібна функція «Materials».Ви можете призначити кожному прямокутнику свій власний матеріал: оберіть їх покроково на панелі «Scene», а потім на панелі «Inspector» з правого боку натисніть значок «плюс» поруч з «Materials» та натисніть «Create New Material».На панелі «Assets» в результаті повинно з’явитися два матеріали (під кожним прямокутником). Матеріали також можна перейменувати. Обравши матеріали, ви побачите безліч нових параметрів на панелі «Inspector». Можете змінити колір, текстуру, прозорість, зміщення і т. д. Якщо хочете поекспериментувати з вашими фільтрами, змінюйте ці параметри та спостерігайте, що відбудеться.
7. Створіть текстуру сегментації. Це перетворить будь-яке відео, що було зняте вашою камерою, в текстуру, а це значить, що воно відділить вас (чи того, на кого ви вказуєте) від фону. На панелі «Scene» натисніть «Camera», а на панелі«Inspector» натисніть знак «плюс» поруч із «Segmentation». На панелі «Assets» з’явиться новий ресурс, котрий по замовчуванню називається personSegmentationMaskTexture0.
8. Додайте «виокремлення текстури» на передній план матеріалу. Спочатку натисніть «Camera» на панелі «Scene», а на панелі «Inspector» натисніть «плюс» поруч з «Texture Extraction» («Виокремлення текстури»). На панелі «Assets» з’явиться інший ресурс з ім’ям «cameraTexture0». Аби скористатися ним у якості нової текстури, натисніть на матеріал переднього плану на панелі «Assets». На панелі «Inspector» змініть «Shader Type» («Тип шейдеру») на «Flat» («Плаский»), що надасть цьому матеріалу властивість плоского 2D-элементу. В «Diffuse» (другий елемент на панелі «Inspector») знайдіть «Texture» та оберіть cameraTexture0 в меню, що розгорнулося. Знизу встановіть галочку поруч із «Alpha», в полі «Texture» відкрийте меню та оберіть personSegmentationMaskTexture0.
9. Змініть фон. Може здатися, що нічого не відбулося, але ви майже досягли мети, бо встановили основу для свого фільтра. Натисніть на матеріал для фону та на панелі «Inspector» у розділі «Diffuse» змініть колір на той, що контрастує з об’єктами в камері. Це допоможе вам відредагувати краї сегментації шляхом зміни розміру маски і м’якого краю. Ці параметри ви знайдете на панелі «Inspector», коли двічі натиснете на personSegmentationMaskTexture0. Оберіть матеріал для фону та в розділі «Diffuse» скиньте колір на білий. Нижче, поруч з «Texture», натисніть «Choose File From Computer» («Обрати файл с комп’ютеру») та завантажте зображення, котре збираєтесь використовувати у якості фону. Майте на увазі, що файли фото можуть бути надто великими для Instagram чи Facebook, тому робіть їх настільки «легкими», наскільки це можливо. Подивіться, наприклад, цей відеоурок: ви дізнаєтесь, як використовувати сегментацію та текстуру камери для створення ефекту, котрий відділяє когось від фону. Змінюйте фони по бажанню.
Бонус: додайте трохи блиску – ефект плавучої частинки.
Це звичайна функція у фільтрах Instagram, вона легко налаштовується та добре виглядає.
1) Спочатку на панелі «Scene» натисніть«Add Object» та прокрутіть вниз до кінця списку, аби обрати «Particle System» (Система частинок). Ви помітите новий елемент в області перегляду, що випускає альфа-квадрати. Це ваш випромінювач, а альфа-квадрати — це частинки.
2) Коли ви створите свій «emitter» (випромінювач), він з’явився на панелі «Scene» під прямокутником переднього плану. Це означає, що по замовчуванню він буде взаємодіяти з елементом «Focal Distance» (другий під камерою). Якщо ви хочете створити ефект «World» (летючі блискучі частинки), натисніть на ім’я емітера (по замовчуванню «emitter0»), перетягніть його донизу та помістіть під «Microphone». Це зробить випромінювач незалежним об’єктом.
3) Далі ви помітите три стрілки, що виходять з випромінювача в області перегляду. Вони представляють вісі Х (червона), Y (зелена) та Z (синя), ви можете перетягнути їх навколо, аби змінити положення випромінювача. Крім того, коли ви натиснете на назву емітера, знайдете список усіх можливих параметрів для налаштування.
4) Положення, масштаб та обертання мають поля X, Y і Z, котрі допоможуть вам переміщувати випромінювач відносно того, як розташована камера (position), як далеко в кожному напрямку будуть йти частинки (масштаб, scale) та під яким кутом (rotation). Змінюйте значення цих полів (позитивні та негативні числа), аби створити потрібний ефект.
- Емітер
Ви можете обрати, який тип емітеру будете використовувати. Якщо у вас фіксований фон – він не буде рухатися, якщо ви будете переміщати камеру. Кільцевий випромінювач («Ring») буде розпиляти частинки у сферичному радіусі. Це створить ефект, котрий змусить декотрі частинки з’являються ближче, а інші – далі від камери. - Налаштування частинок
«Birthrate» (коефіцієнт народжуваності) визначає кількість частинок, котрі випускає випромінювач. Чим більше частинок ви хочете, тим вище буде це число. «Speed» («Швидкість»), «Scale» («Масштаб») та «Lifespan» («Довжина життя») говорять самі за себе — перше визначає, як швидко рухаються ваші частинки, друге – настільки великі ваші частинки; та третє – як довго ваша частинка прослужить вам, поки не зникне. - Сила
Це як гравітація. Якщо ви пограєте зі значенням вісі Y, то помітите, що ваші частинки будуть здаватися легше або важче. Чим нижче значення, тим важчі частинки.
5) Саме час додати матеріал. Обравши випромінювач на панелі «Scene», перейдіть на панель «Inspector», прокрутіть вниз, натисніть на знак «плюс» поруч з «Materials» та оберіть «Create New Material». Новий елемент з’явиться на панелі «Assets». Двічі клацніть по ньому та перейменуйте в «Particle_material».
Ви помітите, що ваші частинки змінилися, наприклад, змінили колір (якщо це так, не хвилюйтесь). Оберіть «Particle_material» на панелі «Assets», а потім на панелі «Inspector» натисніть на розгорнутий список «Shader Type» та вкажіть «Flat».Все це працює, якщо ви використовуєте ефект 2D-частинок, але якщо ви плануєте робити щось з 3D-ефектом, замість цього оберіть «Physically-Based». Далі у розділі «Shader Properties» («Характеристики шейдера»), поруч з «Texture», натисніть «Choose File From Computer». Відкриється вікно провідника, ви зможете завантажити будь-який файл, що вам подобається.
Яке б зображення ви не використовували для своїх частинок, воно має бути з прозорим фоном. У більшості випадків ви можете знайти ці типи файлів у форматі PNG за допомогою простого пошуку картинок Google. Якщо у вас є частинка з власною текстурою, можете відредагувати випромінювач, наприклад, збільшити частинки (від 0,01 до 0,05).
Вітаємо! Нарешті ви зробили свою першу маску в Instagram.
Поділіться своєю новою маскою. Для цього необхідно завантажити її на Spark AR Hub, де вона буде перевірена службою підтримки Instagram. Як тільки вони побачать вашу маску та визначать, що вона відповідає рекомендаціям спільноти платформи, ваше творіння буде доступне у галереї Instagram, у вашому профілі та посиланнях для обміну. Процес займає близько 5 робочих днів.
Почніть з того, аби натиснути на «Upload» («Завантажити») зліва від панелі «Assets» (стрілка наверх). Опинившись там, оберіть «Export File» та збережіть ваш проєкт у файл arexport, котрий вам потрібно завантажити в центр Spark AR. Програма автоматично перенаправить вас туди після завершення експорту.
Урок № 3. Як зробити обличчя простішим
За допомогою Spark AR ви можете зробити з обличчям все що завгодно. Для цього в програмі передбачені наступні інструменти:
- Використання текстури для створення ефекту макіяжу та додавання ретуші
- Використання різних спотворень, аби змінити форму обличчя (стиснути, розтягнути, тощо)
- Додавання 3D-обєктів — вушка зайчика, вуса і т. д.
- Використання редактора патчів для точного позиціювання об’єктів на обличчі
- Використання контролера відтворення анімації
- Додавання інтерактивності
- Використання експоненціального згладжування – для регулювання руху
Бажаєте додати вінок у волосся чи дракони на вилицях?
Що для цього потрібно? Створіть ефект відстеження обличчя «Face tracker». Пошук обличчя в кадрі та визначення його точних координат — це одна з найважливіших функцій для створення масок.
На щастя, програма все робить автоматично. Вам потрібно лише:
1. Додати функцію відстеження рухів. У лівій панелі в блоці «Scene» активувати функцію «Add Object». Знайти в меню пункт «Face tracker» та натиснути «Insert». Ви побачите, як з’являться вісі координат в центрі обличчя. Тепер програма відстежує всі людські рухи в кадрі.
2. Відобразити маску на обличчі. Аби маска відобразилась на обличчі, в панелі «Scene» натисніть правою кнопкою на об’єкт faceTracker0 та оберіть пункт «Add», а потім – «Face Mesh». У результаті програма автоматично виділить обличчя в кадрі та зробить з нього шахову дошку-маску. На цьому етапі ви можете розтягнути маску, потягнувши за стрілки осей, а також змінити декотрі параметри на панелі «Inspector» (наприклад, забрати помітку з параметра «Eyes» чи «Mouth», аби маска повністю закрила очі чи рот відповідно).
Ви можете переглянути, як це виглядає, натиснувши в Spark AR на «Test on Device» та «Send» навпроти Facebook Camera чи Instagram Camera. Коли маска завантажиться на сервер, прийде сповіщення та ви побачите себе у «шаховій реальності» у відповідному додатку. Але ж ви не зупинитесь на досягнутому?
3. Оберіть матеріал. Перейдіть до опції faceMesh0 у блоці «Scene». На панелі «Inspector» існує пункт «Materials», про який ми розповідали у другому уроці. Оберіть пункт «Create New Material», аби на панелі «Assets» з’явився material0. Натисніть на нього та спробуйте змінити налаштування на панелі «Inspector». До прикладу, змініть «Color» («Колір»).
У цьому робочому просторі ви побачите й інші можливості – різноманітні текстури (тобто зображення, котрими покривають об’єкти), 3D-моделі та скрипти. Параметрів дуже багато, так що має сенс випробувати їх самостійно. Наприклад, опція «Shader Type» («Тип шейдеру»)впливає на те, як буде виглядати маска. По замовчуванню встановлений параметр «Standard», котрий підійде для реалістичної симуляції 3D-ефекту. Можна обрати «Blended» («Змішаний») — для змішування текстур та кольорів, «Flat» («Рівний») (тоді об’єкт не буде реагувати на освітлення), «Retouching» («Ретуш») — для ретушування обличчя, «Face Paint» («Малюнок на обличчі») — для малювання на шкірі.
4. Змініть текстуру. Ви можете завантажити будь-яке зображення, натискаючи на «Choose File From Computer» поруч з «Texture» в тих же налаштуваннях. Зображення автоматично розтягується на всю маску. Головне – аби воно добре виглядало з обраним вами типом шейдеру. Ви вже знаєте, як це перевірити у додатку.
5. Опублікувати вашу маску. Для цього поверніться до останнього абзацу другого уроку.
БІЛЬШЕ ЦІКАВОГО: