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

Здравствуйте!

Маска-предсказание — это AR-маска, которая предлагает пользователю весёлую игру: узнать будущее, «кем ты будешь» из любимого фильма или музыкальной группы и так далее. Такие маски размещаются в разделе «Игры».

Как создать маску-предсказание для сторис в Instagram в Spark AR

Подготовка к работе

Шаг 1. Скачайте и установите программу Spark AR, а также выполните лёгкую ретушь лица. Перейдите по ссылке и выполните шаги с 1 по 17, затем вернитесь к этому руководству.

Шаг 2. Подготовьте изображения с предсказаниями. Для этого подойдёт любая графическая программа; в примере используется Adobe Photoshop.

Создание изображений

Шаг 3. Выбор изображений для предсказаний зависит от ваших целей. Можно скачать готовые картинки из интернета или создать их самостоятельно.

В меню «Файл» выберите «Создать». В открывшемся окне задайте размер 12 × 7 см и разрешение 72 пикселя/дюйм. При необходимости сразу измените цвет заливки фона — в примере он чёрный.

Шаг 4. Получилось чёрное изображение. Чтобы добавить текст вопроса «Почему нет клиентов?», выберите инструмент «Текст» (клавиша «Т»). Кликните по картинке, чтобы появился текстовый слой.

Шаг 5. Замените текст на «ПОЧЕМУ НЕТ КЛИЕНТОВ?» (заглавными буквами) и перейдите в настройки шрифта. Выберите понравившийся стиль, при необходимости измените цвет надписи.

Шаг 6. Выровняйте текст по центру.

Шаг 7. Сохраните готовую картинку: «Файл» → «Сохранить как…».

Шаг 8. Назовите файл «Картинка 1» и убедитесь, что выбран формат JPEG.

Шаг 9. Создайте вторую картинку. Не нужно открывать новый файл — достаточно заменить текст на «Креативы нужно докрутить». Отрегулируйте размер надписи и сохраните файл под именем «Картинка 2».

Шаг 10. По аналогии создайте и сохраните ещё восемь изображений с текстами: «Нужно больше трафика», «Продажники сливают лиды», «Не сезон…», «Может скидочку сделать?», «У конкурентов цены ниже», «Кризис, сами понимаете..», «Доллар вырос, рубль упал», «В следующем месяце будут!».

Настройка проекта в Spark AR

Шаг 11. Откройте проект в Spark AR. Выделите «faceTracker0», нажмите «Add» и добавьте «Plane».

Шаг 12. Переименуйте «Plane» в «Вопрос» и добавьте «Materials».

Шаг 13. В панели «Assets» появится «material0» — переименуйте её в «Вопрос». Измените «Shader Type» на «Flat» и в разделе «Texture» выберите «New Texture».

Шаг 14. Найдите на компьютере «Картинку 1» с вопросом «ПОЧЕМУ НЕТ КЛИЕНТОВ?» и загрузите её.

Шаг 15. Выделите объект «Вопрос» в панели «Scene». В параметрах расположения измените значение «Position y» на 0,15, а «Scale x» — на 1,8.

Шаг 16. Добавьте ещё один «Plane» через «faceTracker0» → «Add» и назовите его «Ответ».

Шаг 17. Задайте те же значения положения и масштаба: «Position y» — 0,15, «Scale x» — 1,8. Добавьте новый материал.

Шаг 18. Переименуйте новый материал в «Ответ», выберите «Shader Type» — «Flat» и «Texture» — «New Animation Sequence».

Шаг 19. В панели «Assets» появится раздел «Animation Sequences». Переименуйте его в «Ответы». Включите параметры «Loop» и «Randomize», затем создайте «New Image Texture».

Шаг 20. Выделите все изображения с ответами (кроме картинки с вопросом) и нажмите «Open».

Шаг 21. Если на демонстрационном экране началась быстрая смена изображений — всё сделано верно.

Шаг 22. Чтобы приостановить смену кадров, нажмите кнопку паузы. Выделите объект «Вопрос» и сделайте видимым его патч, кликнув стрелку возле параметра «Visible». Откроется «Patch Editor» — здесь будет происходить связка вопроса и ответов.

Шаг 23. Повторите те же действия для объекта «Ответ».

Шаг 24. В «Patch Editor» кликните на свободное место, введите «Screen Tap» и добавьте патч.

Шаг 25. Добавьте патч «Switch».

Шаг 26. Добавьте патч «Not».

Шаг 27. Расположите патчи в одну строку и соедините выходы, как показано на рисунке.

Шаг 28. Добавьте патч «Runtime».

Шаг 29. Добавьте ещё пять патчей: «Offset», «Less Than», «Loop Animation», «Random», «Random» и «Round».

Шаг 30. Соедините патчи точно по схеме на изображении.

Шаг 31. Выделите «Ответы» и сделайте видимым патч анимированных ответов (стрелка возле «Current Frame»). В «Patch Editor» появится жёлтый объект «Ответы».

Шаг 32. Переместите «Ответы» в конец схемы и соедините с патчем «Round». В патче «Less Than» измените значение «Second Input» на 3–5 (время в секундах до появления ответа). В «Loop Animation» установите «Duration» 0,05. В патче «Random» задайте «End Range» равным количеству картинок с ответами — в примере 9.

Шаг 33. Проверьте работу маски на смартфоне. При наличии ошибок вернитесь к проверке соединений в «Patch Editor».

Шаг 34. Если всё работает корректно, перейдите в «Upload and Export». Зелёные галочки подтверждают готовность маски к публикации. Экспортируйте файл на компьютер кнопкой «Export file» или отправьте сразу через «Upload» в Spark AR Hub.

Загрузка маски в Instagram

Шаг 35. Вы попадёте на страницу загрузки маски в Spark AR Hub. Убедитесь, что аккаунт Facebook привязан к странице Instagram. Укажите название маски и загрузите ранее сохранённый файл.

Шаг 36. Заполните поля «Платформа» и «Владелец».

Шаг 38. В разделе «Значок» загрузите изображение размером 200 × 200 пикселей (допускается больший размер). Лучше подготовить иконку самостоятельно.

Шаг 39. Выберите дату публикации «Как можно скорее» и местоположение «Везде».

Шаг 40. В поле «Инструкции для специалиста по проверке» кратко опишите принцип работы маски. Загрузите «Видео с обзором».

Шаг 41. Заполните все пункты и сохраните данные — система выдаст ссылку для тестирования. Откройте ссылку, запишите видео, полностью демонстрирующее работу маски.

Шаг 42. Прикрепите ролик в раздел «Видео с обзором» и отправьте маску на модерацию.

Готово! Маска ушла на проверку специалистам! ✨

Заключение

Пользователи Facebook и Instagram активно развлекаются AR-играми. Среднестатистический пользователь хотя бы раз попробует маску-предсказание из интереса. Тематические маски-предсказания помогают авторам увеличивать охваты и привлекать потенциальных клиентов. Для тех, кто создаёт маски, это отличный способ монетизации в Instagram.

До новых встреч!