Photoshop tutoriál: Tvorba ikonky monitoru - Grafika.cz - vše o počítačové grafice

10. března 2008, 00.00 | Přestože Windows Vista jsou již dávno v prodeji, pojďme si ještě na
chvilku zavzpomínat na systém Windows XP a jeho systémové ikonky, které byly
velmi vydařené. Proto se u nich inspirujeme v dnešním článku, ve kterém si
ukážeme, jak vytvořit jednoduchou ikonku monitoru.

Pro začátek trochu odbočíme - ikonky systému Windows Vista (které nejsou zrovna nejpěknější) i Windows XP má na starosti jedna a tatáž společnost - www.iconfactory.com

A už se můžeme věnovat tvorbě. Do nového dokumentu zkopírujeme ikonku, ze které si propůjčíme styl a barvy, a už se můžeme dát do práce. Zvolíme fialovou barvu (#9693B0) a nakreslíme obdélník - základ budoucího monitoru. K tomu použijeme nástroj Zaoblený obdélník (Rounded Rectangle Tool), poloměr volte od oka, ne moc velký, ne moc malý.

Poté změníme barvu na modrou (pozadí obrazovky - #1E7EDB) a nakreslíme vnitřní část monitoru. Poloměr zaoblení (Radius) můžeme malinko zmenšit, vespod necháme místo pro ovládací prvky...

...které hned dokreslíme. Tlačítka vpravo je dobré nakreslit do jedné vrstvy (při kreslení držíme klávesu Shift), vypínač vlevo přesahuje přes plochu monitoru, proto mu nastavíme ořezovou masku spodní vrstvy (Ctrl + Alt + G). Na ukázce je vše dobře vidět, vypínač je vrstva Shape 11.

To by pro začátek stačilo, proto se můžeme pustit do deformace - Úpravy - Transformovat - Deformovat (Edit - Transform - Distort).

Zde je výsledek ve 100% velikosti:

Nyní ploché obrazovce přidáme třetí dimenzi. První vrstvu zkopírujeme (Ctrl + J) a stejnou funkcí jako minule zdeformujeme tak, aby vlevo a nahoře přesahovala. Následně vrstvě změníme barvu na tmavě fialovou #A19ECA, a obrazovce na světle fialovou - #D6D3F6.

Poté načteme výběr obou vrstev (Ctrl + Shift + klik na vrstvu) a z menu Úpravy (Edit) vyvoláme funkci Vytáhnout (Stroke). Nastavíme velikost jeden pixel, barva tmavě fialová #6A6887 a potvrdíme.

Samozřejmě bychom mohli využít efekty vrstvy, ale my zvolíme tento způsob proto, že v budoucnu budeme chtít kousek obrysu skrýt.

Nad zadní částí monitoru vytvoříme další vrstvy, kterým nastavíme ořezovou masku předchozí vrstvy (Ctrl + Alt + G). Následně zvolíme nástroj Štětec (Brush Tool) a měkkým štětcem nakreslíme světla (1) a stíny (2).

I s ovládacími prvky si můžeme vyhrát. Například tak, že vrstvu tlačítka vlevo zkopírujeme, přebarvíme na světlejší (#9693B0) a malinko zmenšíme.

Tím se postupně dostáváme i k vnitřní části monitoru - obrazovce. Nejprve přidáme novou vrstvu, do které nakreslíme přechod ze světle modré barvy (#70B5F4), poté můžeme ještě přidat další tvary, které naznačí obrys spodní lišty. Vše názorně ukazuje následující obrázek.

Aby byla obrazovka "vtlačená" do podkladu, musíme kolem ní vhodně nakreslit světlý a tmavý obrys. Mohli bychom použít funkci Vytáhnout, ale tentokrát zkusíme něco jiného - nakreslíme obrys jako vrstvu tvaru, takže se bude směrem ke krajům ztrácet.

Nejprve zkopírujeme vrstvu tvaru obrazovky (Ctrl + J), označíme tvar nástrojem pro výběr cesty (A), tvar zkopírujeme a vložíme (Ctrl + C/V), posuneme malinko bokem a od původního tvaru odečteme (druhé tlačítko na liště). Aby se obrys směrem ke kraji ztrácel, použijeme transformaci Deformovat (Distort) a vhodně tvar natáhneme.

Poté vrstvu zkopírujeme ještě jednou (Ctrl + J), přebarvíme na bílou barvu a posuneme o pixel nahoru a doleva. Tím bude obrys ještě výraznější. Zde je jeden náhled ve 100% velikosti.

Podobným způsobem se vypořádáme i s hranou vespod. Tentokrát však stačí pouze jeden tvar barvy bílé. Nyní již obrazovka vypadá jako vytlačená do monitoru.

A proto mohou na řadu přijít velké odlesky. Pomůže nám k tomu nástroj Pero (Pen Tool), přičemž to, jestli udělat odlesk vlevo, vpravo, nahoře nebo dole, je už na vás.

Důležité je nastavit odlesku masku vrstvy (1), kterou nejprve načteme (Ctrl + Shift + klik na všechny vrstvy), aby byl odlesk zobrazený pouze tam, kde jej chceme mít - tedy i nad vrstvou monitoru (2) a zadní vrstvou monitoru (3).

Abychom trochu zatraktivnili pozadí monitoru, použijeme jednoduchý profláknutý trik. Nejprve nakreslíme libovolnou velkou elipsu (stejnojmenným nástrojem), načteme výběr vrstvy a do nové vrstvy vytáhneme jednopixelový obrys efektem Vytáhnout (Stroke)...

...poté elipsu otočíme, zdeformujeme a opět do nové vrstvy vytáhneme jednopixelový obrys. Takto to provedeme několikrát, přičemž následně všem vrstvám přidáme masku vrstvy, kterou vyplníme černou barvou (nic nebude vidět). A pak už jen bílým měkkým štětcem kreslíme v místech, kde chceme čáry vidět. Na spojích můžeme navíc nakreslit ještě sem tam nějakou tu tečku.

Poslední část monitoru, která nám zbývá, je podstavec. Nejprve nakreslíme elipsu jako základ, barvy #DCDBEE a hned ji pootočíme a popřípadě ještě zdeformujeme funkcí Deformovat (Distort).

Elipsu zkopírujeme (Ctrl + J), zmenšíme (Ctrl + T) a přebarvíme na tmavší odstín (#B6B4D4).

K nakreslení hlavní části stojanu už musíme použít nástroj Pero (Pen Tool). Nejedná se však o žádný složitý tvar, takže věřím, že jej zvládnete.

Poté opět vytvoříme obrys okolo všech tvarů. Nejprve načteme výběr všech vrstev podstavce (Ctrl + Shift + klik na všechny vrstvy) a následně zvolíme funkci Vytáhnout (Stroke) barva #5D5B7B.

Zbývá jen na stojan přidat světla a stíny - opět můžeme využít nástroj Pero (Pen Tool). Tímto způsobem alespoň můžeme v budoucnu vzhled ovlivnit. Jak vrstvu stínu, tak vrstvu světla necháme viditelnou jen náznakem, stojan není hlavní část ikonky, a tak by neměl zbytečně "zářit".

Poslední krok je umazání obrysu monitoru v místě napojení podstavce. Například tak, že přidáme vrstvě masku a do ní v místě napojení kreslíme tvrdým černým štětcem. Pokud navíc nepoužijeme 100% krytí, můžeme nechat obrys náznakem viditelný, což je jedině ku prospěchu věci. To je také důvod, proč jsme nevytvořili najednou obrys celé ikonky a proč jsou obrysy ve skutečnosti dva (obrys monitoru a obrys podstavce).

A to je vše. Věřím, že se vám ikonka povedla minimálně stejně tak dobře a že jste se opět něco nového přiučili. Jak přidat ikonce stín bylo popsáno například ve článku Photoshop tutoriál: Ikonka štítu - zde je pouze ten rozdíl, že stín musí být mírně otočený (vzhledem k zobrazení ikonky). Jinak je ale princip úplně stejný.

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