Photoshop tutoriál: Tvorba realistické kancelářské sponky - Grafika.cz - vše o počítačové grafice

Navigace:  » Úvodní stránka  » Rubriky  » VSE  

2. listopadu 2007, 00.00 | Ikonka kancelářské sponky není v počítačovém světě nic neobvyklého.
Svým tvarem je lehce zapamatovatelná, možností měnit barvy pak jednoduše
přizpůsobitelná danému designu a svým významem jasná. A to hlavní - je tak
jednoduchá, že je vhodná k tvorbě i pro méně
zkušené uživatele Photoshopu.

Abychom netvořili na nudném bílém pozadí, umístíme do nového dokumentu fotku prázdného papíru. Například tuto (která sice hraje všemi barvami, ale svůj účel plní):

A dáme se do sponky. Nástrojem Zakulacený obdélník (Rounded Rectangle Tool) nakreslíme základ naší sponky. Důležité je nastavit parametr Poloměr (Radius) na číslo větší než šířka tvaru, aby byla spodní i horní část dokonale kulatá.

Tento tvar rovnou pootočíme - viděli jste snad někdy sponku danou na papír rovně? Transformaci vyvoláme např. zkratkou Ctrl + T, po otočení potvrďte klávesou Enter.

V následujících krocích se pokusíme zbavit výplně. To znamená přidat obrys a stáhnout viditelnost výplně vrstvy.

Obrys obstará efekt vrstvy Vytažení (Stroke). Dvakrát klikněte na náhled vrstvy pro vyvolání dialogu, zaškrtněte daný efekt a nastavte Velikost (Size) 3 px a barvu #060B14 (velmi tmavá modrá). Umístění (Position) zvolte podle velikosti sponky. Pokud se vám zdá, že je příliš malá, dejte vně. Naopak pokud je tvar velký jako velikost sponky, nechte obrys uvnitř.

Aby byl obrys opravdu vidět, stáhneme Krytí výplně (Fill Opacity) na 0 %. Buď v první záložce dialogu efektů vrstvy, nebo v paletce vrstev.

Tvaru přidáme Vržený stín (Drop Shadow), aby vznikl dojem, že sponka je kousek nad papírem. Krytí (Opacity) nechte malé, nenápadný stín stačí.

Problém je ale v tom, že ačkoliv je krytí výplně stáhnuté na 0 %, stín se stejně vykreslil pouze okolo tvaru. Uvnitř není nic. A tak si musíme pomoci sami a přidat vrstvě ještě Vnitřní stín (Inner Shadow). Teď je teprve stín kompletní.

Protože je ale půlka sponky za papírem, musíme kus sponky zneviditelnit. Vrstvě přidáme masku (tlačítkem, které ukazuje následující obrázek) a přepneme se do ní (kliknutím do náhledu masky v paletce vrstev - na obrázku zakroužkované).

V této masce stačí kreslit černou barvou nástrojem Štětec (Brush Tool) v místech, kde sponka nemá být viditelná. Jak vidíte na obrázku, před kreslením jsem část sponky vybral nástrojem Obdélníkový výběr (Rectangular Marguee Tool). Abych nezasáhl do místa, kde už sponka má být.

Poté jsem ještě přepnul na velký měkký štětec, snížil krytí na cca 20 a kliknul přibližně doprostřed sponky. Tím se v tomto místě sponka trochu zprůhlednila. Ne, že by ve skutečnosti byla průhledná, ale tímto zprůhledněním docílíme i zesvětlení. A sponka v těchto místech určitě světlejší bude.

Reálná sponka není nic jiného, než drát kruhového průměru, který je popř. ještě obalen nějakou tou "umělinou". Proto pokud chceme nakreslit realistickou sponku, musíme přidat i ten třetí rozměr - odlesk, který dopadem světla vznikne. Ostatně z toho důvodu jsme vytvořili obrys velký tři pixely - abychom mohli doprostřed umístit právě odlesk. U dvoupixelového obrysu by to bylo už těžší, u jednopixelové sponky nereálné.

Zkopírujeme proto tuto vrstvu, zkratkou Ctrl + J nebo v kontextovém menu v paletce vrstev ...

... a změníme obrys na bílý jednopixelový. Všechny ostatní efekty můžete vypnout (přestože nejsou skoro vidět).

Poté vrstvu zmenšete tak, aby byl tento odlesk přesně uprostřed obrysu vrstvy minulé. Čím víc máte sponku přiblíženou, tím lépe se strefíte.

Poté opět vezměte nástroj Štětec (Brush Tool) a začněte kreslit do masky vrstvy. Následující obrázek ukazuje pohled na sponku ve 100% velikost, pohled na zvětšenou sponku a pohled na masku vrstvy.

Při práci nejprve vyplňte masku černou barvou (nic z odlesku nebude vidět), poté bílou barvou kreslete do míst které jsou zakroužkované. V případě, že "zajedete" i do místa kde už nemá být vidět nic, opět přepněte na černou barvu a toto místo překreslete (na obrázku je označeno křížky). Tím, že vrstvu negumujeme, ale pouze ji měníme průhlednost maskou můžete tento krok opakovat donekonečna. Dokud nebudete naprosto spokojeni.

Jeden odlesk a jaké dokázal divy. Sponka už vypadá jako hotová. My se ale s tímto výsledkem nespokojíme a zkusíme ještě obrázek trochu "vyšperkovat". Nejprve stín - nějaký už máme, ten nám ale nestačí. Zkopírujte proto podkladovou vrstvu (Ctrl + J) (na ukázce jsem ji pro větší názornost ještě posunul bokem, to ale nemusíte).

A tuto vrstvu rozostřete filtrem Gaussovské rozostření (Gaussian Blur). Photoshop se vás zeptá, zda-li chcete vrstvu rastrovat, což potvrďte.

Vrstvu posuňte malinko bokem (doprava od původní vrstvy) a stáhněte krytí např. na 20 %.

Na realističnosti přidá, pokud bude zadní část sponky přes papír prosvítat. Proto opět zkopírujte podkladovou vrstvu (Ctrl + J), změňte barvu vytažení na šedou, zvolte nástroj pro výběr bodu A (bílá šipka), označte tři spodní body a posuňte je směrem nahoru jak ukazuje obrázek. Aby vzniknul tvar zadní strany sponky.

Aby byla tato část sponky lépe vidět, malinko tento tvar pootočíme (Ctrl + T).

Poslední věc, kterou chceme je, aby se zadní část sponky směrem dolů postupně rozmazávala. V Photoshopu od verze CS je na toto skvělý filtr Rozostření objektivem (Lens Blur), v nižších verzích programu stačí malý trik.

A to následující. Zkopírujte tuto vrstvu a rozostřete ji.

Vrstvě přidejte masku, do které nakreslíte lineární přechod z bílé do černé - aby nahoře vrstva nebyla vidět a směrem dolů se zviditelňovala.

Poté původní nerozostřené vrstvě přidejte masku inverzní - aby naopak nahoře vidět byla a mizela směrem dolů. A to je vše.

Následující obrázek již ukazuje obě vrstvy - nerozostřená plynule přechází do rozostřené.

A to by mohlo být vše, nemyslíte? Sponka už vypadá jako pravá.

A to i když ji pootočíme o 90°.

Takže vám jen popřeji hodně štěstí do práce a spousty pěkných barevných sponek (následující sponky jsou obarveny pouze změnou barvy efektu Vytažení). Použitý font je Upirpaw (freeware).

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