Как сделать маску в канве

Добавил пользователь Евгений Кузнецов
Обновлено: 10.09.2024

в примере сделана маска из изображений, как реализовать в одном canvas несколько масок?

1 ответ 1

Вы можете легко повторить пример из кода в разных (непересекающихся) частях canvas:

^^в последней строке укажите интересующий вас кусок canvas.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript html canvas или задайте свой вопрос.

1. Быстрый выбор объекта

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

Для того чтобы быстро перемещаться между объектами с помощью клавиш вверх и вниз, необходимо зажать COMMAND на MAC (или CTRL на ПК).

2. Поиск бесплатных шаблонов

3. Быстрый доступ к текстовому полю

Когда дизайнер слишком увлечен созданием шедевра, каждая секунда на счету. Для того чтобы быстро открыть окно ввода текста, можно нажать клавишу T на клавиатуре.

4. Свободное перемещение элемента

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

5. Группировка элементов

6. Быстрая отмена и повтор действия

В Canva есть кнопки для отмены и повтора действия, но чтобы ускорить работу, можно использовать сочетания клавиш:

отменить: COMMAND + Z (CTRL + Z),
повторить: COMMAND + SHIFT + Z (CTRL + SHIFT + Z).

7. Нестандартный шрифт

Если вы используете платную версию Canva, у вас есть возможность загружать собственные шрифты, но в бесплатной версии такой функции нет. Однако существует способ сделать текст более креативным с помощью различных элементов.

При использовании стандартных шрифтов вы можете добавить завитки (в разделе линий), чтобы придать тексту необычный вид.

8. Перемещение элементов с помощью клавиш со стрелками

Иногда дизайнеру приходится выполнять точные операции: например, передвинуть объект всего на несколько пикселей. Для этого можно использовать клавиши со стрелками. Они перемещают элемент ровно на 1 пиксель. Если зажать SHIFT и клавишу со стрелкой, объект переместится на 10 пикселей. (Примечание: это не работает с текстовыми полями).

9. Быстрое изменение масштаба

10. Использование рамок

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

11. Оптимизация для различных платформ

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

12. Преобразование текста в верхний или нижний регистр

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

13. Быстрая вставка рамки для текста

Чтобы отделить текст от фона, можно добавить рамку. Для этого нужно нажать OPTION + SHIFT + B или ALT + SHIFT + B.

Если нужно увеличить ее толщину, нажмите OPTION (ALT) + SHIFT + =, чтобы сделать границу более толстой. Или OPTION (ALT) + SHIFT - =, чтобы сделать ее тоньше.

14. Сохранение пропорций на изображениях

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

15. Создание тени для текста

16. Быстрые объекты

В сервисе предусмотрены сочетания клавиш, которые позволяют быстро создавать некоторые геометрические элементы. Например, нажмите R, чтобы создать прямоугольник, L — линию, C — круг.

Честно, готова приносить дары и жертвоприношения приложению Canva, потому что его можно смело отнести к пантеону инстаграмных богов. Canva позволяет буквально в два клика решить множество задач: сделать надпись, совместить фото, подогнать изображение под нужный соцсети размер. Да много чего сделать можно. Не буду жадничать – расскажу в этой статье, какими инструментами приложения пользуюсь и почему вам того же советую. =)

Возможности приложения Canva

Собственно, знакомьтесь! Это приложение Canva (Канва).

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

Сегодня сделаем разбор только дизайнов для ленты Инстаграма – все остальное будет работать по образу и подобию, уверена – разберетесь. Ну-с, поехали!

Итак, кликаем на выбор дизайнов для ленты Инстаграма. Тут у нас 2 варианта: выбрать пустой холст или же – подобрать подходящий шаблон.

Я выберу чистый холст и расскажу об основных примочках, которые облегчат вам как простой постинг в соцсетях, так и работу с рекламой.

Добавление фото

Кстати, чтобы передвинуть края фото, после его добавление в поле, кликните по нему два раза. Передвигайте на здоровье! =)

А кликнув по фото один раз, у вас появится возможность наложить фильтр и отрегулировать стандартные ползунки с яркостью-контрастностью.

Надписи

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

Подложки

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

Далее, щелкнув на этот значок, вы можете выбрать, на верхнем или нижнем слое будет тот или иной элемент.

Та-дам, наша подложка оказывается снизу.

Подложки под фото

Если вам нужно добиться единообразия плитки в Инстаграме, но идей нет от слова совсем, можно не изобретать велосипед, а просто помещать каждое фото на одинаковую подложку.

