Загрузка AR-маски в Spark Hub

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

2 способ

Маску Дефекты лица в инстаграме, которая искажает лицо, можно найти у автора под ником @thehectoor. Она называется AMORFO и имеет несколько вариаций:

Тем временем пользователи продолжают определять в Instagram профессию будущего мужа, имя человека, которого они полюбят или героя из мульта «Губка Боб Квадратные Штаны» которым они являются… Мы собрали для тебя самые популярные маски. Чекай!

Ты ещё не определила имя своего будущего мужа? Заходи в аккаунт @anykrit и тебе станет известно всё за несколько секунд! Пиши в комментариях, кто тебе попадется!

А вот и гадания на суженного подъехали, ну, или на суженную! Парни и девчонки, начинайте игру «Погадаем?» в аккаунте @visafarova!

Не успел получить предсказание на 2020 год? Дружочек, у тебя ещё есть шанс! Открывай Instagram, находи аккаунт @petarxiv или @filippo.soccini и лови своё пожелание на наступивший год!

А теперь пришло время для персонажей из мульта… И первые в твоем списке — герои из мультфильма «Губка Боб Квадратные Штаны». Заходи уже в аккаунт @wowfilterscom, открывай раздел маски и пробуй!

Предсказания ты уже опробовал, теперь лови советы на будущее в аккаунте @akikokoga и никогда не забывай про них!

Шаг №1 — сделаем ретушь

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

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

Нажмите кнопку Add и в выпадающем списке выберете Scene Understanding, затем Face Trecker. Это функция позволяет следить за лицом и всеми нашими настройками.

После снова заходим в меню Add, на этот раз выберете 3D Objects, а затем кликните по кнопке Face Mesh.

В правом меню программы появятся два выбранных нами пункта. Для удобства, второй из них, faceMesh0, переименуйте в ретушь, кликнув по нему правой кнопкой мышки, выбрав пункт Rename.

После находим внизу левого меню кнопку Add Asset и в выпадающем списке жмем Materials, для удобства можно переименовать в ретушь (retouch).

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

После в левом меню нажмите по facemesh0 (ретушь), затем перейдите в правую колонку и примерно посередине меню, напротив, Materials кликните на +. Нужно выбрать material0 (если переименовали, то ретушь). Лицо человека, а впоследствии и ваше изменяется, ретушь готова.

Подробная инструкция по созданию масок в Instagram для stories

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

Затем использовать маски только для ретуши стало слишком просто, появились различные маски с юмором, пресеты, игры и т.д.
Маски в Instagram заполонили наши Stories. После того, как Facebook дал возможность любому пользователю создать собственную маску, это стало новым трендом 2020.

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

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

А главное — не обязательно уметь рисовать или владеть 3D графикой. Надо лишь немного фантазии, навыков, используя шаблоны и градиенты, которые помогут в оформлении постов и сторис в соцсетях. Для изготовления баннеров необходимо множество примеров градиентов, которые можно скачать в библиотеке градиентов в PNG.

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

1. На сайте вы можете скачать более старые версии Spark AR на случай, если компьютер не потянет последнюю версию: v84, v83.1, v82, v81.1.

2. Здесь также можно использовать макеты для создания иконки будущей маски. У Facebook строгие правила составления макета, разберем это в другой главе.

3. Файлы для создания деформации лица на сайте называются так: «Face Distortion and Retouching»

4. Файлы для создания эффектов на лице (например, световой блик) называются так: «Face Reference Assets»

5. На этом сайте находится множество гайдов и туториалов от Facebook по созданию масок, но к сожалению, они все на английском языке.

Начало работы в Spark AR. Готовые проекты.

Открываем программу Spark AR. Первое, что появляется — это диаологовое окно. В нем можно создать проект с нуля, нажав «blank project». А можно воспользоваться, готовыми вариантами масок, где необходимо лишь изменить цвет, объект или текстуру.

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

Рассмотрим каждый готовый проект по отдельности.

1. Eye color

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

Открываем этот проект нажав дважды левой кнопкой мышки. У нас появляется окно нашего проекта. В центре мы видим сцену.
Слева в колонке находятся все объекты и текстуры. Справа в колонке меню редактирования наших объектов из левой колонки. А внизу по центру — редактор патчей.

Для начала разберём простые изменения — цвет глаз, размеры радужки и зрачка. Для этого слева нажимаем на пункт «eyeColor». Переходим в правую колонку.

