Neonová tabule v Photoshopu - Grafika.cz - vše o počítačové grafice

20. září 2007, 00.00 | Návodů na neonový nápis v Photoshopu jsou desítky, všechny ale trpí stejným
nedostatkem - výsledky jsou moc umělé a v praxi nepoužitelné. Pokud opravdu chcete
neonový nápis, který bude vypadat alespoň trochu reálně, nestačí jen použít efekt vnější záře ...

Samozřejmě je dobré znát co nejvíc postupů, a tak si nezapomeňte následující pár článku o podobném efektu přečíst a prostudovat:

Grafika.cz - Neon efekt (CZ)
Grafika.cz - Neonový efekt 2x jinak (CZ)
Grafika.cz - Neonový nápis (CZ)

Spoono.com - Neon Glow Text (EN)
Team Photoshop.com - Glowing Text (EN)
Aviva Directory.com - Neon Brick Text (EN)
Inside graphics.com - Neon Effect (EN)
Photoshop Support.com - Neon Sign (EN)

Máte? Tak se dáme do práce.

Jako základ pro experimentování nám poslouží následující logo fiktivního baru BlueBar, který fiktivně jezdí v jídelním voze (proto ta sklenička symbolizující tvar kolejnice). Kliknutím na obrázek si stáhněte logo ve větší velikosti, a otevřete jej v Photoshopu.

Nejprve je nutné převést logo do inverzní podoby (aby bylo na černém podkladu). Za normálních okolností bychom zřejmě upravovali základ v křivkách a stačilo by odpovídající křivky přebarvit. Ani takto to ale nebude větší problém.

Obrázek invertujeme zkratkou Ctrl + I a poté vyvoláme dialog Obraz - Přizpůsobení - Odstín a sytost (Image - Adjustments - Hue/Saturation), ve kterém posunujeme prvním jezdcem do té doby, než logo vypadá přibližně stejně modře jako na obrázku předchozím. Ve skutečnosti je modrá znatelně tmavší, ale oproti černému pozadí vypadá stále celkem světlá. Šedého rámečku si nemusíme všímat, jelikož je bez barvy a tudíž stále šedý (pouze se invertováním malinko víc ztratil, ale to nám nevadí).

První typ záře který použijeme je jednoduchý a velmi častý (na tom není nic špatného, horší je, že se u tohoto kroku většinou rovnou s prací i končí). Vrstvu zkopírujte (např. zkratkou Ctrl + J) a aplikujte na ní efekt Gaussovské rozostření (Gaussian Blur) s Poloměrem (Radius) cca 4 px.

Jakmile nastavíme této vrstvě interakci na Závoj (Screen), nápis začne svítit. Velikost tohoto "svitu" záleží na tom, jaký byl nastavený poloměr v minulém kroku. Nám to takto stačí, přeci jen, není to poslední "přisvěcování".

Co ale uděláme je, že stáhneme krytí vrstvě podkladové. Tím víc vynikne rozostřená vrstva.

Aby pod touto vrstvou neprosvítaly průhledné pixely (mřížka, kterou kreslí Photoshop), vytvoříme novou vrstvu černé výplně (viz levá část obrázku), a přesuneme ji pod obě vrstvy (viz pravá část obrázku). Úplně stejně můžeme vytvořit novou vrstvu a vyplnit ji celou černou barvou, takto ale méně zatěžujeme paměť a obrázek bude mít menší velikost.

Označíme nerozostřenou vrstvu a na klávesnici stiskneme klávesu 6 - tím se nastaví krytí na 60 %. Jak vidíte na obrázku, nápis je celkově tmavší, ale rozostřenější. Víc je totiž vidět rozmazaná vrstva.

To správné nepravidelné rozostření přinese efekt Kruhové rozostření (Radial Blur). Duplikujte rozostřenou vrstvu a aplikujte efekt z menu Filtr - Rozostření (Filter - Blur). Důležité je nastavení metody na Otočit (Spin), ostatní parametry (Míra - Amount a střed efektu) volte náhodně. Kvalitu (Quality) přepněte raději na Vysokou (Best). Výpočet je stále dostatečně rychlý.

Výsledek vidíte na obrázku.

