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

22. října 2007, 00.00 | Ikonka složky ve své základní podobě vychází z klasického papírového
pořadače, do kterého, stejně jako v počítači, zakládáme dokumenty. A stejně tak
jako může být onen pořadač z různého materiálu, různě průhledný, různě tvarovaný
a všemožně barevný, tak i ikonka složky může nabývat neskutečně mnoho podob. Jednu
z nich si ukážeme v tomto článku.

Pro začátek vytvoříme nový soubor, který vyplníme světle modrou barvou - #8DC0DF. Na velikosti dokumentu nezáleží, stačí cokoliv, co čeho se vejde pár ikonek. To znamená klidně i jen 400 * 300 pixelů. (Nebylo by od věci upozornit na to, že dnes tvoříme ikonky ve velikosti 32 x 32 pixelů.)

Před započetím práce je důležité nastavit si mřížku na každý pixel. Budeme totiž pracovat ve velkém zvětšení a tvary, které by nebyly zarovnané na pixel přesně, by se vykreslovaly nehezky (jednopixelový obrys by nebyl 1 pixel široký apod.).

V nastavení programu (Ctrl + K) vyberte šestou záložku (Ctrl + 6) a nastavte vlastnosti Čáry mřížky po (Gridline every) a Dělení (Subdivisions) na 32. Tím se bude zobrazovat mřížka každý pixel, plus každý dvaatřicátý pixel bude mřížka silnější. Ihned vidíme prostor vymezený pro ikonku, bez tvorby nějaké další pomocné vrstvy. Barvu zvolte tak, aby vás moc nerušila.