Проработав таким образом все фотографии своего бизнес-профиля, вы добьетесь какого-никакого единообразия, и серое вещество при этом закипать не будет.

Рамки

Тоже довольно-таки популярный, по крайней мере в моей работе, элемент. Найти рамки в Канве вы можете в разделе фигур:

Можно поместить в рамку все фото целиком или же – акцентировать внимание на вашей надписи.

С помощью стрелки, кстати, вы можете вращать элементы. Штука весьма полезная.

Иконки

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

Например, мне нужны цветы:

Растягиваем до нужного размера и смотрим еще одну крутую фишку. С помощью этой кнопки вы можете клонировать объект. Апп, и тигры у ног моих сели! =)

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

Что важно помнить при редактировании в приложении Canva

Хотелось бы дать несколько советов, которые лично мне упрощают работу.

Выберете для своего бизнес-профиля 1–2 шрифта, не более. Обязательно запомните их название (а лучше запишите) и используйте в редактировании только их. Нет ничего более раздражающего, чем разнобойные шрифты в постах, которые перечеркивают все ваши усилия по созданию красивой плитки.

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

Я сказала, что даю благословение на микс разных шаблонов в Канве. =) Но это опять же только при условии, что у вас хороший вкус. У меня вот вкус отсутствует, и скорее солнце взойдет на западе, чем я представлю в голове, как будут смотреться разношерстные шаблоны друг с другом. Так что в этом меня очень выручает другое приложение – UNUM. Благодаря ему можно разложить фотографии по плитке, чтобы посмотреть, как они будут выглядеть рядом, когда вы выложите их в ленту Инстаграма. Заодно сможете проследить, чтобы надписи на фото не обрезались. Удобно, в общем.

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

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

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

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

Что такое Canva

Canva – это онлайн-сервис для создания элементов графического дизайна, начиная с иллюстраций для соцсетей и заканчивая макетами для полиграфии. Основан в 2012 году в Австралии.

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

Разница между бесплатной и платной версиями Canva

В бесплатной версии ситуация обстоит следующим образом:

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

В платной версии возможностей, естественно, куда больше:

Для хранения дизайнов и загруженных файлов дается 100 Гб и более.
Можно пользоваться всеми шаблонами, а их не меньше 400 тысяч.
Можно загружать свои шрифты, а еще создавать собственную корпоративную цветовую палитру.
Предусмотрена служба поддержки.
Над одним дизайном могут одновременно работать несколько человек.

Суть в том, что в Canva есть два платных тарифа. Первый – это Pro стоимостью от 899 рублей в месяц. Этот вариант рассчитан на 5 человек максимум (в зависимости от численности вашей команды итоговая сумма может возрасти). Второй – для предприятий, по 2000 рублей на человека. Можно воспользоваться пробным 30-дневным периодом и ощутить разницу.

Преимущества программы

Canva, конечно же, имеет кучу достоинств, и вот некоторые из них:

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

Недостатки

Минусы Канвы касаются бесплатной версии:

Серьезные ограничения в плане шрифтов.
Невозможность изменения размера изображения.
Ограниченное количество стандартных шаблонов.

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

Как пользоваться сервисом Canva

В первую очередь нужно зарегистрироваться и войти в профиль. Тут можно также авторизоваться через аккаунты Google, Facebook или Apple.

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

Готовые шаблоны

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

Буду рассматривать примеры флаеров. Перейдя в соответствующий раздел, смотрю все доступные варианты. Кстати, они постоянно пополняются новыми образцами.

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

Обработка изображений

В Canva предусмотрена куча инструментов для работы с изображениями. Например, коллекция эффектов, которые нужно отдельно подключить, множество уже встроенных фильтров, настройки параметров яркости, насыщенности и так далее.

Работа с текстом

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

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

Работа со слоями

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

Регулировка прозрачности

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

Копирование стиля

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

Загрузка файлов

Однако стоит помнить о лимите памяти в бесплатном аккаунте (1 Гб). Временами рекомендую удалять файлы, которые в дальнейшем вам не пригодятся.

Вставка видео

На выбор доступны видео из встроенной коллекции, а также вставка своих файлов с компьютера. Если видео слишком длинное, то просто обрежьте его, используя встроенный инструмент.

Создание диаграмм

Интеграция с другими сервисами

Открытие доступа другим пользователям

Примеры использования Canva

А теперь рассмотрим пару примеров использования сервиса Canva. Добавлю немного разнообразия – в первом случае буду делать все с нуля, а во втором применю шаблон и буду его изменять.

Иллюстрация

