Градиенты
Узнайте, как создавать градиенты различных типов в Illustrator.
Градиент — это градуированный переход между двумя или более цветами или двумя оттенками одного цвета. Градиенты можно использовать для создания наложения цветов, добавления объема к векторным объектам, а также для добавления света и тени к иллюстрациям.
В Illustrator можно создавать, применять и изменять градиент с помощью панели «Градиент», инструмента «Градиент» или панели управления.
Типы градиентов
В Illustrator можно использовать следующие три типа градиентов:
- Линейный
Этот градиент можно использовать для перехода цветов от одной точки до другой по прямой линии.
- Радиальный
Этот градиент можно использовать для перехода цветов от одной точки до другой в виде кругового узора.
- Произвольный
Этот градиент можно использовать для создания градуированного перехода между точками цвета на форме в упорядоченной или произвольной последовательности, чтобы переход выглядел ровно и естественно. Произвольный градиент может применяться в двух режимах:- Точки. Этот режим используется для затенения области вокруг точки цвета.
- Линии. Этот режим используется для затенения области вокруг линии.
Примечание.
Точка цвета — это точка на аннотаторе градиента (для линейных или радиальных градиентов) или на объекте (для произвольного градиента), которая управляет цветом градиента. Можно изменить цвет точки цвета для настройки градиента
A. Линейный градиент B. Радиальный градиент C. Произвольный градиент (точки)
Примечание.
Линейные и радиальные градиенты можно применять на заливке и обводке объекта. Произвольный градиент можно применять только для заливки объекта.
Инструмент «Градиент» и панель «Градиент»
Для создания и изменения градиента используется инструмент «Градиент» или панель «Градиент». Используйте инструмент «Градиент», если необходимо создать или изменить градиенты непосредственно на иллюстрации и просмотреть изменения в реальном времени.
Чтобы открыть инструмент «Градиент», нажмите инструмент «Градиент» на панели инструментов.
Попробуйте в приложении
Создавайте наложения цветов за несколько простых шагов.- Выберите «Окно > Градиент».
- На панели управления дважды щелкните инструмент «Градиент».
Панель «Градиент» откроется на холсте.
A. Активный или ранее использованный градиент B. Раскрывающийся список существующих градиентов C. Цвет заливки D. Цвет обводки E. Обратный градиент F. Аннотатор градиента G. Точка цвета H. Средняя точка I. Палитра цветов J. Отображение и скрытие параметров K. Типы градиентов L. Типы обводок M. Угол N. Пропорции O. Удалить точку P. Непрозрачность Q. Положение R. Заливка или обводка (цветом) S. Точка цвета T. Распределение U. Произвольный градиент V. Режимы произвольного градиента
Инструмент «Градиент» и панель «Градиент» имеют множество одинаковых параметров. Однако некоторые задачи можно выполнить только с помощью инструмента или панели. С помощью инструмента «Градиент» и панели можно задать несколько точек цвета, их расположение и распределение. Можно также указать угол, под которым отображаются цвета, пропорции эллиптического градиента и непрозрачность каждого цвета.
Можно включить функцию рисования и редактирования в реальном времени, чтобы улучшить внешний вид объектов при работе с ними. Чтобы включить эту функцию, выполните следующие действия:
[Windows] Выберите Редактирование > Установки > Производительность > Рисование и редактирование в реальном времени.
[macOS] Выберите Illustrator > Установки > Производительность > Рисование и редактирование в реальном времени.
Аннотатор градиента
Для линейных и радиальных градиентов при нажатии инструмента «Градиент» на панели инструментов на объекте отображается аннотатор градиента. Аннотатор градиента — это шкала, на который отображаются начальная точка, конечная точка, средняя точка, а также две точки цвета для начальной и конечной точек.
A. Аннотатор градиента B. Кольцо из точек C. Наведите курсор, чтобы изменить пропорции D. Курсор поворота E. Точка для изменения размера радиального градиента F. Конечная точка (точка со стрелкой) G. Точка цвета H. Средняя точка I. Выбранная точка цвета J. Центральная точка
Аннотатор градиента можно использовать для изменения угла, положения и области линейного градиента, а также фокусной точки, центральной точки и распределения радиального градиента. После того как в объекте появится аннотатор градиента, можно использовать панель «Градиент» или аннотатор градиента, чтобы добавить новые точки цвета, задать новые цвета для отдельных точек цвета, изменить настройки непрозрачности и перетащить точки цвета в новое расположение.
Чтобы скрыть или отобразить аннотатор градиента, выберите Просмотр > Спрятать градиентный аннотатор или Просмотр > Показать градиентный аннотатор.
Для линейных и радиальных градиентов перетаскивание круглого конца ползунка (начальной точки) приводит к изменению положения центральной точки градиента, а конца со стрелкой (конечной точки) — увеличению или уменьшению диапазона. Если навести курсор на конечную точку, появится курсор поворота, с помощью которого можно изменить угол градиента.
Примечание. Произвольный градиент позволяет размещать точки цвета в любом месте объекта. Поэтому произвольный градиент не требует использования аннотатора градиента.
Применение предварительно заданного градиента
При первом применении инструмента «Градиент» по умолчанию используется Черно-белый градиент. Если градиент применялся ранее, по умолчанию применяется последний использованный градиент.
Кроме того, Illustrator содержит предварительно заданный набор градиентов, которые можно применить с помощью панели «Градиент» или «Образцы». Можно также создать градиент и сохранить его на панели «Образцы» для дальнейшего использования. Чтобы применить предварительно заданный или сохраненный градиент с панели «Градиент», выполните следующие действия:
- Выберите объект на холсте и нажмите раскрывающийся список Градиент на панели «Градиент».
Чтобы применить предварительно заданный градиент из библиотеки образцов, выполните следующие действия:
- Чтобы открыть панель «Образцы», выберите Окно >Образцы.
- На панели «Образцы» нажмите раскрывающийся список в правом верхнем углу. В списке выберите Открыть библиотеку образцов >Градиенты, затем выберите градиент, который требуется применить.
- Чтобы на панели «Образцы» отображались только образцы градиентов, нажмите раскрывающийся список Показать виды образцов и выберите Показать образцы градиентов.
Создание и применение линейных, радиальных и произвольных градиентов
В зависимости от ваших требований можно применить линейный, радиальный или произвольный градиент к иллюстрации.
- Создание и применение линейного градиента
- Создание и применение радиального градиента
- Создание и применение произвольного градиента
Создание и применение линейного градиента
Для создания линейного градиента выполните одно из следующих действий:
- Выберите инструмент «Градиент», затем нажмите объект на холсте. На панели управления или панели «Свойства» отображаются кнопки «Тип градиента». Выберите объект, затем нажмите Линейный градиент, чтобы применить линейный градиент к объекту.
- На панели «Градиент» нажмите Линейный градиент .
- На панели «Свойства» нажмите Линейный градиент в разделе Градиент.
Создание и применение радиального градиента
Для создания или применения радиального градиента выполните одно из следующих действий:
- Выберите инструмент «Градиент», затем нажмите объект на холсте. На панели управления или панели «Свойства» отображаются кнопки «Тип градиента». Выберите объект, затем нажмите Радиальный градиент, чтобы применить радиальный градиент к объекту.
- На панели «Градиент» нажмите Радиальный градиент .
- На панели «Свойства» нажмите Радиальный градиент в разделе Градиент.
Создание и применение произвольного градиента
Для создания или применения произвольного градиента выполните одно из следующих действий:
- Выберите инструмент «Градиент», затем нажмите объект на холсте. На панели управления или панели «Свойства» отображаются кнопки «Тип градиента». Выберите объект, затем нажмите Произвольный градиент, чтобы применить произвольный градиент к объекту.
- На панели «Градиент» нажмите Произвольный градиент .
- На панели «Свойства» нажмите Произвольный градиент в разделе Градиент.
После нажатия «Произвольный градиент» будут доступны следующие два параметра:
- Точки. Выберите этот параметр, чтобы создать точки цвета в виде независимых точек на объекте.
- Линии. Выберите этот параметр, чтобы создать точки цвета на отрезке линии на объекте.
Примечание.
Чтобы скопировать произвольный градиент с одного объекта на другой, используйте палитру цветов на панели инструментов.
Создание произвольного градиента в режиме точек
Для создания, изменения и удаления произвольного градиента в режиме точки выполните следующие действия:
- Чтобы добавить одну или несколько точек цвета, щелкните в любом месте внутри объекта.
- Чтобы изменить расположение точек цвета, перетащите их в нужное место.
- Чтобы удалить точку цвета, перетащите ее за пределы объекта или нажмите Удалить на панели «Градиент» или нажмите клавишу Delete.
Распределение произвольного градиента в режиме точек
Можно задать распределение точки цвета для произвольного градиента в виде точки. Распределение — это круговая область вокруг точки цвета, к которой применяется градиент. Чтобы задать распределение точки цвета, выберите точку цвета и выполните одно из следующих действий:
- На панели «Градиент» выберите или введите значение в раскрывающемся списке Распределение.
- Введите значение в раскрывающемся списке Распределение на панели управления, панели «Свойства» или панели «Градиент». Можно также использовать шкалу, которая отображается при нажатии Распределение.
По умолчанию для распределения точки цвета установлено значение 0%.
Примечание.
Распределение поддерживается только в режиме точки.
Создание произвольного градиента в режиме линий
Чтобы добавить точки цвета для произвольного градиента для линий, выполните одно из следующих действий:
- Щелкните в любом месте внутри объекта, чтобы создать первую точку цвета, которая является начальной точкой для отрезка линии.
- Нажмите для создания следующей точки цвета. Будет создана прямая линия от первой до второй точки цвета.
- Нажмите еще раз, чтобы создать дополнительные точки цвета. Прямая линия станет кривой.
Можно создать несколько отдельных отрезков линии в объекте. Чтобы создать новый отрезок линии, выполните следующие действия:
- Перетащите курсор за пределы объекта и переместите его обратно внутрь объекта, затем щелкните в любом месте, чтобы создать первую точку цвета для отрезка линии.
Примечание. Можно также перетаскивать отрезки линии и объединять их при необходимости.
Удаление выбранных точек цвета:
- Перетащите их за пределы объекта или нажмите Удалить на панели «Градиент».
Изменение расположения точек цвета:
- Перетащите точку цвета в нужное место. Отрезок линии удлиняется или сокращается при изменении расположения точек цвета. Расположение других точек цвета остается неизменным.
Примечание.
При применении градиента к выбранному объекту применяются настройки по умолчанию. Чтобы отключить эту функцию, снимите флажок Установить настройки подгонки с учетом содержимого по умолчанию в меню Редактирование > Установки > Основные (Windows) или Illustrator > Установки > Основные (macOS). Этот параметр отключен для компьютеров с 32-разрядной ОС Windows.
Изменение градиентов
Можно изменить цвет, центральную точку, непрозрачность, расположение и угол градиента с помощью инструмента «Градиент», панели «Градиент», панели управления или панели «Свойства».
Чтобы войти в режим изменения градиента напрямую, на панели «Градиент» выберите объект и нажмите кнопку Изменить градиент. Затем можно изменить такие параметры, как точки цвета, цвет, угол, непрозрачность, расположение, пропорции и т. д.
A. Оттенки одного цвета B. Два разных цвета C. Измененный угол D. Аннотатор измененного размера E. Измененное расположение
A. Два разных цвета B. Измененная центральная точка внутри кольца из точек C. Измененное расположение аннотатора градиента D. Измененные пропорции E. Измененное расположение средней точки
Добавление и изменение точек цвета
После применения градиента можно добавлять различные точки цвета на аннотатор градиента.
Добавление точек цвета
- Поместите курсор на аннотатор градиента и при появлении значка «+» под курсором нажмите аннотатор градиента.
В месте нажатия будет добавлена точка цвета.
Чтобы удалить точку цвета, выберите точку цвета и выполните одно из следующих действий:
- Нажмите клавишу Delete.
- Нажмите кнопку Удалить на панели «Градиент».
Чтобы выбрать несколько точек цвета, удерживайте клавишу Shift и выберите точки цвета.
Для отмены выбора всех точек цвета нажмите клавишу Escape.
Примечание. При выборе точки цвета для градиента на панели управления и панели инструментов отображаются параметры для изменения точек цвета. Кроме того, параметры цвета отображаются на вкладке «Цвет» справа.
Изменение цвета
Чтобы изменить цвет точки цвета, выполните одно из следующих действий:
- Дважды нажмите точку цвета.
Откроется панель «Цвет», на которой можно выбрать цвет для применения. Выбранный цвет будет применен от текущей выделенной точки цвета до следующей точки цвета.
A. Точка цвета B. Распределение C. Непрозрачность D. Цвет E. Образцы F. Палитра цветов G. Образцы цветов
- Нажмите кнопку Образцы на панели «Цвет», чтобы выбрать цвет из доступных образцов.
- Нажмите кнопку Палитра цветов на панели «Цвет», чтобы выбрать и применить любой цвет с холста в другом месте. Нажмите клавишу Escape или Enter, чтобы выйти с палитры цветов. Палитру цветов можно открыть на панели «Цвет», «Градиент» и «Свойства».
- Откройте панель «Образцы», нажав Окна >Образцы. Нажмите заливку объекта на панели «Образцы». Выбранный цвет будет применен к выделенной точке цвета.
Изменение центральной точки, изменение размера и поворот аннотатора градиента
Начальная точка аннотатора градиента называется центральной точкой.
- Чтобы изменить центральную точку, поместите курсор на начальную точку и перетащите его.
- Чтобы изменить размер аннотатора градиента, перетащите конечную точку ближе к начальной точке или дальше от нее.
Размер аннотатора градиента не может быть изменен с помощью начальной точки (начала координат).
- Чтобы повернуть аннотатор градиента для линейного градиента, удерживайте конечную точку аннотатора градиента. Когда появится значок круговой стрелки, перетащите аннотатор и поверните его в любом направлении. На экране появится пунктирный прямоугольник, указывающий на новое расположение аннотатора.
- Чтобы повернуть аннотатор градиента для радиальных градиентов, поместите курсор на конечную точку аннотатора градиента и перетащите аннотатор, когда появится значок круговой стрелки.
Когда курсор будет помещен в пределах радиуса радиального градиента, появится пунктирное кольцо. Поверните кольцо по оси, чтобы изменить угол радиального градиента. Кроме того, на пунктирном кольце отображаются две точки. Можно нажать одну из этих точек, чтобы изменить форму кольца (пропорции), или нажать другую точку для изменения размера пунктирного кольца (распределение градиента).
Изменение расположения
Чтобы изменить расположение точек цвета и их средних точек, выполните следующие действия:
- Перетащите точки цвета вдоль ползунка градиента.
- Добавьте значение в поле Положение на панели «Градиент» (покажите пример изменения расположения точек цвета).
Изменяя среднюю точку, можно настроить деление цвета между двумя точками цвета.
Изменение угла
Чтобы изменить угол градиента, выполните следующие действия:
- Поверните аннотатор градиента на объекте.
- Выберите или введите значение в раскрывающемся списке Угол на панели «Градиент».
Изменение непрозрачности
Чтобы изменить непрозрачность точки цвета, выберите точку цвета и выполните одно из следующих действий:
- Выберите или введите значение в поле Непрозрачность на панели «Градиент» или панели управления.
- Переместите ползунок «Непрозрачность» на панели управления.
Если точка цвета имеет значение непрозрачности менее 100%, цвет отображается «в клетку» в аннотаторе градиента.
Градиент: как создать самому, установить готовый, тонировка с помощью градиента
Градиент — это заливка, когда один цвет плавно переходит в другой. Например, черный превращается в белый постепенно, через оттенки серого. Иногда градиент — это больше, чем два цвета.
В обработке фотографий градиенты часто используют для тонирования. Представьте: можно наложить не один цвет на всю картинку, а совместить несколько вместе! Или можно пойти дальше: тени затонировать в один цвет, а света — в другой.
Мы расскажем, как создавать градиенты самому и загружать скачанные, чтобы за пару секунд создавать эффектные тонировки и экспериментировать с цветом.
Градиенты открывает огромные возможности для экспериментов, позволяя добавлять в фотографию множество оттенков / Фото: Елизавета Чечевица
Где найти градиент в Photoshop?
Градиенты в Photoshop можно найти в:
1. Инструмент Градиент / Gradient на панели инструментов слева. Этот инструмент позволяет залить градиентом слой, на котором вы находитесь.
Если не получается найти Градиент на панели слева, воспользуйтесь горячей клавишей — G, чтобы быстро вызвать инструмент / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
- накладывая поверх фотографии для тонировки;
- накладывая под объектом, чтобы получить фон-градиент, и на объекты, если вы дизайнер, художник и т.д.
2. Корректирующий слой Карта градиентов / Gradien Map. Он находится в чёрно-белом кружочке палитры Слои/Layers.
Этот слой тонирует все света, тени и средние тона в цвета градиента. Например, жёлто-красный градиент. Все темные оттенки будут окрашиваться в красный, светлые и белые — в жёлтый, а средние тона в оттенки оранжевого.
Карту градиентов используют, чтобы быстро затонировать фотографию / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
Как сделать градиент в Photoshop?
В программе есть предустановленные градиенты от разработчиков. Это что-то вроде «пресетов» — готовые решения, чтобы вы не тратили время. Их рассортировали по цветам и разбили по папкам, чтобы пользователю было проще выбирать. Но, если ни одно из решений вам не нравится, все кажутся скучными, не отвечют вашей идее, ниже мы расскажем, как создать градиент в Photoshop и сохранить свой собственный градиент.
Посмотреть готовые градиенты, если нажать на выделенные оранжевыми квадратиками стрелочки в инструменте Градиент или Карта градиентов / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
1. Откройте инструмент Градиент или корректирующий слой Карта градиентов.
2. Вы увидите полоску градиента. Кликните по ней левой кнопкой мыши.
Нажать нужно на одну из выделенных оранжевых полосок / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
3. Откроется окно с настройками градиента. Чтобы поменять один из цветов градиента, кликните левой кнопкой мыши по маркеру снизу и нажмите на окошко Цвет / Color.
Принцип работы градиента в Карте градиентов таков: цвет слева перекрашивает в себя тёмные пиксели, а цвет справа — светлые. Все остальные пиксели будут окрашиваться в те цвета, которые будут получаться при переходе цвета из одного в другой.
Когда вы нажмете на окошко Цвет, вам откроется палитра со всем многообразием цветов. Когда выберете подходящий, нажмите Ок / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
Таким же образом нажмите на маркер внизу справа, кликните левой кнопкой мыши по окошку Цвет и задайте второй цвет.
Готово! Вы создали градиент, где один цвет будет плавно перетекать в другой. Если вам этого достаточно, нажимайте Ок и применяйте градиент. Если же вам нужно добавить в градиент больше двух цветов и сохранить его в свой набор, читайте дальше.
4. Наведите мышку на пространство между маркерами внизу. Когда курсор превратится в сжатый кулак с вытянутым указательным пальцем, кликните левой кнопкой мыши.
У вас появится третий маркер, который также можно затонировать в любой цвет. Для этого опять нажмите на Цвет и задайте нужный оттенок.
Примерная область, куда нужно кликать, чтобы появился новый маркер. Таких маркеров можно сделать бесконечное количество, чтобы создавать сложные градиент из множества цветов / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
5. Чтобы сохранить созданный градиент, нажмите кнопку Новый / New. Ваш градиент появится внизу списка под папками.
Сохранять и создавать свою коллекцию градиентов удобно и нужно, если вы хотите наложить на несколько фотографий одну и ту же тонировку / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
Как установить градиент в Photoshop 2022?
Если предложенные разработчиками Adobe варианты вам не нравится, вдохновение покинуло и хочется свежих идей со стороны, вы можете скачать из интернета и установить себе любые градиенты.
1. Скачайте понравившийся градиент или набор градиентов. Обычно они «обитают» на ресурсах и сайтов для фотографов, ретушеров и дизайнеров. Но можно не заморачиваться с поиском специальных площадок, а просто вбить в поисковике «скачать градиенты для фотошопа».
2. В скачанной папке (если она была в архиве — разархивируйте его), вам нужен файл с расширением .GRD
3. Откройте инструмент Градиент или Карту градиентов. Кликните левой кнопкой мыши по полоске градиента, чтобы перейти в меню редактирования градиентов (это там же, куда вы нажимали, чтобы создать градиент).
Нажмите кнопку Импорт / Import и в открывшемся окне найдите скачанную вами папку, а в ней — файл с расширением .GRD / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
4. Кликните по нему левой кнопкой мыши и нажмите Загрузить / Load. Скачанные градиенты появятся в конце списка в автоматически созданной папке.
Каждый новый скачанный и установленный набор будет появляться в новой папке / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
Как затонировать фотографию с помощью градиента?
Вы научились создавать и скачивать градиенты именно для того, чтобы с их помощью улучшать вашу фотографию. Ниже мы расскажем два способа, как создавать тонировки с помощью градиента.
Тонировка с помощью инструмента Градиент
- Откройте фотографию. Создайте новый слой, на котором будет лежать тонировка.
Чтобы создать новый пустой слой, нажмите на квадратик с плюсиком внизу панели Слои / Layers / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
2. Перейдите в инструмент Градиент (горячая клавиша G).
3. Нажмите на выпадающий список градиентов и найдите тот, который нравится вам. Кликните по понравившемуся градиенту.
4. Наведите курсор на фотографию, зажмите левую кнопку мыши и, не отпуская её, проведите линию.
В зависимости от направления и длины линии (чем длиннее, тем переход из цвета в цвет плавнее), будет меняться градиент / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
5. Сейчас градиент полностью перекрывает фотографию под собой. Чтобы это исправить, выберите один из вариантов: измените непрозрачность слоя или выберите один из режимов наложения.
Под тонировки хорошо подходят такие режимы наложения:
– Умножение / Multiply;
– Экран / Screen;
– Перекрытие / Overlay;
– Мягкий свет / Soft Light;
– Цветность / Color.
Но вы можете выбрать любой режим, какой вам понравится. Если результат слишком грубый, снизьте непрозрачность слоя.
Сочетание режима наложения Экран и Непрозрачности 53% / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
Если вам не нравится, что получилось, не нужно удалять слой и начинать сначала. Просто проводите линию за линией до тех пор, пока вам не понравится результат.
Карта градиента — как пользоваться
Карта градиента — это корректирующий слой, который перекрашивает в цвета выбранного градиента света, тени и оттенки между ними. Рассказываем, как тонироваться с помощью этого инструмента.
1. Откройте фотографию. В палитре Слои / Layers нажмите на чёрно-белый круг и выберите инструмент Карта Градиентов.
2. Нажмите на выпадающий список, чтобы выбрать готовый, скачанный или созданный вами и заранее сохранённый градиент, либо создайте свой (смотрите выше).
3. Все цвета на фотографии заменятся на цвета градиента (например, в данном случае их два).
Дальше возможны варианты:
- Если вам нравится обесцвеченная и затонированная в цвета градиента фотография, то на этом всё. Можете продолжать сохранять снимок.
Сочетание градиента из 5 цветов, режима наложения Жёсткий свет / Hard Light и Непрозрачности 18% / Иллюстрация: Елизавета Чечевица, Фотосклад.Эксперт
- Если хочется, чтобы от цветов оставались лишь легкие оттенки, переберите режимы наложения и настройки непрозрачности, как в предыдущем пункте.
Применение градиентной заливки к фигуре
Excel 2016 Word 2016 Outlook 2016 PowerPoint 2016 Project профессиональный 2016 Project стандартный 2016 Publisher 2016 Excel 2013 Word 2013 Outlook 2013 PowerPoint 2013 Project профессиональный 2013 Project стандартный 2013 Publisher 2013 Excel 2010 Word 2010 PowerPoint 2010 Еще. Меньше
Вы можете использовать множество вариантов градиентов заливки — от простых встроенных градиентов до созданных самостоятельно. Заливать градиентом можно обычные фигуры или текстовые поля, фигуры, входящие в диаграммы, а также графические элементы SmartArt и объекты WordArt. Вы можете быстро применить заготовку градиента или создать свой вариант, выбрав необходимые цвета и настроив яркость, прозрачность, а также направление и положение заливки.
Простейший способ применить градиентную заливку — выбрать фигуру, а затем открыть появившуюся вкладку Формат.
- Для фигур, текстовых полей и объектов WordArt вкладка Формат появляется в группе Средства рисования.
- Для диаграмм вкладка «Формат» появляется в группе Работа с диаграммами.
- Для графических элементов SmartArt вкладка Формат появляется в группе Работа с рисунками SmartArt.
На вкладке Формат нажмите кнопку Заливка фигуры, выберите пункт Градиентная и укажите необходимый вариант.
Совет: Чтобы быстро применить такую же градиентную заливку к другим фигурам, используйте функцию Формат по образцу.
Не очень подходит? Можно выполнить еще несколько действий и применить заготовку градиента.
Применение готового градиента
- Выберите фигуру, а затем на вкладке Формат нажмите кнопку Заливка фигуры.
- Последовательно выберите пункты Градиентная и Другие градиентные заливки.
- В группе Заливка установите переключатель Градиентная заливка и выберите нужный вариант в списке Предустановленные градиенты.
Совет: Используйте эти предустановленные градиенты в качестве отправной точки для создания собственной градиентной заливки.
Если представленные заготовки градиентов вам не подходят, вы можете создать свой вариант. Для этого потребуется выполнить дополнительные действия.
Создание пользовательского градиента
При создании градиентной заливки задаются точки градиента — особые точки, в которых смешиваются два цвета. Вы можете добавлять и удалять их с помощью специального ползунка, а также менять их положение тем же способом или с помощью параметра Положение, позволяющего задать более точные процентные значения. После выбора точки градиента можно настроить другие параметры, чтобы добиться желаемого результата. Максимальное число точек градиента —10, минимальное — 2.
Чтобы добавить градиент, нажмите кнопку Добавить точку градиента
. Чтобы изменить градиент, щелкните точку на ползунке, которую хотите изменить. Чтобы удалить градиент, нажмите кнопку Удалить точку градиента 
.- Выберите фигуру, а затем на вкладке Формат нажмите кнопку Заливка фигуры.
- Последовательно щелкните пункты Градиентная, Другие градиентные заливки и в появившемся окне выберите параметр Градиентная заливка.
- Выберите Тип в списке.
- Чтобы выбрать направление для градиента, щелкните Направление.
Для каждого цвета градиентной заливки выполните приведенные ниже действия.
- Чтобы применить цвет к точке градиента, щелкните ее на ползунке Точки градиента, а затем нажмите кнопку Цвет, чтобы выбрать нужный вариант. Ниже представлен пример линейного радужного градиента, созданного с помощью шести точек градиента, для каждой из которых был выбран свой цвет.
- Если вы хотите точно задать положение определенной точки градиента, введите процентное значение в поле Положение.
- При необходимости вы можете изменить яркость или прозрачность для каждой точки градиента с помощью соответствующих ползунков. Эти параметры следует настроить для каждой точки.
- Чтобы направление градиентной заливки совпадало с направлением поворота фигуры, установите флажок Повернуть вместе с фигурой.
- Чтобы создать эффект заливки одним цветом с переходом от 100%-й непрозрачности до 100%-й прозрачности, установите одинаковое значение цвета для всех точек градиента.
Дополнительные сведения о градиентах
Градиентная заливка — это заливка, постепенно изменяющая цвет поверхности фигуры.
Заливка фигуры, в которой три цвета плавно переходят друг в друга
При этом можно использовать оттенки одного цвета, как показано выше, или смешать несколько разных цветов, чтобы добиться более яркого эффекта (см. примеры ниже).
Заготовка градиентной заливки Горизонт
Произвольная градиентная заливка
Примечание: Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Была ли информация полезной? Для удобства также приводим ссылку на оригинал (на английском языке).
Линейный градиент
Градиентом называют плавный переход от одного цвета к другому, причём самих цветов и переходов между ними может быть несколько. С помощью градиентов создаются самые причудливые эффекты веб-дизайна, например, псевдотрёхмерность, блики, фон и др. Также с градиентом элементы смотрятся более симпатично, чем однотонные.
Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное свойство background , как показано в примере 1.
Пример 1. Градиент
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Градиент Результат данного примера показан на рис. 1.
Рис. 1. Линейный градиент для абзаца
В самом простом случае с двумя цветами продемонстрированном в примере 1 вначале пишется позиция, от которой будет начинаться градиент, затем начальный и конечный цвет.
Для записи позиции вначале пишется to , а затем добавляются ключевые слова top , bottom и left , right , а также их сочетания. Порядок слов не важен, можно написать to left top или to top left . В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #000 и #fff, по другому от чёрного к белому.
Табл. 1. Типы градиента
Позиция Угол Описание Вид to top 0deg Снизу вверх. 
to left 270deg Справа налево. 
to bottom 180deg Сверху вниз. 
to right 90deg Слева направо. 
to top left От правого нижнего угла к левому верхнему. 
to top right От левого нижнего угла к правому верхнему. 
to bottom left От правого верхнего угла к левому нижнему. 
to bottom right От левого верхнего угла к правому нижнему. 
Вместо ключевого слова допускается задавать угол наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется deg.
Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.
Для значения top left и ему подобных угол наклона градиентной линии вычисляется, исходя из размеров элемента так, чтобы соединять две диагонально противоположные угловые точки.
Для создания сложных градиентов двух цветов уже будет недостаточно, синтаксис позволяет добавлять их неограниченное количество, перечисляя цвета через запятую. При этом можно использовать прозрачный цвет (ключевое слово transparent ), а также полупрозрачный с помощью формата RGBA, как показано в примере 2.
Пример 2. Полупрозрачные цвета
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Градиент body < background: url(images/celtic1.png); >divГенезис свободного стиха, несмотря на внешние воздействия, отталкивает словесный метаязык.Результат данного примера показан на рис. 2.
Рис. 2. Градиент с полупрозрачными цветами
Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%.
Пример 3. Градиентная кнопка
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Кнопка Результат данного примера показан на рис. 3.
Рис. 3. Градиентная кнопка
За счёт задания положения цвета можно получить резкие переходы между цветами, что в итоге даёт набор однотонных полосок. Так, для двух цветов надо указать четыре цвета, первые два цвета одинаковы и начинаются от 0% до 50%, оставшиеся цвета также одинаковы меж собой и продолжаются от 50% до 100%. В примере 4 полоски добавляются в качестве фона веб-страницы. Из-за того, что крайние значения подставляются автоматически их можно не указывать, так что достаточно написать всего-лишь два цвета.
Пример 4. Однотонные полоски
HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx
Горизонтальные полоски Типичная европейская буржуазность и добропорядочность изящно иллюстрирует официальный язык.
Результат данного примера показан на рис. 4. Обратите внимание, что один из цветов градиента задан прозрачным, поэтому он меняется косвенно через цвет фона веб-страницы.
Рис. 4. Фон из горизонтальных полосок
Градиенты достаточно популярны среди веб-дизайнеров, но их добавление усложняется разными свойствами под каждый браузер и указанием множества цветов. Чтобы вам было проще создавать градиенты и вставлять их в код, рекомендую сайт www.colorzilla.com/gradient-editor с помощью которого легко настроить градиенты и сразу получить нужный код. Имеются готовые шаблоны (Presets), просмотр результата (Preview), настройка цветов (Adjustments), конечный код (CSS), который поддерживает IE через фильтры. Для тех, кто работал в Фотошопе или другом графическом редакторе, создание градиентов покажется плёвым делом, остальным не составит труда быстро разобраться. В общем, всячески рекомендую.
Статьи по теме