January 18, 2023

Практичні способи використання режимів накладання у Figma

У цій статті я покажу декілька практичних способів використання режимів накладання Figma у ваших дизайнах!

Перш ніж ми заглибимося в випадки використання, ось 2 області, де можна знайти режими змішування у Figma:

A) Fill Blend

Коли ви вибираєте заливку, ви помітите, що є маленька піктограма краплі, за допомогою якої ви можете встановити режим змішування для певної заливки.

B) Layer Blend

Ви також можете знайти режими накладання під заголовком «Шар». Це застосовує змішування до вибраного шару, який може бути об’єктом або фреймом, що містить інші об’єкти.

Що таке ‘Pass through’ vs ‘Normal’?

«Pass through» — це налаштування шару за замовчуванням у Figma. Це означає, що змішані шари будуть просвічуватися через шар. Однак, коли шар має значення «Normal», він непрозорий, і змішані шари не просвічуються крізь нього

Тепер, коли ми розібралися з основами, ось кілька практичних способів використання режимів накладання у Figma!

1. Видаліть фон білих зображень

Використайте Multiply. Це чудово підходить для підписів на білому тлі, зображень продуктів, зроблених на білому тлі студії.

Зверніть увагу, що фон повинен бути якомога ближче до білого. Фон кремового кольору не стане прозорим, якщо для режиму змішування встановлено значення «Multiply». Можливо, вам доведеться використовувати Remove bg, щоб досягти такого ж ефекту.

2. Створення ефекту трафаретного друку

Імітуйте ефекти трафаретного друку, встановивши шар друку/заливку на «Multiply» та накладіть його на об’єкт (наприклад, футболку). Це додасть певної реалістичності вашому макету за один крок.

Multiply має адитивний ефект. Він повільно малює шари дизайну. Усі шари прозорі. Таким чином, ви можете додати скільки завгодно шарів для досягнення бажаного ефекту.

3. Градієнтні накладки з більшою яскравістю та глибиною

Градієнтні накладки зазвичай зменшують насиченість зображень.

Створіть/збережіть глибину та яскравість зображення, додавши режим змішування до градієнтного шару. Спробуйте додати режим змішування «Colour Dodge» або «Soft Light», щоб краще підкреслити кольори на зображенні та зробити їх яскравими.

Експериментуйте з різними режимами змішування, щоб досягти унікальних ефектів!

4. «Адаптивні» елементи дизайну

Коли ми проектуємо дизайн, у нас часто є багато варіантів кольорів, які потрібно опрацювати. Наприклад, різнокольорові картки.

Завдяки «Multiply» у нас не виникає потреби налаштовувати кожен дизайн відповідно до різних колірних схем. Кольори гармонійно поєднуються, створюючи таким чином дизайн, який потребує менше налаштувань.

5. Зображення в градаціях сірого

Замість того, щоб вручну налаштовувати насиченість зображень на 0, додайте шар насиченості поверх зображення. Це може прискорити ваш робочий процес.

6. Інші класні ефекти

Ефект Duotone

Створюйте круті кольорові ефекти за допомогою «Difference» та «Hue». Режим Hue/Difference замінює відтінок кольорів нижче на відтінок його вмісту. Це дозволяє створювати цікаві композиції за короткий час.

Режими змішування, які я використовую найчастіше, це Multiply та Soft light.
Пограйте з режимами змішування у Figma та подивіться, що ви можете створити!