Узнайте, как создать маску с фигурами.
Узнайте, как создать маску с фигурами.
Используйте маски, чтобы обрезать части изображений или объектов и создавать результаты с фокусом на определенных элементах в ваших проектах.
Некоторые из сценариев, в которых вы можете использовать маскирование, это создание аватара для профиля или имитация использования темной темы, как показано ниже.
Хотите узнать, как создать, отредактировать или удалить эффект маски? выполните следующие действия.
Нарисуйте фигуру, которую вы хотите использовать в качестве маски, и поместите ее на ту часть изображения, которую хотите сохранить. Выберите изображение и форму.
Выберите Объект > Маска с формой (MacOS) или щелкните правой кнопкой мыши выделенное содержимое и выберите Маска с формой (Windows). Часть изображения или рисунка, которая находится за пределами фигуры, маскируется.
Чтобы отредактировать содержимое в пределах формы маски, дважды щелкните замаскированное содержимое.
Чтобы отключить или удалить маску, выделите объект и щелкните правой кнопкой мыши (Windows) или Cmd + щелчок (Mac) и выберите Разгруппировать маску из контекстного меню.
- Когда вы маскируете один векторный объект другим, объект в верхней части подборки действует как маска.
- Текст на фигурах, компонентах, группах или символах маскировать нельзя.
- XD не поддерживает маски с альфа-каналом или маски с непрозрачностью. Здесь вы можете найти интересные обсуждения, к которым вы можете подключиться, а также проголосовать за эту функцию в UserVoice.
Вы знали, что когда вы запускаете проект с использованием замещающего графического элемента, например, круга вместо изображения профиля, вы можете создавать маски, перетаскивая ресурсы внутрь фигуры?
Чтобы узнать больше о перетаскивании ресурсов внутрь фигуры или использовании существующей фигуры в качестве маски, просмотрите руководство ниже или скачайте образцы файлов, чтобы самостоятельно их попробовать.
Время просмотра: 1 минута.
Анимация счетчика чисел используется для отображения чисел в интересной и привлекательной форме. Хотите узнать, как использовать маскировку для создания подвижного табло? Посмотрите это видео и скачайте образцы файлов, чтобы попробовать их самостоятельно.
Время просмотра: 1 мин. 2 сек.
Использование маскировки для создания анимированного счетчика чисел
Примеры и руководства также можно найти в сообществе поддержки XD.
Используйте маски, чтобы поместить изображение внутрь пользовательской формы и вырезать части изображения, которые вы хотите спрятать. Посмотрите это руководство о том, как работать с изображениями и маскированием в XD.
Время просмотра: 1 минута.
youtube.com/embed/sNSulh2kFoI?rel=0&enablejsapi=1&enablejsapi=1″ webkitallowfullscreen=»» mozallowfullscreen=»» allowfullscreen=»»> Связанные материалы
- Выделение, изменение размера и поворот объектов
- Инструменты для рисования и работы с текстом
Вход в учетную запись
Войти
Управление учетной записью
Рисование фигур в Adobe XD
Хотите использовать инструменты построения фигур для создания значка или дизайнерского ресурса? Вы обратились по адресу!
Создавать изображения в XD легко благодаря множеству инструментов рисования, доступных на панели инструментов. Вы можете быстро создавать простые значки или графические объекты с помощью любого из доступных инструментов построения фигур либо использовать расширенный инструмент «Перо» для создания сложных фигур или объектов.
Ознакомьтесь с нижеприведенной информацией, чтобы изучить безграничные возможности использования инструментов построения фигур для создания ваших дизайнерских ресурсов!
Ознакомьтесь с описанными ниже понятиями в XD.
- Основные сведения о рабочей среде.
- Настройка монтажных областей в XD.
Контур | Фигура состоит из нескольких отрезков линий, называемых контурами. Простой контур состоит из двух опорных точек, которые работают как булавки, удерживающие провод на месте. |
|---|---|
Опорные точки | Начальная и конечная точки отрезка линии отмечены опорными точками. |
Количество углов | Число сторон многоугольника. |
Радиус скругления | Радиус скругления визуализирует закругленные углы фигур. |
Ограничительная рамка | Ограничительная рамка — это прямоугольная рамка вокруг изображения, фигуры или текста, которую можно перемещать путем перетаскивания, трансформировать, поворачивать или масштабировать. |
Опорные точки используются для управления длиной и изгибом контура. Маркер направления на опорной точке определяет направление контура.
Все инструменты рисования, включая инструменты для создания фигур, доступны на панели инструментов в режиме Дизайн. Параметры каждого инструмента доступны в инспекторе свойств в правой части окна.
Панель инструментов в Adobe XD |
Инструмент «Прямоугольник» (R) отображает прямоугольник, прямоугольник со скругленными углами, квадрат или произвольную фигуру. |
|
|---|---|---|
| <Вставить изображение> Инструмент «Линия» (L) |
Как придать прямоугольнику скругленные углы?
Вы можете дополнительно модифицировать прямоугольник, добавив скругленные стороны к одному или ко всем его углам. Для этого необходимо изменить параметр Радиус скругления.
Инструмент «Эллипс» используется для рисования кругов и эллипсов.
Выберите инструмент Эллипс () на панели инструментов. Удерживайте нажатой клавишу Shift во время перетаскивания, чтобы фигура имела форму круга. | Рисование эллипса Перетащите курсор мыши вправо. Обратите внимание на сведения о размещении объекта, отображаемые в полях Ширина и Высота, а также Ось X и Ось Y в инспекторе свойств. |
Инструмент «Многоугольник» позволяет создавать ряд новых фигур, таких как треугольники, ромбы, пятиугольники, звезды и фигуры в форме сердца.
Изменение количества углов и радиуса
Создание фигур в форме звезды и сердца
Требуется добавить популярные фигуры в свой дизайн? Вы можете добавить в свой дизайн пользовательские фигуры в форме звезды и сердца, не создавая их с нуля.
(Звезда) | (Сердце) |
|
|
В Adobe XD вы можете выполнять быстрое редактирование фигур с помощью единого средства — инструмента Выбор.
В этом разделе мы научимся создавать реплики с помощью инструмента «Эллипс» (или любой другой фигуры, которая вам нравится).
«Adobe XD имеет мощный набор инструментов рисования для создания набора значков, необходимых для вашей системы дизайна», — отмечает Дани Бомонт (Dani Beaumont), главный менеджер продукта, XD.
Чтобы узнать больше о создании собственного набора значков с нуля и использовании существующих библиотек значков, просмотрите это 4-минутное видео.
Еще одно руководство и загружаемые файлы примеров приведены в разделе Создание значков с помощью простых фигур.
Вы уже знаете, как создавать набор значков в XD. Ниже вы найдете еще несколько полезных советов и рекомендаций.
- Вы можете выполнить наклон прямоугольной фигуры по умолчанию, преобразовав ее в контур. Выберите две опорные точки сверху, перетаскивая курсор мыши по точкам или используя клавишу Shift. Перетащите одну из опорных точек влево или вправо, удерживая ее на одной линии с исходным положением опорных точек.
- При рисовании фигур удерживайте нажатой клавишу Option (Mac) либо Alt (Windows), чтобы нарисовать фигуру из центра.
Выберите две опорные точки сверху, перетаскивая курсор мыши по точкам или используя клавишу Shift. Перетащите одну из опорных точек влево или вправо, удерживая ее на одной линии с исходным положением опорных точек.Дополнительные советы по работе с инструментами рисования вы можете получить у @Elainecchao, менеджера продукта XD в Twitter.
Мы научили вас основам создания значков с помощью инструментов для создания фигур в XD. Если вы хотите дополнительно изучить возможности использования фигур, узнайте, как комбинировать простые фигуры для создания уникальных геометрических узоров.
Хотя в XD есть все инструменты рисования для создания векторных иллюстраций, вы также можете воспользоваться преимуществами более широкого набора инструментов рисования в Illustrator.Ознакомьтесь с нижеприведенной информацией, чтобы узнать, как можно переносить ресурсы из Illustrator в XD.
Если вы хотите задать вопрос или поделиться интересной идеей, вступайте в сообщество Adobe XD. Мы будем рады услышать ваши идеи и увидеть ваши работы.
Вход в учетную запись
Войти
Управление учетной записью
Работа с изображениями в Adobe XD. Edition
Adobe Creative Cloud All-in-One For Dummies, 2-е издание
Explore Book Купить на Amazon
После того как вы импортировали изображения в Adobe XD, у вас нет достаточного контроля над редактированием, но вы можете изменить размер и поворачивайте изображения так же, как любую другую форму.Вы также можете легко скруглить углы импортированного изображения с помощью угловых виджетов.
Нажмите и перетащите угловой виджет, чтобы скруглить края изображения.
Маскирование изображений
Определив замкнутую форму с помощью инструмента формы или инструмента «Перо», вы можете определить, что станет маской.
Маска позволяет придать изображению произвольную форму. Он также предлагает вам возможность обрезать части изображения, которые вы не хотите видеть. Выполните следующие шаги, чтобы создать маску:- Импорт изображения на монтажную область.
- Создайте фигуру и размер и поместите ее поверх изображения. Размещение над изображением определяет, какая часть изображения будет отображаться.
Поместите фигуру на изображение, чтобы определить, какую часть изображения вы хотите отобразить.
- С помощью инструмента «Выбор» выберите фигуру и изображение. Важно, чтобы форма была поверх изображения; если это не так, выберите «Объект» → «Упорядочить» → «На передний план».
- Выбрав оба объекта, выберите «Объект» → «Маска с формой». Теперь фигура содержит изображение.
Изображение, замаскированное фигурой.
Если вы хотите отредактировать положение фигуры на изображении, просто дважды щелкните маскируемый объект с помощью инструмента «Выбор».
Когда вы закончите изменять положение изображения и формы, щелкните в любом другом месте монтажной области.
Использование масок
Вы можете замаскировать любой объект(ы) с помощью формы. Возможно, у вас есть несколько элементов, которые вы хотите объединить в круглую форму, или вы хотите обрезать серию повторяющихся изображений. Обе эти задачи можно выполнить, выполнив следующие действия:- После создания изображения добавьте фигуру вверху или переместите фигуру, которую вы хотите замаскировать, на передний план, используя «Объект» → «Расстановка» → «На передний план».
- Выберите все объекты, которые должны быть замаскированы, в дополнение к самому верхнему объекту, который является маской, и выберите «Объект » → «Маска с формой».
Об этой статье
Эта статья взята из книги:
- Adobe Creative Cloud All-in-One для чайников, 2-е издание,
Об авторах книги:
Дженнифер Смит — эксперт по веб-технологиям автор нескольких книг, в том числе Photoshop CS6 Digital Classroom. Кристофер Смит — президент Американского института графики и автор более десяти книг по программному обеспечению Adobe. Фред Герантаби — интерактивный дизайнер, веб-разработчик и автор, удостоенный премии «Эмми».
Дженнифер Смит — эксперт в области веб-технологий и автор нескольких книг, в том числе Photoshop CS6 Digital Classroom. Кристофер Смит — президент Американского института графики и автор более десяти книг по программному обеспечению Adobe. Фред Герантаби — интерактивный дизайнер, веб-разработчик и автор, удостоенный премии «Эмми».
Этот артикул находится в категории:
- Общие продукты Adobe ,
Как быстро добавить изображения в Adobe XD
В этом уроке мы узнаем, как быстро добавить несколько изображений в Adobe Experience Design CC (Adobe XD).
1. Создайте новый документ, выбрав iPhone 6 на начальном экране .
2. Выберите инструмент Rectangle Tool и удерживайте Shift , чтобы нарисовать квадрат, который заполнит всю ширину монтажной области. Кроме того, вы можете ввести ширину и высоту 375 пикселей в поле 9.0091 Инспектор свойств справа с выбранной формой.
3. Задайте цвет заливки квадрата по вашему выбору.
4. Ширина монтажной области составляет 375 пикселей, и для отображения дополнительных изображений ниже в 3 столбцах мы должны разделить ширину монтажной области на 3 (375/3 = 125).
5. Выберите инструмент Rectangle Tool и, удерживая Shift , создайте новый квадрат и задайте этой форме ширину и высоту 125 пикселей. Расположите эту фигуру прямо под большим квадратом и выровняйте по левому краю монтажной области.
6. Выберите меньший квадрат и нажмите кнопку Повторить сетку в Инспекторе свойств справа.
7. Заметили зеленую рамку вокруг содержимого? Выберите правый ползунок и перетащите его вправо, чтобы повторить квадрат, и создайте три заполнителя изображения.
8. При использовании повторяющейся сетки Tool Adobe XD автоматически создает отступ (промежуток) между различными повторяющимися объектами. Выбрав и щелкнув внутри этого пространства (промежутка между объектами), вы увидите, что появляются розовые направляющие, которые позволяют вам регулировать расстояние между желобами. Для этого урока уменьшите интервал здесь до нуля, затем перетащите зеленый ползунок вправо, чтобы он снова коснулся края монтажной области.
