Adobe Photoshop tutoriál: tlačítko ve stylu iTunes - Grafika.cz - vše o počítačové grafice

12. října 2007, 00.00 | V dnešním tutoriálu si ukážeme, jak na tlačítko ve stylu programu iTunes -
kulaté, zářivé a lesklé. Trochu nestandardně k tomu použijeme pouze jednu vrstvu s
efekty. Co víc si přát? Snad jen, aby vše šlo vždy takto jednoduše a rychle.

Začneme ukázkou přímo z programu iTunes. Je mi jasné, že každý ví, jak takové tlačítko vypadá, ale proč si to nepřipomenout. Pro práci se nám to bude víc než hodit.

Abychom netvořili na bílém nudném podkladu, umístíme na pozadí předpřipravený základ (jedná se o standardní tvar z Photoshopu doplněný o pár efektů).

A dáme se do práce. Nástrojem Elipsa (Ellipse Tool) nakreslíme tlačítko - resp. kruh, barvy šedé - #D5D5D5.

Na velikosti nezáleží. Všimněte si jen, že tlačítko má velmi podobnou barvu jako podklad, většinu efektů totiž obstarají právě efekty vrstvy.

Dvakrát klikněte na vrstvu pro vyvolání dialogu Styl Vrstvy (Layer Style) a pusťme se do práce. Začneme odleskem, který bude zřejmě nejsložitější. K tomu použijeme efekt Úkos a reliéf (Bevel and Emboss), který nastavíme na výrazné barvy (na ukázce fialová a růžová) a krytí Normalní (Normal) - abychom lépe viděli výsledek. Poté experimentujeme s vlastností Velikost (Size) a nastavením zdroje světla, dokud se nedopracujeme k něčemu jako na tomto obrázku. Ve finále použijeme zřejmě pouze jednu složku efektu, buď pouze stíny, nebo pouze světla. Podle toho, co se nám bude víc líbit.

Jakmile vidíme, že více s těmito vlastnostmi nezvládneme, přijde na řadu vlastnost Profil Lesku (Gloss Contour). Zde můžeme naprosto přesně ovlivnit průběh vykreslování světel a stínů. Klikněte do náhledu profilu pro vyvolání dialogu, dáme se do experimentování.

Standardní průběh křivky ukazuje obrázek A. První bod (vlevo dole) určuje světla, zatímco bod druhý (vpravo nahoře) určuje stíny. Při tomto lineárním průběhu je vzhled efektu určen pouze vlastnostmi, které jsme nastavili dříve (tj. velikost, zdroj světla atd.). Ať vidíte, jak se vzhled efektu mění, zkuste nastavit oba body úplně nahoru - všude budou pouze světla (jako na obrázku B). Naopak nastavením obou bodů dospodu bude všude pouze stín (viz obrázek C).

Potřebujeme co nejvíc "zostřit" přechod světel do stínů. Tak, aby vznikla téměř ostrá hrana (podobně jako na původním obrázku). Toho dosáhneme tak, že tyto dva body dáme v ose Y co nejblíže k sobě. Následující tři obrázky ukazují, jaký vliv na výsledný efekt má poloha obou bodů.

Třetí obrázek už se začíná nápadně podobat originálnímu tlačítku, nemyslíte? Proto stáhněte krytí stínů na 0 %, změňte barvu světel na bílou a krytí na cca 70 %. Pokud se vám zdá, že přechod je až příliš ostrý (resp. kostrbatý), malinko upravte profil lesku tak, aby mezi body byla malá mezera (tj. aby nebyly v ose Y ihned vedle sebe). Ostatně na tomto obrázku je profil jasně vidět (v náhledu).

Nejdůležitější krok máme za sebou, teď už jen maličkosti. Pro následující kroky jsem si raději vložil bokem originální tlačítko, abych měl originál k porovnání. Jasně je vidět, že tlačítko je ze spodní části zesvětleno.

K tomu použijeme efekt Překrytí přechodem (Gradient Overlay). Ten nastavíme na Styl: Kruhový (Style: Radial), přechod z černé do bílé a interakci Závoj (Screen). Nebo přechod z bílé do průhledné a interakci Normalní (Normal) - výsledek je samozřejmě stejný. Kliknutím a tažením v ploše posuňte přechod na správné místo, případně upravte jeho Velikost (Scale).

Kolem okrajů je vidět malé ztmavení, na to poslouží efekt Vnitřní stín (Inner Shadow). Velikost (Size) nastavíme na velkou, např. 13 px, Vzdálenost (Distance) na 5 px a Úhel (Angle) na 120°. To aby stín přicházel z levého horního rohu a vpravo dole nebyl skoro vůbec vidět. Nakonec stáhneme Krytí (Opacity) na cca 20 %. Klidně i méně.

Tím je vnitřek tlačítka vyřešen, nyní se pustím do obrysů a stínů. Největší problém bude vytvořit jednopixelový bílý odlesk vespod. Požijeme k tomu efekt Vržený stín (Drop Shadow), ovšem nastavený na interakci Závoj (Screen) a barvu bílou. Velikost (Size) 2 px, Vzdálenost (Distance) 1 px, Úhel (Angle) 90°. S tímto nastavením bude stín, resp. záře vespod o pixel větší. Rozsah (Spread) na 91 % zajistí, aby efekt nebyl rozmazaný.

Aby byla tato záře opravdu jenom vespod, překryjeme ji obrysem - efektem Vnější záře (Outer Glow). Interakci nastavíme na Násobit (Multiply), barvu černou, Krytí (Opacity) cca 50 %. Velikost (Size) 2 px.

Aby byl efekt výraznější, stáhneme vlastnost Rozšíření (Range) na 32%.

Nakonec vše završíme obrysem efektem Vytažení (Stroke) velikosti 1 px. Ten nastavíme na Lineární (Linear) přechod z černé do bílé. Tím pádem bude obrys nahoře tmavý a směrem dolů bude slábnout. K původnímu tlačítku jsme se přiblížili víc než dost.

Tím, že jsme použili pouze efekty vrstev, jsme si krásně ulehčili další práci. Pro vytvoření dalšího tlačítka stačí jen nakreslit tvar a zkopírovat styl vrstvy. Nezáleží na tom, jestli je menší nebo větší, výsledek je stále pěkně a použitelný. Dál už je to jen na vás, já vám jen popřeji spousty energie do další práce.

Poznámka na závěr: Udělat z předchozího obrázku pěkně vypadající GUI je otázka pár kliknutí. Malinko přebarvit všechny prvky do jiného odstínu (šedá je nudná), přidat ikonky a nasimulovat over stav většího tlačítka tím, že přidáte novou vrstvu s interakcí Barva (Color) a malinko ji rozostříte? To je jen jedna z možností. Věřím, že vás napadnou i další ...

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