15 tipů pro tvorbu favikony - Grafika.cz - vše o počítačové grafice

Navigace:  » Úvodní stránka  » Rubriky  » Photoshop  

27. září 2007, 00.00 | Tak jako má každý program svou ikonku, má ikonku i (skoro) každá internetová
stránka. Nejčastěji je pojmenovaná favicon.ico, má velikost 16 x 16 pixelů a
najdete ji v liště hned vedle adresy. V tomto článků se podíváme na pár tipů,
které by se vám při její tvorbě mohly hodit.

Favikona se zobrazuje nejen vedle adresy stránky, ale i v záložkách (bookmarks), v oblíbených stránkách, v RSS čtečce a někdy i přímo v liště. Účel favikony je jasný – dostatečně odlišit stránku od ostatních a všemi možnými způsoby (tvarem, barvou, textem) udržet jasné spojení se stránkou – v záložkách je přeci jen o mnoho snazší prolétnout okem pár ikonek, než číst všechny adresy.

Z přípony .ico je poznat, že favikona je standardní windows soubor ikonky. Jak už jsme si řekli, velikost ikonky je nejčastěji 16 x 16 pixelů. Přesto pokud se podíváte na stránky, najdete spoustu jiných formátů i velikostí. Kromě přípony .ico to je nejčastěji .png, .gif nebo .bmp. Velikosti jsou sice ve většině případů 16 x 16 pixelů, ale najdou se i 24 x 24 nebo 32 x 32 pixely. Zobrazení takové ikonky potom závisí už na samotném prohlížeči. Nejpřátelštější je nejspíš Opera, která zobrazuje favikonu ve všech zmiňovaných formátech i velikostech. Je ale vždy dobré tvořit ikonku tak, jak má být. Tedy ve formátu .ico a ve velikosti 16 x 16 pixelů. Jinak by vaše práce zbytečně přišla vniveč, pokud by se uživateli nezobrazilo nic.

Nad programem pro tvorbu není třeba váhat – nejlepší volba je Photoshop, přestože standardně neumožňuje export ikonky do ico formátu. Zmiňovaný poslední krok poté obstará buď odpovídající plugin, nebo jiný pomocný program.

Pojďme se tedy podívat, čeho se při tvorbě takové ikonky držet a čeho se naopak vyvarovat. Nebojte, ukázkových obrázků bude opravdu spousta.

1. Nesnažte se do ikonky nacpat celý svět

A to doslova, podíváme-li se na ikonku následující. Do malého prostoru se některé věci nevejdou, a tak se to nesnažte měnit. Ať z toho "světa" není nakonec "rozmazaná paleta umělce" jako na tomto obrázku:

I menší objekty mohou po zmenšení připomínat spíše ošklivý flek než obrázek:

Snaha o zachování kurzívy u fontu vedla k jeho snížené čitelnosti. Nic naplat, na obrazovce se nejlépe vyjímají rovné čáry:

2. Vyberte jen to hlavní

Jakmile je logo víceslovné, jen textové nebo trochu delší, je užitečné vybrat jen jednu jeho část. Soustřeďte se jen na to hlavní, jako například zde na ukázce - z loga CineStar zbyla jen hvězdička, která pro identifikaci stránky naprosto stačí.

Zde naopak vidíte, že z původního loga "last.fm" byly vybrány pouze dvě písmena - "as", která jsou zajímavě spojena, a tak krásně identifikují stránku a zároveň souvisí s logem.

V případě obrázku většinou postačí vhodný výřez. Všimněte si, že zde je 1:1.

3. Nerozmazávejte

Na následujícím obrázku je text "BW" špatně čitelný jen z toho důvodu, že původně byl pixel font špatně vyhlazen. Nedělejte i vy stejnou chybu.

Stejné je to i s obrázkem. Při změně velikosti ve Photoshopu je vždy nutné zarovnávat přesně na pixely, aby tvar nedopadl jako na následujících ukázkách. Ikonka je zbytečně na každé straně o pixel menší, protože levou a horní stranu zabírají poloprůhledné pixely. Na druhé ukázce je přitom tvar vpravo a dole vyhlazen pěkně.

