Разберите устройство плашки
В посте №644 показаны восемь сочетаний для Figma. Общий принцип — несколько Radial Fill, а не один градиент с длинным списком разноцветных точек. Каждая заливка создаёт отдельную мягкую область.
Для упражнения возьмите прямоугольник со скруглёнными углами и спокойную светлую основу. Сначала повторите сочетание «Мятный свет», а затем меняйте цвета. Так будет проще понять, что зависит от палитры, а что — от положения центров.
У каждого радиального слоя в исходной инструкции две крайние точки: цвет с непрозрачностью 100% и тот же цвет с непрозрачностью 0%. Полупрозрачный край позволяет слоям перекрываться, не создавая жёстких полос.
Цвета первого примера
В карточке «Мятный свет» указаны три цвета и ориентиры расположения. Сохраните эти значения в первом упражнении, чтобы сравнивать результат с исходником, а не подбирать всё одновременно.
- #A4FCF5 — мятный слой, центр слева сверху.
- #CDAFFA — сиреневый слой, центр справа сверху.
- #F7CBBF — персиковый слой, центр слева снизу.
Сначала настройте мятный слой от полного цвета к прозрачности. Затем добавьте сиреневый и персиковый по той же логике. Следите, чтобы прозрачная точка сохраняла цвет своего слоя, как указано в исходной карточке.
Двигайте центр, а не добавляйте новые цвета
Если яркое пятно оказалось прямо посередине и выглядит слишком резким, сместите его к краю фигуры. В публикации допускается положение центра немного за пределами плашки. Тогда внутри остаётся более мягкая часть цветовой области.
Меняйте по одному параметру. Сначала положение центра, затем протяжённость перехода, потом при необходимости непрозрачность. Одновременное движение всех трёх слоёв затрудняет понимание причины результата.
Если последний слой полностью перекрыл остальные, проверьте его прозрачный край и размер цветовой области. Добавление четвёртого цвета не исправит заливку, которая уже стала почти сплошной.
Проверьте другое сочетание
Повторите порядок действий на втором примере, используя значения из его карточки. Сравните положение цветовых пятен, а не только общий оттенок. Два градиента могут иметь близкие цвета, но совершенно разное распределение света.
Все восемь примеров доступны в бесплатной подборке мягких градиентов. Здесь не нужен текстовый промпт: материал показывает действия непосредственно в графическом редакторе.
Примените градиент под текст
Поставьте на плашку короткую подпись и проверьте её на каждой цветовой области. Контраст нужно оценивать там, где реально лежит текст. Удачное чтение на сиреневом участке не гарантирует его на более светлом мятном.
Если фон мешает, сместите цветовой центр от подписи или ослабьте конкретный слой. Не обязательно делать темнее всю плашку. Для карточки интерфейса сохраните вариант с текстом и без него, чтобы видеть, как фон работает в композиции.
Итог упражнения — редактируемая плашка с понятным устройством. Её можно менять под цвет проекта без поиска нового изображения: структура слоёв остаётся, меняются значения и расположение цветовых областей.
Материалы для следующих макетов
В Паке дизайнера есть фоны, текстуры и другие материалы для сборки макетов. Бесплатную подборку градиентов можно открыть отдельно и сначала повторить один из её вариантов.