Выделите объект.
Последнее обновление
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, размер экспортируемого изображения будет выглядеть так, как если бы он имел центральную обводку.
Создавайте редактируемые векторные фигуры из линий, контуров, фигур, текста, изображений и логических групп с помощью команды «Создать контур».После создания фигуры вы можете дополнительно изменить ее с помощью элементов управления или изменив ее свойства на панели Properties (Свойства).
Выполните следующие действия, чтобы создать значок с помощью команды Outline Stroke.
Учебное пособие
С помощью функции обводок контура в Adobe XD можно легко настраивать контуры, границы и формы, масштабируя объекты и экспортируя их в SVG для Интернета без каких-либо усилий. Чтобы узнать, как пользоваться функцией обводок контура, просмотрите этот видеоурок от Дэни Бомонта (Dani Beaumont), главного менеджера продукта Adobe XD.
Время просмотра: 2 мин. 50 сек.
Внутренние тени и падающие тени делают объекты дизайна более реалистичными, имитируя световые эффекты.
Внутренняя тень
Внутренние тени можно использовать для имитации трехмерной глубины в двухмерном изображении. Например, внутренние тени могут помочь имитировать нажатое состояние кнопки.
Тень
Тени, помимо создания 3D-эффекта для объектов, также могут обеспечить ощущение границы без применения обводки.
Выполните следующие действия, чтобы применить внутреннюю тень или тень к объекту дизайна:
Щелкните объект, а затем выберите Тень или Внутренняя тень в инспекторе свойств.
В палитре цветов добавьте цвет и задайте непрозрачность тени:
А. Чтобы добавить цвет к тени, выполните одно из следующих действий:
- Задайте значение HSB, RGB или шестнадцатеричное значение цвета. Вы можете легко переключаться между этими цветовыми режимами с помощью меню.
- Настроить цвет, используя поле «Цвет» и шкалу цвета. При этом HSB, RGB или шестнадцатеричные значения корректируются автоматически.
- Использовать инструмент «Пипетка» для выбора цвета из монтажной области.
b. Чтобы задать непрозрачность тени: используйте ползунок непрозрачности или введите значение непрозрачности в процентах.
Чтобы сохранить выбранные цвет и непрозрачность как цветовой образец, нажмите значок + в нижней части палитры цветов.Вы можете изменить порядок цветовых образцов в палитре цветов, перетащив их.Чтобы удалить цветовой образец, перетащите его за пределы палитры цветов.
В инспекторе свойств задайте параметры, указанные ниже.
- X и Y смещение: Укажите расстояние от границы объекта до места, где должна располагаться тень.
- B (Размытие): Укажите расстояние от края тени до места, где должно происходить размытие.
Вы можете легко копировать тени, примененные к объекту, на другие объекты с помощью команды Paste Appearance (Вставить оформление).Нажмите Ctrl+ C на объекте с примененной тенью, а затем нажмите Ctrl+Alt+V («Вставить оформление») на целевом объекте.
При создании спецификаций дизайна тени в них преобразуются в CSS, который может быть легко использован разработчиками.
Примеры
Неоморфизмы
?$png$&jpegSize=200&wid=901)
Коллекция объектов с примененными тенями
?$png$&jpegSize=200&wid=900)
Учебное пособие
Если вы хотите добавить глубину вашему дизайну, функция «Внутренняя тень» в Adobe XD может стать настоящим прорывом.Посмотрите учебное пособие от Dani Beaumont, главного менеджера по продукту Adobe XD, чтобы узнать, как использовать внутренние тени.
Время просмотра: 3 минуты.
Применение эффектов наложения
Выберите изображение или объект (включая фигуры, текстовые слои, группы, маски или компоненты) на холсте дизайна. В инспекторе свойств выберите и примените режим наложения по своему выбору. Дополнительные сведения см. в разделе Применение эффектов наложения.
Удаление заливки, тени или обводки объекта
Выделите объект. Затем щелкните флажок рядом с параметром Рамка, Заливка или Тень в инспекторе свойств. Если вы хотите вернуть заливку, обводку или тень, снова щелкните этот флажок.
Связанные материалы
Проектируйте прототипы пользовательских интерфейсов при помощи Adobe XD
Создавайте интерактивные макеты для веб-сайтов и мобильных приложений.