Nastavte barvu na světlejší modrou (#E5FAFF) a nástrojem pero nakreslete základ ikonky. Jak takový základ vypadá, snad nemusím dlouze popisovat - jedná se o obdélník, který má (nejčastěji) vlevo nahoře malé ouško (pro jméno). Aby byl tvar zajímavější, jsou rohy "zakulacené" - resp. rohy jsou tvořeny vždy dvěma body, a tak vzniká zakulacený efekt. Všechny body na ukázce jsou rohové. Při kreslení berte ohled na to, že vpravo bude ještě druhá (přední) část složky, která bude při otevřeném stavu zasahovat do pravé části. Tak ať tam máte prostor.

Pro další práci je potřeba si nadefinovat pixelový vzorek - tzv. "scanlines". Pokud už toto máte (a věřím, že máte), můžete následující dva kroky přeskočit. V případě, že tento vzorek ještě ve své sbírce nemáte, vytvořte novou vrstvu a nástrojem tužka (Pencil Tool) nakreslete pod sebe černý a bílý pixel.

Tuto oblast označte a z menu Úpravy (Edit) vyvolejte funkci Definovat Vzorek (Define Pattern). Zadejte jméno a jdeme dál.

A to přidávat vrstvě efekty vrstvy. Na vrstvu dvakrát poklikejte pro vyvolání dialogu a dáme se do práce.

Jako první přichází na řadu obrys - efekt Vytažení (Stroke). Velikost (Size) nastavte na 1 px, Umístění: uvnitř (Position: Inside), barvu na černou a Krytí (Opacity) stáhněte na cca 79 %. Tím tento obrys nabere nádech barvy pod ním - tj. nebude černý, ale tmavě modrý.

Další efekt je Překrytí vzorkem (Pattern Overlay) - přes naši složku necháme vykreslit vzorek, který jsme před chvilkou nakreslili. Interakci nastavte na Násobení (Multiply), tím dojde k ztmavení, a krytí stáhněte na sotva viditelnou úroveň - cca 10 %.

Další je světlý vnitřní obrys - a to přes efekt vrstvy Vnitřní záře (Inner Glow). Vlastnost Vyseknutí (Choke) nastavte na 100 %, Velikost (Size) na 2 px. To proto, že jeden pixel už zabírá vnitřní tmavý obrys. Barva bílá, krytí 100 %. Na té světle modré to stejně není příliš vidět.

Z vrchu přidáme světlo. Abychom ale dobře efekt viděli, nastavíme nejprve barvu na černou. A který použijeme efekt? Vnitřní stín (Inner Shadow). S tímto nastavením hned vidíme každou změnu, takže začneme nastavením Úhlu (Angle) na 90°, Vzdálenosti (Distance) na 5 px a Velikosti (Size) na 5 px.

Jakmile jsme spokojeni s výsledkem, změníme interakci na Závoj (Screen), barvu na bílou a krytí stáhneme na cca 30 %. Jak vidíte, s tímto nastavením by se nám ostatní hodnoty jen těžko odhadovaly.

V pravém spodním rohu přidáme další odlesk. Musí být opravdu hodně výrazný, protože přes něj později zobrazíme ještě druhou část složky. Přidáme efekt Překrytí přechodem (Gradient Overlay), který nastavíme na Kruhový (Radial). Přechod nastavíme z bílé do průhledné a interakci na Lineárně zesvětlit (Linear Dodge). Myší potom posuneme tento kruh do pravého spodního rohu, tedy přesně tam, kde chceme odlesk mít.

Poslední odlesk bude z levého horního rohu. Využijeme přitom možnosti přidat odlesk do obrysu.

Přidáme efekt Úkos a reliéf (Bevel and Emboss), který nastavíme pouze na obrys - Reliéfní tah (Stroke Emboss). Stíny (Shadow) úplně zrušíme (krytí na 0 %), světla stáhneme na cca 40 %. Hodnoty Úhel (Angle) a Výška (Altitude) nastavíme tak, aby odlesk byl opravdu jen na levé části "ouška".

Tím máme spodní část ikonky hotovou. Zde ji vidíte ve 100% velikosti:

Dáme se tedy do části druhé. Jako první zkusíme nakreslit složku, která bude zavřená (jak uvidíte později, udělat otevřenou složku už bude jen otázka pár kliknutí).

Opět zvolte nástroj Pero (Pen Tool) a zkuste nakreslit něco podobného jako na obrázku vespod. Rohy jsou opět zakulacené, přičemž vlevo nahoře jsem nakreslil pouze rohové body, vpravo nahoře jsou body opravdu zakulacené. Ve výsledku je efekt opačný - rohové body vypadají víc zakulaceně (protože zabírají méně pixelů), zatímco body zakulacené vypadají víc rohově (protože zabírají více pixelů). Je to dobře vidět i na obrázku, kde levý horní roh nemá rohový pixel zelený ani trochu, zatímco vpravo nazelenalý je. Ať už se rozhodnete pro jakýkoliv z těchto způsobů, výsledek bude hodně podobný. Pouze si všimněte, že levý spodní roh je úplně rohový. Je to proto, aby lépe "navazoval" na spodní vrstvu.

Jakmile jsme s tvarem spokojeni, přebarvíme jej na barvu pozadí a dáme se do přidávání efektů.

Stejně jak u minulé vrstvy začneme obrysem - Vytažení (Stroke). Nyní však změníme interakci na Násobení (Multiply) a barvu na modrou (#608EAE):

Stejně tak efekt vrstvy Překrytí vzorkem (Pattern Overlay). Místo násobení bude tentokrát Závoj (Screen) a krytí okolo 20 %:

Druhý vnitřní obrys - bílý, vykreslený efektem Vnitřní záře (Inner Glow), bude mít rozdílné krytí. Na tmavším pozadí je efekt víc vidět, a tak jej stáhneme na cca 60 %:

I s efektem Vnitřní stín (Inner Shadow) použitým k odleskům seshora se budeme opakovat. Bude ale větší - Vzdálenost (Distance) 7 px a Velikost (Size) 10 px. Barva světle modrá (#CBDEEB), interakce Závoj (Screen) a krytí cca 70 %.

Efekt vrstvy Úkos a reliéf (Bevel and Emboss) bude mít parametry opět velmi podobné. Opět bude pouze v obrysu Reliéfní tah (Stroke Emboss), ovšem interakce Lineárně zesvětlit (Linear Dodge) u světel způsobí, že se malinko posune odstín modré barvy.

Poslední odlesk bude nejvýraznější - tentokrát z levého spodního rohu. Přechod bude opět z bílé do průhledné, pouze tentokrát efekt vrstvy Překrytí přechodem (Gradient Overlay) nastavíme nejprve na interakci Rozdíl (Difference), abychom viděli dobře výsledek (nastavení způsobí, že bílý přechod bude ve skutečnosti černý). Styl přechodu je Lineární (Linear), Velikost (Scale) 150 % a Úhel (Angle) cca 40 %.

Jakmile vše nastavíme, přepneme interakci na správnou - Zesvětlit barvy (Color Dodge) a krytí stáhneme na 25 %.

Tím jsme hotovi i s vrchní částí ikonky.

Pouze bychom chtěli, aby spodní část malinko prosvítala - proto stáhneme krytí výplně na cca 80 %. Jak ale vidíte na ukázce, ztratili jsme tím kontrast ikonky předchozí, takže to budeme nakonec muset nějak dohnat. To ale až nakonec. Teď je hlavní, že nám vpravo prosvítá obrys spodní části ikonky, stejně jako na opravdické plastové poloprůhledné složce:

Ukážeme si, jak lehce lze tuto ikonku měnit. Tím, že je reprezentována pouze dvěma vrstvami a navíc ještě vrstvami cest, je to skutečně jednoduché. Stačí pár kliků a můžete mít ikonky rozbalené složky:

Nebo chcete rozbalit složku ještě víc? Nakreslete si první část ...

... přidejte druhou část, a je to:

Nebojte se experimentovat, zkoušet jednotlivé části zmenšovat, zvětšovat, posouvat ... Nakonec jen přidejte novou vrstvu úprav - buď Úrovně (Levels), Křivky (Curves), nebo jen Jas a kontrast (Brightness&Contrast) a malinko vytáhněte kontrast, aby byly ikonky barevnější a veselejší. Přesně tak, jak je to vidět na tomto posledním obrázku. Pro vás to ale teprve začátek, takže přeji hodně štěstí při tvorbě!

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