Photoshop Tutorial: Pekelný nápis - Grafika.cz - vše o počítačové grafice

31. ledna 2006, 00.00 | Venku je zima až praští, co se tak zkusit zahřát u tvorby "pekelného nápisu"? Jedná se o text napsaný běžným fontem, který díky Photoshopu bublá, hoří, vře a taví se. Nápis se dá použít jako grafika na WWW stránky, nebo jako součást většího artworku.

Klíčové pro tvorbu takového nápisu jsou vhodné displacement mapy a na základě nich vytvořená textura. Displacement mapa je známá především z oblasti 3D modelování, ve Photoshopu má trochu jiný význam - určuje jakým způsobem bude deformovaná vybraná část obrázku. Displacement mapou může být libovolný PSD soubor a aplikuje se pomocí filtru Displace. V tutoriálu budeme pracovat s vyšším rozlišením než má obrazovka, většina ilustračních obrázků v tutoriálu má proto čtvrtinovou velikost. Výhoda relativně velkého rozlišení spočívá v tom, že nápis zmenšený z velkého rozlišení na čtvrtinovou až poloviční velikost vypadá vizuálně líp než při zobrazení 1:1. Díky většímu rozlišení je možný i tisk v dostatečné kvalitě.

První displacement mapa

Začneme tedy vytvořením 2 displacement map, pro začátek tou jednodušší z nich. Založíme nový soubor o rozměrech 400 x 400 pixelů s bílým pozadím. Pomocí jednoho z přírodních štětců nakreslíme tmavou barvou kousky různé velikosti, podobně jak jsou na následujícím obrázku. Tím je první displacement mapa hotova. Ještě ji nesmíme zapomenout uložit, nejlépe jako kousky.psd.

Druhá displacement mapa

Základem druhé displacement mapy je fotka mraků. Je to sice paradoxní, ale je to tak - ideálním výchozím materiálem pro tvorbu pekelného nápisu je fotka nebe. Po otevření fotky ve Photoshopu, duplikujeme vrstvu background a nově vzniklé vrstvě nastavíme interakci Difference. Protože mezi 2 stejnými vrstvami není žádný rozdíl, na celé ploše obrázku bude jen černá barva. Je nutné vrchní vrstvu od spodní nějak odlišit. To provedeme pomocí nastavení křivek (image > adjustment > curves ), jak je vidět na screenshotu.

Výsledkem je částečně inverzní vzhled mraků.

Dalším krokem je aplikování filtru Sketch > Chrome (Detail 4, Smoothness 6) na horní vrstvu a poté ještě jemné doladění pomocí adjustment > Brightness/Contrast (brightness +22, Contrast 0) .

Nakonec obě vrstvy sloučíme do jedné příkazem Flatten Image a nástrojem Clone stamp naklonujeme mraky po celé ploše obrázku. Tímto je vytvořena druhá displacement mapa, uložíme ji nejlépe pod jménem chromraky.psd. Já jsem mapu ještě zrotoval o 180 stupňů, ale to výsledek nijak zásadně neovlivní.

Tvorba textury

Nyní se dostáváme ke tvorbě textury, která se v závěru tutoriálu bude aplikovat na text. Založíme nový dokument ve velikosti kolem 2 200 x 880 pixelů.

Nastavíme barvu popředí na #F67B00 a barvu pozadí na #23082A. Tyhle 2 barvy jsou parametry pro filtr Render > Clauds. Tímto filtrem vyplníme pozadí. Filtr Clauds určuje výsledný vzhled textury, další kroky postupu už pracují pouze s tím, co filtr Clauds vygeneroval. Doporučuji vám si celý postup tvorby textury nahrát jako akci, tu si pak můžete libovolněkrát spustit a pokaždé dostanete trochu jinou pekelnou texturu.

Vrstvu pozadí zduplikujeme a protože na ní budeme aplikovat 2 připravené displacement mapy, pojmenoval jsem ji displace. Vyvoláme dialogové okno filtru Displace (Filtr > Distort > Displace ) , v něm nastavím Horizontal i Vertical Scale na 100, zaškrtneme Tile a Wrap Around. Poté klikneme na OK a nalistujeme předem vytvořený soubor kousky.psd.

Na stejnou vrstvu aplikujeme i druhou Displacement mapu chromraky.psd. Parametry filtru Displace se budou lišit jen v hodnotě Horizontal a Vertical Scale - obojí tentokrát nastavíme na 80.

