Photoshop tutoriál: Tvorba ikonky programu Parallels, 2. díl - Grafika.cz - vše o počítačové grafice

11. června 2008, 00.00 | V druhé části článku o tvorbě ikonky programu Parallels si ukážeme, jak
dotvořit ikonku do finální podoby, vhodně zvolit barvu, dopracovat odlesky,
vytvořit pozadí a dodělat závěrečné úpravy tak, aby výsledná ikonka byla k
nerozeznání od původní.

Nejprve si ukážeme, kde jsme minule skončili. Zde je pohled ve 100% velikosti na poslední krok minulého článku. Nyní vytvoříme ztmavení spodních hran, abychom ještě více podtrhli 3D efekt (který jsme naznačili jednopixelovým světlým vytáhnutím hran).

Načteme výběr spodní vrstvy, vytvoříme novou vrstvu a tu vyplníme černou barvou. Vrstvu posuneme o dva pixely směrem dolů, opět načteme výběr spodní vrstvy...

...a tuto část od vrstvy odmažeme.

Aby i toto ztmavení bylo postupné, přidáme vrstvě masku, přičemž velkým měkkým černým štětcem v ní kreslíme v místech, kde se má ztmavení ztrácet. Tyto místa jsou na obrázku označena šipkami.

Efekt je ale stále zbytečně výrazný, proto můžeme vrstvě stáhnout Krytí (Opacity), např. na 30 % (na barevné ikonce to ještě doladíme k dokonalosti).

Nyní přidáme ještě jeden odlesk hran, který je na původní ikonce zevnitř vlevo dole. Opět načteme výběr spodní vrstvy, výběr zmenšíme o jeden pixel a do nové vrstvy vytáhneme funkcí Vytáhnout (Stroke) velikosti jeden pixel barvy bílé.

Přidáme masku vrstvy, vyplníme ji černou barvou a pouze v jednom místě do ní čmárneme bílým štětcem.

Tím byl i poslední odlesk hrany hotový a zbývá pouze ten nejvýraznější. Načteme výběr spodní vrstvy, zvolíme nástroj Obdélníkový výběr (Rectangular Marquee Tool) a spoledně se stisknutou klávesou Alt a Shift označíme místo, které chceme s původním výběrem protnout.

Tento výběr nastavíme nové vrstvě jako masku - stačí vytvořit novou vrstvu a jí přidat masku. Nastavený výběr se automaticky vytvoří jako maska.

Tudíž stačí jen zvolit nástroj Přechod (Gradient Tool) a nakreslit přechod z bílé barvy do průhledné, jak ukazuje obrázek.

Ikonce však stále ještě něco chybí. Přes všechno to zesvětlování jsme zapomněli na nějaký tmavší odstín. Proto to napravíme tím, že ztmavíme spodní hrany.

Načteme výběr spodní vrstvy a do nové vrstvy jej vytáhneme jednopixelovým černým obrysem.

Jako obvykle přidáme masku, vyplníme ji černou barvou a štětcem pouze mírně zobrazíme vhodné části obrysu.

A výsledek? Hned o něco pěknější ikonka.

Všechny odlesky už jakž-takž máme, tudíž se můžeme z černobílé ikonky přesunout na ikonku barevnou. Prvním krokem bude přebarvení podkladové černé vrstvy na barvu oranžovou - #FEA300.

Protože ale původní ikonka mění směrem dolů barvu (tmavne), přidáme novou vrstvu, které nastavíme ořezovou masku vrstvy minulé (zkratkou Ctrl + Alt + G) a velkým měkkým štětcem či nástrojem přechod nakreslíme ztmavení. Klidně můžeme i trochu víc, než na původní ikonce.

Poté začneme postupně zobrazovat či skrývat ostatní vrstvy, podle toho, zda je či není nutné je upravit. Největší odlesk společně s horním odleskem jsou pěkné, ty můžeme nechat...

...spodní jednopixelové odlesky hran jsou moc výrazné, proto stáhneme krytí nebo změníme interakci na režim Překrýt (Overlay).

Stíny jsou naopak moc tmavé, tudíž vrstvu přebarvíme na tmavě červenou (#99440E) a vrstvě nastavíme interakci na Násobit (Multiply). Tím bude stín výraznější vespod (na tmavším podkladu), než nahoře (na světlejším podkladu).

Při bližším zkoumání je odlesk vlevo nahoře stále nedostatečný. Proto jednoduše nástrojem Štetec (Brush Tool) nakreslíme bílý flek. Není ani třeba se omezovat pouze na plochu ikonky, světlo může svítit i mimo (ačkoliv to zatím na bílém podkladu vidět není).

Přestože i nenápadný stín pod ikonku by šel jednoduše vytvořit rozmazáním podkladové vrstvy, použitím efektů vrstvy si ušetříme trochu času a energie. Zvolíme efekt Vržený stín (Drop Shadow), který směřuje směrem dolů (Úhel / Angle 90°).

A tím máme jednu část ikonky hotovou. Dodělat zbytek je hračka - jedná se pouze o převrácený tvar.

Proto veškeré vrstvy přesuneme do nové složky, kterou posuneme bokem a převrátíme vodorovně.

Poté načteme výběr původní vrstvy tvaru a novější složce přidáme masku - stejně jako přidáváme masku vrstvě.

Tím bude tvar vpravo zobrazen za levým tvarem - ačkoliv v paletce vrstev je jasně vidět, že pravý tvar je nad levým tvarem.

Správné zobrazení zařídíme jednoduše - v masce složky nakreslíme v označeném místě štětcem s tvrdou stopou bílý flek. Tím budou tvary zobrazené přesně tak, jak jsme chtěli.

A tudíž už zbývají jen kosmetické změny. Jako například zesvětlit spodní část pravého tvaru...

...nebo naopak přidat stín na spodní část levého tvaru. Dále nezapomenou ubrat horní odlesk na pravém tvaru, jelikož ten by měl být v horní části za levým tvarem.

Aby byly pořádně vidět i odlesky, můžeme pozadí dokumentu vyplnit rovněž oranžovou (#EA8017) barvou.

Přičemž pro zpestření můžeme nakreslit pár jednoduchých tvarů nástrojem Pero (Pen Tool), barvy žluté (#EFA91A), krytí 20 %.

Třeba takto:

Poslední krok bude odlesk na odrazivé podložce. Skryjeme všechny vrstvy pozadí
(aby ikonka byla na průhledném pozadí), označíme ikonku a zkopírujeme obsah všech vrstev zkratkou Shift + Ctrl + C. Tento výřez do obrázku zpět vložíme, zobrazíme zpět vrstvy pozadí, nově vloženou vrstvu převrátíme a posuneme pod původní ikonku.

Dále už to jistě znáte. Přidáme masku vrstvy, do ní nakreslíme přechod z černé do průhledné...

...a případně můžeme ještě odlesk rozmazat filtrem Gaussovské rozostření.

A to je již opravdu vše. Hodně štěstí při práce a doufám, že jste se opět naučili něco nového.

Na závěr přidám ještě jeden odkaz na oficiální stránky programu, kde si můžete stáhnout pěkně vypadající pozadí ...

... a jak se můžete přesvědčit na serveru flickr.com, program nejenom že má pěknou ikonku, ale ještě ji i pěkně využil při startu, kdy pootočením vznikl prostor na přesýpací hodiny. Skvělé.