Руководство пользователя Отмена

Задавайте обводку, заливку, тени и внутренние тени для объектов.

Поиск

Последнее обновление 8 июн. 2021 г.

Научитесь задавать обводку, заливку тени и внутренние тени, а также создавать эффекты наложения для объектов в Adobe XD.

Применение цвета заливки к объекту

Выделите объект.
Щелкните прямоугольник рядом с инструментом Заливка. Откроется палитра цветов.

Палитра цветов
Примечание.
Также можно использовать инструмент «Пипетка» для заливки цветов. Клавиша [i] запускает инструмент «Пипетка» для выбора цвета заливки.

Если нажать эту клавишу один раз, откроется инструмент «Пипетка» для выбора цвета заливки.

Если снова нажать эту клавишу, инструмент «Пипетка» для выбора цвета заливки закроется.
Вы можете:
- Указать HSBA, RGB или шестнадцатеричные значения, если вам известны точные цветовые значения. Вы также можете переключиться между различными цветовыми режимами.
- Настроить цвет, используя поле «Цвет» и шкалу цвета. При этом числовые значения HSBA, RGB и шестнадцатеричные значения корректируются соответствующим образом.
- Задать цвет заливки и установить непрозрачность заливки с помощью шкалы цвета или указав значение в процентах.
- Использовать инструмент «Пипетка» для выбора цвета из монтажной области.
- Применить градиентные заливки к объекту. Дополнительную информацию о градиентах см. в разделе Создание и изменение градиентов.
Вы можете просматривать изменения на монтажной области в ходе изменения параметров с использованием палитры цветов.

Примечание.

Adobe XD также поддерживает условные обозначения для шестнадцатеричных кодов. Например, если вы наберете 0 и нажмете Return, XD автоматически отобразит цвет с кодом #000000.
Вы можете сохранить цвет как цветовой образец для будущего использования. Чтобы сохранить цвет как цветовой образец, щелкните значок + в нижней части палитры цветов.

Добавление цветовых образцов

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

Применение заливки изображением к объектам

Сначала включите заливку, если она еще не включена (как описано в разделе Применение цвета заливки к объекту). Затем перетащите изображение на объект из места его сохранения (например, Finder или Windows Explorer).

Кадрирование и размещение изображения для заливки

Теперь вы можете дважды щелкнуть изображения, размещенные в контейнерах (Объект > Маска с помощью фигуры), чтобы кадрировать и изменить положение изображения (при перетаскивании с компьютера) для заливки. Используйте режим кадрирования для заливки изображением, чтобы:

Дважды щелкнуть и войти в режим кадрирования изображения для заливки
Изменить положение изображения в режиме кадрирования или
Переместить изображение в любое место в режиме кадрирования

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

Вставка изображения из буфера обмена

Вы также можете скопировать изображение, которое не находится в Adobe XD, в буфер обмена своей операционной системы, а затем вставить это изображение из буфера обмена как изображение для заливки. Изображения также заполнят фигуру, если эта фигура выделена и пользователь выбирал Файл > Импорт.

Создание обводки и выбор цвета для нее

Выделите объект.
Ширина обводки по умолчанию равна 1. Чтобы указать другое значение, задайте его для параметра Рамка.
Нажмите на прямоугольный значок выбора цвета рядом с параметром Рамка. Откроется палитра цветов.

Палитра цветов
Вы можете:
- Указать HSBA, RGB или шестнадцатеричные значения, если вам известны точные значения.
- Настроить цвет, используя поле «Цвет» и шкалу цвета. При этом числовые значения HSBA, RGB и шестнадцатеричные значения корректируются соответствующим образом.
- Использовать инструмент «Пипетка» для выбора цвета из монтажной области.
- Установить непрозрачность рамки с помощью шкалы цвета или ввести значения в процентах.
- Редактировать размер рамки и создать пунктирные линии.
- Указать типы концов (срезанные, скругленные, выступающие) и стыков (угловые, скругленные, скошенные), а также внутреннюю и внешнюю обводку.
Вы можете просматривать изменения цвета обводки на объекте в ходе изменения параметров с использованием палитры цветов.
Вы можете сохранить цвет как цветовой образец для будущего использования. Чтобы сохранить цвет как цветовой образец, щелкните значок + в нижней части палитры цветов.

Добавление цветовых образцов

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

По умолчанию XD выравнивает внутреннюю обводу по замкнутому контуру.

Стили обводки

A. Внутренняя обводка B. Внешняя обводка C. Центральная обводка D. Срезанные концы E. Скругленные концы F. Выступающие концы G. Угловые стыки H. Скругленные стыки I. Скошенные стыки

Примечание.

Изменение ширины или выравнивания обводки не меняет фактический размер объекта (с точки зрения ограничительной рамки). Однако при экспорте объекта его размеры могут измениться в зависимости от используемого типа обводки.

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

Преобразовывайте обводки в фигуры с помощью обводки контура

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

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

Введите любую букву, допустим S, с использованием инструмента Текст на холсте.
Выделите букву S, затем выберите Объект > Контур > Преобразовать обводку в кривые.
Два слоя можно просматривать на панели «Слои»: 1) S — контур; и 2) S.

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

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

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

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

Добавьте объект на монтажную область.
Щелкните объект, затем щелкните Тень или Внутренняя тень в инспекторе свойств.
На палитре цветов

а. Чтобы добавить цвет в тень, выполните одно из следующих действий:
- Задайте значение HSB, RGB или шестнадцатеричное значение цвета. Вы также можете с легкостью переключаться между этими цветовыми режимами.
- Настроить цвет, используя поле «Цвет» и шкалу цвета. При этом HSB, RGB или шестнадцатеричные значения корректируются автоматически.
- Использовать инструмент «Пипетка» для выбора цвета из монтажной области.
b. Установите непрозрачность тени с помощью шкалы непрозрачности или введите значение непрозрачности в процентах.
Чтобы сохранить цвет как цветовой образец, щелкните значок + в нижней части палитры цветов. Вы можете изменить порядок расположения цветовых образцов в палитре цветов, перетащив их на новые места. Чтобы удалить цветовой образец, перетащите его за пределы палитры цветов.
В инспекторе свойств задайте параметры, указанные ниже.

Сдвиг по оси X и сдвиг по оси Y: задает расстояние от объекта, на которое будет смещена тень.

Р (размытие): задает расстояние от края тени, на котором должно начинаться размытие.

Внутренняя тень

Тень

Применение эффектов наложения

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

Удаление заливки, тени или обводки объекта

Выделите объект. Затем щелкните флажок рядом с параметром Рамка, Заливка или Тень в инспекторе свойств. Если вы хотите вернуть заливку, обводку или тень, снова щелкните этот флажок.