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

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

Градиентная заливка поверх изображения

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

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

1. Поместите изображение на фрейм.
2. Создайте прямоугольник поверх изображения.
3. Для прямоугольника выберите заливку Linear Gradient или Radial Gradient.
4. Настройте цвета градиента: Для затемнения краёв: от чёрного/тёмного к прозрачному. Для цветовых эффектов: выберите нужные цвета.
5. Измените режим наложения слоя (Blend Mode):

• Multiply - для затемнения.
• Screen - для осветления.
• Overlay - для контраста.
• Color - для окрашивания.

Ниже приведена таблица, которая раскрывает режимы наложения для градиентной накладки. Она поможет быстро выбрать правильный режим наложения (Blend Mode) для слоя с градиентом в зависимости от нужного визуального эффекта:

Режим наложения	Лучше всего подходит для	Как работает эффект
Multiply	Затемнения, создания виньетки, тени	Умножает цвета основы и наложения, затемняя изображение. Белый цвет становится прозрачным.
Screen	Осветления, создания свечения, бликов	Осветляет изображение. Черный цвет становится прозрачным.
Overlay	Увеличения контраста и насыщенности	Комбинирует Multiply и Screen: затемняет тёмные и осветляет светлые области.
Soft Light	Мягкого тонирования, цветокоррекции	Более мягкая версия Overlay. Добавляет оттенок, не перегружая контраст.
Color	Изменения или добавления цветового оттенка	Применяет цвет градиента, сохраняя яркость и контраст исходного изображения.

 

Если вы хотите мягко затемнить края фото, то создаете темный градиент и выбираете для него режим Multiply. Если же ваша цель - окрасить черно-белое изображение в золотистый тон, то градиент с золотым цветом и режим Color будет идеальным решением.

 

Эксперименты с непрозрачностью слоя (Opacity) позволят сделать любой эффект более тонким и точным.

 

Использование масок с градиентом

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

1. Создайте фрейм с изображением.
2. Добавьте к фрейму маску (Mask).
3. В маске создайте градиент от чёрного к белому:

• Чёрная часть - прозрачная область.
• Белая часть - видимая область.

 

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

 

Градиент как часть стиля изображения

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

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

1. Выберите изображение.
2. В правой панели нажмите на плюсик рядом с заливкой (Fill).
3. Выберите тип градиента.
4. Настройте цвета и прозрачность.

 

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

 

Полезные советы по созданию градиента для картинки

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

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

Для фона сайта/приложения

• Используйте линейный градиент сверху вниз или снизу вверх.
• Часто применяют градиент от цвета к прозрачному для плавного перехода.

Для текста поверх изображения

• Создайте тёмный градиент в нижней части изображения.
• Это улучшит читаемость текста.

Быстрые комбинации

• Linear Gradient: Ctrl/Cmd + E.
• Чтобы добавить точку цвета в градиенте - кликните на линейке градиента.
• Чтобы удалить точку - перетащите её за пределы панели.

Пример создания градиента с затемнением краёв изображения

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

1. Изображение - Прямоугольник поверх.
2. Прямоугольнику задать радиальный градиент.
3. Центр: полностью прозрачный (альфа 0%).
4. Края: чёрный с нужной прозрачностью.
5. Blend Mode: Multiply.

Вывод

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