Tento príbeh pozná hádam každý dizajnér a programátor:
Urobíte parádny dizajn pre svojho klienta. Ten je nadšený, všetko je schválené. Deň pred spustením príde mail: "Pozerali sme sa na to večer s babkou a dedkom, a im sa zdá, že miesto tej zelenej by mal byť dizajn radšej v červenej." A keďže babka má vždy pravdu, ide sa prerábať.
Pokiaľ máte prvky stále rozrobené v Photoshope alebo inom editore, alebo sa jedná len o prvky, ktorým by sme farbu zmenili pomocou CSS, tak väščinou nemusíte myslieť na (samo)vraždu. Na tú začnete myslieť až vtedy, keď ikonky nepasujú k novej farbe. Obzvlášť vtedy, ak ste ich ručne kreslili niekoľko hodín.
Čo teraz? Budem hľadať nové? Skúsim im zmeniť farbu? Môžete, ale…
Čo ak sa zákazníkovi nebude pozdávať odtieň a bude to celé treba meniť znova? A znova… A čo ak ich bude chcieť zväčšiť? Zrazu sa objavia hnusné nekvalitné pixely a vy vo vašom podvedomí určite nebudete spokojný s tým, čo dodávate, lebo je to nedokonalé. Zaručená cesta do blázinca.
MOJA CESTA K DOKONALÉMU RIEŠENIU
Bitmap
Dlhú dobu sa používali ako ikonky malé bitmapové obrázky najčastejšieho rozmeru 16x16px alebo jeho násobky.
V akom formáte ich ukládať? Použijeme *.jpg? Ak je jednofarebné pozadie a viete, že také aj ostane, je to v poriadku.
Čo tak použiť *.png? Veď ten je oveľa krajší zvláda 24 Bit farby a pri priehľadnosti je to pekne hladké (samozrejme kým sa to nepriblíži). Ale čo ak niekto používa zastaralý prehliadač? Ten priehľadnosť len tak jednoducho nedokáže. Implementujeme na stránku script a všetko krásne funguje.
Dobre tak máme favorita – budeme používať *.png. Prichádza znechutenie z toho, že sa vám nechce tie ikonky kresliť. Veď hádam niekto predsa v živote kreslil takú ikonku akú práve potrebujem. Každý vie, čo v tomto bode nasleduje: hľadanie obrázkov cez Google. Obvykle im treba odstraňovať pozadie, ale sem tam sa zadarí a natrafíme na nejaké bez pozadia.
Pri hľadaní na webe natrafíme na ikonové balíčky alebo knižice, kde nájdeme množstvo ikoniek. Zadáme názov čo hľadáme a ono nám to vyfiltruje desiatky ikoniek (sem tam nič :D, treba len vedieť čo skutočne chceme) a to aj v niekoľkých veľkostiach. Takou stránkou je napr. https://www.iconfinder.com/.
Flat
Všetko sa zmenilo keď Microsoft prišiel so svojím operačným systémom Windows 8. Podľa môjho názoru od začiatku vyzeral ako Teletext, ale človek prostý sa prispôsobi a zvykne si. A na tú grafiku som si rýchlo zvykol. Takýto dizajn uľahčil prácu nielen grafikom ale aj programátorom na frontende.
Z minulého storočia sme si zvykli, že ikonky si sťahujeme, lebo sa nám ich nechce kresliť. Ale čo s tými flatovými? Tie sa dajú nájsť pri použití kľúčových slov Pixel, Flat alebo Outline.
Svg
Vývoj napreduje a začíname využívať framework. Určite ste už počuli o Bootstrap. V ňom sa nachádza ikonový balíček Glyphicon. Najprv som si povedal: "Načo mi to bude? Veď aj tak ich mám už dávno poriešené svojimi krásnymi bitmapovými ikonkami."
Potom som si povedal: "Veď prečo nie?", a rozhodol som sa ich použiť. Ten jednoduchý zápis do class, žiadna cesta k obrázku, kde sa nachádza. Môžem si meniť farbu, na hover nepotrebujem dva rôzne obrázky a dokonca viem meniť veľkosť (môžem ikonku zväčšiť aj 100 násobne a bude stále pekne ostrá). Toto sa s mojimi ikonkami nedalo.
Časom príde po prvotnom očarení rozčarovanie. Ikoniek je málo, niektoré sa vám nepáčia a tohto systému sa vzdať nechcete.
Problém s nedostatkom ikon sa vyriešiť dá. Napríklad na http://glyphicons.com/ kde za nejaký poplatok si tých ikoniek stiahne viac.
Ak sa vám nepáčia, začne pátrať po alternatívach. Tu by som ako príklad dal stránku http://fortawesome.github.io/Font-Awesome/ ktorý vo svojej prvej verzii vychádzal z bootstrapu a nahradzoval priamo jeho ikonky. takže princíp bol rovnaký. No časom vyšla novšia verzia ktorá používa iný prefix. Priniesla však aj niečo nové a to svoje vlastné doplnkové classy pre:
- zväčšenie ikonky
- zachovanie rovnakej šírky v zoznamoch
- animácie pre spinner (každá ikonka sa môže otáčať, alebo pulzovať)
- otáčanie ikoniek o 90°, 180°, 270°, vertikálne alebo horizontálne
- spájanie ikoniek (ak sme nenašli nejakú variantu ikonky v štvorci alebo krúžku môžeme si ju jednoducho vytvoriť)
Všetky tieto veci nájdeme v príkladoch na stránke. Všetky ikonky sú rozdelené do niekoľkých kategórii.
- Web Aplications – najbežnejšie používané ikonky na stránkach
- Transportation – prepravné
- Gender – pohlavia
- File type – typy súborov
- Spinner – ikonky pre loading
- Form control – checkbox a radio buttony
- Payment – platobné (ikonky Visa, MasterCard, Paypal…)
- Chart – rôzne grafy
- Currency – platobné meny (ikonky Euro, Dolar, Libra, Bitcoin…)
- Text Editor – ikonky používané vo wysiwyg editoroch
- Directional – rôzne šípky
- Video player – ikonky pre video prehrávač
- Brand – logá rôznych stránok a značiek
- Medical – ikonky z lekárstva
Výhodou je, že autor tieto ikonky pravidelne doplňuje. Pri stiahnutí balíčka máte aj ukážkové súbory a aj samotný font, ktorý môžete nainštalovať na váš systém a tak ikonky využiť priamo pri návrhu dizajnu.
Tip: Pre implementáciu môžete využiť odkaz na CDN ktorý je oveľa rýchlejší než by malo zaťažovať váš server.
Všetko je super. Ikonky, farby, veľkosti meníme jedna radosť. Ale zrazu pozorujeme, že sa naše stránky na seba príliš podobajú…
A tak sa začneme obhliadať buď po inom balíčku alebo ako tam tie ikonky vlastne dostať. Vieme že je to font. Ale tých ikonkových nieje bohvie ako veľa. Po googlení môžeme prísť na to že také web icon fonty sa skladajú z SVG ikon. A tak začneme hľadať také ikonky. Môžeme nájsť množstvo balíkov s ikonkami a sem tam dokonca natrafíme aj na nejaký hotový font. Skúsime implementovať 2-3 no časom zisťujeme že je v tom zbytočný bordel, množstvo ikon nieje ani využitých a zbytočne to spomaľuje stránku.
A tak uvažujeme ako dostať len tie ikony ktoré potrebujeme na danej stránke. Po pátraní môžeme natrafiť na stránky kde sa taký font dá vyskladať. 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 bolo stále málo môžeme si nahrať ďalšie *.svg ikony.
No a tak sa pokúsime vyskladať ten najgeniálnejší icon font ktorý obsahuje len tie najlepšie a najkrajšie ikonky zo všemožných balíkov. Znie 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ý.
Tak hurá vygenerujeme font a ideme robiť dizajn. Ikonku som mal hádam na všetko a bol som šťastný :-). Ale samozrejme vo všetkom jednoduchom musí vzniknúť nejaký zádrhel. Pri robení dizajnu sa to nejak 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 kreslí podľa seba a svojích pravidiel. A tak som zostal znova znechutený.
Neostáva nič iné len si to nakresliť 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 hoc 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é čo tak Adobe Illustrator je dosť rozšírený, uznávaný a nechýba mu mriežka ktorá by pri kreslení ikon v Coreli chýbala.
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ípi ako kresliť ikonky. A to že 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á. A konečne sa človek dočítal v akom rozlišení vlastne ikonky kresliť. a to do mriežky 21x21px. Pričom ikonka by nemala presiahnuť 19px a najlepšie 17px. Dôvodom je ochranná zóna ak chceme niekoľko ikoniek vedľa seba v riadku aby sme nemuseli pridávať marginy.
Okay takže mali by sme nejaké základné inštrukcie. Ešte nižšie v príručke sa nachádzajú Illustrované 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.
Takže nakreslíme si parádne SVGčka a ideme ich importovať ako som spomínal vyššie je pár stránok ktoré to umožňujú a určite aj pár programov. Ale kedže pracujeme v teame a taktiež niekto využíva iný Operačný systém, mať to na nete bude oveľa jednoduchšie a praktickejšie.
Fontastic
Ako prvú sme skúšali http://fontastic.me/ ktorá je pekne spracovaná ale niekedy vzhľad nie je 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 má možnosť publikovať balíček ale zdarma len pre 5 000 zobrazení na mesiac. Po vygenerovaní balíčku všetko fungovalo ako po masle ale mojmu detailnemu oku neušlo že sú tie ikonky o niečo posunuté vyššie nad riadok textu. Samozrejme dá sa to posunúť CSSkom alebo prerobiť ikonky v editore a ich poposúvať.
IcoMoon
Skúsili sme využiť iný nástroj ktorý odporúčali na viac stránkach. Nieje síce tak pekný a taktiež mapa ikoniek ktorú v závere vypľuje nieje 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 classy ako môžeme poznať napr. z Bootrap 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.
