Subpixel rendering je technika jak optimalizovat zobrazení grafiky na LCD displejích. Technika zohledňuje fyzické vlastnosti LCD, kdy je každý pixel na displeji složen ze tří malých RGB pixelů. Technika pomocí různého míchání barev na hranách zlepšuje obrazovou ostrost a čitelnost textů. Jistě znáte vyhlazení textů na Windows (ClearType).

Detaily nebudu rozebírat, jelikož je o tom již spoustu napsáno. Odkazy pro zájemce na wiki 

Žádný z grafických programů, které znám nedisponuje možností jak výslednou grafiku zoptimalizovat pomocí subpixel renderingu. Většina grafiků to neřeší. Respektive je to dost práce a přemýšlení navíc. Nedávno mi kolega z Falanxie přezdívaný pixel pervert (vaclav.vancura.org) ukázal čeho je možné pomocí subpixelů dosáhnout. 

Photoshop

Subpixel rendering pro text

Pro techniku popisovanou níže využijeme jednu vlastnost Photoshopu, která mě pár let celkem rozčiluje, jelikož nikde nejde vypnout a většinu času vám komplikuje práci. Využití jsem našel až teď.

Tou zázračnou vlastností, je možnost pozicovat texty a vektorovou grafiku (path, shape) na desetiny pixelů. Například 1,3px. Photoshop se s tím popere po svém a provede aliasing. Odstín aliasovaného pixelu je tmavší nebo světlejší, záleží kde fyzicky leží hrana.

Poté co jsem pročítal články o Subpixelech a LCD napadla mě jednoduchá věc. Pokud je fyzický pixel na obrazovce tvořen 3 menšími pixely v základních barvách? Jak to celé nasimulovat ve Photoshopu?

Výsledek je mít 3 vrstvy, každá propouští jednu základní barvu. Vrstvy jsou posunuty v offsetu 0,3px (tak jako fyzické pixely). Výsledek je překvapivě funkční.

Zde je jednoduchá akce (Photoshop ATN), kterou si nahrajte do Photoshopu a můžete experimentovat.

Je to nenáročné a účiné. Bohužel photoshopu chybí dobrý aliasing na textech, což celou metodu celkem devalvuje, ale je to použitelné. Nejvíce se mi osvědčil režim SMOOTH, kdy jsou texty relativně jemně vyhlazené. Techniku lze použít na jakýkoliv prvek, který lze pozicovat na desetiny pixelů. U bitmap to bohužel nefunguje.

Photoshop Subpixel Rendering u bitmap

Celý postup nefunguje uplně přesně, jelikož je nutné obrázek dělit třemi a Photoshop evidentně dělit třemi neumí. I v případě, že máte obrázek v rozměrech, které dělitelné třemi jsou, vznikají někde uvnitř výpočtu nepřesnosti, které se na obrázku projeví v podobě svislých pruhů. Nijak se mi chybu nepodařilo odstranit, doufejme že v Adobe s tím něco udělají.

Celý postup vyžaduje obrázk v rozlišení které je dělitelné třemi. Výsledek bude 3x menší. Postup nelze aplikovat tak, že nejprve zdrojový obrázek 3x zvětšíte, aplikujete proceduru a budete zpět na originálním rozlišení. To vám opravdu fungovat nebude. Je potřeba mít pixely opravdu všude! Výsledek bude vždy 3x menší.

Postup:

1) Upravte obrázek tak aby jeho rozměry byly dělitelné 3.

2) Vytvořte RGB vzor

3) umístěte RGB vzor do vrstvy pod obrázek a na vrstvu s originálním obrazem aplikujte prolnutí “Multiply”. Zapečte obrázek do jedné vrsty (Flatten Image)

4) Zmenšete obrázek na 1/3 (33,33%), režim zmenšení musí být bilinear

5) výsledek po zmenšení

6) Otevřete levels a u maximum bílé hodnoty nastavte na 85

7) Výsledek

Celý postup je dosti limitován ruční přípravou, bez možnosti nastavení dalších hodnot, které zlepší výstupy. Taktéž nějaké ladění je celkem složité, ale je to nejjednodušší cesta jak se subpixel renderingem začít experimentovat, prakticky v jakémkoliv grafickém programu.

A k čemu je to dobré?

Výhody využijí především ti, kteří vytváří detailní grafiku (ikony, GUI). Jinde asi uplatnění nemá moc smysl, pak je to již opravdu pixel pervert :)