4. Doostřujte

Použitím filtru doostření (Unsharp Mask) zvýšíte kontrast mezi hranami Objektu, a ten potom působí ostřejším dojmem. V 90 % případů jemné doostření ikonkám vždy pomůže, zejména je-li v ikonce zmenšený jiný objekt. Doostřovat ikonku, kterou nakreslíte znovu, nemá smysl.

Zde vidíte, že díky doostření je ikonka výraznější a ostřejší než nápis pod ní. Evidentně se ale jedná o stejné písmeno.

5. Zachovávejte proporce

Ve Photoshopu sice není žádný problém zmenšit obdélníkové logo do čtverce (tj. prostoru ikonky), je to ale krajně neestetické. Už jen proto, že na této ukázce se z modrého kruhu stalo oválovité "vajíčko":

Někdy je ale drobná změna loga žádoucí. Po zmenšení dvou kruhů z loga by z menšího kruhu nic nezbylo, a proto je menší kruh v ikonce oproti původnímu větší. Je ale stále posunut malinko doleva nahoru (jako na původním logu):

6. Neměňte barvy

Je to s podivem, ale při mém brouzdání internetem jsme zjistil, že každá třetí ikonka má jiné barvy než logo na stránce. Je to opravdu záhada, vždyť nastavit ikonce i logu stejné barvy není žádný problém – ikonka může mít barvy libovolné. Na těchto ukázkách vidíte, že ikonka je barevně posunutá.

Barvy stránek by měly být dodrženy, i pokud v ikonce žádné logo není. Nezapomínejte, že barva je jedním ze základních prvků, podle kterých si následně v paměti spojíme favikonu se stránkami:

Je-li logo celé fialové s malou zelenou tečkou, je sice pěkné udělat malou zelenou tečku i ve favikoně, ale na druhou stranu, pokud jsou i celé stránky fialové, těžko si s nimi spojíme zelenou ikonku.

Nakonec ještě ukázka ikonky, která hraje všemi barvami:

7. Pixelujte

"Pixel art" je druh grafiky, při kterém obrázky vznikají pouhým "obarvováním" jednotlivých pixelů. Bez pokročilejších nástrojů a bez efektů a jiných funkcí (je tedy možné využít téměř jakýkoliv bitmapový editor). Na tvorbu favicony je pixel art jako stvořený, ovšem někdy dokáže udělat víc škody než užitku. Posuďte sami. Než se do podobného stylu pustíte, nezapomeňte prostudovat odpovídající tutoriály.

Přímo skvělá ukázka pixelartu, přitom s využitím pouze dvou barev:

I takto to jde. Jen je to trochu nudné:

Toto už je dost odfláknuté:

Tyto ikonky jsou nic neříkající:

A toto je sice pixelart, ale opravdu ošklivý:

"Pixelovat" nemusíte celou ikonku od začátku. Mnohem účinnější je nejprve vytvořit ikonku zmenšením obrázku a ten teprve následně upravit po pixelech. Zřejmě tímto způsobem vznikla i tato velmi povedená ikonka:

U následující ikonky byly upraveny okna a kraj dveří tak, aby na šířku zabíraly přesně jeden pixel. Výsledek je dokonalý.

Často používaná technika je zmenšení obrázku a následné přikreslení pixelového rámečku.

8. Nepoužívejte cizí ikonky:

Pokud si ikonku zapůjčíte z jiného obrázku, zcela jistě porušíte nějaký zákon. Pokud jsou ikonky k dispozici zdarma a jsou pěkné, zcela jistě je použije i někdo jiný. Tím se původní účel favikony – jasná a jedinečná identifikace stránek – naprosto ztratí.

Je na následujícím obrázku manga hlava ze hry, nebo ji autor nakreslil sám?

