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

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

XD поддерживает линейные, радиальные и угловые градиенты.

XD выполняет заливку от начальной до конечной точки по прямой линии.

XD выполняет заливку от начальной до конечной точки по кругу.

XD применяет заливку с цветовыми градиентами, которые распространяются по фигуре от центра круга. 

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

В раскрывающемся списке в верхней части палитры цветов выберите Линейный градиент, Радиальный градиент или Угловой градиент.

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

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

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

По умолчанию доступны две точки цвета. Вы можете добавить больше точек цвета, щелкнув редакторы градиентов. Вы можете перетаскивать точки цвета вместе с редакторами градиентов, чтобы изменять расположение точек цвета и варьировать разнесение каждого цвета. Чтобы удалить или убрать точку цвета, перетащите ее за пределы редактора градиентов в палитре цветов градиента. Или щелкните точку цвета в редакторе градиентов на холсте и нажмите «Удалить».

Редактор градиентов на холсте поможет вам изменить направление градиента.

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

Ползунок справа от палитры цветов градиента позволяет управлять непрозрачностью точки цвета.

Применение заливки с использованием линейного, радиального или углового градиента

Применение углового градиента к объектам

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

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

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

^{Примеры}

Ниже приведены примеры, созданные с использованием углового градиента. 

^{Учебное пособие}

Угловые градиенты отличаются от линейных и радиальных градиентов и могут быть очень полезны при создании таких элементов, как значки выполнения и цветовые круги. Чтобы узнать, как пользоваться угловыми градиентами, просмотрите этот видеоурок от Дэни Бомонта (Dani Beaumont), главного менеджера продукта Adobe XD.

Время просмотра: 4 мин. 7 сек. 

Импорт объектов с градиентной заливкой

Когда вы импортируете градиент в формате SVG, палитра цветов по умолчанию отображает параметр «Градиент». Когда вы копируете и вставляете объект в XD, градиентная заливка также копируется. Вы можете изменить цвет и точки цвета импортируемого градиента.