Iris color A — цвет внешнего края радужки.
Iris color B — цвет радужки по центру.
Iris color C — цвет внутреннего края радужки.
Iris opacity — чем ниже значение, тем больше прозрачность радужки.
Pupil color — цвет зрачка.
Pupil opacity — прозрачность зрачка.
Sclera color — цвет склеры.
Sclera opacity — прозрачность склеры.
Iris scale — размер радужки.
Pupil scale — размер зрачка.
Global scale — общий размер (зрачок + радужка).
Global opacity — общая прозрачность.

Добавляем свой рисунок глаза.

Для начала перейдём в редактор патчей. Если он не открыт, то нажимаем слева вверху «view» и «show/hide patch editor».

В редакторе патчей необходимо найти желтую иконку «eyeball_mat» и удалить её.
Переходим в левую нижнюю колонку и нажимаем на «eyeball_mat».
В правой колонке в параметре текстура нажимаем выбрать файл и загружаем свою картинку глаза.
Картинка должна быть на прозрачном фоне.

2. 3D Animated poster

Этот проект позволяет создать 3D объект, который будет появляться в ответ на какое либо изображение.

Например, Starbucks сделал такую маску к своим рождественским стаканчикам. Открываем этот проект нажав дважды левой кнопкой мышки.

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

Теперь заменим 3D объект.

Для начала в левой колонке сверху удаляем файл с названием «deleteMe», нажав по нему правой кнопкой мыши.
Затем папку с новым 3D объектом зажимаем левой кнопкой мыши и перетягиваем наверх в «dragHere», так чтобы вокруг него появилась синяя обводка и отпускаем.

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

3. Face, head, neck decoration.

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

4. World object

В этом проекте, опять же, такой же механизм, как и в предыдущих. Хотелось обратить внимание на интерактив. Здесь объект можно двигать в пространстве, зажимая его на экране пальцем. Чтобы проверить работу, в экране симуляции телефона наверху справа есть значок, открывающий меню. Выберите там «simulate touch».

Теперь можно водить по этому экрану мышкой и увидеть изменения.

5. Background.

Довольно интересный проект, здесь можно заменить фон. Смена картинки происходит так же, как в проекте с 3D объектом, реагирующем на плакат.

6. Color filter.

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

Предположем, что сделан пресет в LightRoom. На фото он лежал просто отлично. Но добавив его в программу и испытав на видео, стало понятно, что он слишком тёмный или слишком светлый.

Тогда можно использовать предложенные опции в данном проекте. В левой колонке нажмите на «colorFilter», а в правой измените параметры.

7. Makeup.

Любимый проект всех девочек. Учимся работать с макияжем. Рассмотрим интерфейс готового макияжа, какие параметры есть для изменения. Для этого в левой колонке выбираем «makeup».

Откроется панель со списком:

— Цвет подводки
— Прозрачность подводки
— Цвет теней для век
— Прозрачность теней для век
— Цвет помады
— Прозрачность помады
— Степень освещенности
— Ширина блеска
— Интенсивность блеска
— Степень рефлекса
— Освещение
— Насыщенность
— Цвет ресниц
— Длина ресниц
— Прозрачность ресниц

Все эти параметры можно будет регулировать по вашему усмотрению.

8. Face mask.

Последний вид готового проекта из предложенных разработчиками.

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

Есть несколько нюансов по рисованию картинки (это применимо и к макияжу). Открываем скаченную ранее папку «FaceAssets», переходим в «Textures» и в любой программе для рисования (procreate, photoshop и т.д.) открываем выделенные изображения.

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

Где искать 3D модели?

Есть 2 основных варианта поиска 3D объектов. Это библиотека Spark AR и стоковые сайты.

Библиотека программы полностью бесплатна, плюс множество объектов уже имеют свои текстуры. Ее можно найти в левом столбце снизу, где текстуры, маленькие кнопочки.

Как сохранять маску для Facebook?

Для того, чтобы сохранить проект, переходим во вкладку «file», и нажимаем «save». Если сразу экспортировать, то файл окажется пустым. Далее снова во вкладке файл нажимаем «export», выходит диалоговое окно, где видно, как файл сжимается под типы ПО телефонов и сколько он весит.

Если все отлично, то экспортируем файл. Должен сохранится вот такой файл. Как видно, для Instagram файл должен весить не более 4мб.

Что делать, если он оказался больше?

Во вкладке «view» нажимаем «show/hide asset summary». Диалоговое окно появится там же, где редактор патчей. Здесь можно увидеть сколько весит каждый объект и текстура после сжатия, смотреть надо 3 последнии колонки.

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

