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

6. února 2008, 00.00 | RSS ikonka je opět jedna z těch, kterou vídáme opravdu často. Stránka,
která ji nemá, jakoby neexistovala (přestože většina prohlížečů na RSS myslí).
Dokonce mnohokrát nalezneme RSS ikonku mnohonásobně větší než cokoliv jiného.
My proto půjdeme opačnou cestou a pokusíme se vytvořit ikonku malou, zato s co
nejvíce detaily.

Začneme přehledem všech různých RSS ikon publikovaným na serveru Smashing Magazine.

My se dnes pokusíme vytvořit ikonku podobnou té (první) na následujícím obrázku. Ovšem budeme tvořit přibližně ve velikosti 16x16 pixelů, tudíž budeme mít k dispozici minimum prostoru.

Abychom nemuseli začínat s prázdným dokumentem, můžeme si pro začátek vzít na pomoc ikonku ze stránek Feed Icon.

Ikonku zkopírujeme do nového dokumentu v Photoshopu, ten můžeme vyplnit nějakou tmavší barvou (#5B5D6A). Později ikonce přidáme světlý rámeček, tak aby byl vidět.

Začneme tím, že nástrojem Kouzelná hůlka (Magic Wand) označíme rohy ikonky, a ty odmažeme (stiskem klávesy delete).

Poté ikonku zmenšíme (Ctrl + T) na polovinu, tj. 16x16 px.

Protože zmenšením se ikonka malinko rozostřila, doostříme ji zpět stejnojmenným filtrem (Doostřit / Unsharp Mask). Poloměr (Radius) zvolíme 1-2 px, Míra (Amount) zhruba 40 %.

Zakulacené rohy mají bohužel nádech minulé podkladové barvy - bílé. Zvolíme proto nástroj Guma (Eraser Tool) nastavený na Tužka (Pencil) (tj. stopa bez vyhlazení), nastavíme velikost 1 px a pixely odmažeme. Později je nahradíme hezčím obrysem.

Tuto vrstvu zkopírujeme bokem (Ctrl + J) a ztmavíme ji. Například přes Jas a Kontrast (Brightness/Contrast). Tato vrstva bude za chvilku zajišťovat 3D vystouplý efekt (na spodní straně).

Nejdříve ale musíme označit (M) spodní část vysokou jeden pixel a natáhnout ji směrem nahoru (Ctrl + T).

Poté posuneme tuto vrstvu pod první vrstvu a 3D základ máme hotový.

K další práci už použijeme pouze jediný nástroj - Tužku (Pencil Tool). V takto malé velikosti jsou veškeré jiné nástroje zbytečné, a co si nenakreslíme po pixelu sami bude nehezké a rozmazané. Proto následující kroky berte jako malé seznámení s úpravou obrázků po pixelech, což je dobrý začátek k tomu, abyste jednou mohli začít s opravdickým pixel-artem. Krom toho tato technika přijde často vhod především u ikonek. Ukázku pár ikonek u kterých byla použita následující technika můžete nalézt ve článku 15 tipů pro tvorbu favikony.

Tedy, tužku do ruky, nastavíme velikost na 1 px, Krytí (Opacity) 100 % a nakreslíme černý rámeček. Poté stáhneme krytí např. na 40 % (stiskem klávesy 4) a v rozích dokreslíme poloprůhledné pixely. Tím vytvoříme vyhlazené okraje.

Vrstvě stáhneme krytí na 50 %...

...a ještě jednou ji zkopírujeme. Tentokrát ji ale posuneme o tři pixely dolů a pod první vrstvu.

Pro větší plastičnost přidáme odlesky hran. Nejprve si zvolíme pomyslný zdroj světla - z levého horního a pravého spodního rohu.

Poté nastavíme krytí nástroje tužka na zhruba 30 %, barvu bílou a dáme se do kreslení. Přechody nakreslíme jednoduše tak, že nakreslíme čáru přes celou šířku, přes ní menší čáru, a přes ní opět menší čáru... až v jednom místě bude vrstva skoro neprůhledná. Na následujících náhledech je aktuální vrstva kterou kreslíme vždy zobrazena ještě jednou bokem. 

Při kreslení pokračujeme přidáváním dalších a dalších částí odlesku...

...v místě, kde dopadá nejvíc světla můžeme odlesk rozšířit i za hranice jednoho pixelu.

Popř. trochu i do levé části.

Stejným způsobem vytvoříme i odlesk vlevo nahoře. Zde není moc co řešit. Důležité je nedostat se až na úplně bílou barvu, aby se odlesk neslil s bílým symbolem na ikonce.

Aby byly odlesky ještě více zvýrazněné, ztmavíme pravý horní a levý spodní roh. Kreslíme přibližně v místě tmavého obrysu.

A nezapomeneme ani na spodní 3D vystouplou část.

Nakonec můžeme ikonce ještě přidat světlý jednopixelový obrys. Načteme výběr všech vrstev (Ctrl + Shift + klik na vrstvu) a vyvoláme funkci Vytáhnout (Stroke) z menu Úpravy (Edit). Velikost 1 px, barva bílá.

Vrstvě stáhneme krytí...

...a opět zvýrazníme části, na které dopadá nejvíce světla. Zkoušejte do přechodů přidat nepravidelné pixely - například jako na ukázce, kde jsou na kraji dva samostatné pixely. Přechody potom vypadají víc zajímavě a méně "uměle".

A to by mohlo být vše. Ať je ještě poznat, že se jedná o RSS ikonku. Zde je náhled, jak by mohla ikonka vypadat zapracovaná ve stránkách:

Zde je pro porovnání standardní ikonka z prohlížeče Opera a vespod naše nová ikonka. S rámečkem a všemi odlesky je hned o něco zajímavější. Takže vám jen na závěr popřeji hodně štěstí do práce a hodně pěkných ikonek! Odkazy na podobné tutoriály tentokrát neuvádím, naleznete je v prvním odkazu dnešního článku (článek na Smashing Magazine).

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