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

19. listopadu 2007, 00.00 | Program ICQ jistě není třeba představovat, stejně jako jeho původní ikonku
kytičky. V dnešním Photoshop tutoriálu se pokusíme vytvořit něco velmi podobného
- zelenou kytičku s osmi lístky.

Pro případ, že byste opravdu nevěděli, jak taková ikonka vypadá, je zde screenshot ikonek z programu Miranda (ty se ale od původní ikonky ICQ moc neliší). My budeme tvořit něco podobného jako Online ikonku z tohoto obrázku. Velikost bude stejná - 16 x 16 px.

Pro začátek vytvoříme nový soubor, který vyplníme světle zelenou barvou - #CFECBE. Na velikosti dokumentu nezáleží, stačí cokoliv, do čeho se vejde ikonka.

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 je potřeba, aby se tvary zarovnávaly přesně na pixel. V nastavení programu Photoshop (Ctrl + K), vyberte záložku Vodítka, mřížky a řezy (Guides, Grid & Slices) (Ctrl + 6) a nastavte vlastnosti Čáry mřížky po (Gridline every) a Dělení (Subdivisions) na 16. Tím se bude zobrazovat mřížka každý pixel, plus každý šestnáctý 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.

Aby se nám lépe pracovalo, zobrazíme okno dokumentu ještě jednou - Okna - Dokumenty - Nové Okno (Window - Documents - New window) (tato funkce má v novějších verzích Photoshopu jiné umístění, ale to jistě najdete). V tomto okně skryjeme mřížku (Ctrl + H) a necháme jej zobrazený na 100 %, zatímco původní okno zvětšíme na 1 600 %.

Do prostoru 16 x 16 zhruba nakreslíme (např. tužkou) tvar, kterého chceme dosáhnout. Bude vypadat nějak takto.

Pořádně si tvar zapamatujte, nastavte barvu na tmavě zelenou (#0A3E00) a zvolte nástroj Pero (Pen Tool). V prvním bodě (nahoře uprostřed) klikněte a táhněte dva pixely doprava. Tím se vytvoří první zaoblený roh. Druhý bod je rohový - stačí pouze kliknout. Třetí je podobný jako ten první - ovšem zaoblení nevytahujeme doprava, ale doprava dolů (dva pixely doprava a dva pixely dolů). Tím pádem bude tento "rohový" lísteček vetší než ty, které jsou uprostřed stran. Ale to nevadí.

Ostatní body už jsou pouhým opakováním. Zaoblený, rohový, zaoblený rohový ...

... zaoblený rohový, zaoblený rohový a nakonec kliknout do prvního bodu, aby se tvar uzavřel. Podklad máme hotový. To je ale rychlost, co?

Pro vnitřní část kytičky tvar zkopírujeme (Ctrl + J), přebarvíme na světlejší barvu (#009900) a vyvoláme transformaci zkratkou Ctrl + T. Táhnutím za rohy tvar zmenšíme tak, aby byl na každé straně o pixel menší. Tím se z minulého tvaru vlastně stane jakýsi jednopixelový obrys. A to jsme přesně chtěli.

Aby byl dojem z ikonky reálnější, zvolíme si pozici imaginárního světla na levé horní straně. Tím pádem by vpravo dole měl být stín. Novou vrstvu skryjeme, starou duplikujeme (Ctrl + J), přebarvíme na tmavší odstín (#011E01) a zmenšíme tak, jak ukazuje obrázek.

Jakmile opět zobrazíme světlou vrstvu, je vidět, že obrys je vpravo dole tmavší a "hutnější". Pěkně nám to jde od ruky.

Do vnitřní části přidáme světlejší listy.  Světlý tvar zkopírujeme a přebarvíme na ještě světlejší (#67CB33). Zvolíme nástroj pro výběr bodu (bílý šipka) a vybereme všechny body, které leží blíž ke středu (jsou to všechny rohové body). Jednoduše klikejte s klávesou Shift.

Stejně jako u celého tvaru, i u několika málo vybraných bodů můžeme provést transformaci. A tak ji provedeme. Stiskneme klávesovou zkratku Ctrl + T a body zmenšíme přibližně na 50 %.

Už teď to vypadá dobře, co ale body trochu pootočit?

Hned vzniknou další zajímavé tvary. Mně se ale jako nejlepší varianta zdá pouze malé pootočení. Asi takové, jako na tomto obrázku. Potvrďte transformaci stiskem klávesy Enter a pokračujeme dál.

Na kraje už tak světlých lístečků přidáme ještě další zesvětlení. Nebude to nic složitého, jen další zápasení s naším tvarem. Poslední vytvořenou vrstvu zkopírujeme a opět zesvětlíme (#99EC6E). Zároveň ji malinko pootočíme, jak ukazuje obrázek:

Nástrojem pro kreslení elipsy nakreslíme do tohoto tvaru kruh tak, aby byl po všech stranách o dva pixely menší než celá ikonka.

Nyní chceme zobrazit pouze místa, kde se protíná kruh s doplňkem původního tvaru. Proto nástrojem pro výběr cesty (černá šipky) vybereme nejprve původní tvar a nastavíme mu vykreslení na odečítání (viz ikonka na následujícím obrázku). Tím zajistíme, aby byl ve výsledku doplněk tohoto tvaru.

Poté vybereme kruh a jemu nastavíme vykreslení na protnutí (viz ikonka). Tím máme zobrazeno jen to, co jsme chtěli mít. Pokud se vám tvar nezdá, můžete jej ještě malinko pootočit. Já jsem ale spokojen, a tak pokračujeme dál.

A to přidáváním dalších a dalších odlesků. Tím, že jsme začali poměrně tmavou Barvou, máme celou řadu možností, jak ikonku zesvětlovat. Začneme například třemi elipsami barvy #99EC6E:

Pokračujeme třemi elipsami barvy #D2FBBD:

A skončíme jednou elipsou barvy bílé (#FFFFFF).

A to je vše! Naše ikonka sice připomíná tu původní jen vzdáleně, ale kytička to je a lístečků osm má. Náš cíl nebyl přesně okopírovat ICQ kytičku, ale naučit se zase o trochu lépe pracovat s Photoshopem. A to se vám doufám povedlo.

Poznámka na konec: Kreslení ikonek pomocí tvarů má spousty výhod. Třeba tu, že ikonku můžete jednoduše zvětšit bez ztráty kvality, jak tomu je na následujícím obrázku. Takže hodně štěstí a energie do práce. A bohatou úrodu kytiček.

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