Kytara je přesně to, co vystihuje následující stránku. Bohužel se k ní stylem vůbec nehodí, a tak navozuje dojem, že je odjinud. I když tomu tak vůbec nemusí být.

9. Nepoužívejte nesouvisející ikonky

Tím totiž favikona absolutně ztratí význam. Jak souvisí kytička s mangou?

Použít jako ikonku jednoduchý tvar, jako třeba čtverec, je také nevhodné.

Tato ikonka má společné se stránkou pouze písmeno. A to je málo.

V přírodě často nacházíme šipky, které určují směr trasy, jenomže nejsou šedé a určitě nevypadají takto.

Použít pro favikonu bílý list papíru je stejně účinné, jako nepoužít ji vůbec. A toto nejsou zdaleka jediné stránky které to tak mají.

10. S rámečky opatrně

Chcete-li vizuálně oddělit určitý prvek, je okraj skvělý pomocník. Nezapomínejte ale, že v ikonce 16 x 16 se jednopixelovým okrajem dostanete na prostor 14 x 14 pixelů. Ve většině případů je pak nutné ještě nechat mezi okrajem a prvkem jednopixelovou mezeru, a rázem vám zbývá pouze 12 x 12 pixelů. A to je opravdu málo.

Zbytečný třípixelový rámeček zmenšil místo pro pistoli na minimum.

Zbytečný černý rámeček:

Jsou i výjimky - zde byl prostor 12 x 12 pixelů dostačující:

11. Nevšímejte si větších velikostí

Favikona má velikost 16 x 16 pixelů. V liště je zobrazena ve velikosti 16 x 16 pixelů, v menu je zobrazena ve velikosti 16 x 16 pixelů. Přesto se najdou stránky, které obsahují ikonku i ve větší velikosti. Není na tom nic špatného, těch pár kilobajtů navíc není žádná pohroma, jen je mi stále záhadou, proč mít ikonku navíc.

Tyto ikonky obsahují i verzi 32 x 32 pixelů:

Tato dokonce i 48 x 48 pixelů.

Poznámka: při pročítání diskuzí jsem nakonec přišel na význam velké ikonky. Zobrazí se v případě, že odkaz přetáhnete např. na plochu. I tak ale dle mého názoru absence této ikonky ničemu nevadí.

12. Myslete na pozadí

Ačkoliv jsou ikonky v 90 % zobrazeny na světlém nebo bílém pozadí, musíte být připraveni i na pozadí tmavé. Následující obrázky ukazují, že stačí tmavší barva lišty a ikonka vytvořená pro bílé pozadí má hned nehezký světlý okraj.

Ikonky, které zabírají plných 16x16 pixelů, problém s pozadím nemají.

13. Písmena ano, ale s rozumem

Další zjištění, ke kterému jsem během zkoumání favikon došel, bylo, že na většině ikonek je pouze jedno písmeno. Plocha k tomu přímo svádí, písmeno je skvěle čitelné. Ale jelikož těch písmen v abecedě není moc, je nutné ono písmeno dostatečně jasně odlišit. Proto klidně tvořte ikonky s jedním písmenem, ale připravte se na to, že takové ikonky mají o hodně větší pravděpodobnost, že si je uživatel splete s ikonkou jinou.

14. Zarovnávejte

V malém prostoru znamená i jeden pixel obrovskou vzdálenost, a jakmile bude objekt od jednoho kraje vzdálen o pixel víc než od druhého, rázem vypadá, že není přesně uprostřed. A nezachrání to ani fakt, že ikonka je překreslena a na rozdíl od obrázku v logu obsahuje náznak pokusu o vyhlazení hran.

15. Inspirujte se

Třeba zde. Favikona by měla být jako třešnička na dortu – je to sice pouhých 256 pixelů, ale dokáže udělat divy.

Poznámka na konec: Nemohli jsme publikovat článek o favikonce bez favikonky vlastní. Ode dneška bude tedy grafika.cz vždy s favikonkou. Jak se vám líbí? Neváhejte a podělte se s námi o váš názor.

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