Photoshop: Převod průhlednosti na jednobitovou - Grafika.cz - vše o počítačové grafice

9. ledna 2008, 00.00 | Jednobitový alfa kanál, neboli jednobitová průhlednost, je taková
forma průhlednosti, kdy je pixel buď stoprocentně průhledný, nebo stoprocentně neprůhledný. Příslušný
objekt je potom možné jednoduše vykreslit na jakémkoliv pozadí (a to velmi
rychle). Právě z toho důvodu je tato technika využívána především u her a u ikonek.

Pro začátek si ukážeme pár příkladů jednobitové průhlednosti. A protože je tato technika nejčastěji používaná u spritů her, zavítáme do této oblasti. Autorem následujících obrázku je Kenneth Fejer. Pokud jakoukoliv část obrázku zvětšíte, uvidíte, že opravdu žádný pixel není poloprůhledný. Tato technika však vyžaduje velké množství zkušeností a času, proto si zkusíme práci trochu ulehčit. Respektive...

V dnešním článku nám vznikne jednobitová průhlednost objektu spíš jako vedlejší produkt. Hlavním cílem bude ukázat (relativně) jednoduchou metodu, jak průhledné pixely obrázku převést do masky vrstvy.

K tomuto úkonu totiž Photoshop žádné funkce neposkytuje. Přitom naopak - převést masku vrstvy na průhledné pixely - je otázka jednoho kliknutí (stačí dát smazat masku vrstvy a v dialogu vybrat Apply). Takže, jak na to?

Než vůbec začneme s prací, musíme mít nějaký ten ukázkový obrázek. Například tento (stahujte kliknutím na obrázek):

Tento soubor si otevřete, vytvořte novou vrstvu, nastavte výběr velký 128 x 128 pixelů a vyplňte jej světlejší nebo tmavší barvou, než je barva pozadí. Tím si určíme prostor, do kterého obrázek zmenšíme.

Poté označíme vrstvu s fialovým tvorem a zkratkou Ctrl + T vyvoláme transformaci. Od oka zmenšete obrázek tak, aby se tam celý vešel.

Když už máme obrázek velikosti ikonky (s menším obrázkem se nám bude lépe pracovat a efekt bude více znatelný), můžeme se konečně pustit do vysvětlování.

Princip převodu průhledných pixelů do masky je následující. Nejprve si uložíme průhlednost vrstvy někam bokem (buď do alfa kanálu, nebo do jiné vrstvy). Poté budeme původní vrstvu kopírovat a slučovat do té doby, než nebudou všechny pixely 100% neprůhledné. A až tomu tak bude, uloženou původní průhlednost nastavíme této vrstvě jako masku. Takže se do toho pustíme.

Nejprve zkopírujeme vrstvu s fialovým tvorem a původní vrstvu skryjeme (s touto vrstvou nebudeme pracovat, a tak nám v ní zůstane uložená průhlednost).

Tuto vrstvu duplikujeme zkratkou Ctrl + J...

...a poté ji sloučíme s minulou vrstvou zkratkou Ctrl + E.

Tyto dvě zkratky stiskněte několikrát po sobě, dokud se nezačnou původně průhledné pixely postupně objevovat.

Jakmile se kopírováním a slučováním obrázek nemění, jsme u konce - nyní jsou všechny pixely neprůhledné...

...a obrázek velice ošklivý.

Načteme výběr z původní skryté vrstvy (Ctrl + klik na vrstvu):

A nové vrstvě přidáme masku vrstvy (kliknutím na ikonku kterou ukazuje následující obrázek):

Výsledek? Naprosto stejný obrázek jako ten, se kterým jsme začínali. Ovšem tentokrát je průhlednost uložena pouze v masce vrstvy. A toho hned využijeme pro převod na průhlednost jednobitovou.

Vrstvu zkopírujte (ať si omylem nezničíme originál) a vybereme masku vrstvy (bude kolem ní rámeček):

