Как сделать градиент. Шпаргалка для недизайнеров

Плавный переход от одного цвета к другому — частый дизайн-прием для сайтов, логотипов, упаковки товара. Неспроста градиенты так любят — они давно вышли за рамки простого «от синего к зеленому», можно делать более сложные переходы. Если грамотно выбрать оттенки, дизайн с градиентом получится не просто глубоким или насыщенным, но и смелым, эмоциональным. 

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

Каким градиент может быть

Технически градиент состоит из нескольких чистых цветов и их расположения относительно друг друга — графические программы автоматически подбирают оттенки между цветами и создают тот самый плавный переход. Поэтому направление градиента обычно бывает одним из 5 вариантов.

Линейный. Цвет меняется вдоль прямой линии — горизонтальной, вертикальной или под углом. Его называют универсальным, так как переход хорошо ложится на кнопки, карточки, фоны сайтов. Так Сбер использует переход от зеленого к синему — градиент можно встретить не только на логотипе, но и в меню сайта, на фоне отдельных экранов. 

Линейный градиент не обязательно должен быть цветным — переход можно создать и в монохромных оттенках. На сайте веб-дизайнера Егора Железнова он комбинируется с зеркальным отражением — из черного в белую полосу и обратно. Такой прием направляет внимание — хочется пройти взглядом по полосе и прочесть текст внизу экрана. 

Радиальный и ромбовидный (diamond). Цвет меняется от центра к краям и создает эффект сияния — как будто объект излучает свет или наоборот, отбрасывает тень. Переход идет по кругу или в форме ромба — отсюда и название. Например, в обложке плейлиста дня на Яндекс Музыке — радиальный градиент задает объем, который подчеркивает тень от объекта.

На главной консалтинговой компании Whitetree курсор мышки имитирует градиент — при перемещении по экрану чистый белый круг подсвечивает буквы и линии, переходит в фиолетовый к границам экрана. А при наведении на круглую кнопку полностью поглощается ей — такой резкий эффект притягивает внимание посетителя к СТА «обсудить сотрудничество».

Источник

Сетчатый (mesh) градиент. Позволяет расставить несколько точек разных цветов, между которыми оттенки будут соединяться свободно. В результате можно получить абстрактные формы. Особенно эффектно они выглядят в анимации, когда мягкие пятна плавно перетекают один в другой. Например, меш-градиент используют на главной Яндекс Музыки — он лучше других передает волну. 

Чтобы повторить такой прием на сайте, понадобится библиотека градиентов CSS и знание языка программирования. Источник

Более сложные варианты сетчатого градиента можно встретить в журнале zigmund.online — как цветной, многосоставный и зернистый фон для персонажей и элементов иллюстрации.

Конический (угловой) градиент. Встречается редко, так как у него четкие, резкие переходы между цветами — как раз они образуют форму конуса. В угловом формате можно сочетать любые оттенки, например от оранжевого к синему, от розового к зеленому.

Почему бренды применяют градиенты

Прежде всего, градиент в дизайне — возможность бренда быть в тренде и привлечь аудиторию, которая ценит инновации и продуманный визуал. Например, в отдельных проектах все чаще используют шумовые градиенты и AI‑сгенерированные паттерны. Они привлекают внимание своей текстурной сложностью, дарят бренду визуальную глубину, непредсказуемость и эмоциональный заряд.

Правда, причина не только в трендах — компании применяют градиент как визуальный язык брендбука. Прием «оживляет» бренд, делает его эмоционально универсальным. Он может повторяться на логотипе, баннерах, в презентациях, формате упаковки и digital-маркетинге. 

Например, zigmund.online использует плавные, зернистые градиенты в иллюстрациях сайта. Спокойные люди сами по себе показывают результат после сеансов психотерапии. Но с мягким, расслабляющим переходом линий, цветными тенями и нечеткими контурами эффект усиливается. Такой дизайн вызывает ощущение принятия, теплоты, безопасности и заботы. 

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

Как выбрать цвета для градиента

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

