Содержание

Модные градиенты в веб-дизайне

Мы собираемся проанализировать текущие тенденции диджитал-дизайна. В первую очередь — это градиенты, одна из наиболее обсуждаемых тем по результатам нашего исследования тенденций, проведенного благодаря сотрудничеству пользователей Awwwards и жюри. Ознакомьтесь с полным перечнем результатов опроса в нашей книге прямо СЕЙЧАС. Современный ландшафт для цифровых мыслителей.

Градиенты уже были когда-то в моде. Сейчас они опять вернулись в веб-дизайн, где их используют в фонах и изображениях. Spotify снова сделал их популярными, применив двухцветные градиенты к фотографиям в своих кампаниях и на микросайтах как характерный элемент бренда. Здесь вы можете ознакомиться с небольшим уроком о том, как создавать градиенты в Photoshop.

Spotify micro site 2015, двухтоновое изображение с градиентными картами.

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

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

Каждая новая модель iPhone X представляет собой парадигму трендов. На своих лендингах, в рекламе и во многих элементах рекламных кампаний градиенты различных тонов используются над заголовками, текстами или даже в изотипе. Тем не менее, на заднем плане и особенно на заставке главного экрана iPhone X градиенты НЕ однообразны как традиционные линейные или радиальные градиенты, а многоцветны с нерегулярным смешиванием.

Многоцветные градиенты на главном экране, iPhone X


Градиенты в 3D? Цвет вершин и стиль цветовой карты

Кажется очевидным говорить о градиентах в 3D, поскольку освещение сцены создает градацию света на поверхности объекта. Но что присуще этой тенденции, так это именно использование градиентов в качестве текстуры объекта, иногда имитирующей методы цвета вершин и градиента цветовой карты. Оба метода служат не только для воплощения декоративной функции, но и используются для представления данных или отображения трехмерных объектов.

3D Gradient Mapping


Типы градиентов

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

Полезные инструменты для CSS градиентов

Для воссоздания этих эффектов в CSS доступно множество инструментов, которые позволяют создавать их с помощью визуальных редакторов, просто копируя и вставляя код CSS: Webgradients, Khroma AI, Color Space, UI Gradients, Grabient, Coolhue, Easing Gradients in CSS.

  • Khroma

  • Webgradients

  • Color Space

  • Cool Hue

  • Easing Gradients

  • UI Gradients

Скачайте исходный файл с градиентами!

Начните работать с градиентами, скачайте исходный файл бесплатно в векторном формате .ai или pdf, чтобы самостоятельно поэкспериментировать с градиентами.

Скачать тут!

Коллекция градиентов от Awwwards

Как всегда, мы создали подборку сайтов дня и номинантов, в которой вы можете увидеть все эти эффекты в использовании. Мы надеемся, что вы найдете вдохновение в коллекциях Awwwards или в нашей книге СЕЙЧАС. Современный пейзаж для цифровых мыслителей, в котором обсуждаются основные тенденции года в веб-дизайне.

Градиент в Фигме — как сделать красивый градиент фона, плагины Figma

Как бесплатный графический редактор, Figma имеет большую популярность. Программа предоставляет массу инструментов для реализации различных задумок. Один из таких инструментов — градиент. Он уже долгие годы находится в трендах дизайна и используется в проектах разной направленности. В этой статье вы найдёте информацию о том, как сделать красивый градиент в Фигме, что нужно для эффекта прозрачности, как использовать заливку для фото и сделать плавный переход. Мы расскажем о простых способах создания градиента и более сложных — для интересного и красочного результата.

Стандартный вариант — встроенные инструменты для создания градиента в Figma

Первый способ — наиболее понятный и простой. Для него мы будем использовать встроенные инструменты Фигмы. Чтобы создать градиент, необходимо выделить область, на которой он будет применяться — это может быть фигура любой из форм, например, квадрат или прямоугольник, а также текст. После выделения в правом боковом меню возникнет строка Fill — она нужна для управления цветом и прозрачностью. Вы увидите значение Solid, вместо него нужно выбрать один из предложенных вариантов:

  • Linear — вы получите линейный градиент,
  • Radial — для создания радиального градиента,
  • Angular — подходит для углового градиента,
  • Diamand — вы сможете сделать градиент в виде кристалла.

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

