Photoshop tutoriál: Santův vánoční čepec - Grafika.cz - vše o počítačové grafice

7. prosince 2007, 00.00 | Vánoční čas neúprosně velí vytvořit i vánoční verzi www stránek. Sněhové
vločky poletující po stránce už jsou (naštěstí) dávno pryč, zasněžená loga
stále stejně nudná ... Proč tedy nezkusit něco jiného, například nasadit na
logo santův vánoční čepec? Tvorbu jednoho takového si popíšeme v dnešním
tutoriálu.

Když jsem hledal inspiraci pro tvorbu čepce Santa Clause, zadal jsem do google obrázky klíčová slova "santa claus hat icon". Hned na první straně na mě vyskočily velice povedené ikonky ze serveru fasticon.com. Byly dokonce tak povedené, že jsem ani nehledal dál a inspirován ikonkami se pustil do práce. Zde je náhled na původní ikonky:

My se v dnešním článku pokusíme udělat něco podobného. Vynecháme ale oči a celkově čepec uděláme více vzpřímený a pootočený, abychom jej mohli jednoduše "nasadit" na kraj loga, a vytvořit tak vánoční logo na stránky. Přes všechna ta zasněžená loga by toto mohlo být celkem vítané zpestření.

Proto vytvoříme nový dokument (Ctrl + N) a do nové vrstvy (Ctrl + Alt + Shift + N) začneme nástrojem Tužka (Pencil Tool) pomalu kreslit obrys našeho čepce. Mohl by vypadat přibližně takto:

Jako základ nám předešlý obrázek stačí, proto začneme postupně převádět jednotlivé části na vektorové vrstvy. Začneme spodní modrou částí. Nástrojem Elipsa (Ellipse Tool) nakreslíme elipsu, kterou následně pootočíme zkratkou Ctrl + T tak, aby přesně pasovala na spodní část.

Dále zvolíme nástroj pro výběr cesty (černou šipku) a tuto cestu zkopírujeme směrem doleva nahoru (táhnout s klávesou Alt). Vzniklé mezery na krajích také vyplníme dvěma elipsami (kreslíme s klávesou Shift), přičemž jak můžete vidět na obrázku, vpravo i tak vzniklo prázdné místo, což jsem zakryl ještě jedním kruhem. Teď je náš základ kompletní.

Pro pozdější využití ještě do nové vrstvy zkopírujeme horní kruh. Tuto operaci provedeme nejrychleji tak, že zkopírujeme celou vrstvu (Ctrl + J), nástrojem pro výběr cest postupně označíme a odmažeme všechny cesty kromě té horní.

Bambule na konci čepce je pouhý kruh - opět nakreslený nástrojem Elipsa (Ellipse Tool).

Tím se dostáváme k prostřední části čepce. Pomocnou vrstvu s elipsou, kterou jsme si připravili, ještě jednou zkopírujeme a malinko zmenšíme (Ctrl + T). Následně ji přebarvíme na červenou barvu - #EF0100.

Na tento základ navážeme zbytek čepice. Nástrojem Pero (Pen Tool) se pokusíme dotvořit zbytek čepice podle podkladové skici. Na přibližnou pozici a velikost bodů se můžete podívat na následujícím obrázku. Všimněte si také, že vespod už není třeba nic kreslit - tam je náš kruh z minule.

Tím máme základ hotový. Zde je náhled ve 100% velikosti. Modrá barva je #9EC7E0.

