Photoshop tutoriál: Tvorba hodin z Windows Vista - Grafika.cz - vše o počítačové grafice

8. února 2008, 00.00 | Analogové, neboli ručičkové hodiny nalezneme v digitálním světě velmi
často. Ať už na pozadí mobilních telefonů, v automobilech nebo
v každém operačním systému. V dnešním článku si ukážeme, jak vytvořit
systémové hodiny z Windows Vista.

Začneme screenshotem, na kterém jsou hodiny dobře vidět:

A hned se přepneme do Photoshopu, kam tento obrázek vložíme, posuneme bokem a dáme se do tvorby. Začneme kruhem přibližně stejné velikosti jako originál, barvy #8C8E9A. To bude náš základ. Kreslíme nástrojem Elipsa (Ellipse Tool), přičemž nezapomeneme mít nástroj přepnutý na režim Vrstva Tvaru (Shape Layer). To abychom mohli vrstvu dále upravovat.

Vrstvu zkopírujeme (Ctrl + J) a zmenšíme o pár procent (Ctrl + T). Dále ji přebarvíme na bílou barvu, např. stiskem klávesy D (vyresetování barev) a následně Ctrl + Backspace (Vyplnit barvou pozadí).

Tato vrstva bude základ pro odlesk v rámečku. Protože je tento odlesk pouze v některých místech, přidáme vrstvě masku (viz obrázek).

A do této masky nakreslíme přechod z bílé (kde bude odlesk vidět) do černé (kde odlesk vidět nebude).

Následně zkopírujeme úplně první vrstvu a posuneme nad všechny ostatní a zmenšíme opět o pár procent (Ctrl + T). Pokud jste vše udělali podle návodu, měl by být vlevo nahoře znatelně vidět odlesk, který se směrem doprava dolů ztrácí. Ovšem pozor - v pravém spodním rohu ještě do masky vrstvy minulé (odlesku) nakreslíme malý bílý flek (nástrojem štětec), protože i zde by měl být odlesk vidět (stejně jako na originále).

Poslední vrstvu tvaru opět zkopírujeme, přebarvíme na #D7E1E4 a opět malinko zmenšíme. To už bude pozadí hodin.

Stejně jako na původních hodinách, i my vytvoříme velký odlesk. Poslední vrstvu ještě jednou zkopírujeme (a na ukázce jsem ji přebarvil na růžovou).

Zvolíme nástroj Elipsa (Ellipse Tool) a nakreslíme velkou elipsu, kterou od původního tvaru odečteme (kreslíme se stisknutou klávesou Alt).

Protože chceme mít odlesk postupný, převedeme vrstvu tvaru na normální vrstvu (tj. vrstvu s maskou tvaru - zatím je vrstva jako výplň barvou s maskou tvaru). Využijeme k tomu funkci Layer - Rasterize - Fill Content.

Označíme obsah vrstvy (Ctrl + A) a vymažeme jej (delete). Zvolíme nástroj Přechod (Gradient Tool) a nakreslíme kruhový přechod z bílé do průhledné. Protože je vrstva stále s maskou tvaru, bude přechod vidět pouze v těchto místech. Přesně jak jsme chtěli.

Druhý odlesk je z pravého spodního rohu. Proto do nové vrstvy opět nakreslíme kruhový přechod...

...načteme výběr vrstvy minulé (pozadí hodin) a tento výběr nastavíme jako masku vrstvy. Tím bude i tento odlesk vidět pouze v místě hodin.

Poslední část pozadí je stín v levém horním rohu. Ten vytvoříme tak, že vrstvu pozadí hodin opět zkopírujeme, zmenšíme (Ctrl + T), zvolíme nástroj pro výběr cesty (A), kruh označíme, zkopírujeme (Ctrl + C), vložíme (Ctrl + V), posuneme směrem doprava dolů a nastavíme mu režim vykreslení na odečítání. Vrstvu přebarvíme na tmavě modrou #4A4D61.

Rozostříme filtrem Gaussovské rozostření (Gaussian Blur) a stáhneme Krytí (Opacity).

Pozadí hodin máme vyřešené a už zbývají pouze ručičky a číselník (bez čísel). Tím začneme. Zvolíme nástroj Obdélník (Rectangle Tool) a nakreslíme pár pixelů široký obdélník odshora až dolů. Kam až bude obdélník zasahovat není potřeba řešit, stejně tak barvu zatím necháme jakoukoliv.

Zvolíme nástroj pro výběr cesty (A), obdélník označíme, zkopírujeme (Ctrl + C), vložíme (Ctrl + V) a otočíme (Ctrl + T) o 90°.

Nástroj necháme stále stejný, pouze označíme i druhý obdélník (s klávesou Shift), zkopírujeme, vložíme, otočíme o 30°, vložíme, otočíme o 60°.

Nyní potřebujeme zobrazit pouze část těchto ukazatelů (které jsou po pěti minutách). Proto zkopírujeme jakoukoliv vrstvu pozadí hodin, posuneme nad všechny vrstvy, zmenšíme, označíme cestu tvaru, zkopírujeme, vložíme, zmenšíme a od tvaru odečteme. Na konci bychom mohli dostat přibližně takový tvar - v něm chceme zobrazit předchozí vrstvu.

Proto označíme cesty vrstvy předchozí (nástrojem pro výběr cest), vložíme je do této vrstvy a režim vykreslení nastavíme na průsečík (Intersect shape areas - viz ikonka na následujícím obrázku). Tím máme značky přesně rozmístěné.

Proto můžeme vrstvu přebarvit na #8F9DA3 a pokračovat dále.

Na řadě jsou minutové značky (malé tečky). Princip tvorby je stejný jako u pětiminutových značek. Nejprve nakreslíme dva protilehlé kruhy nástrojem Elipsa (Ellipse Tool). Ty označíme, zkopírujeme, vložíme, otočíme o 90°. Opět všechny kruhy označíme, zkopírujeme, vložíme, otočíme o 6°, 12°, 18°, 24°... dokud nakonec nebudou všechny (tj. 60). To, že jsou tyto kruhy i v místech minulých značek nevadí, protože se překrývají a nejsou vidět.

Zde je opět jeden náhled ve 100% velikosti.

Zbývají už jenom ručičky. Nejprve vytvoříme prostřední kruh, na kterém budou umístěny. Aby byl přesně uprostřed, je nejrychlejší zkopírovat některou podkladovou vrstvu, přebarvit na černou barvu a velmi zmenšit. Nebo nakreslit nový kruh a využít funkce pro zarovnání.

Ručičku nakreslíme nástrojem Obdélník (Rectangle Tool). Po nakreslení zvolíme nástroj pro výběr bodů (A) a tvar upravíme tak, jak je ukázáno na obrázku. Tím bude ručička směrem ke kraji užší, i když jen o necelý pixel.

Druhou ručičku - hodinovou - vytvoříme podobně.

A rozdíl u sekundové ručičky je pouze ten, že přesahuj přes střed. Ručičky samozřejmě kreslíme tak, že je nejprve vytvoříme ve vodorovné (popř. svislé) poloze, upravíme (zmenšíme kraje) a nakonec otočíme. Tím, že je vrstva vytvořena pomocí cest můžeme točit donekonečna bez ztráty kvality. Při otáčení je také vhodné posunout si středový bod (okolo kterého se vrstva otáčí), škoda jen, že se jeho pozice neukládá a tak při každém otáčení je zpět uprostřed.

Zde je již náhled na finální hodiny.

A zde jsou nové hodiny zapracované do původního screenshotu. Poznáte rozdíl?

Podobné tutoriály v angličtině:

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