UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Як працює режим змішування в графічних редакторах
shelest
shelest

Опубліковано • Оновлено

Як працює режим змішування в графічних редакторах

Зізнайтеся, ви просто натискаєте різні режими змішування, поки не отримаєте потрібний результат?

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

Image description 01

Ден Холлік (в минулому дизайнер продукту в TIDAL) у Twitter вніс ясність, як саме працює, всім відомий функціонал Blend mode (Режим змішування).

Режим змішування – це спосіб створення нового кольору на основі двох заданих.

Оскільки ієрархія має значення для створення нового кольору, тому задані кольори розбивають на задній (background) і передній план (foreground).

Image description 02

Darken та Lighten

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

Image description 04Image description 03

Darken порівнює значення RGB кожного кольору і вибирає найтемніше, створюючи новий колір.

Image description 05

Lighten робить те саме, але вибирає найсвітліше значення.

Image description 06

Multiply та Screen

Хоча вони дають схожі результати з Darken та Lighten, ви можете вважати їх більш елегантними версіями цих режимів. Відмінність яких є трохи більша контрастність.

Тому, маючи в наявності Multiply та Screen, використовувати Darken або Lighten — немає сенсу.

Image description 08Image description 07

Режим Multiply робить саме те, що ви подумали — просто перемножує кольори між собою.

Результат завжди темніший за оригінал.

Image description 09

Screen фактично схожий на Multiply, але він інвертує як задані кольори, так і кінцеві, тому результат завжди світліший.

Image description 10

Color Burn та Color Dodge

Остання пара режимів затемнення/освітлення — Color Burn та Color Dodge.

Вони мають яскраво виражену криву, тому можуть давати досить різкі результати порівняно з попередніми режимами.

Image description 12Image description 11

Color Burn — інвертує колір заднього плану, потім ділить його на колір переднього плану, а отриманий результат знову інвертує.

Image description 13

Color Dodge працює аналогічно, але навпаки — інвертує колір переднього плану та ділить на нього задній.

Image description 14

Overlay, Soft Light та Hard Light

Overlay, Soft Light та Hard Light відомі як контрастні режими змішування, оскільки вони роблять світлі ділянки світлішими, а темні - темнішими.

Це найбільш універсальні режими, особливо для зображень.

Image description 16Image description 15

Overlay є досить цікавим. Якщо значення кольору заднього плану світле (> 127,5), то застосовується режим Screen, але з вдвічі меншим ефектом, що робить передній план світлішим. При темному значенні (< 127,5) — застосовується режим Multiply, але також з вдвічі меншим ефектом, що робить передній план темнішим.

Image description 17

Hard Light — це те саме, що й Overlay, за винятком того, що використовується колір переднього плану.

Image description 18

Soft Light — найскладніший зі стандартних режимів накладання. Він дає результати, подібні до Overlay, але більш витончені.

Image description 19

Difference та Exclusion

Difference та Exclusion відомі як режими інверсного змішування, оскільки вони створюють колір, який майже протилежний одному з двох заданих.

Image description 21Image description 20

Difference робить саме те, що закладено в його назві - знаходить колір поміж двох заданих кольорів.

Значення одного кольору віднімаються від значень іншого. Всі від'ємні числа перетворюються на додатні.

Image description 22

Exclusion дає аналогічний результат, але набагато складніший.

Від суми кольорів передньго та заднього планів віднімаємо подвійний їх добуток.

Image description 23

Hue, Saturation, Color та Luminosity

Hue, Saturation, Color та Luminosity відрізняються від інших режимів тим, що вони оперують компонентами відтінку, насиченості та яскравості, а не значеннями RGB.

Вони формують новий колір шляхом комбінування значень HSL двох заданих кольорів.

Image description 25Image description 24

Hue бере значення відтінку з кольору переднього плану, а значення насиченості та яскравості — з заднього.

Image description 26

Saturation бере значення насиченості з кольору переднього плану, а значення відтінку та яскравості — з заднього.

Image description 27

Color бере значення насиченості та відтінку з кольору переднього плану, а значення яскравості — з заднього.

Image description 28

Luminosity бере значення яскравості з кольору переднього плану, а значення відтінку та насиченості — з заднього.

Image description 29


👉 Більшe в Telegram →

Найстарші коментарі (1)

Згорнути/розгорнути
 
lazyman profile image
Nikita Alexeyev

Класна стаття! Щодо Lighten та Screen, то при накладуванні шарів Lighten не залішає фону, а Screen залішае трохи світлий. І якщо верхній шар не займає всю площу нижнього, то треба додатково накладувати маску, а з Lighten такого робити не треба. То ж при редагуванні зобржень майже завжди віддаю перевагу Lighten ніж Screen.