Dvoubarevné filtry: Od teorie k praxi

Pochopte matematiku za duotonními filtry a naučte se je vytvářet v oblíbených designových nástrojích. Praktický průvodce od základních konceptů až po pokročilé aplikace.

10 min čtení Pokročilý březen 2026

Webový designer ukazuje na displej s příklady různých duotonních efektů aplikovaných na fotografie

Autor

Tomáš Řezáč

Senior Designer a Art Director

Senior Designer se 14 lety praxe v duotónovém designu a fotografických úpravách pro moderní web.

Edukační obsah

Tento článek je určen jako edukační materiál. Techniky a metody zde popsané mohou být aplikovány různě v závislosti na konkrétním designu, softwarovém vybavení a cílové audience. Výsledky se liší podle vašeho pracovního postupu a nástrojů, které používáte.

Co jsou dvoubarevné filtry?

Dvoubarevné filtry nejsou jen módní trend. Je to matematicky ukotvená technika, která transformuje fotografie na vysokokontrastní vizuály s konzistentním stylem. Když si vezmete libovolnou fotografii a aplikujete na ni dva konkrétní barevné tóny, vytvoříte jedinečný vizuální jazyk, který se opakuje na celém webu.

Nejde jen o to, aby to vypadalo hezky. Duotonní filtry řeší skutečný problém — jak udržet vizuální konzistenci mezi fotkami různých kvalit a stylů. Máte foto z mobilu vedle profesionálního snímku? Duotón to sjednotí. Fotos z různých míst? Stejná barevná schéma je spojí.

Vědecky vzato, dvoubarevný filtr funguje na základě mapování luminance (jasu) původního obrázku na dva vybrané barevné tóny. Tmavé oblasti se mapují na tmavý tón, světlé na světlý tón, a všechny střední hodnoty se interpolují mezi nimi. Je to elegantní řešení, které se prosazuje v současném webdesignu.

Grafické znázornění procesu mapování luminance na dva barevné tóny v duotónovém filtru

Diagram ukazující tři hlavní kroky vytvoření dvoubarevného filtru: vstupní fotografie, výběr barevné palety a konečný duotonní efekt

Jak to funguje — matematika za efektem

Zatímco technologie se zdá složitá, princip je přímočarý. Vezměte si jakýkoliv obrázek. Ten má rozpětí od zcela černé (hodnota 0) po zcela bílou (hodnota 255) v každém pixelu. Dvoubarevný filtr vezme toto rozpětí a překreslí ho na dvě barvy.

Řekněme, že si vyberete tmavě modrou a citrónově žlutou. Všechny pixely, které byly zcela černé, se stanou tmavě modré. Všechny pixely, které byly zcela bílé, se stanou citrónově žluté. A všechny pixely uprostřed? Ty se plynule interpolují mezi těmito dvěma barvami. Tímto způsobem zachováte všechny detaily originální fotografie — kontrast, strukturu, texturu — ale s zcela novým barevným nádechem.

V designových nástrojích se to dělá přes gradient mapy nebo color lookup tabulku. Photoshop to má jako předdefinovanou funkci. Figma to zvládne skrz adjustment layers. Web funguje přes CSS filtry nebo SVG efekty. Všechny tyto přístupy dělají v podstatě totéž — mapují jas na barevný gradient.

Praktická aplikace — krok za krokem

Víte, jak to funguje. Teď si to vyzkoušíme. Tady je konkrétní proces, který používáme v našich projektech.

Vyberte fotografii a připravte ji

Začněte s kvalitní fotografií. Nebude to fungovat na každém obrázku stejně. Fotky s vysokým kontrastem a zajímavou strukturou dávají nejlepší výsledky. Fotografie portrétů, architekturou nebo přírodní scény fungují skvěle.

Zvolte vaši duotonní barevnou paletu

Tady jde o to, aby byly obě barvy kontrastní. Tmavá a světlá. Modrá a zlatá. Burgundská a krémová. Nemusí jít o komplementární barvy z color wheelu, ale měly by spolu fungovat. Vyzkoušejte několik kombinací.

