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:
-
3. dubna 2024
-
3. dubna 2024
-
15. dubna 2024
-
18. dubna 2024
-
28. dubna 2024
-
28. dubna 2024
-
14. května 2024
-
16. května 2024
-
17. května 2024
-
11. června 2024
-
19. května 2024
-
29. května 2024
![OBLIBENE_TITLE2](/templates/102/gr/print-logo.gif)
fotograf
Photoshop tutoriál: Tvorba ikonky monitoru
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ý.
![](/old-idif/grafika/images4/computer_icon_01.gif)
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...
![](/old-idif/grafika/images4/computer_icon_02.gif)
...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.
![](/old-idif/grafika/images4/computer_icon_03.gif)
To by pro začátek stačilo, proto se můžeme pustit do deformace - Úpravy - Transformovat - Deformovat (Edit - Transform - Distort).
![](/old-idif/grafika/images4/computer_icon_04.gif)
Zde je výsledek ve 100% velikosti:
![](/old-idif/grafika/images4/computer_icon_05.gif)
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.
![](/old-idif/grafika/images4/computer_icon_06.gif)
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.
![](/old-idif/grafika/images4/computer_icon_07.gif)
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).
![](/old-idif/grafika/images4/computer_icon_08.gif)
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.
![](/old-idif/grafika/images4/computer_icon_09.gif)
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.
![](/old-idif/grafika/images4/computer_icon_10.gif)
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.
![](/old-idif/grafika/images4/computer_icon_11.gif)
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.
![](/old-idif/grafika/images4/computer_icon_12.gif)
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.
![](/old-idif/grafika/images4/computer_icon_14.gif)
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.
![](/old-idif/grafika/images4/computer_icon_15.gif)
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).
![](/old-idif/grafika/images4/computer_icon_16.gif)
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)...
![](/old-idif/grafika/images4/computer_icon_17.gif)
...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.
![](/old-idif/grafika/images4/computer_icon_18.gif)
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).
![](/old-idif/grafika/images4/computer_icon_19.gif)
Elipsu zkopírujeme (Ctrl + J), zmenšíme (Ctrl + T) a přebarvíme na tmavší odstín (#B6B4D4).
![](/old-idif/grafika/images4/computer_icon_20.gif)
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.
![](/old-idif/grafika/images4/computer_icon_21.gif)
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.
![](/old-idif/grafika/images4/computer_icon_22.gif)
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".
![](/old-idif/grafika/images4/computer_icon_23.gif)
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).
![](/old-idif/grafika/images4/computer_icon_24.gif)
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ý.
![](/old-idif/grafika/images4/computer_icon_25.gif)
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
-
29. listopadu 2013
-
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ě
-
11. dubna 2024
-
30. dubna 2024
-
9. května 2024
-
16. května 2024
-
20. května 2024
-
9. června 2024
-
11. června 2024
-
12. června 2024
Profesionální scaner Scanner Heidelberg TOPAZ I. optické rozlišení bez interpolace 3800DPI