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

4. února 2008, 00.00 | Nejnovější verze operačních systémů přinesly tzv. Widgets, resp. Gadgets,
což jsou malé jednoduché programy. A přestože se ve většině případů jedná o
programy naprosto zbytečné, vypadají alespoň pěkně. Proto si v tomto článku
ukážeme, jak v Photoshopu vytvořit screenshot widgets v akci.

Začneme ukázkou, jak takové Widgets v MAC OS X vypadají. Zde je jeden screenshot ze serveru arstechnica.com.

Zde ještě jeden ze stránek cgartdomain.com.

My si dnešní práci rozdělíme na několik částí - abychom se v tom neztratili a aby i méně zkušení uživatelé Photoshopu mohli tutoriál bez problémů dokončit. Nejprve vytvoříme pozadí spodní lišty, poté přidáme ikonky a vše zakončíme pozadím.

U spodní lišty je nejdůležitější vzorek, proto se na něj podíváme ve 100% velikosti a zkusíme vytvořit podobný.

V Photoshopu vytvoříme nový dokument, který vyplníme barvou #A5ACB6. Dokument zobrazíme na 1600 %, zvolíme nástroj Tužka (Pencil Tool) a začneme kreslit "kruh" velký 3x3 pixely. Mohli bychom k tomu použít samozřejmě odpovídající nástroj, ale tužkou můžeme lépe nakreslit detaily...

...tedy míru zakulacení. Čím světlejší budou rohové body, tím bude tvar více připomínat kruh. Naopak čím tmavší body budou, tím bude tvar více čtverec. Krytí nástroje tužka měníme podle potřeby.

Pod tuto tmavou "díru" musíme ještě nakreslit odlesk. Proto přepneme barvu na bílou, ještě více stáhneme krytí (cca na 30 %) a odlesk dokreslíme.

;

Zvolíme nástroj Posun (Move Tool) a vrstvu společně se stisknutou klávesou Alt posuneme bokem - tím se vrstva zkopíruje. Nyní je potřeba si rozmyslet, jak udělat vzorek velký - tj. kam novou vrstvu umístit. Já jsem zvolil dvoupixelové odsazení v obou směrech. Po správném umístění přepneme nástroj na Obdélníkový výběr a označíme plochu budoucího vzorku. Protože odsazení je dvoupixelové, musíme vybrat oblast o dva pixely širší i vyšší, než jsou kraje vrstev - jako na tomto obrázku:

Poté skryjeme všechny podkladové vrstvy a definujeme nový vzorek - Úpravy - Definovat vzorek (Edit - Define Pattern).

Nástrojem Obdélníkový výběr vybereme, kde chceme mít vzorek zobrazený, a v menu Vrstvy (Layers) vzorek přidáme.

Zde je pro jistotu náhled na dialog. Nic neměníme, pouze vybereme náš nový vzorek.

Poté spodní vrstvu přebarvíme na tmavší (#687484) a v místě, kde má být Panel, vytvoříme vrstvu novou (barvy #A5ACB6). Zde je náhled na celý dokument.

Na původním screenshotu vidíte, že panel je od pozadí oddělen stínem - což ale nevypadá moc pěkně. Proto k oddělení naopak použijeme světlo. Vrstvě přidáme efekt vrstvy Vnitřní Stín (Inner Shadow) s následujícím nastavením. Důležitá je barva bílá, Vzdálenost (Distance) 5 px a Velikost (Size) 0 px (aby nebyl stín rozmazaný).

K dotvoření odlesku můžeme ještě přidat efekt Překrytí přechodem (Gradient Overlay). Přechod nastavíme tak, aby zasahoval pouze do horní části.

A můžeme přidávat text. Nejprve napíšeme název aplikace barvou #2A2B2F...

...a hned přidáme efekt stejný jako u vzorku - jednopixelový spodní světlý obrys. Využijeme k tomu opět efekty vrstvy, a to konkrétně efekt Vržený Stín (Drop Shadow). Aby byl efekt pouze vespod, nastavíme Úhel (Angle) na 90°, Velikost (Size) 0 px, Vzdálenost (Distance) 1 px.

Tím se přesouváme k ikonkám. Protože jejich tvorba přesahuje možnosti jednoho článku a především protože na Internetu je podobných ikonek ke stažení opravdu hodně, využijeme tuto možnost. Navíc na stránkách deviantart si můžete stáhnout ikonky ve formátu .psd - tedy jako editovatelný photoshop soubor. Ikonky jsou sice z iPhone, ale od Widgets ikonek se moc neliší.

Tudíž si stáhněte předešlý balík ikonek a můžeme začít umisťovat. Soubory stačí do dokumentu přetáhnout a zmenšit zkratkou Ctrl + T.

Zapamatujte si procenta, na které obrázek zmenšujete, ať máte všechny ikonky stejně velké.

Zde je opět jeden náhled na celý dokument.

Zbývá už jen dotvořit pozadí. Proto pro následující kroky umístíme všechny doposud vytvořené vrstvy do nové složky, kterou skryjeme.

Pozadí dokumentu vyplníme modrou barvou (#407EC8) a nástrojem Elipsa (Ellipse Tool) nakreslíme libovolný kruh, libovolné velikosti, libovolné barvy...

...protože hned stáhneme krytí výplně na 0 %. Takže nebude vidět nic...

...kromě efektů vrstev, které vrstvě přidáme. Začneme jednopixelovým bílým obrysem Vytažení (Stroke)...

...který ovšem nastavíme na Násobení (Multiply), takže nebude opět nic vidět. Proč?

V tomto obrysu totiž necháme vykreslit efekt Úkos a reliéf (Bevel and Emboss) nastavený na Reliéfní tah (Stroke Emboss). Protože nám stačí pouze to, aby nebyl efekt v celé ploše vidět na 100 %, můžeme s nastavením jakkoliv experimentovat...

...třeba změnit Profil lesku (Gloss Contour).

Nakonec nebude na škodu přidat celkový nenápadný obrys efektem Vnější záře (Outer Glow).

A ještě celkové vnitřní zesvětlení efektem Vnitřní Stín (Inner Shadow). U všech efektů necháme barvu na bílou a interakci na Zesvětlit barvy (Color Dodge).

Tím máme základ pro pozadí vytvořený. Nyní už jen stačí kruh dostatečně zvětšit, otočit, zkosit... cokoliv vás napadne. K tomu všemu nám postačí zktratka Ctrl + T.

A několikrát rozkopírovat (Ctrl + J). Pozadí by potom mohlo vypadat například takto:

Zde se zobrazenou lištou:

Při zobrazených Widgets ale pozadí tmavne, proto přidáme novou černou vrstvu, které stáhneme krytí na 60 %.

A pro zpestření můžeme ponechat pár ikonek v původní velikosti. Tyto ikonky tak představují spuštěné aplikace a nám pěkně dotvoří dnešní obrázek. Doufám, že jste se opět něco nového přiučili, a přeji hodně štěstí při práci. Kliknutím na následující obrázek jej zobrazíte ve 100% velikosti.

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