В статье мы разберем: какие типы градиентов существуют и чем они отличаются, как градиенты могут улучшить ваш дизайн, как и где вы можете их использовать. Градиенты — любимый креативный прием многих дизайнеров. И сегодня они снова в тренде! Вас ждет мно
Градиенты — любимый креативный прием многих дизайнеров. И сегодня они снова в тренде!
Вас ждет множество вдохновляющих примеров!
Градиенты — это плавные цветовые переходы, которые могут варьироваться от еле заметного изменения одного и того же оттенка до смелых сочетаний разных цветов. Эта техника появилась в 1880-х годах, когда французский график Жюль Шере впервые представил публике трехцветную литографию, заложив основу для красочных, динамичных дизайнов, окружающих нас сегодня.
Типы градиентов
1. Линейный градиент (linear)
Линейный градиент — самый простой. Он представляет собой переход цвета вдоль прямой линии, которая может размещаться горизонтально, вертикально или по диагонали.
Отраженный градиент (reflected) — разновидность линейного. Цвета здесь также меняются вдоль прямой линии, но они сходятся в центральной точке, а затем расходятся симметричными градиентами по обе стороны.
2. Радиальный градиент (radial)
Радиальный градиент распространяется от центра по кругу или эллипсу. С помощью таких градиентов мы можем привлечь внимание пользователей к отдельным элементам дизайна, создав вокруг них своего рода ореол.
3. Угловой или конический градиент (angular)
Конический градиент представляет собой цветовой переход на 180° вокруг центральной точки. Он выглядит трехмерным и создает впечатление, что вы смотрите на конусообразный объект сверху (отсюда и название).
4. Ромбовидный градиент (diamond)
Как и в радиальном градиенте, цвета здесь расходятся из центральной точки, но не в форме круга или овала, а в форме креста, формирующего ромбовидный паттерн.
5. Сетчатый градиент (mesh)
Один из самых популярных типов градиентов. Чтобы его создать, вам понадобится инструмент Mesh Tool в Adobe Illustrator или специальный плагин для Figma Mesh Gradient. Вы накладываете на свой дизайн сетку с опорными точками и по очереди настраиваете цвета для каждой из них. Искажайте сетку при помощи кривых Безье, чтобы придать градиенту финальную форму.
Если вы видите внутри градиента резкие переходы, это в 90% случаев будет именно сетчатый градиент. Они появляются, когда одна опорная точка размещается близко к другой опорной точке.
6. Градиент из размытых форм (shape blur)
Более «расслабленный» родственник сетчатого градиента. Создается из фигур произвольной формы с эффектом размытия. Все зависит только от вашей фантазии — количество фигур может быть любым, они могут быть однородными или нет. Вы можете увеличить интенсивность цвета, дублируя и наслаивая их друг на друга, или свободно распределить их на холсте для получения более нежного, нюансного сочетания оттенков.
7. Произвольный градиент (freeform)
Эта функция Adobe Illustrator позволяет быстро создавать сложные эстетичные градиенты. Как и в случае с сетчатым градиентом, цвета здесь задаются при помощи опорных точек, но вы можете свободно ими манипулировать, не ограничиваясь сеткой. Полная свобода творчества!
8. Множественные градиенты
Множественный градиент получается, когда вы применяете несколько базовых градиентов к одной фигуре, чтобы создать сложные цветовые переходы. Это может быть комбинация нескольких радиальных градиентов и линейного градиента или ромбовидный градиент с несколькими отраженными градиентами.
И, наконец, градиент, имитирующий северное сияние (aurora)
Мы можем воспринимать его как особую разновидность градиента из размытых форм, сетчатого или произвольного градиента. Выбирайте любой из перечисленных методов, чтобы добиться нужного эффекта. Вдохновленный завораживающим природным явлением, этот градиент призван передать его неземную красоту.
Поскольку северное сияние всегда выглядит по-разному, вы можете создать более мягкий, воздушный эффект с помощью размытия фигур или сформировать более четкие линии с помощью сетки. Наконец, произвольный градиент дает возможность воспроизвести оба эти стиля.
