В этой статье
Scott
Градиент — это плавный переход между цветами. В интерфейсе он может выделять область, создавать ощущение глубины или задавать настроение иллюстрации. Его стоит выбирать под конкретную композицию, сохраняя читаемость текста и различимость элементов управления.
Ниже разберём основные типы градиентов и работу с заливкой в редакторе интерфейсов Pixso. На практике важны не только выбранные цвета, но и направление перехода, положение цветовых точек и содержимое поверх фона.
1. Как работает цветовой переход
Цвета и точки перехода
Градиент соединяет два или больше цветов. Цветовые точки определяют, где начинается и заканчивается участок перехода. Сдвигая их, можно сделать один цвет доминирующим или распределить переход равномерно.
Например, фон карточки можно построить от тёмно-синего к светло-голубому. Если на нём расположен белый заголовок, проверьте контраст во всей области текста, особенно над светлой частью.
Где применять градиенты
Градиенты полезны в разных носителях, но в каждом случае нужно проверить масштаб и расположение содержимого:
- Публикации в социальных сетях
- Дизайн веб-сайта
- Презентации
- Фоны
- Видео
- Для целей брендинга и маркетинга
2. Основные типы градиентов
Тип градиента определяет, как цвет распространяется внутри объекта. Его центр и направление можно выбирать под композицию, а не только по центру холста.
1. Линейные градиенты
Цвет меняется вдоль заданного направления: по горизонтали, вертикали или диагонали. Такой переход удобно использовать для фона блока или выделения одной стороны объекта.
2. Радиальные градиенты
Переход расходится от выбранного центра наружу. Центр можно сместить, чтобы создать световое пятно или подчеркнуть нужную область. Форма и размер перехода влияют на ощущение глубины.
3. Угловые градиенты
Цвет меняется при движении вокруг центра по углу поворота. Такой переход подходит для круговых цветовых композиций. Он не означает переход из угла прямоугольника: направление задаётся вокруг центральной точки.
4. Ромбовидные градиенты
Переход распространяется от центра в форме ромба. Его можно использовать как выразительный фон или часть иллюстрации. Проверьте, не отвлекают ли резкие направления формы от основного содержимого.
5. Составные переходы
Несколько полупрозрачных заливок могут создавать более сложную композицию. Начните с простого перехода и добавляйте слои только там, где они дают нужный визуальный результат.
Такой многоцветный фон показывает смешение нескольких цветовых областей. Его не следует путать с угловым градиентом, где цвет меняется вокруг центра.
3. Как использовать градиент в интерфейсе
Градиент помогает отделить область или направить внимание, когда он связан с задачей композиции. Для фона под текстом особенно важен контраст: средний цвет градиента не показывает, насколько читаем заголовок над каждой его частью.
Выберите роль градиента до настройки цветов:
- Иллюстрация: используйте переход для объёма или освещения, сохраняя различимость основного силуэта.
- Фон: проверьте заголовок, подписи и кнопки на самых светлых и самых тёмных участках.
- Акцент: ограничьте выразительный переход одной важной областью, чтобы соседние блоки не конкурировали за внимание.
Пример: градиент на карточке с заголовком
Представим карточку онлайн-курса: слева заголовок и дата, справа абстрактная иллюстрация. Начните с линейного перехода от тёмно-синего к голубому. Тёмную область оставьте под белым текстом, а светлую — под иллюстрацией. Если повернуть переход так, что голубая часть окажется за заголовком, прежний белый текст может перестать читаться.
Сначала задайте только две цветовые точки: в начале и в конце перехода. Если тёмной области под текстом не хватает, не добавляйте сразу множество цветов. Попробуйте сдвинуть точку, изменить направление или ограничить область текста. Промежуточная точка нужна, когда она помогает управлять переходом, а не просто делает заливку сложнее.
| Параметр | Что меняется в карточке | Как принять решение |
|---|---|---|
| Направление | Светлая область приближается к тексту или уходит от него | Сначала сохраните читаемость заголовка |
| Положение точек | Один цвет занимает больше площади | Подберите границу перехода под реальную композицию |
| Прозрачность | На результат влияет фон под карточкой | Сравните вариант на каждой используемой подложке |
| Ширина карточки | Меняются переносы и область под текстом | Проверьте длинный заголовок в узком варианте |
Условия WCAG 1.4.3 о контрасте текста (на английском) применяются и к тексту на градиенте: обычно требуется не менее 4,5:1, для крупного текста — 3:1. Проверяют фон под буквами, а не средний цвет всей карточки. Если нужного контраста не удаётся добиться без изменения композиции, используйте однотонную подложку под текстом или вынесите текст за пределы градиента.
4. Как настроить градиент в Pixso
В Pixso выберите объект, к которому хотите применить заливку. Для первого опыта удобно взять прямоугольник размером с будущую карточку и разместить на нём реальный заголовок.
Шаг 1. Создайте фрейм или фигуру нужного размера. Для фрейма можно использовать клавишу F.
Шаг 2. Выберите объект и откройте настройки заливки на правой панели.
Шаг 3. Переключите сплошную заливку на нужный тип градиента из доступных вариантов.
Шаг 4. Задайте цвета точек перехода. При необходимости добавьте промежуточную точку, чтобы управлять распределением цветов.
Шаг 5. Настройте положение и направление перехода, затем сравните результат с текстом и другими элементами карточки.
Шаг 6. Проверьте заливку на других размерах блока. Сохраните согласованное оформление в стиле или компоненте, если оно должно повторяться в проекте.
Почему переход выглядит не так, как задумано
| Проблема | Вероятная причина | Что изменить |
|---|---|---|
| В середине появился грязный оттенок | Промежуточные цвета не подходят выбранной палитре | Сравните соседние по тону цвета или добавьте одну осмысленную промежуточную точку |
| На тёмном фоне возникло неожиданное пятно | Одна из точек полупрозрачна | Проверьте прозрачность и нижележащую заливку |
| Текст читается только в широком варианте | Перенос строки попал на светлый участок | Измените область перехода или подложку, а не уменьшайте текст автоматически |
| После экспорта заметны полосы | Отображение зависит от формата, обработки и устройства | Сравните экспорт с макетом при одинаковом масштабе; не усиливайте контраст цветов вслепую |
Для карточки курса сохраните рядом широкий вариант, узкий вариант с длинным названием и вариант на другой подложке. Меняйте по одному параметру: иначе трудно понять, помогли ли новые цвета, угол или прозрачность. После выбора заливки проверьте финальное изображение там, где оно будет использоваться: уменьшенная карточка и крупный баннер по-разному показывают мелкие переходы.
Выбирайте градиент под задачу
Начните с двух цветов и понятной роли: фон, акцент или объём. Проверяйте результат с реальным содержимым, а не отдельно от интерфейса.
Дорабатывайте цвета и направление в Pixso так, чтобы переход поддерживал иерархию и не мешал чтению. Там, где обычная заливка решает задачу лучше, используйте её.
