Узнайте, как создать маску с фигурами.
Маски в XD

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

Некоторые из сценариев, в которых вы можете использовать маскирование, это создание аватара для профиля или имитация использования темной темы, как показано ниже.

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

Хотите узнать, как создать, отредактировать или удалить эффект маски? выполните следующие действия.

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

  2. Выберите Объект > Маска с формой (MacOS) или щелкните правой кнопкой мыши выделенное содержимое и выберите Маска с формой (Windows). Часть изображения или рисунка, которая находится за пределами фигуры, маскируется.

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

  4. Чтобы отключить или удалить маску, выделите объект и щелкните правой кнопкой мыши (Windows) или Cmd + щелчок (Mac) и выберите Разгруппировать маску из контекстного меню.

Ограничения

  • Когда вы маскируете один векторный объект другим, объект в верхней части подборки действует как маска. 
  • Текст на фигурах, компонентах, группах или символах маскировать нельзя.
  • XD не поддерживает маски с альфа-каналом или маски с непрозрачностью. Здесь вы можете найти интересные обсуждения, к которым вы можете подключиться, а также проголосовать за эту функцию в UserVoice.

Примеры и образцы файлов

Вы знали, что когда вы запускаете проект с использованием замещающего графического элемента, например, круга вместо изображения профиля, вы можете создавать маски, перетаскивая ресурсы внутрь фигуры? 

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

Время просмотра: 1 минута.


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

Время просмотра: 1 мин. 2 сек.

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

Примеры и руководства также можно найти в сообществе поддержки XD.

Руководства

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

Время просмотра: 1 минута.