Курс по созданию масок в инстаграм

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

Маски сейчас — не только баловство и «так, для прикола», это еще и инструмент, помогающий развивать бизнес. При правильном подходе, разумеется.

Итак, чем бизнесу поможет маска? Например, формирует у пользователей запоминаемость бренда, дает дополнительный виральный охват, привлекает новых подписчиков и, на самом деле, много чего еще. Факт еще вот в чем: пользователи реагируют на маски активно. Так почему бы не задействовать для своего бизнеса еще один инструмент, который может дать вам лояльную заинтересованную аудиторию? Тем более, что создать простенькую маску реально своими руками.

Нас уже несколько раз просили провести мастер-класс по созданию масок. И мы подготовили его!

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

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

По традиции акцентируем внимание: мастер-класс рассчитан на новичков – в записи показываем и рассказываем все на очень простых примерах, которые не требуют от вас навыков дизайнера и разработчика.

Научитесь создавать собственные авторские маски – будьте в тренде и привлекайте к своему бизнесу внимание подписчиков!

1,5 часа с практикующим SMM-экспертом

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

Не просто теория, а живая практика

Буквально 20-25 минут теории, остальной час отведен практике – смотрим весь процесс разработки маски от и до.

Демонстрация экрана

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

Программа мастер-класса:

№1. Маски в Инстаграм и их бешеная популярность: в чем смысл?

Спикер: Ольга Анурьева, специалист SMM-отдела Сервиса 1PS

• Зачем нужны маски и какой от них толк для бизнеса
• Что понадобится для создания маски: разбор программы для работы
• Подводные камни и особенности разработки масок для Инстаграма

№2. Создание маски своими руками – более чем реально

Спикер: Ольга Анурьева, специалист SMM-отдела Сервиса 1PS

• Приложение и его интерфейс
• Пошаговая инструкция по работе

Бесплатный фрагмент мастер-класса

На превью Ольга (автор и преподаватель данного занятия) расскажет вам о том, зачем нужны маски и как они помогают при продвижении бизнеса в Instagram.

Рассказываем все понятным простым языком и подкрепляем слова реальными примерами. Никаких сложных действий не будет.
А также не будет никакой надоедливой рекламы: учим вас, а не пиарим свои услуги.

Что именно будет?

Факты, инструкции, рекомендации и демонстрация работы прямо на экране. Все на конкретных примерах

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

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

Курс по созданию масок в инстаграм

Специально для создателей масок недавно был создан официальный форум, который называется Spark AR Forum. Здесь все зарегистрированные пользователи могут задать вопросы, поделиться проблемами, и найти решение своих сложностей….

Как вы, наверное, знаете, примерно с октября 2019 года руководством Facebook было принято ограничение относительно использования эффектов, изменяющих лицо. Многие новые маски Фейсбук и Инстаграм, в которых имелись…

Если вы научились делать собственные маски для странички в Инстаграм, то еще не факт, что готовый эффект промодерируют, и он украсит ваш аккаунт. И тогда весь ваш труд…

Мы публиковали в наших подборках очаровательные маски Инстаграм с надписями, а также маски с надписью Moments. Сейчас такие фильтры в тренде и пользуются большой популярностью среди блогеров. Хотите…

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

13 августа 2019 года Facebook опубликовал информацию о том, что теперь абсолютно все пользователи смогут пользоваться программой Spark AR Studio, самостоятельно создавать маски для Instagram, публиковать эффекты. Теперь…

Предлагаем вам еще один весьма подробный видеоурок, в котором автор рассказывает не только о самой программе Spark AR Studio, но и делится ценными советами по созданию различных 2-D…

После того, как ваша маска полностью готова и доработана, вы должны привязать ее к своему аккаунту в Instagram. Чтобы добавить маску в Инстаграм, следует выполнить несколько простых действий,…

Другой интересный эффект, который нравится многим пользователям Instagram, — эффект металла. Сделать его не так уж сложно, если вы хоть немного разбираетесь в программе работы с масками Spark…

Как создать маску в Instagram

AR-маски, популярные сейчас в Instagram, на самом деле появились намного раньше. В 2015 году их увидели пользователи приложения MSQRD, позже они пришли в Snapchat. За пару лет маски стали использоваться гораздо шире, чем просто для развлечения: маски активно используются в рекламе, блогеры с их помощью продвигают аккаунты.

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

После того как Instagram открыл доступ к созданию масок всем пользователям, сделать их может любой — и даже специальных технических знаний не потребуется. Совместно с дизайнером GeekBrains Германом Шаловым мы дадим базовую инструкцию, как сделать маску в инстаграме самому.

Скачайте программу Spark AR Studio

.

Соедините Spark AR на десктопе и смартфоне

Запустите Spark AR Studio. Вас встретит набор предустановленных эффектов и масок — на их примере можно посмотреть некоторые принципы работы. Но изменять пресеты нужно аккуратно: обычно это рушит установленные зависимости объектов, и маска может заработать неверно.

Программа похожа на Photoshop и другие проекты Adobe, поэтому ориентироваться в ней несложно. По центру — окно Viewport, рабочая область, где будет отображаться маска и все манипуляции с ней.

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

Чтобы протестировать маску перед загрузкой в Instagram, нужно подключиться к Spark AR Hub — это творческая среда от Facebook для авторов масок. Для этого создайте публичную ссылку для тестирования или соедините Spark AR с подключенным к компьютеру смартфоном:

• присоедините смартфон USB-кабелем к компьютеру;
• нажмите Test on device и выберите, где хотите увидеть маску — Facebook или Instagram. Если выберете второй вариант, получите ссылку, которой можно поделиться или отправить на нужный гаджет. Загружать маски на обе площадки пока нельзя;

• откройте приложение Spark AR на смартфоне.

Создайте трекер лица в Photoshop или загрузите готовый

Если готовы подготовить ее сами, переместитесь в Photoshop или Figma. Дальше порядок действий такой:

• Скачайте и откройте папку Textures из инструкции для разработчиков. Выберите один из файлов — faceFeminine.jpg для женских лиц и faceMasculine.jpg для мужских — и откройте в программе.
• Новым слоем поверх схемы лица с помощью Transform добавьте нужные эффекты и рисунки — они должны идти поверх слоя с лицом, чтобы результат был виден сразу. Все, что выходит за границы схемы лица, не будет отображаться на человеке.
• Выключите или удалите слой с лицом, сохраните результат в PNG — только этот формат поддерживает прозрачность. Важно сохранить только эффект, без схемы лица.

Протестируйте маску

Нажмите кнопку Test on device, о которой мы говорили в первом пункте инструкции, и подождите, пока программа передаст данные на смартфон. Когда появится маска, протестируйте ее в разных положениях лица: улыбнитесь, покрутите головой влево-вправо, вверх-вниз. Проверьте маску при разном освещении и фонах: если вы делали ретуширование лица, оцените, как эффект работает при недостаточном свете.

Если маска слетает при движении, внесите изменения и протестируйте еще раз. Затем переходите к экспорту.

Экспортируйте маску

Здесь все просто: в левом нижнем углу экрана найдите кнопку Export и выберите папку, в которую нужно сохранить маску. Если маска весит больше, чем нужно (допускается 10 Мб, но желательно 2 Мб и меньше), программа предупредит об этом перед экспортом. Обратите внимание, что в Instagram нужно выгрузить именно этот файл, а не файл проекта.

Как добавить маску в Инстаграм

Заключительный шаг: перейдите в Spark AR Hub и загрузите маску, следуя инструкции. Кроме самой маски, нужна еще иконка для нее — требования к иконке есть на сайте Spark AR.

Если хотите официально выложить маску в Facebook или Instagram, нужно записать демо-видео. В ролике расскажите или покажите, как работает эффект, и уложитесь в 15 секунд. Видео должно быть качественным — оно будет отображаться чем-то вроде обложки раздела с масками в вашем аккаунте.

Дождитесь, пока модераторы проверят маску. После этого она появится во вкладке «Галерея эффектов» в окне записи stories в Instagram.

Пока ждете проверку, маской легко делиться с кем угодно через ссылку. Ее можно открыть 200 раз, после чего придется создать новую ссылку. Там же, в AR Hub, можно на 60 минут закрепить маску в вашем инстаграм-аккаунте.

Как сделать маску в Инстаграме? Совсем несложно! — успех во многом зависит от того, какую текстуру для маски вы предварительно подготовили. На факультете графического дизайна GeekUniversity вы научитесь создавать не только качественные текстуры для масок, но и множество других вещей — от простейших иллюстраций до масштабных фирменных стилей. Присоединяйтесь!

Экспресс-курс создания масок для Instagram

Не так давно на одном из наших проектов накануне релиза появилось несколько свободных дней (потому что Apple review team не могла понять, что для тестирования приложения с функцией чата недостаточно одного телефона/аккаунта. Хинт: не ленитесь снимать поясняющие видео — проверено, помогает!).

Как раз в это же время я готовил корпоративные поздравительные маски для Instagram по случаю гендерных праздников (23 февраля и 8 марта) и решил, что дополнительная маска будет не лишней и для проекта нашего заказчика.

Сейчас уже, наверное, никто не будет отрицать важность активного использования соцсетей в качестве канала продвижения своего продукта или услуг. Поэтому большинство крупных и не очень компаний на Западе, да и в России, давно уже используют площадки Facebook/VK и Instagram в этих целях.

Маски для Instagram/Facebook, как правило, служат просто для развлечения пользователей, но нередко используются и в маркетинговых целях. Особенно важно это может быть в моменты первоначального выхода на рынок или представления новых версий продукта/услуги. И однозначно заслуживает внимания, когда успешность проекта зависит от активности обычных пользователей.

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

В интернете достаточно много обучающих видео, описывающих процесс создания масок (точнее, эффектов в терминологии Facebook), но на мой взгляд недостаточно материалов описывающих все аспекты как создания, так и распространения масок/эффектов. Поэтому я и решил подготовить эту обзорную статью. Её целевая аудитория достаточно широка: менеджеры проектов, дизайнеры, разработчики.

По этой причине я постарался изложить материал на базовом уровне, не вдаваясь особо в детали.

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

1. Управление превью

Выбор персоны/лица для превью. Здесь же при наличии подключённой веб-камеры появляется опция для неё — студия не поддерживает «горячее» подключение для USB-устройств, поэтому если камера не была подключена изначально, нужно перезапустить студию.

Пуск/Пауза — очень важная кнопка. Все манипуляции с размещением объектов в пространстве нужно производить в режиме Паузы.

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

2. Перемещение объектов в пространстве

Перемещение объекта или группы объектов по осям X/Y/Z.

Вращение объекта вокруг осей X/Y/Z.

Изменение размера объекта по осям X/Y/Z.

3. Свойства объекта

5. Тестирование и дистрибуция

Запуск эффекта на подключённом устройстве (требуется установка приложения-клиента).

Подготовка и загрузка дистрибутива эффекта в Spark AR Hub.

Начинать новый проект рекомендую с одного из предлагаемых студией шаблонов:

• Eye Color — изменение цвета глаз.
• 3D Animated Poster — эффект с элементом дополненной реальности, для «оживления» постеров.
• Face Decoration — пример с добавлением очков (3D-объект).
• Background — замена фона.
• Makeup — макияж.
• World Object — добавление к изображению с камеры 3D-объекта, не привязанного к персоне.
• Neck Decoration — пример с добавлением галстука-бабочки.
• Color Filter — наложение цветовых фильтров на изображение с камеры.
• Head Decoration — пример с добавлением кепки-козырька.
• Face Mask — пример с «нарисованной» на лице маской (ака аквагрим).

Рассмотрим шаблонную структуру сцены на примере классической лицевой маски:

Device ->
Camera ->
Focal Distance* ->
faceTracker0 -> // Лицо персоны #0
faceMesh0 // Маска

*До этого уровня включительно все объекты — «синглтоны»

С уровня “faceTracker” располагаются объекты, привязанные к изображению человека (или людей), попадающих в кадр. Максимум можно отслеживать пять лиц (задаётся в настройках проекта).

Объекты дополненной реальности можно привязывать к следующим точкам на голове/лице:

• Левая/правая щека (Left/Right Cheek).
• Подбородок (Chin).
• Левый/правый глаз (Left/Right Eyeball).
• Веко левого/правого глаза (Left/Right Eyelid).
• Левая/правая бровь (Left/Right Eyebrow).
• Лоб (Forehead).
• Нос (Nose).

Также возможно увязать логику отображения объектов с мимикой лица:

• Моргание (Blink).
• Поднятие бровей (Eyebrows Raised).
• Опускание бровей (Eyebrows Lowered).
• Счастливое лицо (Happy Face).
• Кивок (Head Nod).
• Поворот головы (Head Rotation).
• Качание головой (Head Shake).
• Поцелуй (Kissing Face — с этим жестом нужен особый навык и выразительность).
• Закрытие левого/правого глаза (Left/Right Eye Closed).
• Открытие рта (Mouth Open, можно задать условную величину — насколько широко должен быть открыт рот).
• Улыбка (Smile).
• Удивлённое лицо (Surprised Face).

В основном все шаблоны и официальные обучающие статьи используют этот подход.

Однако практически все задачи могут быть решены в коде. Язык программирования — наверное, не будет большим сюрпризом — JavaScript. Встроенного редактора нет, используется любой внешний (VS Code, Webstorm и прочие). Есть модуль поддержки локализации, возможность добавлять в интерфейс нативные элементы управления (picker и slider).

• Нельзя создавать новые объекты, оперируем только теми, которые были созданы на этапе разработки. .
• Простейшие ошибки можно отладить во время разработки (в студии есть консоль).

• PNG
• JPEG
• SVG

• FBX 2014/2015 (binary and ASCII versions)
• gITF 2 (binary and text versions)
• COLLADA / DAE
• OBJ
• DAE