Trik pro převod na jednobitovou průhlednost spočívá v použití filtru Práh (Treshold). Ten z jakéhokoliv obrázku udělá černobílý, takže v masce průhlednosti zbudou pouze dvě hodnoty - černá a bílá. Tj. pixel úplně průhledný, nebo úplně neprůhledný:

Jediným parametrem filtru určujete, které pixely už budou mizet a které ještě zůstanou viditelné. Všimněte si, že na prvním obrázku je vidět i kus štětce vlevo, kdežto druhý obrázek je už velmi ořezaný.

Mě se zdálo optimální číslo 166.

Ikonka už má jednobitovou průhlednost, a tak je účel článku splněn. Dotáhneme ale výsledek do konce a vytvoříme plnohodnotnou ikonku.

Nejprve obrázek malinko doostříme filtrem Unsharp Mask, nastaveným např. na tyto hodnoty:

Výsledek ve 100% velikost:

Tvor je celkově dost tmavý, takže jej ještě zesvětlíme.

Vybereme novou vrstvu úprav Brightness/Contrast, ovšem předtím než klikneme, přidržíme Ctrl, Alt i Shift...

...což způsobí, že se nejprve zobrazí dialog, ve kterém zaškrtneme svázání vrstvy s předchozí (Group With Previous Layer):

A nastavení v dialogu se projeví pouze na vrstvě tvora.

Tento postup velmi šetří čas i "kliky" - nemusíte vytvořit novou vrstvu úprav, potvrdit, seskupit s předchozí vrstvou zkratkou a poté teprve měnit hodnoty. Můžete to udělat takto.

Hodnoty volte podle oka. Mě se zdály optimální 15 a 15.

Zbývá ještě stín, který byl celou dobu ve zvlášť vrstvě.

Se stíny je v jednobitové průhlednosti problém. Stín je totiž vytvořen většinou tak, že jde o tmavý flek, který je poloprůhledný a směrem ke kraji průhlednost roste. Vlastně je většinou tvořen pouze průhledností a té se teď chceme zbavit. Co s tím?

Stín vykreslíme pouze pixelovým vzorkem, který se bude skládat pouze s černé a průhledné barvy. Není to nic extra, ale v jednobitové průhlednosti si vymýšlet nemůžeme.

Začneme tím, že načteme průhlednost z původní vrstvy stínu (Ctrl + klik na vrstvu):

A vytvoříme novou vrstvu úprav vzorku (Pattern..). Tím, že jsme měli před vytvořením výběr, se tento výběr automaticky použil jako maska vrstvy.

Jako vzorek nastavíme např. jednoduchou šachovnici:

V případě, že je vzorek černo-bílý (a ne černo-průhledný), nastavíme interakci vrstvy na Násobení (Multiply). Tím docílíme kýženého efektu:

Na masku vrstvy použijeme starý známý Práh (Treshold) trik a jednobitový stín je na světě. Vzorek malinko skryje fakt, že stín nemá průhlednost, takže...

...zkuste i jiné vzorky, třeba se vám některý bude líbit víc.

Mimochodem poslední vzorek je z článku Photoshop tutoriál: Diagonální vzorky - základy. Nakonec je zde výsledek našeho snažení.

Na úplný závěr ještě přikládám reálné využití postupu v praxi. U následujícího obrázku byl uvedený postup využit k tvorbě ikonek s jednobitovou průhledností (pro použití v mobilních telefonech, které jako spousty jiných zařízení průhlednost mnohdy nepodporují). V těchto malých velikostech vyniká efekt nejvíce, a přestože je mnohdy nutné některé detaily upravit ručně, tato technika nám poskytne skvělý odrazový můstek.

Autor článku Václav Krejčí se zabývá grafikou a GUI designem, své zkušenosti nejnověji zúročil v knize "Adobe Photoshop: design grafiky GUI", věnované tvorbě grafických uživatelských rozhraní.