Градиент

Обзор инструмента "Градиент"

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

Не все браузеры поддерживают градиентные контуры.

 

В Google Web Designer доступны два типа градиентов:

• Линейные – цвет изменяется по прямой линии между двумя конечными точками.
• Радиальные – от центра расходятся концентрические цветовые круги.

Как создать градиент

1. Нажмите кнопку Линейный градиент или Радиальный градиент в верхней части цветовой панели.
2. По умолчанию у градиента есть два маркера цвета вдоль панели в верхней части. Выберите маркер, чтобы изменить его цвет.
3. Перетащите маркер цвета вдоль панели, чтобы изменить расстояние перехода.
4. Чтобы добавить дополнительные маркеры, нажмите на панель градиента. Чтобы удалить маркер, перетащите его вниз в поле цвета.

Линейные градиенты

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

Чтобы настроить линейный градиент, выполните следующие действия:

1. Выберите инструмент Градиент на панели инструментов слева или нажмите клавишу А.
2. Выберите элемент, градиент которого вы хотите изменить.
3. Выберите Изменить контур или Изменить заливку на панели настроек инструмента вверху.
4. Настройте градиент, перетаскивая красные управляющие точки:

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

   • Перетащите внутреннюю управляющую точку, чтобы повернуть градиент вокруг центральной черной точки. При вращении длина градиента меняется пропорционально размерам элемента. Чтобы ограничить вращение шагом в 45°, удерживайте клавишу Shift.
     

Чтобы восстановить настройки градиента по умолчанию, дважды нажмите кнопку инструмента Градиент .

Радиальные градиенты

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

Чтобы настроить радиальный градиент, выполните следующие действия:

1. Выберите инструмент Градиент на панели инструментов слева или нажмите клавишу А.
2. Выберите элемент, градиент которого вы хотите изменить.
3. Выберите Изменить контур или Изменить заливку на панели настроек инструмента вверху.
4. Настройте градиент, перетаскивая красные управляющие точки:

   • Перетащите внешние управляющие точки, чтобы изменить размер градиента. Если при этом зажать клавишу Ctrl (Windows) или ⌘ (Mac), будут сохраняться пропорции по осям X и Y, а если клавишу Shift – градиент примет форму круга.
     

   • Задайте положение центра градиента с помощью центральной точки.
     

Чтобы восстановить настройки градиента по умолчанию, дважды нажмите кнопку инструмента Градиент .