Как сделать иконку для маски?

Файл для иконки уже скачали в самом начале.

Как его использовать?

Внутри папки вы увидите три папки, в которых находятся файлы в зависимости от программы, где будет нарисована иконка.

Удобнее всего работать в photoshop или illustrator, так как там уже все разбито по слоям, необходимо лишь изменить их, нарисовать свое.

Правила создания иконки.

Квадратная форма Facebook очень строго относится ко всем своим правилам, поэтому необходимо им следовать.

1. Рисунок должен быть строго внутри розового круга, а лучше зелёного.
2. Если маска использует лицо, то нужно отобразить это в иконке.
3. Можно использовать своё лицо с маской.
4. Размер 200*200 пикселей, но этот файл уже в таком формате.
5. Формат png или jpeg.
6. Квадратная форма.

Что НЕЛЬЗЯ использовать:

1. Чужое лицо.
2. Градиенты принадлежащие Instagram, видимо авторские права.
3. Нельзя оставлять прозрачный фон.
4. Нельзя делать круг, овал, закруглённые края у иконки.
5. Если есть текст, то нельзя использовать ник аккаунта или название маски и слишком много текста.
6. Выходить за красные поля (не видно будет потом все равно).

Как загрузить маску в Facebook?

Для начала Instagram аккаунт надо перевести в бизнес профиль и привязать к бизнес странице в Facebook.

Затем переходим на сайт для загрузки эффектов. И нажимаем «publish an effect». Здесь же потом можно смотреть статистику по маскам. Здесь необходимо выбрать куда загружается эффект, выбираем «instagram». Ниже загружаем файл нашей маски, который до этого экспортировали. И выбираем имя маске, которое будет видно в самом Instagram.

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

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

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

Для этого сохраняем черновик, после этого появится внизу кнопка «view one instagram», копируем ссылку и открываем на телефоне, она сама предложит открыть в instagram эффект. После сохраняем и загружаем файл. И загружаем иконку. Далее можно выбрать дату публикации, либо опубликовать сразу после одобрения модераторами.

Ниже прописываем информацию о маске для модераторов. Как она работает, что использовали, почему такая категория эффекта.
Затем выбираем рекламирует ли наша маска бренд, например, как чашка Starbuck. И ознакамливаемся с политикой.
Если все готово, то нажимаем синюю кнопку «опубликовать».

Маска готова и ожидает публикации.

Как продвигать маску?

Есть несколько способов продвижения маски.

1.Чаще рассказывать о маске в stories, используя ссылку на «попробовать эффект». Для этого записываем stories с маской, наверху кликаем на значке ссылка, нажимаем «+эффект камеры», появляются все маски и выбираем ту, с которой записана stories.

2.Чаще напоминайте о масках в публикациях, используйте хэштеги. #инстаграммаски #сторисмаски #маски #сторизмаски #маскиинста #инстамаски #фильтринстаграм #пресетинстаграм #сторисфильтры #сторизфильтры #stories #maskstories #filter #maskforinstagram #effectstories

Так можно много придумать, но смысл понятен.

3. Делайте конкурсы на самое креативное использование, либо на создание маски и т.д.

1. Зайдите на сайт Spark AR и установите программу на свой компьютер.
2. Откройте ее и нажать «Create Project». В меню будет три области:

3. Давайте разберемся, что может сделать каждая кнопка. Предлагаем сначала прочитать наши определения, а потом просто поклацать самостоятельно.

4. Теперь попробуем пошагово создать Instagram-маску. Сначала добавляем «Face mesh». Для этого нажимаем «Add» в верхней панели, выбираем «3D Objects», а затем «Face mesh». На лице модели появится шахматная маска — это первый слой маски.

5. Нажмите «Face mesh» на левой панели и посмотрите на противоположную — теперь на ней можно настроить слои маски. Найдите строчку «Material» и нажмите на «+» возле нее. Маска станет белого цвета, он установлен по умолчанию.

6. Теперь перекрасим материал в другой цвет и сделаем его прозрачным. Для этого нужно выбрать его в левой панели. Рекомендую сразу правильно назвать этот материал, например «Plastic». Так же переименуйте и «Face mesh» — «Plastic».
Напомню, в левой панели выбираем составные элементы для маски или эффекта, в правой — настраиваем их. Ею нужно снова воспользоваться после того, как выбрали материал. На ней находим пункт «Color» и выбираем любимый цвет. Должно получиться примерно так:

7. Затем превращаем наш материал в полупрозрачный глянцевый пластик: ставим галочку напротив «Specular» (блик) и задаем ему значение 100%, а в «Blend Mode» выбираем режим «Screen».

8. Теперь на лицо наложена маска из полупрозрачного блестящего пластика. Можно добавить на маску еще и надписи под глаза. Для этого нужно создать текстуру: откройте Word/Блокнот/Google Doc и посередине листа напишите два слова на расстоянии толщины носа друг от друга. Примерно так:

9. Сделайте скриншот этого белого квадрата с текстом и сохраните как картинку — это наша первая текстура.
10. После этого по уже знакомому алгоритму нужно сделать еще один «Face mesh» на левой панели (в этот раз называем его «Text»). Снова добавляем этому «Face mesh» материал. Для этого нажмите кнопку «Material» и «+», затем в списке выберите «Create New». Должно получиться вот так:

11. Это первый материал, которому мы назначим текстуру, которую создали в пункте 9. Выберите слева материал «Text». Затем в правой панели в разделе «Shader» нажмите на drop down возле поля «Texture» и выберите «New Image Texture». Загрузите файл с текстурой.
Вверху правой панели в поле «Shader Type» выбираем «Flat». Теперь на правой панели в меню «Blend Mode» ставим для этого материала режим «Multiply». Должно получиться так:

12. Теперь зайдите в «Texture» на левой панели и назовите ее «Text», а затем в правой панели поставьте галочку в поле «No compression».

13. Теперь самое время выставить свет. Найдите на левой панели «Direct Light» и «Ambient Light» и сделайте «Intensity» на 100% (можно и меньше, как вам нравится). Также можно поиграться с цветом и эффектом освещения маски.

14. Выберите на левой панели «Direction Light», на правой нажмите на стрелочку возле надписи «Rotation» — внизу откроется меню патчей. Это более сложные настройки эффектов. Сейчас просто добавьте к патчу «Direction Light» еще два — «Loop Animation» и «Transition». Сделать это можно кнопкой «Add Patch» (нажмите на нее дважды — и патч появится в меню).
15. В поле «Start» в Transition задайте значение 360 для всех трех осей, а потом любой параметр в поле «Curve». Наконец, соедините появившиеся патчи в таком порядке (просто нажимайте на стрелочку на патче и соединяйте появившуюся ниточку со стрелочкой на втором):

16. Поздравляем, ваш первый эффект готов. Осталось сохранить его и загрузить в Instagram. Нажмите «Save» — файл будет в формате arproj.
17. После этого перейдите по ссылке и загрузите эффект с помощью пошаговой инструкции (в первом шаге укажите, что эффект нужно загрузить в Instagram). Перед загрузкой маски убедитесь, что ваш Instagram-аккаунт синхронизирован с аккаунтом в Facebook. Посмотреть это можно в настройках: Instagram — Account — Linked Accounts — Facebook.

18. В процессе нужно создать иконку эффекта. Для этого просто сделайте селфи с использованием своей маски при хорошем освещении. Или сделайте вручную, как прописано здесь.
19. Финальный шаг — запишите превью эффекта с помощью тестовой ссылки, которую получили во время пошаговой загрузки. Также можно сгенерировать ее в Spark AR, нажав на кнопку «Send to App».

20. Эффект отправлен на модерацию и скоро появится у вас в профиле.

• Наш гайд по созданию другой простой маски.
• Материалы от Spark AR — они проще, чем кажутся.
• Keynote c презентацией, которую мы читали на «Маскараде».

Нашли ошибку? Выделите ее и нажмите Ctrl+Enter

Заключение

Как видим делать маски в Инстаграме самому довольно просто. Сегодня мы рассмотрели только самый простой пример с искажением лица и рассказали какие программы нам понадобятся. Напишите в комментариях всё ли получилось, можете поделиться ссылками на ваши первые маски в нашем телеграм канале t.me/itpenru.
Если тема будет интересна в следующих статьях мы рассмотрим как создавать анимированные маски или Floating Particles. Эффект когда вокруг глаз или головы летают светящиеся частицы.

Евгений Загорский

IT специалист. Автор информационных статей на тему Андроид смартфонов и IOS смартфонов. Эксперт в области решения проблем с компьютерами и программами: установка, настройка, обзоры, советы по безопасности ваших устройств. В свободное время занимается дизайном и разработкой сайтов.