Aplikujte gradient mapu nebo color lookup

V Photoshopu to je Image Adjustments Gradient Map. V Figmě si přidejte Color Adjustment s Custom gradient. Na webu to děláte CSS filtrem nebo SVG. Každý nástroj to má trochu jinak, ale výsledek je stejný.

Vylaďte kontrast a sytost

Někdy potřebujete zvýšit kontrast, aby byl efekt ostřejší. Někdy snížit sytost, aby byl jemnější. Zde se to liší projekt od projektu. Vyzkoušejte a sledujte, co vám funguje.

Nástroje — co skutečně potřebujete

Nemusíte být expert. Všechny tyto nástroje mají dvoubarevné filtry vestavěné. Někdy se jmenují trochu jinak, ale vždycky tam jsou.

Photoshop

Gradient Map je vaš nejlepší přítel. Je to nejjednoduší cesta. Nastavíte si dva barevné body a hotovo. Máte tam také možnost Curves, abyste vyladili detaily. Profesionálové si vytváří vlastní předvolby pro konzistenci mezi projekty.

Figma

Figma to řeší skrz Color Adjustment s Custom gradient. Není to tak intuitivní jako Photoshop, ale funguje to. Bonus — když si vytvoříte komponentu s duotonním efektem, můžete ji snadno duplikovat a upravovat. Ušetří vám čas, když máte 20 fotografií, které potřebují stejný filtr.

Web — CSS a SVG

Na webu to dělají obě metody. CSS filtr je jednodušší, ale má omezení. SVG vám dá víc kontroly. Můžete si vytvořit vlastní SVG filtr s feColorMatrix nebo feFuncR, feFuncG, feFuncB elementy. Je to trochu více kódu, ale výsledek je přesnější.

Přehled rozhraní tří hlavních nástrojů: Photoshop s Gradient Map panelem, Figma s Color Adjustment nastavením, a VS Code s CSS filtrem

Praktické tipy pro konzistenci

Teorie je fajn, ale co to dělá reálně užitečným? Konzistenci. Tady je to, co jsme se naučili z projektů.

Vyberte jednu barevnou schéma na projekt

Neměňte duotonní filtry na každé fotografii. Zvolte si jednu kombinaci a přidržujte se jí. To vytváří rozpoznatelný vizuální styl. Když si někdo otevře váš web, pozná to hned.

Testujte na různých fotografiích

To, co vypadá skvěle na jedné fotce, nemusí fungovat na jiné. Vyzkoušejte váš filtr na portrétů, krajinách, detailech. Podívejte se, jak se chová. Pak si ji upravte.

Na webu — uložte si své filtry

Když si vytvoříte SVG filtr, kterým se vám líbí, uložte si ho. Pak ho můžete aplikovat na všechny obrázky s jednou třídou CSS. To je efektivnější než měnit filtry ručně.

Kontrolujte kontrast a čitelnost

Pokud máte text přes obrázek, ujistěte se, že je čitelný. Někdy silný duotonní filtr snižuje čitelnost. Přidejte contrast, nebo umístěte text mimo filtrovanou oblast.

Výsledek — konzistentní a moderní

Dvoubarevné filtry nejsou jen efekt. Je to nástroj pro budování konzistentního vizuálního stylu. Když si vezmete sérii fotografií a aplikujete na ně stejný duotonní filtr, vytvoříte něco, co se cítí jako koherentní design. Návštěvník to vnímat nemusí vědomě, ale poznámene si, že vše spolu souvisí.

Matematika za tím je jednoduchá — mapování luminance na dva barevné tóny. Ale efekt je silný. Zkuste si to. Vezměte si pět fotografií z různých zdrojů, aplikujte na ně stejný duotonní filtr a podívejte se, jak se transformují na sjednocenou sérii. To je síla tohoto přístupu.

Teď víte, jak to funguje. Čas to zkusit na svém projektu.