Webdesign s Photoshopem (1) - Textura na pozadí

Zdroj: SOOM.cz [ISSN 1804-7270]
Autor: Tomigun
Datum: 15.1.2005
Hodnocení/Hlasovalo: 3.2/5

V prvním díle se zaměříme na to, jak vytvořit texturu, která by na stránce nepůsobila rušivě, nýbrž by nám ji pěkně doplňovala.

První lekce ze seriálu Webdesign s Photoshopem, který se pokusí ukázat některé příklady praktického využití tohoto výkonného grafického nástroje při tvorbě webové grafiky, se bude zabývat výrobou základního kamene celkového grafického vzezření stránek - pozadím. Nechceme-li se upnout k jedné barvě, je třeba vytvořit obrázek, čili jakousi "texturu", která se bude na pozadí opakovat. To, že na sebe musí vzájemně navazovat je snad jasné, je ale třeba také zvolit takovou, která bude mít určitou vnitřní živost a zároveň nebude působit na stránce rušivě.

Jak známo, modrá je dobrá, zvolil jsem proto jako příklad decentní "námořnickou" texturu, která může připomínat stylizované mořské vlnobití. Měli bychom tedy dospět k něčemu takovému:


Začneme tím, že vytvoříme nový obrázek velikosti asi 500x400px. Ve výsledku ho samozřejmě ořízneme podle toho, která část se nám bude hodit. Pozadí vyplníme černou barvou.

Vybereme 2 tmavší odstíny modré a ty aplikujeme v nové vrstvě (Ctrl+Shift+N) vhodnými nástroji (štětcem, tužkou, čárou ap.). Výsledná "čmáranice", která bude základem pro další úpravy, může vypadat například jako na obrázku dole - zde záleží na použitých barvách.


Nyní použijeme filtr Šum>Přidat šum (Add noise) s hodnotami Míra - asi 17%, Rozložení - Gaussovské a zatrhneme políčko Monochromatický. Výsledek je zde. Teď přijde na řadu rozmazání - filtr Rozmáznout (Motion blur) - úhel -45°, vzdálenost kolem 320px.

Pokud jsme předtím kreslili až k okrajům, vidíme, že u nich nejsou čáry dostatečně průhledné a působily by rušivě. Proto není nic jednoduššího, než vzít nástroj Oříznutí a vybrat si tu část, která se nejvíc "povedla". Pro názornost - náhled. Pokud nejsou po oříznutí rozměry obrazu sudé, bude lepší je ještě upravit - při vkládání vrstvy s pruhy (viz dále) to budeme potřebovat, aby nám vzorek navazoval na sebe.

V dalším kroku aplikujeme filtr Jiné>Posun (Offset). Do polí Vodorovně a Svisle zadáme poloviční hodnoty příslušných rozměrů a zvolíme možnost Přetočit dokola (Wrap around). Nyní se nám přeskládaly jednotlivé kvadranty (viz obrázek níže) tak, že vertikální a horizontální okraje na sebe vždy navazují a tím je zajištěna plynulot přechodů.


Nyní nastává fáze, kdy je potřeba vzít do ruky nástroje Rozmazání (s ním uděláte tak 95% práce), Ztmavení/Zesvětlení a podobné, a pečlivě zahlazovat ostré přechody. Pozor je nutno dávat hlavně u okrajů, které musí zůstat pokud možno beze změn. Pokud budete mít trpělivost, dojdete k podobnému (třeba hezčímu) výsledku jako je na obrázku nahoře vpravo. Jak možná vidíte, některé části jsem zesvětlil či ztmavil, aby na výsledné textuře nebyly tolik výrazné a utlumily dojem dlaždicovitosti. Posledním krokem v této vrstvě bude uprava pomoci dialogu Křivky nebo Úrovně v menu Obraz především pro jemné ztmavení obrázku:


Základní textura je tedy hotova, je na čase ji trochu ozvláštnit. Toho docílíme přidáním poloprůhledných vertikálních pruhů. Vytvoříme nový obrázek (Ctrl+N) o rozměrech 4 x 1px (š x v), barvu pozadí nastavíme transparentní. Vybereme tmavší odstín modré a tužkou vyplníme v obrázku 1 krajní bod, ostatní zůstanou průhledné. Příkazem Úpravy>Definovat vzorek (Define pattern) uložíme vytvořený obrázek do galerie vzorků.

Nyní se vrátíme k původní textuře. Vytvoříme novou vrstvu (Ctrl+Shift+N) a v menu Úpravy zvolíme příkaz Vyplnit (Fill) (Shift+F5). Vybereme Použít: Vzorek a použijeme ten, který jsme si vytvořili. Nezbytná bude asi ještě úprava krytí jednotlivých vrstev na paletce Vrstvy, abychom dosáhli požadovaného výsledku. Nakonec zbyývá už jen sloučit vrstvy a textura na pozadí je hotova, jak ji můžete vidět v úvodu.


Tomigun