Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!
Zadejte Vaši e-mailovou adresu:
Kamarád fotí rád?
Přihlas ho k odběru fotomagazínu!
Zadejte e-mailovou adresu kamaráda:
-
14. listopadu 2024
![OBLIBENE_TITLE2](/templates/102/gr/print-logo.gif)
fotograf
Photoshop tutoriál: Ikonka helmy
21. ledna 2008, 00.00 | 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.
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á.
![](/old-idif/grafika/images4/yellow_helmet_icon_01.jpg)
Zkopírujeme tedy fotku do nového dokumentu a zvětšíme ji (přibližně) na velikost nové ikonky - 128x128 px.
![](/old-idif/grafika/images4/yellow_helmet_icon_02.gif)
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).
![](/old-idif/grafika/images4/yellow_helmet_icon_03.gif)
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).
![](/old-idif/grafika/images4/yellow_helmet_icon_04.gif)
U helmy pak nejprve obkreslíme hlavní vypouklou část...
![](/old-idif/grafika/images4/yellow_helmet_icon_05.gif)
...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.
![](/old-idif/grafika/images4/yellow_helmet_icon_06.gif)
Proto jej také nakreslíme. Nejprve například obkreslíme pravou část (která je ve stínu).
![](/old-idif/grafika/images4/yellow_helmet_icon_07.gif)
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.
![](/old-idif/grafika/images4/yellow_helmet_icon_08.gif)
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.
![](/old-idif/grafika/images4/yellow_helmet_icon_09.gif)
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).
![](/old-idif/grafika/images4/yellow_helmet_icon_10.gif)
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.
![](/old-idif/grafika/images4/yellow_helmet_icon_11.gif)
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í...
![](/old-idif/grafika/images4/yellow_helmet_icon_12.gif)
...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.
![](/old-idif/grafika/images4/yellow_helmet_icon_14.gif)
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í.
![](/old-idif/grafika/images4/yellow_helmet_icon_15.gif)
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...
![](/old-idif/grafika/images4/yellow_helmet_icon_16.gif)
...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.
![](/old-idif/grafika/images4/yellow_helmet_icon_17.gif)
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.
![](/old-idif/grafika/images4/yellow_helmet_icon_18.gif)
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.
![](/old-idif/grafika/images4/yellow_helmet_icon_19.gif)
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.
![](/old-idif/grafika/images4/yellow_helmet_icon_20.gif)
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.
![](/old-idif/grafika/images4/yellow_helmet_icon_21.gif)
Které zkopírujeme (Ctrl + J) a rozostříme filtrem Gaussovské Rozostření (Gaussian Blur).
![](/old-idif/grafika/images4/yellow_helmet_icon_22.gif)
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.
![](/old-idif/grafika/images4/yellow_helmet_icon_23.gif)
A to je vše.
![](/old-idif/grafika/images4/yellow_helmet_icon_24.gif)
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!
![](/old-idif/grafika/images4/yellow_helmet_icon_25.jpg)
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í.
-
14. května 2014
Jak vkládat snímky do galerií a soutěží? Stručný obrazový průvodce
-
23. dubna 2014
Konica Minolta přenesla výhody velkých zařízení do kompaktních modelů
-
12. června 2012
-
9. dubna 2014
-
5. ledna 2017
-
6. září 2004
OKI snižuje ceny barevných laserových tiskáren C3100 a C5200n
-
13. května 2004
-
19. ledna 2004
QuarkXPress Passport 6: předvedení nové verze na konferenci Apple Forum 27.1.2004
-
6. února 2001
-
30. listopadu 2014
Nový fotoaparát α7 II: první plnoformát s pětiosou optickou stabilizací obrazu na světě
-
14. října 2024
-
9. ledna 2025
Bubnový scanner na 4000dpi optické rozlišení + PC + software
-
9. ledna 2025
Profesionální scaner Scanner Heidelberg TOPAZ I. optické rozlišení bez interpolace 3800DPI
-
17. ledna 2025
-
21. ledna 2025