Освоить навыки графического дизайна и сразу начать работать в Figma можно на онлайн-курсах от Pentaschool, Нетологии, Contented, МИПО и Логомашины. Ещё больше курсов по направлению дизайна на нашем портале. 

Сейчас мы дарим 10 000 ₽ на обучение в любой из школ-партнёров, представленных на сайте tutortop.

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

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

Угловой градиент подходит для создания неоднородной заливки и резкой смены оттенков. Пользователь управляет инструментом при помощи круга — так удобнее менять угол наклона и добавлять цвета.

В кристальном градиенте в центр фигуры помещается кристалл — есть возможность менять его размеры и контролировать ширину распыления.

Сложный градиент в Figma

Создать сложный красивый градиент можно за пару минут — его так называют из-за большого количества оттенков и глубины цвета. Рассмотрим два варианта — сделать такой градиент можно без плагина и с ним.

Для работы без плагина понадобится чистый фон, на котором нужно в хаотичном порядке разместить фигуры. Следующий шаг — раскрасить их в разные цвета. После этого необходимо в боковой панели справа найти пункт Effects и выбрать Layer blur — вы можете менять значения в виде цифр. Результат будет мягче или же сдержаннее в зависимости от выбранных параметров. Если хотите получить эффект тумана, добавьте настройку Noize.

Плагин Mesh Gradient поможет сделать красочный градиент довольно быстро. Для начала нужно установить его и запустить. После запуска вы увидите широкое меню настроек — точки регулирования в плагине называются «Mesh points». При их помощи можно добавлять цвета, регулировать насыщенность и направление градиента. На одном фоне возможно разместить до 16 точек — это позволяет сделать градиент сложным и уникальным. Кнопки в пункте «Control Visibility» облегчает работу с основными точками, их добавлением и контролем. Значение «None» предназначено для предпросмотра — вы можете оценить градиент перед сохранением. Готовый эффект можно использовать отдельно или разместить на фото. Как это сделать — читайте чуть ниже.

Как сделать градиент на фото в Фигме?

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

  1. В основном меню в верхнем углу слева выбрать пункт File, затем нажать Place Image. Так вы сможете быстро загрузить картинку с компьютера.
  2. Нажать Ctrl+Shift+K и выбрать нужное фото.
  3. Перенести фото из нужной папки в рабочую область.

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

Эту фигуру необходимо наложить на фото и уже после приступать к настройкам.

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

16 красивых идей цветового градиента для графического дизайна

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

Реклама

01 Moon Raker Tawny Port Красивый градиент цвета Вдохновляющий дизайн

02 Deep Koamaru и True V Красивый градиент цвета Inspiration Design

03 Atomic Tangerine и ваш розовый красивый градиент цвета Inspiration Design

04 Curious Blue Loulou Красивый градиент цвета Inspiration Design

Реклама

05 Свежий баклажан Светло-желтый Красивый градиент цвета Inspiration Design

06 Гоблин Барвинок Серый Красивый градиент цвета Inspiration Design

07 Розовое и светлое солнце, красивый градиент цвета, вдохновляющий дизайн

08 клюквенный лебединый пух, красивый градиент цвета, вдохновляющий дизайн

реклама

9000 7 09 Королевский синий лебединый пух Красивый градиент цвета Вдохновение

10 Королевский синий водяной лист Красивый дизайн градиента цвета

11 Тахуна Сэндс Джеральдин Красивый дизайн градиента цвета

914 Min t Green Shakespeare Beautiful Color Gradient Inspiration Design

15 We Peep Studio Красивый цветовой градиент Inspiration Design

16 Pink Purple Studio Красивый цветовой градиент Inspiration Design

Реклама

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

Если вам нравится этот пост, вам могут быть интересны другие статьи о цветовых градиентах и ​​руководствах по теории цвета.

Реклама

Автор:

Ярослав Яковлев

Behance

Instagram

Pinterest

Если вам понравился этот пост, поделитесь им в социальных сетях!