Photoshop tutoriál: Diagonální vzorky - základy - Grafika.cz - vše o počítačové grafice

2. října 2007, 00.00 | Zejména - ale nejen - pro každého začátečníka v programu Photoshop je určen náš miniseriál, ve kterém se obeznámíte s úhlopříčnými vzorky,
jejich tvorbou a využitím v grafické
praxi. První díl seriálu bude zaměřen na základní postupy.

Na úvod snad jen to, že následující článek je určen především pro začátečníky a mírně pokročilé uživatele. Takže se nebojte ani v případě, že jste si Photoshop nainstalovali teprve dnes ráno ...

Hodilo by se začít také informací o tom, co že vlastně to ty úhlopříčné vzorky jsou. Nejde o nic jiného než šikmo nakreslené čáry, různé tučné a různě vzdálené. Abychom nemuseli každou část kreslit zvlášť, je výhodné převést tyto čáry na vzorek. Malý obrázek, který je možné horizontálně i vertikálně opakovat a vyplnit jím tak libovolně velkou plochu. Tento vzorek se často používá na pozadí (nejenom) WWW stránek, na nejrůznější efekty nebo průhlednosti. V omezené míře potom dokáže přidat jakémukoliv obrázku chybějící detail. Což samozřejmě není případ tohoto ukázkového obrázku, kde je naschvál použití vzorků přehnané. Ale na ukázku to snad postačí. Ostatně věřím, že se s podobným vzorkem každý už někde setkal.

První otázka zní - jak začít? Spustíme Photoshop a vytvoříme nový dokument (Ctrl + N). Na velikosti nezáleží, stačí např. 640 x 480.

Při našem podrobném zkoumání diagonálních vzorků začneme těmi nejjednoduššími - pixelovými. Proto zvolíme nástroj Tužka (Pencil Tool) nastavený na velikost 1 px. Dokument přiblížíme na 1600 % - např. několikanásobným stisknutím zkratky Ctrl +. Dále nastavíme barvu pozadí na černou a barvu pozadí na bílou - a to buď klikem na ikonku vedle výběru barev (na obrázku je zakroužkovaná), nebo stiskem klávesy D.

Jsme připraveni na kreslení. Do bílé plochy dokumentu umístěte dva pixely přesně tak jak ukazuje následující obrázek a ...

... náš první diagonální vzorek je na světě! Už tyto dva pixely vytváření základ pro vzorek, který patří sice k těm nejjednodušším, ale přesto velmi používaným. Jak z tohoto obrázku udělat vzorek? Zvolíme nástroj Obdélníkový výběr (Rectangular Marquee Tool) a vybereme oblast 2x2 pixelů:

Poté v menu Úpravy (Edit) zvolíme funkci Definovat Vzorek (Define Pattern) ...

... zadáme jméno (nebo ponecháme to stávající) ...

... potvrdíme OK a vzorek je hotový. Abychom se o tom přesvědčili, zkusíme si tímto vzorkem vyplnit malou plochu. Nástroj necháme stále stejný, jen označíme nové místo ...

... a ze stejného menu zvolíme funkci Vyplnit... (Fill...).

V dialogovém okně zvolíme Vzorek (Pattern) a ze seznamu vybereme náš nové vytvořený. Krytí (Opacity) necháme na 100 %.

Po stisknutí tlačítka OK se plocha vyplní daným vzorkem, přesně tak, jak vidíte na dalším obrázku (tentokrát již ve 100% zvětšení). Po vyplnění nezapomeňte odznačit výběr zkratkou Ctrl + D.

Tvorba větších diagonálních pixelových vzorků je lehčí, než by se na první pohled mohlo zdát. Chceme-li vzorek každé tři pixely, nakreslíme v prostoru 3 x 3 pixelu tři pixely jak ukazuje obrázek.

A zde je opět pohled na plochu vyplněnou tímto vzorkem.

Stejné je to i se vzorkem 4 x 4 pixely, 5 x 5 pixelů atd. ... Mohli bychom pokračovat donekonečna, ale vzorky s větším rozestupem se v praxi zas tak moc nepoužívají.

Proto si ukážeme složitější věc - vzorky širší než pouhý jeden pixel (což všechny dosavadní byly). Abychom nemuseli vždy dlouze definovat vzorek (nakreslit vzorek, označit jej, definovat, označit novou plochu a tu vyplnit vzorkem), budeme následující ukázky tvořit trochu jiným způsobem. Pozadí dokumentu vyplníme světle šedou barvou, vytvoříme novou vrstvu, ve které vyplníme čtverec požadované velikosti bílou barvou a do této vrstvy nakreslíme černý vzorek. Když budeme chtít náhled tohoto vzorku, rychle rozkopírujeme tuto vrstvu vedle sebe a hned uvidíme výsledek. Připraveni?