Teď už náš čeká jen vystínování, přidání odlesků a nějakých těch efektů. Pro začátek začneme rychlým stínem vytvořeným přes efekty vrstvy - u modré vrstvy přidáme efekt Vnitřní Stín (Inner Shadow) barvy modré (#A9CDE3) nastavený na Násobení (Multiply). Stín chceme odspodu, proto Úhel (Angle) nastavíme na cca 51° a vlastnost Vyseknutí (Choke) na 100 % - aby stín nebyl rozmazaný.

Zároveň přidáme postupný stín zleva - efektem Překrytí přechodem (Gradient Overlay). Interakce opět na Násobení (Multiply), přechod z modré do průhledné, Úhel (Angle) cca 13°.

Tento styl zkopírujeme - pravým tlačítkem na vrstvu a Kopírovat styl vrstvy (Copy Layer Style) a vložíme i vrstvě bambulky - Vložit styl vrstvy (Paste Layer Style).

Tím jsme s efekty vrstvy skončili a zbytek už musíme udělat ručně. Ono to bude vypadat i lépe. Nad modrou podkladovou vrstvou vytvoříme novou, které nastavíme ořezovou masku vrstvy předchozí (Ctrl + G popř. Ctrl + Alt + G). Tím bude tato vrstva zobrazena pouze v místě vrstvy předchozí. Do této nově vytvořené vrstvy nakreslíme měkkým štětcem stopu z pravého horního rohu.

Aby byl odlesk i na horní straně, stáhneme krytí druhé modré vrstvě (pomocné).

Tu nyní využijeme k nakreslení světlého jednopixelového obrysu hrany. Načteme výběr vrstvy (Ctrl + klik na vrstvu) a vyvoláme funkci Úpravy - Vytáhnout (Edit - Stroke), kterou nastavíme na Pozice - Vně (Location - Outside), Šířka (Width) 1 px a barva bílá. Toto vytáhnutí samozřejmě provádíme do nové vrstvy.

Aby byl tento obrys pouze v místě, kde jej chceme, přidáme vrstvě masku, kterou vyplníme černou barvou, a pouze v místě pravého rohu do ní bílým měkkým štětcem "čmárneme". Přibližně v místě, kde jsme kreslili odlesk do vrstvy minulé - která je mimochodem vidět i na následujícím obrázku - je to právě vrstva "Layer 71". Vrstva "Layer 72" je pak bílé zvýraznění hrany.

U bambule vytvoříme odlesk ještě jednodušším způsobem. Nástrojem Elipsa (Ellipse Tool) nakreslíme první menší kruh, jak ukazuje obrázek, a přes něj ještě jeden větší, kterému nastavíme vykreslování na Vyloučit překrývající se oblasti tvarů (poslední ikonka).

V místě největšího odlesku poté ještě opět do nové vrstvy nakreslíme tečku měkkým malým bílým štětcem.

Na chvilku opustíme modré vrstvy a začneme si všímat té hlavní - červené. Do nové vrstvy, která bude mít opět nastavenou ořezovou masku vrstvy předchozí - červené, začneme kreslit stíny. Použijeme k tomu měkký větší Štětec (Brush Tool) se sníženým krytím a barvou tmavě červenou. Nejvýraznější stíny nakreslíme z levé strany a zespodu.

Stínů nemusí být vůbec hodně. Jelikož chceme čepec světlý, vytvoříme dojem plastičnosti především odlesky. A na ty se pustíme právě teď.

Opět se malinko potrápíme s nástrojem Pero (Pen Tool), a to při snaze vytvořit tvar podobný tomu na obrázku. Nebojte, je to jen pár bodů. Pokud chcete, můžete pro ulehčení zkopírovat podkladový červený tvar a ten následně upravit. Tak vytvoříte minimálně pravou stranu přesně odsazenou (což v mém případě není, protože jsem kreslil tvar znovu).

Krytí tvaru snížíme na sotva znatelnou úroveň, načteme výběr vrstvy (Ctrl + klik na vrstvu) a do nové vrstvy v těchto místech nakreslíme hlavní odlesk měkkým velkým štětcem. Obrázek dostatečně ukazuje, odkud má přicházet.

Podobné to bude i s druhým odleskem. Také nejprve začneme pomocnou vrstvou, vytvořenou nástrojem Pero (Pen Tool).

A také této vrstvě stáhneme krytí a do nové vrstvy nakreslíme v těchto místech odlesk zezadu. Tentokrát už ale o dost méně výrazný.

Zadní odlesk nakreslíme i na modrých vrstvách. Načteme výběr obou vrstev - Ctrl + klik na vrstvu a Ctrl + Shift + klik na druhou vrstvu a výběr zmenšíme o jeden pixel funkcí Výběr - Změnit - Zúžit (Select - Modify - Contract).

Poté opět do nové vrstvy nakreslíme odlesk zadního světla měkkým bílým štětcem se stáhnutým krytím. Na obrázku můžete vidět, že v tomto případě na 50 %, přičemž směr tahů ukazují šipky. Tím se i spodní levá strana pěkně prosvětlila.

Inspirován ikonkami z již zmiňovaného serveru fasticon jsem se rozhodl, že do modrých částí přidám trojúhelníkový vzorek. K tomu stačí pouze vždy nástrojem Pero (Pen Tool) čtyřikrát kliknout. Samozřejmě nemusíme kreslit všechny trojúhelníky po jednom. Nakreslíme pouze pár, ty zkopírujeme, zdeformujeme (Ctrl + T) atd. Barva je opět bílá, krytí stažené na přijatelnou úroveň.

Tuto vrstvu zkopírujeme ještě jednou, zmenšíme a přesuneme nad bambuli. I zde chceme mít tento vzorek. Protože je místa méně, můžeme posunou trojúhelníky blíže k sobě nástrojem pro výběr cest (černá šipka).

Nakonec přidáme jemný vzorek i do červené části - tentokrát však malé kruhy - sněhové vločky.

V místě odlesku jich samozřejmě dáme víc, aby se odlesk ještě umocnil. Nezapomínejte při kreslení držet stisknutou i klávesu Shift - ať jsou všechny kruhy v jedné vrstvě, a ne v tisíci.

A to je již opravdu vše. Nakonec jen stačí čepec vhodně nasadit na logo a vánoční verze stránek je hotová. Hodně štěstí při práci!

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