Photoshop tutoriál: Tvorba poštovní známky s razítkem - Grafika.cz - vše o počítačové grafice

5. listopadu 2007, 00.00 | Dostat opravdický dopis je v dnešní době pomalu důvod k oslavě, a tak se i
klasické známky spolu s poštovními razítky ztrácejí v propadlišti dějin.
Připomeňme si nicméně alespoň ve Photoshopu časy nedávné, kdy ještě ke komunikaci sloužil
papír a tužka, a vytvořme ikonku poštovní známky spolu s poštovním razítkem.

Jako obvykle vytvořte nový soubor, který pro začátek vyplníme nějakou neutrální tmavší barvou, aby naše známka (která má obvykle bílé kraje) byla dobře vidět. Na následujících příkladech se jedná o barvu #A9A39B.

Před započetím práce je důležité nastavit si mřížku na každý pixel. Budeme totiž pracovat ve velkém zvětšení a některé tvary (např. elipsa) se na pixely nepřichytávají. Pak by vznikala nehezká místa. Tímto tomu předejdeme.

V nastavení programu Photoshop (Ctrl + K), vyberte záložku Vodítka, mřížky a řezy (Guides, Grid & Slices) (Ctrl + 6) a nastavte vlastnosti Čáry mřížky po (Gridline every) a Dělení (Subdivisions) na stejné číslo (např. 32). Barvu zvolte tak, aby vás moc nerušila.

Nástrojem Obdélník (Rectangle Tool) nakreslíme obdélník velikosti známky. Tj. cca 120 * 160 pixelů. Barva je - jak už jsme si řekli – bílá. Důležité je nastavení kreslení Vrstva tvaru (Shape Layer) (tj. ani ne kreslení cesty ani ne přímé vyplňování pixelů), abychom mohli s tvarem dále pracovat.

Zvětšíme si pořádně zobrazení, zvolíme nástroj Elipa (Ellipse Tool), nastavíme odečítání od tvaru (viz ikonka na obrázku vpravo nahoře) a nakreslíme první "díru" do kraje známky. Jak vidíte, kruh má poloměr 6 pixelů. Pro zkontrolování si zobrazte dokument ve 100% velikosti, a pokud se vám zdá tato díra správně velká, můžeme pokračovat dál. Ve skutečnosti jsou tyto díry mnohem menší, ale smysl ikonky není zobrazovat předměty přesně podle skutečnosti.

Nástrojem pro přímý výběr cesty (černá šipka) označíme nakreslený kruh a společně se stisknutou klávesou Alt (pro kopírování) a Shift (pro vodorovný/svislý posun) jej posuneme bokem (tím se tvar zároveň zkopíruje), aby mezi starým a novým kruhem byla dvoupixelová mezera.

Následně označte oba kruhy, stejným způsobem je zkopírujte, poté označte nové čtyři kruhy, stejným způsobem je zkopírujte a tak dále, dokud nezaplníte celý bok známky.

Poté označte opět všechny kruhy, zkopírujte je a otočte o 90° (Ctrl + T). Posuňte je k levé straně a zkontrolujte, jak vypadá roh známky. Pokud bychom umístili kruhy hned dva pixely od rohu, vypadala by známka nereálně. Proto necháme mezeru třípixelovou.

Musíme ale stejným způsobem upravit i ostatní rohy. Jak vidíte na obrázku, vpravo přesahoval spodní obdélník pouze o jeden pixel, takže jsem jej označil (černou šipkou) a zvětšil (Ctrl + T) o dva pixely. Stejným způsobem musíme upravit i spodní rohy.

Jakmile to tak uděláme, můžeme zkopírovat kruhy z horního okraje i dospod a kruhy z levého okraje i doprava. Díky stále zapnuté mřížce není problém se správně trefit.

Zde vidíte známku zobrazenou ve 100% velikosti.

Nyní potřebujeme obrázek do vnitřku známky. Použijeme např. fotku dalmatina, kterou si můžete stáhnout zde:

Obrázek vložte do dokumentu a nechte jej prozatím stranou. Nástrojem pro výběr obdélníku označte ve známce část, do které chcete umístit fotku a ...

... této vrstvě přidejte masku (viz ikonka na obrázku). Zrušte svázání vrstvy s maskou (kliknutím na ikonku řetězu mezi nimi).

Označte vrstvu (ne masku) a posuňte ji do místa, kde je známka. Vyvolejte transformaci (Ctrl + T) a fotku zmenšete na požadovanou velikost.

Svázání vrstvy s maskou můžete opět zapnout (kliknutím na volné místo mezi nimi - objeví se zde opět řetěz).

Známce (bílé vrstvě) přidáme vržený stín. Dvakrát klikněte na vrstvu pro vyvolání dialogu efektů vrstvy a zapněte Vržený stín (Drop Shadow). Vzdálenost (Distance) stáhněte na nulu, Velikost (Size) nastavte na cca 8 px. Nakonec stáhněte Krytí efektu (Opacity) na cca 20 %.

Do volného místa pod fotkou přidáme libovolný malý, sotva čitelný text. Rovněž barva textu nemusí být nutně černá, ale můžete si vypůjčit nějakou světlejší, například z fotky. V tomto případě je barva #787060:

Do levého volného rohu přidáme stejným fontem cenu známky. Jak vidíte, bílý text je dost nečitelný, černý by byl moc agresivní (schválně si to zkuste). Co s tím?

Malinko roh ztmavíme. Nástrojem Laso (Lasso Tool) od ruky tento roh narychlo označíme (opravdu jen přibližně):

Vytvoříme novou vrstvu a tu vyplníme přechodem z šedé do průhledné:

A tyto dvě vrstvy svážeme (Ctrl + G, v novější verzi Photoshopu Ctrl + Alt + G). Tím bude vrstva zasahovat pouze do pixelů, které jsou ve vrstvě spodní.

Tím máme známku hotovou, takže všechny vrstvy přesuneme do nové složky a tuto složku zkopírujeme bokem. To abychom měli původní vrstvy zachovány - nyní totiž nově zkopírovanou složku zkratkou Ctrl + T malilinko pootočíme, asi jak ukazuje následující obrázek:

Obrázek dalmatina ztratil pootočením malinko kresbu, a tak se to pokusíme dohnat filtrem Doostřit (Unsharp Mask). Poloměr (Radius) nastavte na cca 0,9 px a poté zvyšujte vlastnost Míra (Amount) do té doby, než výsledek vypadá dobře. Tím máme i pootočenou známku vyřešenou. Vzhledem k tomu, že podkladová bílá vrstva, stejně jako dvě textové vrstvy, je tvořena vektorem, nedochází u nich při transformaci ke ztrátě kvality. A to je dobře, ušetříme si tím hodně práce.

Zbývá nám ještě obtisk razítka na známce. Pro lepší přehled budeme pracovat bokem a až nakonec přesuneme razítko nad známku. Začneme kruhem přiměřené velikosti nakresleným nástrojem Elipa (Ellipse Tool) a to libovolné barvy. Této vrstvě totiž stáhneme krytí výplně na 0 % (viz obrázek) a přidáme efekt Vytažení (Stroke), barvy černé, velikosti jeden pixel:

Tento kruh třikrát zkopírujeme a pokaždé trochu zmenšíme, aby nám vznikl efekt podobný tomuto. Při zmenšování si opět na chvilku zobrazte mřížku, ať jsou kruhy správně zarovnány:

Do prostřední části přidáme libovolný symbol, který máme zrovna při ruce. Například korunku (Crown 4) ze standardních symbolů Photoshopu. Barvu už tentokrát necháme černou, aby z korunky nebyl pouze obrys:

Do horní a spodní části razítka přidáme text. Využijeme přitom funkce Vytvořit pokřivený text (Warp Text) (tlačítka pro její vyvolání se nachází v horní liště). Styl (Style) nastavte na Oblouk (Arc) a poté už jen posunujte jezdec u vlastnosti Prohnutí (Bend), aby text do razítka správně "padnul".

U spodního textu bude hodnota samozřejmě opačná:

Poslední a zároveň trochu komplikovanější částí jsou vodorovné pruhy v pravé části tlačítka. K jejich tvorbě je možné použít nespočet možných cest, my zvolíme tu "vektorovou". Znovu zobrazíme mřížku (doufám, že jste si všimli, že kdykoliv pracujeme ve 100% zobrazení, mřížku pro přehlednost skryjeme) a nakreslíme obdélník (nástrojem Obdélník - Rectangle Tool) výšky jednoho pixelu a široký cca 70 pixelů (může být i širší, protože směrem doprava bude mizet).

Nástrojem Pero (Pen Tool) přidáme v první a druhé třetině vždy dva body (nahoru a dolů), přičemž tyto body vždy po dvojici posuneme nahoru a dolu, přesně jako ukazuje obrázek. Tím zůstane zachována výška jednoho pixelu a jednoduše máme prohnutí:

Tuto vrstvu několikrát rozkopírujeme (Ctrl + J), všechny zkopírované vrstvy svážeme a odpovídající ikonkou v horní liště přesně rozmístíme:

Jak ale co nejrychleji a nejjednodušeji udělat, aby byly zobrazené jen tam, kde mají být? Největší kruh přebarvit na barvu pozadí a tyto vrstvy přesunout za něj? To by bylo opravdu nehezké řešení, zkusíme něco lepšího. Zkopírujeme největší kruh z razítka, přebarvíme jej a změníme mu krytí výplně (aby byl vidět). Zvolíme nástroj Obdélník (Rectangle Tool) a změníme kreslení na Vyloučit překrývající se oblasti tvarů (Exclude overlapping shape) (viz ikonka na obrázku):

Poté přes tento tvar nakreslíme onen obdélník, jak ukazuje následující obrázek. Na něm je už zřejmé, že nový tvar zahrnuje pouze pravou oblast, přičemž v místě původního razítka je díra. A přesně toto jsme od začátku chtěli.

Všechny pravé "ocásky" svážeme dohromady a zkratkou Ctrl + G (popř. Ctrl + Alt + G) přidáme k nově vzniklé vrstvě. Jak vidíte na obrázku, zasahují už pouze tam, kam mají.

Takže se zbavíme té oranžové barvy. Ne doslova, pouze ji "zneviditelníme". Nejprve vrstvě zrušíme všechny efekty, vytáhneme ji krytí na 100 %, přebarvíme na bílou a interakci nastavíme na Násobení (Multiply). Tím pádem nebude vidět (bílá nastavená na násobení je barva žádná) a budou vidět pouze naše "ocásky".

Ty by měly navíc směrem doprava mizet - takže nejspodnější vrstvě přidáme masku a do ní nakreslíme přechod z černé do průhledné.

Přesně tak, jak ukazuje tento obrázek:

Zde už je razítko zobrazené ve 100% velikosti:

Složku přesuneme nad známku, snížíme krytí na 70 % a interakci přepneme na Násobení (Multiply). Pokud chcete, můžete složce přidat masku a do ní nějakým "špinavým" štětcem cokoliv dokreslit, aby průhlednost razítka nebyla tak "umělá".

Nakonec tuto složku zkopírujeme, sloučíme do jedné vrstvy (Ctrl + E) a malinko rozostříme filtrem Gaussovské rozostření (Gaussian Blur). Opravdu malinko - a výsledné vrstvě stejně stáhneme krytí, aby byla sotva viditelná.

Zde je již výsledek našeho snažení. Doufám, že se vám povedl minimálně stejně tak dobře!

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