Vrstvě displace nastavíme interakci Color Dodge, naskytne se nám pohled podobný ilustračnímu obrázku. Stiskem Ctrl+A označíme celé plátno a pomocí Edit > Copy Merged do schránky zkopírujeme obrázek tak jak ho vidíme na obrazovce. Dvakrát po sobě stiskneme Ctrl+V a vytvoří se 2 nové vrstvy. Jednu pojmenujeme chrome, druhou ztmavení. Tyto vrstvy máme předpřipraveny pro další kroky.

Nyní budeme pracovat s vrstvou chrome, vrstvu ztmavení co leží nad ní prozatím zneviditelníme. Na vrstvu chrome aplikujeme filtr Sketch > Chrome s parametry detail 3 a Smoothness 0. Efekt filtru Chrome zvýrazníme příkazem Image > adjustment > Auto Contrast. Vrstvě Chrome nastavíme interakci Difference. Protože tím vzniknou hodně divoké barvy, založíme novou vrstvu Orange, vyplníme ji oranžovou barvou a nastavíme interakci color.

Ještě zbývá vrstva ztmavení, nastavíme ji interakci Multiply a aby byla textura členitější, tak vrstvu ztmavení otočíme o 180 stupňů (Edit > Transform > Rotate 180) a poté ještě vertikálně převrátíme (Edit > Transform > Flip Vertical)

V průběhu práce na tomto tutoriálu, mě napadlo, jak ještě vylepšit vzhled textury. Stačí, když zduplikujeme vrstvu ztmavení a její kopii (přejmenoval jsem ji na přidaná) přesuneme mezi vrstvy orange a chrome, pak jí nastavíme interakci difference. Proto se ani vy nebojte experimentovat, určitě dosáhnete dalších zajímavých výsledků.

Ještě zbývá texturu trochu vyladit, toho dosáhneme opět naskládáním vrstev na sebe a nastavením interakcí. Celý obrázek sloučíme do jedné vrstvy příkazem Flatten Image. Vrstvu Background duplikujeme, vznikne nová, kterou pojmenujeme Luminosity a rovnou ji nastavíme interakci shodnou s jejím jménem - tedy Luminosity. Na vrstvě Luminosity ještě spustíme příkaz Image > adjustment > Auto Contrast. Vrstvu Luminosity zduplikujeme a novou vrstvu nazveme Soft Ligt, název vrstvy opět odpovídá její interakci. Tímto je textura hotova, zbývá ji jen aplikovat na text. Než začneme pracovat s textem, tak si ještě hotovou texturu uložíme do schránky - stiskem ctrl+a vybereme celý obrázek a příkaz edit > Copy Merged ho umístí do schránky.

Pekelný nápis

Založíme nový obrázek stejného rozměru jaký má textura. Protože je textura ve schránce, tak se rozměry nastaví s největší pravděpodobností automaticky. Vrstvu Background nového obrázku vyplníme černou barvou. Stiskneme ctrl+v a do nové vrstvy obrázku se vloží textura ze schránky. Textovým nástrojem napíšeme libovolný text (např. HELL), libovolným fontem (použil jsem běžný font Comic Sans MS). Jako velikost písma zadáme nejlépe tématických 666 pixelů.

Na textovou vrstvu aplikujeme filtr displace s parametry Horizontal i Vertical Scale nastavenými na 66, zaškrtneme Tile a Wrap Around, po stisku OK vybereme připravenou displacement mapu chromraky.psd. Samozřejmě můžete experimentovat a nastavit jiné parametry filtru Displace. Experimentovat lze i s různým umístěním textu, filtr Displace vrátí pokaždé jiný výsledek. Nebo zkuste použít jako displacement mapu jiný PSD soubor, třeba nějakou fotku. Pokud některá část textu není dostatečně zdeformovaná, je možné ji označit lasem a aplikovat na ni znovu fitr Displace.

Načteme výběr vrstvy se zdeformovaným textem a poté tento výběr aplikujeme jako masku na vrstvu s texturou. Použití masky vrstvy je maximálně flexibilní a po zrušení slinkování masky s vrstvou, můžete pohybovat maskou po vrstvě s texturou a tak najít optimální umístění textu. Tímto jsme dostali v podstatě konečný výsledek, pro zlepšení vizuálního dojmu ještě aplikujeme na vrstvu s texturou několik efektů, jejich nastavení je na následujícím screenshotu. Aplikování různých efektů popř. dalších vrstev na texturu, skýtá velký prostor k experimentům, to už ale nechám na vás.

Takto vypadá konečný výsledek, textura se však dá použít mnohem všestranněji, můžete se například pokusit rozpoutat peklo na zemi. Přeji zajímavé výsledky při dalším experimentování.