После этого меня перебрасывает на новую вкладку с созданным мной образцом, абсолютно чистым. Мне надо поменять цвет фона – жму по рабочему полю, в результате станут доступны некоторые параметры. В левой верхней строке появится иконка для изменения цвета – жму по ней и начинаю искать оттенок. Я могу выбрать из того, что есть, настроить его самостоятельно в палитре или ввести код RGB.

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

Презентация

Заключение

Многие профессиональные дизайнеры с подозрением и даже презрением относятся к сервису Canva. А все потому, что он максимально прост, и освоить работу в нем может любой желающий. Ну да, работая в Канве, вы не станете профи, но зато поставленную задачу выполните в кратчайшие сроки и без заморочек.

Когда появилась возможность самостоятельно делать маски с помощью Spark AR, сразу появилось множество специалистов, специализирующихся в этом направлении. Но сегодня я расскажу, какие маски можно сделать совершенно самостоятельно без необходимости разбираться в 3d моделировании, фотошопе и прочих различных программах. От вас требуется только Spark AR и 10-15 минут свободного времени.

Маска фон

Будем делать такую маску:

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

Кликаем правой кнопкой на Canvas и находим там Rectangle. Добавляем сразу две штуки. Называем так же как и слои.

После этого нам необходимо добавить текстуру камеры и маски сегментации. Для этого находим Camera в левом меню, и ставим плюсы напротив Texture Extraction и Segmentation. После этого они сразу добавятся к вам в текстуры.

Главное проверьте, чтобы вкладка соответствовала названию слоя. User=User, Back=Back.

Сразу после этого вы увидите очертания силуэта. Для того, чтобы было четко видно пользователя, напротив самой текстуры выбираем камеру.

Маска фильтр

Здесь я не только расскажу, как делать фильтр, но и как можно менять несколько масок с помощью касания по экрану телефона. Самое сложное здесь, скорее всего, найти действительно интересные текстуры, а само создание маски не займет у вас более 5-ти минут.

Вот какие фильтры вышли у меня:

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

К нему мы добавляем Rectangle, кликая на canvas правой кнопкой мыши.

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

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

Добавляем для начала такие патчи: Screen Tap, Counter, Option Sender. Объединяем их стрелками, как показано на примере ниже.

В Counter напротив Maximum Count пишем количество ваших фильтров. В моем примере их два, поэтому я пишу эту цифру.

Для того, чтобы проверить работу маски, выберите Simulate Touch из выпадающего меню и кликните по экрану.

Маска тест

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

Мой формат для картинки: ширина — 288 пикселей, высота — 216 пикселей, расширение — 72 пикселя/дюйм.

Первым делом добавляем Face Tracker. Для этого кликните на Add Object, он будет первым в появившемся окне.

Правой кнопкой мыши кликаем на Face Tracker и добавляем Plane. Сразу переименовываем plane, для того, чтобы не запутаться.

Сразу создаем новый материал и называем его также, как и plane.

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

Теперь снова вернемся в plane и подправим размер вашей картинки.

Теперь необходимо добавить сами варианты. Для этого снова нажимаем на Face Tracker и добавляем новый Plane. Выставляем такие же размеры и создаем новый материал.

После этого сразу запустится анимация. Нам же нужно сделать так, чтобы анимация началась только после начала записи видео и остановилась на рандомной картинке спустя 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 и round. После этого выносим анимацию в patch editor и завершаем ею нашу цепочку.

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

Для начала создаем патч камеры:

На этом ваша маска готова ?

Маска с летающими объектами

Для примера я сделала такую маску:

Я настроила такие параметры:

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

Маска с надписью на лице

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

У меня вышла такая маска:

Первым делом необходимо скачать Face Assets. Именно с этими материалами мы и будем работать.

В скаченном архиве открываем папку Textures. В фотошоп подгружаем картинку faceFemenine. На лицо наносим надпись или картинку (главное, чтобы она была без фона).

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

Далее все еще проще: заходим в Spark AR, добавляем face tracker (c помощью кнопки Add Object), а потом добавляем face mesh.

Создаем материал с помощью плюса.

Переходим в созданный материал и в разделе текстуры выбираем вашу созданную надпись.

В принципе, маска уже готова, однако мы с вами еще немного отретушируем лицо и сделаем его более гладким. Для этого снова кликаем на Face Tracker и создаем новый Face Mesh.

Для нового face mesh создаем новый материал и переходим к нему во вкладку. В верхнем меню меняем тип на Retouching.

После этого остается только отрегулировать степень сглаживания лица и наслаждаться готовой маской.

Читайте также: