Photoshop tutoriál: Ikonka dopravního kuželu - Grafika.cz - vše o počítačové grafice

12. února 2008, 00.00 | Ikonka dopravního kuželu byla na Internetu často k vidění v souvislosti
se stránkou, která ještě nebyla dokončena - tzv. "under construction" stránky.
Tyto doby jsou už naštěstí dávno pryč, ikonka přesto nezmizela. Je použita
například v populárním přehrávači VLC. Jak ikonku vytvořit se dozvíte v tomto
článku.

Nebudeme zkoumat, jaká je souvislost dopravního kužele s přehráváním videa. Přestože se najde spousta odpůrců, kteří prosazují ikonku jinou (např. náhrada ikonky na macrabbit.com, nebo na deviantartu), nám ikonka z domovské stránky přehrávače poslouží jako dobrá inspirace. Jinak o přehrávači VLC si můžete přečíst např. na wikipedii. Pro případnou další inspiraci hledejte v Google Obrázky klíčová slova "cone icon". Jedna pěkná ukázka upraveného kužele je opět na deviantartu.

Po pečlivém prozkoumání předešlých odkazů se můžeme pustit do práce. Photoshop, nový dokument, pozadí světle oranžové/pískové (#EABE94). Zvolíme nástroj Zaoblený obdélník (Rounded Rectangle Tool) a nakreslíme základ ikonky, barvy #CC622E (prozatím).

Tento tvar otočíme (Ctrl + T) o 45°...

...a zmenšíme výšku přibližně na polovinu, opět zkratkou Ctrl + T.

Vrstvu zkopírujeme (Ctrl + T), přebarvíme na tmavší (#8A3300) a posuneme pod minulou. To bude základ kuželu, bohužel, vpravo i vlevo (kde ukazují šipky) je volné místo.

Proto musíme tato místa dokreslit. Například tak, že ke tvaru přičteme dva obdélníky (stejnojmenný nástroj).

A můžeme se pustit do hlavní části. Nejprve nástrojem Pero (Pen Tool) naklikáme čtyřúhelník podobný tomuto.

Poté stejným nástrojem přidáme body doprostřed nahoru a dolů...

...přičemž horní bod posuneme směrem nahoru a spodní směrem dolů. K tomu už použijeme nástroj pro výběr bodu (A).

I pro bílé svítící pruhy vytvoříme zvlášť tvary. Nejprve nakreslíme elipsu přes celou šířku minulého tvaru, přes ni obdélník (kreslíme s klávesou Shift) a poté ještě jednou elipsu, kterou od tvaru odečteme (kreslíme s klávesou Alt). Barvy prozatím např. #E6E6E6.

Tento tvar zkopírujeme ještě jednou (Ctrl + J), posuneme směrem dolů a zvětšíme (Ctrl + T). Následně oběma vrstvám nastavíme ořezovou masku vrstvy minulé, a to zkratkou Ctrl + Alt + G. Tím budou tyto vrstvy zobrazeny pouze v místě vrstvy předchozí (oranžové).

Abychom tak nějak udrželi ikonku správně barevnou, můžeme si bokem do nové vrstvy nakreslit barvy, které budeme používat při stínování. Jedná se o tmavě oranžovou pro stíny (#6B3719), oranžové odstíny pro základ (#D25200, #F07E00) a světlou pro odlesky (#E6E6E6). U odlesků samozřejmě nic nezkazíte použitím bílé barvy se sníženým krytím.

Dáme se tedy do stínování. Skryjeme všechny vrstvy kromě první (spodní vrstva základu), vytvoříme novou vrstvu, nastavíme ji ořezovou masku vrstvy předchozí (Ctrl + Alt + G) a dáme se do stínování. Nejprve vlevo uprostřed čmárneme velkým štětcem, poté nástrojem Mnohoúhelníkový výběr (Polygonal Lasso Tool) vybereme pravou část tvaru, a opět měkkým velkým štětcem čmárneme. Jako na obrázku.

Zobrazíme další vrstvu, přebarvíme ji na oranžovou (#D45809) a stejným způsobem vytvoříme odzadu stíny a zepředu světlo.

Stíny vytvoříme i nad hlavní částí kuželu, a to z levé i pravé strany. Barvu používáme stále stejnou (#6C3819), pouze experimentujeme s krytím, popř. interakcí.

Nyní bychom chtěli rozzářit bílé pruhy. Pokud se podíváte na odrazku, popř. reflexní vestu zblízka, uvidíte jasnou strukturu, kterou se nyní pokusíme napodobit. Protože je ale ikonka velmi malá, musí být i struktura malá a jednoduchá. Třeba taková, jaká byla už jednou použita v článku Photoshop tutoriál: Ikonka štítu. Do nové vrstvy tento vzorek nakreslíme nástrojem Tužka (Pencil Tool), oblast označíme a definujeme jako nový vzorek - Úpravy - Definovat vzorek (Edit - Define pattern).

Načteme výběr obou bílých vrstev (Ctrl + Shift + klik na vrstvu), vytvoříme novou vrstvu (Ctrl + Alt + Shift + N) a tento výběr nastavíme jako masku vrstvy.

Přepneme se do masky (Alt + klik na masku) a bílá místa vyplníme předpřipraveným vzorkem. Využijeme přitom fakt, že s interakcí Násobení (Multiply) se černá barva nemění. Vyvoláme proto funkci Vyplnit (Fill) z menu Úpravy (Edit), nastavíme vzorek, interakci a potvrdíme.

Co se stalo? Nyní bude obsah vrstvy vidět pouze v místě bílých vrstev, ovšem pouze jako vzorek. Vyzkoušet si to můžete hned, kreslením jakýmkoliv nástrojem do vrstvy. Stejně jako na následujícím obrázku.

My ale chceme pěkné světlo, tudíž nastavíme velký měkký bílý štětec a kreslíme uprostřed kužele. Vzorek se začne pěkně rýsovat.

Proto se už můžeme pustit do velkých odlesků přes celý kužel. Nejprve načteme výběr vystouplé části kuželu a tento výběr zúžíme o 2 px.

Nástrojem Mnohoúhelníkové laso (Polygonal Lasso Tool) odečteme pravou polovinu (s klávesou Alt) a poté ještě kruhovým výběrem odečteme horní část (která také nebude osvětlena).

Se stále nastaveným výběrem nakreslíme do nové vrstvy nástrojem Přechod (Gradient Tool) přechod z bílé barvy do průhledné.

Stejným způsobem vytvoříme odlesk i na základně.

I na boku základny. Zde už můžeme použít normální obdélníkový výběr.

Kužel bez odlesku nahoře ale vypadá trochu divně, proto jej přidáme i tam. Abychom mohli tento odlesk případně upravit, můžeme zde použít vrstvu tvaru, nakreslenou nástrojem Pero (Pen Tool).

Hrany v místě odlesků ještě více zvýrazníme. Použijeme k tomu nástroj Pero (Pen Tool), přičemž zvětšené tvary jsou vidět na následujícím obrázku.

Když už je kužel tak lesklý, měla by se zřejmě v podstavě odrážet vystouplá část. Proto tuto vrstvu (oranžovou) zkopírujeme a vložíme nad podstavu. Vrstvu převrátíme, posuneme směrem dolů a případně můžeme přidat masku, aby vrstva směrem dolů mizela. Na následujícím obrázku vpravo vidíte, že odlesk je nejvíce vidět v pravé části ikonky (kde ukazuje šipka).

Poslední krok bude přidání zadního světla. Aby ikonka nebyla jenom oranžová, můžeme zvolit jiný odstín světla, například fialový. Načteme výběr všech vrstev, který zmenšíme o jeden pixel - Výběr - Změnit - Zúžit (Select - Modify - Contract)...

...a do nové vrstvy nakreslíme velkým měkkým fialovým (#D2B8F6) štětcem světlo.

A to je vše. 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í.