Adobe Photoshop: ikonka hrací kostky - Grafika.cz - vše o počítačové grafice

16. listopadu 2007, 00.00 | Ať už tvoříte stránky pro online casino, nebo jen grafiku pro novou hru,
ikonka červené hrací kostky vám jistě přijde vhod. Stejně jako podrobný návod,
jak tuto kostku vytvořit. Bonusem pak může být, že podobný princip lze jednoduše
požít na jakýkoliv podobný objekt. Papírová krabice jako ikonka pro pakovací
program, reprobedna pro audio přehrávač? To už je jen na vaší fantazii.

Jako obvykle začneme novým dokumentem, do kterého jsem si přibližně tužkou nakreslil co vlastně chceme dělat. Hlavně tedy pro vás, ať víte, do čeho se chystáme.

Na předešlém náhledu to není moc patrné, ale u kostky chceme, aby stěny měly zaoblené rohy (tak jako opravdová hrací kostka). Proto jako základ použijeme obdélník (čtverec) se zaoblenými rohy - nástroj Zaoblený obdélník (Rounded Rectangle Tool). Barev si prozatím vůbec nevšímejte, důležitý je tvar a velikost. Poloměr (Radius) zakulacení volte podle oka.

Tuto stěnu zkosíme stejnojmennou transformací - Zkosit (Skew).

A přidáme trochu perspektivy - Transformovat - Perspektiva (Transform - Perspective) - levý spodní roh posuneme malinko doprava nahoru (tvoříme levou stěnu kostky).

Tuto stěnu zkopírujeme (Ctrl + J), převrátíme a posuneme bokem, aby mezi stěnami vznikla jednopixelová mezera (do této mezery později doplníme odlesk).

Znovu nakreslíme původní tvar, otočíme jej (Ctrl + T) o 45°, a zmenšíme (Ctrl + T) tak, aby přesně pasoval do horního prostoru. Asi tak, jako na tomto obrázku. Základ máme hotový.

Takto vypadá ve 100% velikosti:

Postupně se dostáváme k barvě. Kostka bude červená, konkrétně barva #C70E0C. Malinko jsem také přebarvil pozadí, ať červená moc nezáří (prozatím). K dotvoření tvaru kostky je potřeba nakreslit poslední tvar, který zaplní vzniklé mezery. Barva tvaru je #FC8487 a nakreslíme jej nástrojem Pero (Pen Tool). Části, které jsou překryté stěnami nejsou důležité (vidíte, že tam nic není), důležité jsou rohy - musí přesně kopírovat tvar kostky a být zakulacené.

Nad touto vrstvou vytvoříme novou vrstvu a uprostřed do ní nástrojem Přechod (Gradient Tool) nakreslíme Kruhový (Radial) přechod z bílé do průhledné - jak ukazuje obrázek. Tím vznikne hlavní odlesk.

Po tomto odlesku je třeba doplnit odlesky i na jednotlivé stěny. Vždy vytvoříme novou vrstvu, které nastavíme předchozí vrstvu (stěnu) jako ořezovou (Ctrl + G, popř. Ctrl + Alt + G) a do ní nakreslíme přechod - z barvy #FB7D80. Nejprve horní stěnu:

Poté ze stejného místa levou stěnu a nakonec pravou stěnu zespodu. Do prvé stěny zleva naopak přidáme stín přechodem s tmavší barvou #970609.

Kostku potřebujeme nějak rozumně ohraničit. Načteme proto výběr všech dosud vytvořených vrstev (Ctrl + Shift + klik na vrstvu), vytvoříme novou vrstvu (Ctrl + Alt + Shift + N) a tento výběr vyplníme libovolnou barvou (Alt + Backspace) a odznačíme (Ctrl + D). Této vrstvě stáhneme krytí Výplně (Fill) na 0 %, takže nebude vidět nic...

...pouze efekty vrstvy, které přidáme. Začneme efektem Vnitřní Stín (Inner Shadow), nastaveným na jeden pixel, barvy černé, a Vzdálenost (Distance) 0 px - aby byl obrys rovnoměrně kolem celého tvaru. Mohli bychom použít efekt Vytažení (Stroke), ale tímto způsobem máme nad výsledkem větší kontrolu.

Pokračujeme efektem Vnitřní Záře (Inner Glow). Barva #FFDADA, krytí stáhneme na přijatelnou úroveň.

Dále přidáme Vnější záři (Outer Glow), nastavenou takto:

Vše zakončí efekt Vržený stín (Drop Shadow) - který však bude svítit, protože jej nastavíme na bílou barvu a interakci Lineárně zesvětlit (Linear Dodge). Efekt nastavíme na Vzdálenost (Distance) 28 px a Úhel (Angle) 90°, takže bude svítit směrem dolů.

Aby vznikl efekt poloprůhledné kostky, dotvoříme i obrysy zadních stran. Horní stěnu zkopírujeme (Ctrl + J), stáhneme krytí Výplně (Fill) na 0 %, přidáme efekt Vytažení (Stroke) široký jeden pixel, barvy bílé. Tento tvar posuneme směrem dolů, malinko zmenšíme a stáhneme krytí např. na 20 %.

Poslední zbývající čáru dotvoříme prostým nakreslením nástrojem Tužka (Pencil Tool) velikosti 1 px, barvy bílé, krytí 20 %.

Tím máme kostku hotovou a zbývá pouze na stěny přidat tečky. Nástrojem Obdélník (Rectangle Tool) vytvoříme nový čtverec.

A do něj nakreslíme nástrojem Elipsa (Ellipse Tool) všechny možné podoby stěny kostky. Nezapomeňte udělat každou elipsu jako zvlášť vrstvu (resp. nakreslete jednu elipsu, a tu poté kopírujte Ctrl + J).

Všechny tyto vrstvy umístěte do zvlášť složky, kterou několikrát (3x) zkopírujte.

Tyto vrstvy zdeformujeme tak, aby přesně sedly na jednotlivé stěny. Důvod podkladové čtvercové vrstvy je jasný - podle ní se přesně strefíme.

Jakmile máme vše (přibližně) umístěno, skryjeme jednak podkladové vrstvy (čtverce) a zároveň i některé elipsy.

Až se dostaneme k výsledné kostce v celé své kráse. A to je vše.

Poznámka na závěr: Jelikož jsme si řekli, že kostka je poloprůhledné, zkopíroval složky vrstev s tečkami jsem ještě třikrát a umístil je na zadní strany. Teprve teď je kostka opravdu poloprůhledná. Hodně štěstí při práci.