Efekt je ale moc výrazný, a proto vrstvě stáhneme Krytí (Opacity) na cca 70 %.

Další rozostření bude typu Rozmáznout (Motion Blur). Opět duplikujte rozostřenou vrstvu a opět aplikujte efekt. Úhel (Angle) 0°, parametr Vzdálenost (Distance) volte přiměřeně:

Jedna ukázka při 100% pohledu:

A vrstvě opět stáhneme krytí, např. na 50 %. Chceme neonový nápis a ne matlanici.

Chcete-li, můžete ještě jednou duplikovat rozostřenou vrstvu a ještě jednou ji prohnat filtrem Kruhové rozostření (Radial Blur). Jen posuňte střed zase někam jinam:

A neonový panel se začíná pomalu rýsovat. Krom toho že svítí, je nejvýraznější část u textu "Bar" (ještě z prvního efektu Kruhové rozostření - Radial Blur). Skoro to vypadá, jako kdyby někdo sklo špatně očistil a zůstaly tam čmouhy, které se teď lesknou. A to je dobře.

Na řadě jsou "přepaly" - místa, která jsou přesvícená (ať už z jakéhokoliv důvodu). Znovu zkopírujeme rozmazanou vrstvu (kterou kopírujeme stále dokola) a tentokrát vyvoláme dialog úprav Obraz - Přizpůsobení - Úrovně (Image - Adjustments - Levels). Bílý jezdec posuneme směrem doleva tak, aby byl obrázek opravdu "přesvícený" a zářivý. Nebojte se toho, takto to nebude vypadat pořád.

Této vrstvě přidáme masku (přes tlačítko, které na ukázáno na dalším obrázku na paletě vrstev). Tuto masku vyplníme černou barvou a měkkým velkým bílým štětcem se stáhnutým krytím do ní kreslíme náhodné čmáranice. Následující obrázek ukazuje podobu masky (černobílá část vrstvy) a na pozadí podobu vrstvy (ostatní vrstvy jsou zde pro názornost skryty).

Takto vypadají všechny vrstvy dohromady. Náhodným zesvětlením některých částí obrázku je efekt hned malinko reálnější. Vpravo je pro porovnání obrázek bez přepalů.

Poslední úpravy se budou týkat barvy. V některých místech náhodně nepatrně posuneme odstín.

V paletce vrstev přidejte novou vrstvu úprav Vyvážení barev (Color Balance) a ve Světlech (Highlights) stáhněte poslední jezdec doleva k barvě žluté (Yellow). Tím bude vše do zelena.

Stejně jako minule, i nyní vyplníme masku černou barvou (aby efekt nebyl nikde vidět) a velkým bílým měkkým štětcem do masky několikrát náhodně nakreslíme pár čar. V těchto místech se potom objeví efekt - tedy zelenější nápis.

A to je vše. Tedy alespoň ode mě, vy samozřejmě můžete nápis dál vylepšovat až k naprosté dokonalosti. Nakonec si ještě jednou prohlédneme vrstvy v obrázku:

1 - podkladová černá vrstva pozadí
2 - normální vrstva loga na černém pozadí, se staženým krytím na cca 60-70 %
3 - rozmazaná vrstva efektem Gaussovské rozostření (Gaussian Blur), interakce závoj (screen), snížené krytí
4 - rozmazaná vrstva efektem Kruhové rozostření (Radial Blur), interakce závoj (screen), snížené krytí
5 - rozmazaná vrstva efektem Rozmáznout ... (Motion Blur), interakce závoj (screen), snížené krytí
(6) - rozmazaná vrstva efektem Kruhové rozstření (Radial Blur), interakce závoj (screen), snížené krytí
7 - vrstva s přepaly a maskou, která určujte, kde budou tyto místa vidět
8 - vrstva barevných úprav s maskou, která určuje, kde bude barva změněna

Kliknutím na následující obrázek zobrazíte výsledek ve 100% velikosti:

A co říci na závěr? Náš výsledek, přestože o stupeň převyšuje tutoriály zmíněné v úvodu, stále ještě naprosto dokonalý není. Znáte-li jednodušší a realističtější způsob, jak se dobrat k neonovému nápisu, v diskuzi je spousty místa.

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í.