Photoshop tutoriál: Tvorba ikonky zámku - Grafika.cz - vše o počítačové grafice

7. března 2008, 00.00 | Další ze série populárních ikon, které můžeme (nejenom) na Internetu
najít, je zcela jistě zámek. Slouží k identifikaci zabezpečených stránek,
vyzývá k vložení heslo nebo prostě jen informuje o dokumentech, které nemáte
oprávnění vidět. Ať už chcete ikonku požít kdekoliv, jistě se vám bude hodit
kompletní návod, jak ji vytvořit v programu Adobe Photoshop.

A začneme v rychlosti novým dokumentem, který vyplníme světle šedou barvou (#D5D5D5), zvolíme nástroje Zaoblený obdélník (Rounded Rectangle Tool) a nakreslíme základ zámku. Poloměr (Radius) nastavte podle oka, barvu například světle šedou (#DDDDDD).

Nyní je potřeba přikreslit horní část. K tomu použijeme následující postup - nejprve nástrojem Elipsa (Ellipse Tool) nakreslíme kruh...

...poté jej nástrojem Výběr cesty (Path Selection Tool) vybereme, zkopírujeme, vložíme, zmenšíme (Ctrl + T) a režim vykreslování nastavíme na odečítání (druhá ikonka v liště).

Poté přepneme na nástroj Obdélník (Rectangle Tool) a společně s klávesou Alt (odečítání) nakreslíme obdélník přes spodní půlku tvaru...

...poté stejným nástrojem společně s klávesou Shift (přičítání) dokreslíme pravou a levou část...

...a případně můžeme ještě levý konec zakulatit dokreslením elipsy (stejnojmenným nástrojem). Opět s klávesou Shift (přičítání). Pokud se chcete na pixel přesně strefit, nastavte si mřížku - popsáno například v článku Photoshop tutoriál: Tvorba ikonky složky.

Zde je náhled na základ našeho zámku ve 100% velikosti.

Takže se můžeme pustit do přidávání efektů, aby byl zámek alespoň trochu plastický. Začneme spodní částí a pro začátek zkusíme efekty vrstvy. Malé ztmavení okolo krajů vykouzlí efekt Vnitřní Stín (Inner Shadow).

Další efekty už musíme udělat ručně. Na spodní část přidáme výrazný stín - například tak, že vrstvu tvaru zkopírujeme (Ctrl + J), zvolíme  nástrojem pro Výběr cesty (A), označíme, zkopírujeme (Ctrl + C), vložíme (Ctrl + V), posuneme o pár pixelů směrem nahoru a nastavíme režim na odečítání. Následně vzniklý tvar přebarvíme na tmavě šedou barvu (#505050) a stín máme hotový.

Proč jsme to dělali takto složitě, když to šlo celkem jednoduše vytvořit přes vnitřní stín? My totiž chceme, aby tento stín nebyl všude zobrazený na 100%. Proto vrstvě přidáme masku vrstvy, do které měkkým černým štětcem kreslíme v místě, kde nechceme mít stín tak moc viditelný (tj. uprostřed tvaru). Následující obrázek již ukazuje výsledek - stín směrem doprostřed mizí. Na náhledu je i dobře vidět podoba masky.

Poté se pustíme do ztmavování obvyklým způsobem. Nad vrstvou tvaru (spodního tvaru zámku) vytvoříme vrstvu novou (Ctrl + Alt + Shift + N), kterou nastavíme ořezovou masku vrstvy předchozí (Ctrl + Alt + G). Poté zvolíme nástroj Štětec (Brush Tool), nastavíme velkou měkkou černou stopu, stáhneme Krytí (Opacity) například na 30 % a přejedeme přes levou a pravou hranu - tím nakreslíme stíny.

Stejně tak můžeme bílým štětcem nakreslit uprostřed zesvětlení (do nové nebo do stejné vrstvy).

Stejně jako na spodní hraně, i nahoře můžeme vytvořit odlesk hrany. Nebudeme se však již trápit s vrstvami tvarů, ale jednoduše načteme výběr spodní vrstvy (Ctrl + klik na vrstvu), zmenšíme výběr o pixel Výběr - Změnit - Zúžit (Select - Modify - Contract), novou vrstvu vyplníme v tomto místě bílou barvou (Alt + backspace), posuneme výběr o dva pixely směrem dolů (například nástrojem Obdélníkový výběr) a tuto část od vrstvy odmažeme (stiskem klávesy delete). Následně můžeme vrstvě stáhnout Krytí (Opacity) podle potřeby. Následující obrázek ukazuje situaci po umazání posunutého výběru. Samozřejmě nakonec nezapomeňte výběr odznačit zkratkou Ctrl + D.

Poté se pustím do velký odlesků, které ještě více pomohou definovat tvar zámku. Nástrojem Obdélníkový výběr označíme obdélník a do nové vrstvy v něm nakreslíme nástrojem Přechod (Gradient Tool) lineární přechod z bílé do průhledné.

Poté označíme řadu vysokou dva pixely (nástrojem Obdélníkový výběr) a zkosíme tuto část stejnojmennou funkcí (Zkosit / Skew)...

...asi takto. Tím bude odlesk kopírovat naznačený tvar zámku.

Podobným způsobem vytvoříme i odlesk na pravé straně, ovšem mnohem větší...

...to aby nebylo vždy všechny úplně stejné. Tím máme spodní část skoro hotovou, už jenom přidat nějaký ten symbol...

...nebo proužek. Opět označíme vhodně velký obdélník a do něj nakreslíme přechod ze žluté (#F5E02F) do oranžové (#F3BB2A).

Poté zvolíme Nástroj pro výběr jednoho řádku pixelů (Single Row Marquee Tool), označíme první a poslední řádek minulého výběru (oba najednou označíme s klávesou Shift)...

...a nástrojem Štětec (Brush Tool) do tohoto výběru kreslíme tmavší barvou, dokud nejsme spokojeni. Tím se pruh více oddělí od pozadí.

Poté načteme výběr této vrstvy (Ctrl + klik na vrstvu) a z menu paletky Vrstvy (Layers) přidáme novou vrstvu úprav Vzorek... (Pattern Fill). Zde nám pomůže vzorek ze článku Photoshop tutoriál: Diagonální vzorky - základy, pouze změním Velikost (Scale) na 50 % - aby poměrem odpovídal velikosti ikonky. Zároveň nastavíme interakci vrstvy na Násobit (Multiply) - tím budou vidět pouze černé pruhy.

Aby se směrem ke krajům vzorek zmenšoval, zvětšíme nejprve masku o pár pixelů směrem doprava i doleva...

...poté převedeme vrstvu úprav na pixely (Vrstva - Rastrovat - Obsah Vrstvy / Layer - Rasterize - Fill Content)...

...a vlevo i vpravo vzorek zúžíme zpět na velikost ikonky.

Pro lepší efekt můžeme zmenšování provést na několikrát.

Lepší?

Trochu snad, proto ještě přidáme další vrstvu, do které nakreslíme ztmavení u krajů pruhu - velkým měkkým černým Štětcem (Brush Tool) se stáhnutým krytím.

Tím máme spodní část zámku kompletně hotovou a můžeme se pustit do části horní.

U vrstvy začneme přebarvením na šedou barvu (#D5D5D5) a přidáním obrysu - efektu vrstvy Vnitřní Záře (Inner Glow) velikosti jeden pixel, barva šedá (#848484). Nezapomeňte změnit interakci efektu na Násobení (Multiply).

Poté potřebujeme vytvořit odlesk, který bude zasahovat pouze do půlky tvaru. K tomuto účelu si proto pomůžeme dalším tvarem. Nejprve zkopírujeme stávající tvar (Ctrl + J) a přebarvíme jej na černou barvu (ať přesně vidíme, kam zasahuje). Poté nástrojem Výběr cesty (Path Selection Tool) označíme vnitřní kruh, který zvětšíme zkratkou Ctrl + T...

...a přes levou a pravou stranu nakreslíme dva obdélníky se stisknutou klávesou Alt (odečítání).

Krytí tvaru stáhneme např. na 30 % a mezi tento tvar a původní tvar nakreslíme do nové vrstvy lineární přechod z bílé do průhledné. Této vrstvě nastavíme ořezovou masku vrstvy předchozí (Ctrl + Alt + G), aby bylo zesvětlení pouze v místě ikonky. Tímto způsobem se odlesk nepatrně projeví i na ztmavené části.

Podobně jako na spodní části ikonky i zde přidáme dva velké odlesky. Protože ale musí být zdeformované podle tvaru, nebudou to obdélníky, ale prohnuté elipsy. A tak začneme tou elipsou - stejnojmenným nástrojem ji nakreslíme...

...zkratkou Ctrl + T ji otočíme o 45°...

...a nakonec zvolíme nástroj Přímý výběr (A), označíme dva prostřední body a posuneme je tak, aby elipsa přesně kopírovala podklad.

Poté tuto vrstvu zkopírujeme (Ctrl + J), převrátíme a posuneme i na pravou část.

Čímž bychom mohli být již s ikonkou hotovi. My ovšem ještě v některých místech vhodně ztmavíme obrys, aby byla ikonka dostatečně oddělena od pozadí.

Nejprve načteme výběr spodní vrstvy ikonky (Ctrl + klik na vrstvu) a do nové vrstvy kreslíme velkým tmavým štětcem v místech, kde chceme mít obrys tmavší. Poté zmenšíme výběr o pixel Výběr - Změnit - Zúžit (Select - Modify - Contract) a odmažeme klávesou Delete. Následující obrázek ukazuje vrstvu ještě před odmazáním (ať vidíte, kde chceme ztmavovat).

Zde je náhled ve 100% velikosti po odmazání.

Úplně stejným způsobem můžeme v některých místech ztmavit i obrys horní části - šipky ukazují kde.

A to je vše. Doufám, že jste se opět něco nového přiučili...

...a až se rozhodnete umístit ikonku do svého designu, nezapomeňte šedé barvě na ikonce přidat barevný nádech barevného stylu aplikace. Jako například na tomto náhledu, kde je ikonka více do fialova.

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