Photoshop tutoriál: Ikonka složky - Grafika.cz - vše o počítačové grafice

15. února 2008, 00.00 | Složka je v počítačovém světě jednou z nejčastějších tvořených ikonek.
Díky tomu, že se ve skutečnosti jedná o "něco", do čeho se dají uložit další složky
a soubory, je možné složku zobrazit téměř jakkoliv. V tomto článku však
zůstaneme věrni klasické podobě složky, kterou pouze pootočíme a malinko
vylepšíme.

Tvorbu složky velikosti 32x32 už máme úspěšně za sebou, a to z článku Photoshop tutoriál: Tvorba ikonky složky. Proto si dnes ukážeme tvorbu ikonky větší - 128x128 px (přibližně). Nebude se jednat o nic jiného, než o kus "něčeho", v půlce zohnutého, zobrazeného v mírné perspektivě a pěkně obarveného. Přibližný tvar ikonky ukazuje následující obrázek.

Takže se hned pustíme do práce. Zvolíme nástroj Pero (Pen Tool) a začneme obtahovat původní nákres, přičemž zkusíme při kreslení vytvořit zaoblené rohy.

Tento postup sice vyžaduje zvládnutí kreslení perem, ale je nejspolehlivější.

Zde je náhled na oba hotové tvary. Důležité je pěkné napojení obou tvarů vlevo dole, což se povedlo, takže můžeme pokračovat dál.

A to obrysem. Obrys vytvořený přes efekty vrstvy má ale jednu nevýhodu - je všude stejně široký, což se nám nyní nehodí. Proto i obrys vytvoříme jako vrstvy tvaru. Nejprve obě předchozí vrstvy obarvíme na černou barvu, zkopírujeme (Ctrl + J), zmenšíme (Ctrl + T) a přebarvíme - nyní už na finální barvu. Vnitřní část složky bude tmavě fialová #513344...

...a z venku bude složka růžová (#E70082). Zde si všimněte, že tato vrstva byla zmenšená pouze vlevo a nahoře, takže obrys se vpravo i dole úplně ztrácí. Základ máme hotový, můžeme začít přidávat efekty.

Nejprve ztmavíme zářivou růžovou z pravé strany - nakreslením přechodu z tmavě růžové (#9B1A62) do průhledné - nástroj Přechod (Gradient Tool).

Této vrstvě nastavíme ořezovou masku vrstvy minulé, a to zkratkou Ctrl + Alt + G. Tím bude tato vrstva zobrazena pouze v místě vrstvy předchozí (růžové).

Zespodu přidáme odlesk. Nejprve nástrojem Elipsa (Ellipse Tool) nakreslíme elipsu, kterou mírně pootočíme (Ctrl + T) a posuneme na správné místo.

Poté vrstvu rozostříme filtrem Gaussovské rozostření (Gaussian Blur) a přebarvíme na žlutou barvu (#F7AA80). Můžeme také interakci změnit na Závoj (Screen).

Můžeme přidat ještě další zesvětlení, a to kreslením velkým štětcem se sníženým krytím (barvy #FFAE00).

V levém horním rohu vytvoříme odlesk hrany. Nejprve načteme výběr růžové vrstvy (Ctrl + klik na vrstvu), následně vyvoláme funkci Vytáhnout (Stroke) z menu Úpravy (Edit), velikosti 1 px, barvy bílé.

Této vrstvě přidáme masku, kterou vyplníme černou barvu a pouze v místě, kde chceme mít odlesk, nakreslíme bílým štětcem flek.

Aby byly odlesky ještě výraznější, můžeme okolo hrany nakreslit kruhový přechod z bílé do průhledné, stejně jako ještě jeden přechod z bílé do průhledné ke spodní hraně. Jen vždy nezapomeňte na zkratku Ctrl + Alt + G, ať je vrstva vidět jen tam, kde má být (v místě růžové vrstvy).

Všechny odlesky završí nová vrstva tvaru nakreslená nástrojem Pero (Pen Tool), barvy bílé...

...se staženým krytím přibližně na 20 %.

Odlesků už máme víc než dost, takže se na chvíli budeme věnovat vnitřní části složky. I zde si odlesk najde své místo, a to ve spodní části, kde se obě vrstvy napojují.

A i zde můžeme stejným způsobem vytáhnout jednopixelový obrys, který zobrazíme pouze v místě, které ukazuje šipka.

Aby byla ikonka zajímavější, přidáme ji nějaký abstraktní vzorek. Pár zprohýbaných a deformovaných čar. K tomuto účelu si nejprve do nové vrstvy nakreslíme náhodně několik teček štětcem...

...a tuto vrstvu deformujeme filtrem Filtr - Deformace - Střih (Filter - Distort - Shear). V náhledovém okně přidáme pár bodů, které posuneme tak, aby byl obrázek pořádně zvlněný...

...a pro jistotu efekt aplikujeme ještě jednou - zkratkou Ctrl + F.

Teď už je výsledek o dost lepší...

...proto vrstvu přebarvíme na bílou (např. tím, že ji invertujeme Ctrl + I) a opět použijeme kouzelnou zkratku Ctrl + Alt + G.

Tuto vrstvu můžeme samozřejmě zobrazit i nad vnitřní částí složky - a pro lepší efekt převrátit vodorovně.

A tím je ikonka hotová. Vypadá dobře jak nad světlým...

...tak nad tmavým podkladem.

A pokud vám zrovna nelahodí růžová barva, přebarvení je otázka pár kliknutí. Např. načteme výběr všech vrstev (Ctrl + Shift + klik na vrstvu) a přidáme novou vrstvu úprav Odstín/Sytost (Hue/Saturation). Posuvníkem Odstín (Hue) rychle změníme barvu na jinou.

A to je již opravdu vše. Hodně štěstí při práci!

Nakonec ještě přidám odkaz na jednu z tisíce dalších podob složky. U této si však můžete stáhnout zdrojový .psd soubor a dál experimentovat. Ostatní návody najdete na serverech www.good-tutorials.com a www.pixel2life.com

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