Nejprve vyplníme pozadí dokumentu světle šedou barvou - vyberte ji ve vzorníku a poté stiskněte zkratku Alt + Backspace. Novou vrstvu vytvoříme zkratkou Ctrl + Shift + Alt + N. Označíme čtverec velikosti 6 x 6 pixelů a vyplníme jej bílou barvou (opět zkratkou Alt + Backspace). Následuje poslední krok, a tím je nakreslení černého diagonálního vzorku nástrojem tužka:

Jak udělat vzorek široký dva pixely? Jednoduše tužkou přikreslíme další "řadu" dospodu. Jenže jakmile rozkopírujeme vzorek vedle sebe, zjistíme, že nám tam jeden pixel chybí (na obrázku je označen růžově). Mimochodem - to rozkopírování není nic jiného, než posun vrstvy se stisknutou klávesou Alt. Tím se kromě posouvání i kopíruje.

Zadíváme-li se pozorněji na obrázek nahoře, zjistíme, že pixel chybí v levém horním rohu. Proto jej tam zkusíme dokreslit a opět vrstvu rozkopírovat. Výsledek? Správně navazující vzorek.

Poznámka: pokud bychom přidali řadu nahoru (tentokrát je pro ukázku růžová), museli bychom naopak přidat chybějící pixel do pravého spodního rohu:

Stejným způsobem budeme postupovat i v případě širších vzorků. Na následující ukázce je opět přidán jeden "řádek" - opět růžovou barvou. Všimněte si, že je potřeba vždy přidat stejný počet pixelů. Ostatně můžete si je spočítat sami. Původní vzorek měl šest pixelů. V minulém kroku jsme přidali pět dospodu a jeden do levého horního rohu. A teď přidáme čtyři dospodu a dva do rohu. Opět šest pixelů.

A tak dále a tak dále. Tentokrát tři dospodu a tři do rohu.

Přidání dalších pixelů už se pomalu míjí účinkem. Když se na obrázek pozorně zadíváte, zjistíte, že se jedná o původní vzorek, pouze invertovaný.

A proto skončíme tím, že se ještě jednou podíváme na dosud vytvořené vzorky. Vlevo ve 100% velikosti, vpravo zvětšené. Nezapomeňte si všechny definovat jako řádný vzorek, jistě se budou někdy v budoucnu hodit.

Co náš čeká nyní? Opustíme vzorky velké jen pár pixelů a zkusíme podobné, jen mnohonásobně větší. Kreslit takové vzorky po pixelech by zabralo věčnost, a tak zkusíme nějaký jiný trik.

Při přemýšlení, jak by takový vzorek měl vypadat nám krásně poslouží jeden z původních, několikanásobně zvětšený. Domyslíme-li si na následujícím obrázku hladké hrany, je to přesně to, co hledáme.

Vytvoříme proto další novou vrstvu (Ctrl + Shift + Alt + N), zvolíme nástroj obdélníkový výběr a nastavíme vlastnost Pevná velikost (Fixed Size). Do políček zadáme velikost vzorku, např. 40 x 40 pixelů. Tento výběr v dokumentu označíme a vyplníme bílou barvou.

Stejným způsobem označíme i čtverce velikosti 10 x 10 pixelů, a ty vyplníme podle následujícího obrázku barvou černou.

Tím jsme dospěli k zvětšenému původnímu pixel vzorku. Nyní ještě vyhladit hrany. Na pomoc si vezmeme nástroj Mnohoúhelníkové laso (Polygonal Lasso Tool) a vypneme vlastnost Vyhlazení (Anti-aliased). To proto, že čáry v úhlu 45° vypadají dobře i nevyhlazené (a používat jen dvě barvy je výhodnější než přidávat další odstíny které by vyhlazením vznikly).

Tímto nástrojem označíme oblast, kterou ukazuje následující obrázek:

A tuto oblast vyplníme černou barvou. Pokud není výsledek úplně přesný, zkuste to ještě jednou.

Při rozkopírování vzorku ihned zjistíme, že něco chybí.

Ano, chybí rohy. Je to stejné jako u pixel vzorků, jen si teď představte, že jsme zvětšili vzorek o X pixelů nahoru a o X pixelů dolů. To znamená, že musíme vyplnil nejenom levý rohní, ale i pravý spodní roh.

Nástrojem pro obdélníkový výběr vybereme postupně v obou rozích oblast 10 x 10 pixelů a vyplníme ji černou barvou.

Nástrojem Laso u těchto oblastí "odkrojíme" šikmou část. Neboli označíme nepotřebnou oblast a tu vyplníme bílou barvou.

Při rozkopírování vzorku je již všechno v pořádku.

Stejně jako u pixelových vzorků, i zde můžeme vzorek rozšiřovat a zužovat. Na následujícím obrázku je tužkou přidána další řada nahoru i dolů.