Именно из-за универсальности они часто выглядят слишком ожидаемо. Когда хочется добавить контраста, подойдут комплементарные пары — зеленый и красный, синий и оранжевый. Но если просто соединить два таких цвета, промежуточный оттенок получится серо-коричневым, а еще грязным и блеклым. Чтобы этого избежать, в градиент вводят третий цвет — например, желтый или бирюзовый для пары зеленого и красного. 

Еще можно работать с формой — заливать одним и тем же градиентом отдельные фигуры и менять их расположение на макете. Например, как делает издательство «МИФ». Дальше рассмотрим такой прием подробнее.

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

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

Готовые сочетания

В сети легко найти готовую библиотеку фигур. Например, в Cool Shapes более 100+ вариантов с чистым и зернистым градиентом. Можно открыть их в Figma и перенести на макет сайта, вписать в логотип и проверить сочетание с фирменными шрифтами. 

Нейросети

Krea, SORA и другие ИИ-сервисы для создания изображений могут нарисовать подходящий градиент. Для этого достаточно ввести промпт.

Несмотря на то, что Krea не поняла вид градиента, результат получился подходящим.  Это плавный фон, с мягкими переходами и акварельными разводами. Такой можно применить на заднем плане сайта или рекламном баннере.

Figma

Градиент можно применить к любой фигуре или шрифту с помощью заливки (Fill → Custom → Gradient). На выбор доступны линейный, круговой, конический и ромбовидный. При клике на плюс можно добавить цвета, а на схеме — изменить их расположение и прозрачность.

С фигурой в Figma можно работать дальше — скруглить углы, изменить масштаб, применить размытие, шум. Для этого пригодятся настройки Corner radius и Effects → Layer blur, Noise на панели справа.

Мы решили использовать градиент в макете сайта для конференции. Отрисовали проект в Figma и применили заливку сначала на фоне — получили акцент на втором слове «красиво». Затем на фигуре справа — она стала передавать ощущение красоты и объяснять абстрактное «это».

Эффекты могут сделать градиент еще плавнее и вписать в композицию. Сначала рассмотрим пример. На сайте рекрутинговой компании RED цвета «разбиваются» четкими световыми полосами — как и в логотипе бренда. Он нарушает стереотип о кадровом бизнесе как о чем-то сухом и нейтральном: наоборот, визуал говорит, что здесь ценят креатив, инновации и нестандартный подход. 

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

Adobe Photoshop

Принцип работы в Photoshop аналогичный — выбрать фон или фигуру и применить инструмент Gradient Tool.  Его можно найти в меню слева или нажать кнопку G. На выбор пользователя линейный, радиальный, угловой, зеркальный и ромбовидный варианты. 

Можно изменить цвет вручную или выбрать один из готовых наборов — они расположены в папках по цветам и типам. Например, есть радужные, пастельные. 

На тексте прием тоже работает — наложить градиент можно через стиль слоя. Или разместить фразу позади фигуры с градиентом как фон и применить обтравочную маску.

Adobe Illustrator

В этой программе возможностей больше — можно собрать векторный градиент со свободным переходом цвета. А затем масштабировать его — увеличивать и уменьшать под размер баннера без потери качества. Выбрать инструмент можно через панель слева — отдельно или как заливку. 

Программа предлагает линейный, радиальный и меш-градиент — можно выбрать цвет и задать прозрачность, изменить положение цветов. Есть настройки CMYK. В свободном виде можно задать любое количество точек. 

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

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

Что учесть, чтобы внедрить градиенты в брендбук

На основе градиентных сочетаний можно построить дизайн-концепцию бренда. При этом важно учесть несколько технических моментов. 

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

Анимация. Если градиент на сайте или в видео должен двигаться, важно уточнить как создать его через CSS. Либо перенести из Figma в After Effects и в каком формате экспортировать. 

Печать. Указать корректный перевод в CMYK. Особенно, если градиент будет универсальным для диджитал-проекта и упаковки товаров, обложек книг, фирменного мерча.