Photoshop: tvorba navazujícího vzorku/textury - Grafika.cz - vše o počítačové grafice

11. ledna 2008, 00.00 | Vzorek je obrázek, který je možno libovolně skládat vedle sebe bez toho,
abychom poznali kde začíná a kde končí. Tímto způsobem lze poté
vykreslit velkou plochu jen za pomocí malého obrázku. V tomto tutoriálu si
ukážeme, jak lze vytvořit vzorek z fotografie.

V zásadě existují dva typy vzorků. První typ je jakýkoliv vzorek vyfocený z velké vzdálenosti. Například tráva. Otevřete obrázek, posunete jej na každé straně o 50 % a poté štětcem s měkkou stopou "zamažete" překrývající se místa. O tvorbě takových vzorků toho bylo napsáno již více než dost, a tak nemá cenu se tím dále zabývat (tutoriály hledejte na googlu pod klíčovými slovy seamless pattern/texture).

Druhý typ je například následující fotografie kousků dřeva, stejně jako jakýkoliv jiný vzorek s jasně danou strukturou. Jakmile se pokusíte použít štětec (razítko) s měkkou stopou, vznikne opravdu ošklivá matlanina, která původní strukturu nepřipomíná ani vzdáleně. Proto musíme zvolit malinko odlišnou metodu. Takže se dáme do práce.

Otevřete následující obrázek v Photoshopu.

A posuneme jej filtrem Offset (Filtry - Ostatní, Filter - Other) o polovinu doprava - tj. 200 px horizontánlě (obrázek je široký 400 px). Zatím si budeme všímat pouze jedné hrany (vlevo a vpravo).

Na zakroužkované ukázce nahoře vidíte, že po posunutí nejenom že vzorek nenavazuje (což bylo jasné), ale ani nemá stejný jas. A to nám teď vadí nejvíc. Pokusíme se proto tento - původně pravý spodní roh - zesvětlit.

Nástrojem Obdélníkový výběr (Rectangular Marquee Tool) vybereme levou půlků obrázku - oblast velkou 200 x 300 px. Použijte přitom možnost zvolit přesně velikost funkcí Pevná velikost (Fixed Size).

Vytvořte novou vrstvu úprav (kliknutím v paletce vrstev na černobílý kruh) Jas a Kontrast (Brightness/Contrast). Jezdce posunujte doprava do té doby, až bude hrana uprostřed dole stejně světlá jako druhá polovina obrázku (přechod označený šipkou).

Následně do masky vrstvy nakreslete lineární přechod z černé do průhledné nástrojem Přechod (Gradient Tool). Efekt zesvětlení se tím aplikuje pouze na místo, kde je v masce bílá barva - tedy přesně do původního pravého spodního rohu. Největší problém jednotného jasu textury máme vyřešený.

Proto tyto dvě vrstvy sloučíme do jedné - svážeme a stiskneme Ctrl + E a pokračujeme v práci. Zbavíme se špatného napojení uprostřed textury tak, že vybereme jeden "pruh" dřeva, který poté nad prostřední část zkopírujeme. Pěkně dřevíčko po dřevíčku.

Pro následující práci si zkopírujeme vrstvu znovu (Ctrl + J), posuneme opět o několik pixelů horizontálně a začneme nástrojem Mnohoúhelníkové laso (Polygonal Lasso Tool) vybírat dostatečně široký pruh dřeva, od horní až po spodní stranu.

Na konci práce by náš výběr mohl vypadat přibližně takto (pro lepší viditelnost je na ukázce obarven na oranžovou barvu).

Se stále nastaveným výběrem přidáme aktuální vrstvě masku - kliknutím na ikonku v paletce vrstev (na ukázce zakroužkovaná). Tím máme jedno napojení vyřešené. Pokud teď sloučíte všechny vrstvy do jedné a zkusíte si texturu posunout doleva nebo doprava, bude opravdu nekonečná.

Druhé napojení (nahoře a dole) vyřešíme úplně stejným způsobem. Všechny vrstvy sloučíme do jedné (Ctrl + E, Ctrl + Shift + E) a opět filtrem Offset posuneme o polovinu směrem dolů - v našem případě o 150 pixelů. To je ale ošklivé napojení!

Vrstvu zkopírujeme ještě jednou, opět posuneme, vybereme vhodnou část a přidáme vrstvě masku. Nakonec vše sloučíme do jedné vrstvy a textura (skoro) hotová. Rozhodně ji lze už napojit ze všech stran.

O čemž se můžete přesvědčit nejrychleji tak, že vytvoříte nový dokument dvojnásobné velikosti (800 x 600) a do něj texturu čtyřikrát přetáhnete. Následující ukázka je dokument zmenšený na 50 %. Textura sice krásně navazuje, ale má nesourodý jas. Tyto místa pak na textuře "svítí" a tím odhalují, že se jedná o jeden obrázek několikrát napojený.

Musíme se jich proto zbavit. Vrátíme se zpět do původního dokumentu, vrstvu znovu zkopírujeme a rozostříme ji filtrem Gaussovské rozostření (Gaussian Blur). Poloměr volte tak, aby byly jednotlivé části textury slité, ale ne moc.

Tuto vrstvu odbarvíme - Ctrl + Shift + U.

A zvýšíme kontrast tak, aby vrstva obsahovala černou i bílou barvu - nejenom stupně šedé. Nejrychleji toho dosáhneme použitím funkce Auto Levels - klávesová zkratka Ctrl + Shift + L.

Tuto vrstvu vybereme (Ctrl + A), zkopírujeme do schránky (Ctrl + C), vrstvu skryjeme a přidáme novou vrstvu úprav Úrovně (Levels) - opět kliknutím na černobílý kruh v paletce vrstev. Dialog potvrdíme, přepneme se do masky vrstvy a vložíme předchozí vrstvu (Ctrl + V).

Opět vyvoláme dialog vrstvy úprav (kliknutím na ikonku v paletce vrstev) a posuneme prostřední jezdec směrem doprava.

Co jsme tím udělali? V předchozích krocích jsme rozostřili vrstvu a tím získali průměrné jasy obrázku. Tím, že jsme nastavili tyto oblasti jako masku vrstvy úprav jsme nyní upravili světlost středních tónů v místech, kde byly jasy příliš rozdílné. Tím jsme sjednotili jas celé textury, aby žádné místo nebylo moc světlé nebo naopak moc tmavé.

Přesvědčit se o tom můžeme úplně stejným způsobem jako minule. Pokud porovnáte tento obrázek s minulým testovacím, je výsledek znatelně lepší. Zbyly pouze dvě místa která stále ruší - na obrázku jsou označeny. Jedná se o pruh v pravé části a flek v pravém horním rohu. Obě místa jsou moc tmavá.

Tudíž přijde na řadu ještě jedna vrstva úprav kterou opět doladíme střední tóny. Do masky nakreslíme bílým štětcem místa, která chceme upravit.

Nakonec ještě jeden testovací náhled. Teď je naše textura kompletně hotová a připravena k použití.

Nakonec ještě náhled na texturu ve 100% zvětšení. Porovnejte obrázek s úplně prvním, rozdíl je opravdu znatelný. To je pro dnešek vše, takže vám jen popřeji hodně štěstí při práci a plno pěkných textur. Uvedený postup lze jednoduše aplikovat na jakoukoliv podobnou fotografii, ať už to je spadané podzimní listí, poházené šroubky nebo kamenná zeď...

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