Jak je vidět na této ukázce (nový vzorek je vespod), těch pár pixelů má u takto velkého vzorku jen nepatrný vliv na výsledek.

Jak rychle zužit nebo rozšířit takto velký vzorek?

Nejprve je potřeba zamknout průhlednost vrstvě - a to buď odpovídající ikonkou na paletce vrstev, nebo jednodušeji klávesou / (lomítko). Tím zajistíme, aby vzorek vždy zabíral vymezený prostor (40 x 40 pixelů).

Trik při rozšiřování a zužování spočívá v použití efektů Minimum a Maximum, které najdete v menu Filtry - Ostatní (Filter - Other). Ostatně zavítejte do tohoto menu a filtr Minimum zvolte. Jediný parametr Poloměr (Radius) určuje, jak moc rozšířit tmavé pixely. Hodnota 2 je tak ideální, takže potvrďte a ...

... nějaké ty menší úpravy jsou stejně potřeba. Jak vidíte, rohy nejsou úplně dokonalé, takže tužkou dokreslíme chybějící pixely (na obrázku označeny růžově, vy ale samozřejmě kreslete barvou černou).

Zde vidíte výsledný vzorek spolu s dvěma předchozími (ty jsou vlevo). Teď už je nárůst černé barvy opravdu výrazný.

Opět zkopírujeme původní vzorek a zkusíme filtr druhý - Minimum. Jistě vám dojde, že ten naopak rozšiřuje světlé části obrázku. Hodnota 2 je opět ideální.

Ovšem i zde vzniknou nedostatky. Jak vidíte na obrázku, pixely navíc vytvořily ve vzorku "trny", což je sice pěkná efekt, ale my dnes hledáme něco malinko jiného. Proto opět nástrojem tužka odmažeme pixely navíc - resp. je překreslíme bílou barvou.

Zde je již náhled na dva dnes vytvořené vzorky. Jeden tlustý, jeden tenký.

Nyní stojíme před otázkou jak takové vzorky používat.

Výše jsme si ukázali, že to jde přes funkci Vyplnit (Fill) z menu Úpravy (Edit). Takto vytvořený vzorek má ale spousty nedostatků - nemůžeme jej dále upravovat a nemůžeme přesně určit jeho pozici (vzorek se začne vyplňovat vždy od levého horního kraje dokumentu). Podíváme se proto na druhou možnost.

A tou je vrstvy úprav. Vytvoříme ji následovně: v paletce vrstvy klikneme na odpovídající ikonku a zvolíme Vzorek (Pattern). Mimochodem - pro následující příklady jsem na pozadí umístil obrázek, ať je výsledek lépe vidět. Jestli si postup zkoušíte společně se článkem, udělejte to také.

Dialog, který se objeví, je velmi podobný tomu z menu Úpravy (Edit). Rozdíl je v tom, že neurčujeme interakci a krytí - to totiž můžeme kdykoliv změnit v paletce vrstvy. Takže jen vybereme vzorek a jeho velikost (tu je dobré nechávat na 100 %, změna velikosti obzvlášť malým vzorkům vůbec nesedne).

Aby nám ze vzorku nepřecházely oči, vybereme jiný. Např. první z větších. Všimněte si, jak se v paletce vrstvy ihned mění náhled.

Další důležitá vlastnost je pozice vzorku. Při otevřeném dialogu můžete myší kliknout do plochy dokumentu a libovolně vzorek posunovat. Přesně tam, kde jej chcete mít umístěný.

Postupně se dostáváme k tomu, proč jsme celou dobu tvořili vzorky černobílé. Jakmile totiž tomuto vzorku nastavíme krytí na Násobit (Multiply), je ze vzorku zobrazená pouze černá barva.

Naopak nastavení krytí na Závoj (Screen) způsobí, že se zobrazí pouze barva bílá.

Průhlednost této vrstvy je pak daná nejenom nastavením Krytí (Opacity), ale také maskou, která je na následujícím obrázku označená růžovým kolečkem. Maska určuje, kde bude vzorek průhledný, a jak moc. Bílá barva znamená 100% krytí, černá znamená 100% průhlednost.

Zkusíme průhlednost malinko upravit. Nástroj Přechod (Gradient Tool) nastavíme podle obrázku - z černé do bílé a typ Kruhový (Radial) - druhá ikonka na liště.

Kdekoliv v ploše klikněte a táhněte, aby se přechod vytvořil. Na obrázku vidíte, že tak jednoduše vznikne zajímavý efekt. A vzorek alespoň nezabírá celou plochu dokumentu. Takže zkoušejte a experimentujte, dál už je to jen na vás. Příště se můžete těšit na reálné využití dnes vytvořených vzorků - nechte se překvapit.

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