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

18. února 2008, 00.00 | Se systémem Windows Vista došlo mimo jiné i k velkému updatu grafiky
přiložených her. A přestože u hledání min je grafika stále velmi podprůměrná,
hra Solitaire dostala nový slušivý kabát hned s několika tématy. V dnešním
článku si v Photoshopu vyzkoušíme vytvořit hrací kartu, základ hry
Solitaire.

Začneme screenshotem z uvedeného programu. Celá grafika je nyní pěkně sladěná, karty mají na symbolech 3D efekt (ten ale celek bohužel spíš kazí) a na vybraných kartách jsou velmi pěkné ilustrace. Pozadí je pak nenápadná rozostřená fotka. Pěkné porovnání starých a nových her ve Windows Vista můžete najít na serveru gamespot.com

Jak vypadají jednotlivé karty si potom můžete prohlédnout kliknutím na následující obrázek (odkaz na blog www.istartedsomething.com).

Naším dnešním cílem bude vytvoření jedné karty, například esa. Začneme znakem, který budeme chtít na kartě použít. Protože celkem velké množství fontů tyto znaky nabízí, není nic jednoduššího, než je ve fontu najít a poté zkopírovat do Photoshopu. K tomu použijeme buď program Mapa znaků, nebo např. Word.

Přestože na nových kartách programu Solitaire jsou znaky jiné, já jsem se rozhodl použít symboly z fontu Arial. Jsou takové klasické. Prozatím je ale schováme nebo posuneme bokem.

Potřebujeme totiž nakreslit základ karty. K tomu použijeme nástroj Zakulacený obdélník (Rounded Rectangle Tool), Poloměr (Radius) nastavíme na 3 px, barvu na velmi světlý odstín červeno-oranžové (#F4E6EA) a kartu nakreslíme. Velikost odhadneme podle oka.

Proč světlý odstín červené? Protože znak, který na kartu umístíme, bude červený (#D54B48), a pak také proto, aby na kartě byly vidět bílé odlesky a okraje.

Než se ale dáme do přidávání efektů, rozkopírujeme symbol srdce ještě dvakrát, přičemž jednou jej otočíme o 180° (Ctrl + T) a nad oba znaky přidáme znak A. Protože symboly srdce jsou klasické, použijeme k nim patkový font, např. Times New Roman.

A dáme se konečně do přidávání efektů. Dvakrát klikneme na vrstvu karty a začneme efektem Vytažení (Stroke). Bílá barva, jednopixelová velikost a Pozice: Uvnitř (Position: Inside) zajistí pěkný vnitřní rámeček. Později navíc i odskočený druhý rámeček, to ale nebudeme předbíhat.

Efektem Vnitřní záře (Inner Glow) tento vnitřní rámeček ještě znásobíme. Důležité je nastavení Velikosti (Size) na velkou hodnotu, např. 16 pixelů. Zbytek není třeba měnit.

Trochu nestandardně použijeme k tmavému obrysu efekt Vnější záře (Outer Glow). Barvu přitom nastavíme na černou, Krytí (Opacity) na 31% a Velikost (Size) na 1 px.

Pro ještě větší oddělení od pozadí dopomůže efekt Vržený Stín (Drop Shadow), který nastavíme kolmo pod kartu - Úhel (Angle) na 90°. Barva černá, Vzdálenost (Distance) 1 px, Velikost (Size) 1 px. S tímto nastavením bude stín pouze vespod pod kartou.

Poslední efekt je odsazený tmavý rámeček, který ještě více znásobí bílou vnitřní záři. Použijeme efekt Vnitřní Stín (Inner Shadow) nastavený na Velikost (Size) 2 px. Ovšem tím, že od minule máme ještě jednopixelový vnitřní efekt Vytažení je tento nový efekt starým efektem překrytý. To znamená, že ve výsledku je nový stín vidět o pixel odskočený - přesně tak, jak jsme chtěli.

Stejného výsledku bychom samozřejmě mohli dosáhnout i jinou metodou - např. použitím vlastnosti Profil (Contour), takto to je ale rychlejší.

Tím jsme s efekty skončili, proto dialog potvrdíme a dáme se do kreslení už tolik profláknutého odlesku na kartě. Zvolíme nástroj Pero (Pen Tool) a nakreslíme tvar podobný tomuto. Důležité jsou dva spodní zaoblené body, zbytek nějak doklikejte.

Aby byla tato vrstva (budoucí odlesk) zobrazená pouze v místě karty, nastavíme této vrstvě ořezovou masku vrstvy minulé - zkratkou Ctrl + Alt + G.

Protože je naše vrstva ještě stále reprezentována jako vrstva výplně s vektorovou maskou, musíme vrstvu výplně převést na normální vrstvu - rastrovat ji. K tomu využijeme funkci z menu Vrstva (Layer), Rastrovat - Obsah vrstvy (Rasterize - Fill Content).

Původní oranžovou vymažeme (Ctrl + A, delete) a místo ní nakreslíme přechod z bílé do průhledné nástrojem Přechod (Gradient Tool). Směr tahu ukazuje na následujícím obrázku šipka. Viditelnost tvaru, který určuje vrstvu lze zapnout nebo naopak vypnout zkratkou Ctrl + H.

Zde je náhled na kartu ve 100% velikost. Odlesk je sice pěkný, ale není na symbolech. A to je špatné. Minimálně na prostředním by měl být.

Tento nedostatek vyřešíme nejrychleji tak, že vrstvu zkopírujeme (Ctrl + J), posuneme nad srdce a opět nastavíme ořezovou masku vrstvy předchozí - Ctrl + Alt + G. Protože nad tmavším podkladem (červené srdce) je odlesk znatelně viditelnější než na skoro bílé kartě, stáhneme nové vrstvě odlesku malinko Krytí (Opacity).

Stejně jako kartě, i prostřednímu symbolu přidáme efekty vrstvy.

Začneme celkovým ztmavením krajů efektem Vnitřní Stín (Inner Shadow). Barva černá, Velikost (Size) 5 px, Krytí (Opacity) stáhnuté např. na 30 %.

Pro větší prolnutí s pozadím přidáme Vržený Stín (Drop Shadow), barvy červené (#D54B48), Velikosti (Size) 21 px.

Dále bílý obrys efektem Vnější záře (Outer Glow), Velikosti (Size) 1 px.

A ztmavení směrem dolů efektem Překrytí přechodem (Gradient Overlay). Zde nastavíme přechod z černé do průhledné, interakce Ztmavit barvy (Color Burn).

Poslední je odlesk efektem Vnitřní Záře (Inner Glow), který ale nastavíme na Zdroj: Střed (Source: Center). Barva světle žlutá (#FFFFBE), velikost podle oka. Tím, že je efekt vykreslený od středu zvětšováním velikosti efekt ubíráme (zmenšujeme).

Tím jsme i s touto vrstvou skončili a zbývá poslední odlesk. Načteme výběr vrstvy odlesku, vytvoříme novou vrstvu nad všemi ostatními a z menu Úpravy (Edit) zvolíme funkci Vytáhnout (Stroke). Barva bílá, velikost 1 px.

A tento odlesk při krajích odmažeme měkkou gumou.

Tím je naše karta kompletní, zde je náhled ve 100% velikosti.

Po vzoru prvního screenshotu můžeme přidat ještě podkladovou vrstvu - odkládací místa na karty...

...a dotvořit i ostatní symboly. A potom i ostatní karty. Přestože atraktivita nové grafiky programu Solitaire je postavená především na ilustracích, ani karty bez obrázků vytvořené dnešním způsobem nebudou vypadat nejhůř. Takže - hodně štěstí při práci!

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