V prvej časti sme si zaspomínali na cestu od kreslenia bitmapových ikoniek, až po svg ikony v bootstrape.
Takže, všetko je super. Ikonky, farby, veľkosti teraz meníme jedna radosť. Až do chvíle, keď sme zistili, že sa naše stránky na seba príliš podobajú…
Začníname hľadať iný balíček, alebo spôsob, ako dostať do toho súčasného ďalšie ikonky. Vieme, že je to font. Ale tých ikonkových zatiaľ nie je bohvieako veľa. Pri googlení môžeme prísť na to, že také web icon fonty sa skladajú z SVG ikon. A tak začneme hľadať primárne také. Takto môžeme nájsť množstvo balíkov s ikonkami a sem tam dokonca natrafíme aj na nejaký hotový font. A ako to už v začiatkoch experimentov býva, skúšame hneď implementovať 2-3, no časom zisťujeme, že je v tom zbytočný bordel, množstvo ikon nie je a ani nikdy nebude využitých. A čo je hlavné – zbytočne to celé spomaľuje stránku.
Preto uvažujeme, ako dostať na web len tie ikony, ktoré potrebujeme na danej stránke. Existujú stránky, kde sa taký font dá vyskladať. Skúšali sme Fontastic a IcoMoon. Nachádzajú sa tam už nejaké balíčky s ikonami, môžeme natrafiť aj na Glyphicons alebo FontAwesome, ktoré sme si predstavili v predchádzajúcej časti. A keby nám to nestačilo, môžeme si nahrať ďalšie *.svg ikony.
Vyskladali sme si ten najgeniálnejší icon font, ktorý obsahuje len tie najlepšie a najkrajšie ikonky zo všemožných balíkov. Znelo to fakt skvelo. V tej dobe sme chceli na naších projektoch používať Outline ikonky, čo sú ikonky z tenučkých čiar (môžete ich poznať napr. z iOS 7 a 8). Podarilo sa mi vytvoriť balík s cca 350 ikonami s ktorými som bol veľmi spokojný.
Paráda, vygenerovali sme font a ide sa robiť dizajn. Ikonku som mal hádam na všetko a bol som šťastný :-). Samozrejme, vo všetkom jednoduchom musí vzniknúť nejaký zádrhel. Pri dizajnovani sa to akosi prehliadlo, ale pri programovaní sme prišli na to, že ikonky nemajú rovnakú veľkosť a ani hrúbku čiar. Každý svoj balíček vykresľuje podľa svojich pravidiel. A tak som zostal znova znechutený.
IDEME SI TVORIŤ VLASTNÉ
Neostáva mi nič iné, musím si začať kresliť ikonky sám. Po dlhých rokoch sa vraciam späť k pôvodnému princípu – s tým rozdielom, že to nebudem kresliť ako bitmapu, ale vo vectore. Dosť dlho som pracoval v Corel Draw a je to celkom fajn krivkový program. Ale má pár nevýhod. Jeho posledná verzia pre Mac OSX bola tuším 11. A hoci je jeho posledná verzia pre Windows super, nebudem si v práci inštalovať Parallels a taktiež nebudem sadať za počítač vedúceho (ako posledný ostal verný Windowsu). Takže vyskúšame niečo nové. Voľba padne automaticky na známy Adobe Illustrator, ktorému (čo mňa osobne veľmi potešilo) nechýba mriežka, ktorá pri kreslení ikon v Coreli chýba.
Nevrhol som sa do toho bezhlavo, ale najprv si niečo naštudoval. Christopher Bettig z Googlu napísal príručku Google Visual Assets Guidelines z ktorej som vychádzal.
Sú tam opísané princípy kreslenia ikonky, ako napr:
Samotná ikonka sa má skladať z geometrických tvarov.
Pixel perfect – každá čiara by mala zaberať celý pixel. Ak presahuje, tak pri menšom rozlíšení vyzerá byť tá ikonka ako rozmazaná.
Kresliť sa odporúča do mriežky 21 x 21 px, pričom ikonka by nemala presiahnuť 19 px a najlepšie 17 px. Dôvodom je ochranná zóna – ak chceme niekoľko ikoniek vedľa seba v riadku, nemusíme pridávať margin.
Okay, takže mali by sme nejaké základné inštrukcie.
V príručke sa nachádzajú aj ilustrované ikonky, ktoré sa používajú prevažne v infografikách. Ak by ste chceli ešte niečo o tvorbe loga, tak si prečítajte prvú časť tejto príručky.
IMPORT IKONIEK
Keď máme nakreslené parádne SVGčka, stačí ich naimportovať a môžete ich používať. Ako som spomínal vyššie, existuje pár stránok, ktoré import umožňujú. Nepochybne na to existuju aj programy, ale kedže pracujeme v multiplatformovom teame (a mnoho z vás tiež), možnosť spraviť to na nete je oveľa jednoduchšie a praktickejšie.
Fontastic
Ako prvú sme skúšali službu Fontastic, ktorá je veľmi pekne spracovaná, ale niekedy vzhľad nie je až tak podstatný. Hoc ponúka zgrupovanie ikoniek do balíčkov, zmenu názvov ikoniek a vytvorenie vlastného prefixu, je to trošku málo. Čo ma prekvapilo, možnosť publikovať balíček zdarma má obmedzenie – len 5 000 zobrazení na mesiac. Týka sa to však len prípadu, keď necháte balíček na ich rýchlych CDN serveroch a k dispozícii aj pre iných užívateľov. (Platený balík obmedzenie počtu zobrazovaní odstráni). Ak si ich dáte na vlastný server, žiadne obmedzenie pre vás táto služba nepredstavuje.
Po vygenerovaní balíčku všetko fungovalo ako po masle, ale mojmu detailnemu oku neušlo, že sú tie ikonky posunuté o niečo vyššie nad riadok textu. Samozrejme, dá sa to posunúť CSSkom, alebo prerobiť ikonky v editore a poposúvať ich.
IcoMoon
Skúsili sme využiť iný nástroj ktorý odporúčali na viacerých stránkach. Nie je síce tak pekný a tiež mapa ikoniek, ktorú v závere vygeneruje, nie je taká pekná ale budiš. Pozitíva prevládajú, ponúka viac možností. Nielen že rieši problém, ktorý bol so zarovnaním ikon v riadku s textom (nám pomohlo nastaviť baseline height na 17% em). Ďalej umožňuje nastaviť aj takzvaný whitespace width, čo je medzera medzi znakmi. Umožňuje nastaviť prefix pred názvom aj za názvom a taktiež aj samotný názov class, ako môžeme poznať napr. z Bootsrap glyphicon glyphicon-home alebo FontAwesome fa fa-home. Ďalej umožňuje nastaviť nejaké tie metadata pre licenciu k fontu a v neposlednej rade podpora pre IE6 a IE7.
