Photoshop tutoriál: Ikonka helmy

Ikonka stavitele, respektive jeho typicky žluté ochranné helmy je v počítačovém světě k vidění často. Třeba už jen proto, že počítač často využíváme k tvoření a budování věcí. Tentokrát se pokusíme vytvořit v Photoshopu právě tuto ikonku.

21.01.2008   Václav Krejčí   Photoshop   Tutoriál  

Jako základ nám skvěle poslouží následující fotografie, která je sice velmi podprůměrná, nám ale pomůže v prvotním určení tvarů. Plusem je fakt, že fotografie byla pořízena širokoúhlým objektivem, a tak je dobře vidět perspektiva. A ta je u ikonek velice často záměrně přehnaná.

Zkopírujeme tedy fotku do nového dokumentu a zvětšíme ji (přibližně) na velikost nové ikonky - 128x128 px.

Zvolíme nástroj Pero (Pen Tool) a postupně obtáhneme jednotlivé části helmy. Na barvu zatím nehledíme, důležitý je tvar. Pro přesnější kreslení je dobré stáhnout vrstvě Krytí (Opacity). Všechny vrstvy samozřejmě kreslíme jako Vrstvy tvaru (Shape Layer).

Druhou část "kšiltu" vytvoříme tak, že zkopírujeme předchozí vrstvu (Ctrl + J) a označené body posuneme směrem nahoru - nástrojem pro výběr bodu (A).

U helmy pak nejprve obkreslíme hlavní vypouklou část...

...přičemž nezapomeneme na výstupek vepředu uprostřed. Ten záměrně zvětšíme a přeženeme, protože prostřední pruh později krásně pomůže definovat tvar helmy.

Proto jej také nakreslíme. Nejprve například obkreslíme pravou část (která je ve stínu).

Poté tuto vrstvu zkopírujeme (Ctrl + J) a pravé body posuneme směrem doleva. Tím bude pravá strana přesně sedět s vrstvou minulou.

Původní fotografii skryjeme (nebo alespoň posuneme bokem) a základní tvar bychom měli mít hotový. Na následujícím obrázku vidíte všech pět vrstev tvaru, se kterými budeme dále pracovat.

Pro začátek skryjeme všechny vrstvy kromě první (1) - a tu přebarvíme na žlutou barvu (#FFDF14). Vytvoříme novou vrstvu (Ctrl + Shift + Alt + N), které nastavíme ořezovou masku vrstvy minulé (Ctrl + Alt + G) - na obrázku je to vrstva (2). Do této vrstvy nakreslíme měkkým štětcem tmavší (#D59D00) flek. Aby se podkladová vrstva směrem doprava ztmavovala. Dále načteme výběr vrstvy (4), nastavíme doplněk výběru (Ctrl + Shift + I), vytvoříme novou vrstvu (3) a opět tmavším štětcem čmárneme do pravé strany (barva #3B1C02).

Abychom nemuseli vše opakovat i pro vrstvu (4), zobrazíme ji se stáhnutým krytím na 50 %. Tím se i na této vrstvě projeví (trochu) ztmavení a my máme po starostech. Proto jsme také u minulého kroku vytvořili ztmavení pouze v místech mimo tuto vrstvu. Tím máme kšilt prozatím hotový a pustíme se do hlavní části helmy.

Zobrazíme odpovídající tvar, který přebarvíme na žlutou barvu (#FDDB13). Opět vytvoříme novou vrstvu s ořezovou maskou vrstvy předchozí a v místech označených na obrázku do vrstvy kreslíme měkkým tmavším štětcem. Není třeba dělat nějaké velké (a přesné) ztmavování...

...protože k přesnějšímu určení tvaru nám krásně dopomůže prostřední vypouklý pruh. Zobrazíme proto i tuto vrstvu tvaru, kterou přebarvíme na tmavší odstín žluté (#AA6F00) a vrstvě přidáme masku. Do této masky potom uprostřed helmy nakreslíme měkkým štětcem černý flek, takže vrstva bude zobrazena pouze na krajích. Vše názorně ukazuje tento obrázek.

Dále zobrazíme i poslední zbývající vrstvu - samotný vypouklý pruh. Té si ale zatím nebudeme všímat, pouze ji přebarvíme na žlutou barvu (#FBD500). Co v tomto kroku přidáme, je další ztmavení pravé části helmy, aby barva korespondovala se spodní částí.

Abychom ještě více podtrhli tvar helmy (který je zatím dosti nevýrazný), použijeme jednoduchý postup, při kterém nakreslíme jednopixelový obrys okolo hran v místě dopadajícího světla.

Začneme například spodní (druhou) vrstvou. Načteme výběr vrstvy (Ctrl + klik na vrstvu), vytvoříme novou vrstvu a z menu Úpravy (Edit) vyvoláme funkci Vytáhnout (Stroke). Nastavíme velikost 1 px, barvu bílou, potvrdíme...

...a vrstvě přidáme masku vrstvy, kterou vyplníme černou barvu. Tím pádem nebude nikde nic vidět. Poté zvolíme měkký bílý štětec a v místě, kam dopadá světlo (které si představujeme z levého horního rohu), klikneme do masky - tj. nakreslíme do masky bílý flek. Obrys se tak zobrazí pouze v tomto místě - stejně jako na následujícím obrázku.

Stejným způsobem to uděláme i s ostatními vrstvami, přičemž růžově jsou označeny místa, kde chceme mít obrys vidět. Ikonka nám hned pěkně prokoukla.

Proto přidáme další ztmavení v označených místech - především tam, kde je moc malý kontrast mezi jednotlivými částmi helmy.

Aby helma nebyla pouze žlutá, přidáme zadní modré světlo. Nejprve načteme výběr všech vrstev (Ctrl + Shift + klik na vrstvu), vytvoříme novou vrstvu, zmenšíme výběr o jeden nebo dva pixely (Výběr - Změnit - Zúžit / Select - Modify - Contract) a měkkým velkým světle modrým štětcem nakreslíme světlo přicházející odzadu.

Poslední krok bude přidání opravdu velkých odlesků oken. Podobně jako ve článku Photoshop tutoriál: iMyš - tvorba Apple myši, i zde nejprve nástrojem Pero (Pen Tool) nakreslíme obrysy oken.

Které zkopírujeme (Ctrl + J) a rozostříme filtrem Gaussovské Rozostření (Gaussian Blur).

Odlesky ještě více znásobíme překreslením měkkým bílým štětcem v místech, které ukazuje následující obrázek. Původní okna se v tomto odlesku sice trochu ztratí, to ale ničemu nevadí. Náznak tam je.

A to je vše.

Jak můžete vidět na následujícím obrázku, helma ještě více vynikne na tmavém pozadí (pouze byl přidán stín), takže se nebojte experimentovat a zkoušet tvořit ikonky i z jiných fotografií. 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í.