Как создавать стильные градиенты: 3 популярных способа
Градиенты — это не просто переходы цветов, это секретные ингредиенты, которые добавляют цифровым холстам глубину, объём и эмоции. В статье мы рассмотрим три широко известных подхода, которые дизайнеры могут использовать для создания градиентов: встроенный инструментарий Figma, Figma-плагины и онлайн-инструменты.
1. Встроенные инструменты Figma
Figma позволяет создавать четыре популярных типа градиентов — linear (линейный), radial (круговой, радиальный), angular (угловой, конусный), diamond (ромбовидный, алмазный). Для создания градиента всё, что вам нужно сделать, это выбрать объект и изменить параметр Fill (Заливка) с Solid (Сплошная) на Gradient (Градиент).
Linear (Линейный)
Безусловно, линейный градиент — самый популярный тип градиента. В нём цвета плавно смешиваются от начала до конца в линейном стиле.
Radial (круговой, радиальный)
Радиальный градиент представляет собой плавный переход цветов, которые расходятся от центральной точки.
Angular (угловой, конусный)
В отличие от радиального градиента, цвета которого расходятся из центральной точки наружу, угловой градиент излучает цвета в рамках круга или эллипса вокруг центральной точки, а переход цветов следует за формой конуса или сегмента.
Diamond (ромбовидный, алмазный)
Ромбовидный градиент создаёт переход цветов в форме ромба или алмаза. Этот тип градиента предполагает плавное смешивание цветов от центра ромба к его углам.
2. Figma-плагины
Основная сложность при создании градиентов заключается в выборе начального и конечного цветов. К счастью, в дизайн-сообществе есть несколько отличных Figma-плагинов, где есть предварительно отобранные цвета. Они позволяют создавать потрясающие градиенты в считанные секунды.
uiGradients
uiGradients позволяет добавлять градиенты к группам, тексту и фреймам. Просто выберите элемент, чтобы применить градиент и запустите плагин. Плагин предлагает на выбор более 350 градиентов, а добавить их к фреймам, группам или тексту можно в один клик.
Mesh Gradient
Mesh Gradient создаёт изображение с градиентом на основе 2D-сетки и позволяет редактировать вершины и грани сетки, чтобы достичь идеального градиентного эффекта.
Noisy Gradients
Этот плагин создаёт потрясающие градиентные фоны с использованием разнообразных красивых цветов. Кроме того, у него есть дополнительная функция — добавление шума, чтобы градиенты выглядели ещё более визуально впечатляющими.
3. Браузерный генераторы
Есть несколько отличных онлайн-инструментов, которые позволяют создавать градиенты.
CSS Gradient
CSS Gradient позволяет создавать бесплатные градиентные фоны для сайта. Инструмент генерирует исходный CSS-код, который можно использовать в веб-дизайне.
Coolors
Coolors — ещё один отличный инструмент, который позволяет генерировать красивые градиенты. Кроме того, он содержит галерею с уже готовыми градиентами, которые можно просматривать для вдохновения.
Josh Comeau’s Gradient Generator
Генератор градиентов от Джоша Комо включает несколько дополнительных опций, таких как точность, угол и кривая сглаживания. Они позволяют создавать нестандартные градиенты.
