Generovanie ikon písiem z náčrtu

Ikony sa dajú použiť na webe rôznymi spôsobmi, pričom najpopulárnejšími formátmi sú SVG a ikony písiem. Tento článok sa bude zaoberať tým, ako exportovať ikony, pomocou jedného kliknutia ich previesť na ikony písiem.

Prečo ikony písiem? Ikony písiem sa vývojárom dajú ľahko používať. Počas kódovania môžete ikonám ľahko priradiť veľkosť písma alebo ľubovoľnú farbu. Výsledkom je úplná kontrola ich štýlu. Ako teda vytvoríme ikony písiem?

Proces

Vytvorte knižnicu ikon

V aplikácii Sketch vytvorte symboly ikon za predpokladu, že ešte nemáte knižnicu ikon. Na vytváranie ikon môžete začať s kresbou 24x24, pretože to je zvyčajne dobrý štandard a dá sa ľahko zväčšiť. Ak si chcete prečítať, ako vytvoriť dynamickú knižnicu ikon v aplikácii Sketch, prejdite na tento článok. V prípade, že nemáte knižnicu ikon, pre tento článok som tiež vytvoril zdroj Skica so 4 ikonami. Môžete si ho stiahnuť tu.

Vytvorte sadu symbolov ikon

Konvertovať ťahy na obrysy

V prípade, že ste na niektorú zo svojich ikon použili orámovanie / ťahy, pred pokračovaním ich skontrolujte na obrysy. Ikony písma sú jeden jediný tvar a nefungujú s orámovaním.

Môžete vybrať časti ikony, ktoré sú ťahy, a vyberte Vrstva> Konvertovať na obrysy. Skratka na to jednoducho stlačíte Shift + Cmd + O.

Spojte tvary nadol do jedného tvaru

Aby ikona mohla byť ikonou písma, musí mať jeden kombinovaný tvar. Môžete tak urobiť z lišty nástrojov Skica. Vyberte dve vrstvy, ktoré chcete skombinovať, a vyberte logickú operáciu, ktorú chcete vykonať. Tento postup opakujte, až kým nezostane jeden jediný kombinovaný tvar.

Tieto booleovské operácie môžete použiť na paneli nástrojov na vytvorenie jedného kombinovaného tvaruAko by sa mala vaša ikona starať o spojenie všetkého do jedného jediného tvaru

Ak máte ťažkosti s kombináciou tvarov, mám k dispozícii zdroj 4 ikon, ktoré sú všetky zložité tvary, takže s nimi môžete komunikovať a zistiť, ako sa vytvárajú. Súbor aplikácie Sketch si môžete stiahnuť tu.

Exportujte ikony do priečinka ako súbory SVG

Vyberte všetky ikony, ktoré chcete exportovať, aby boli všetky exportovateľné, a vyberte SVG z rozbaľovacej ponuky pod možnosťou exportu. Môžete to urobiť v časti Predvoľby na pravom bočnom paneli. Exportujte všetky do jedného priečinka, aby ste ich ľahšie našli.

Exportujte ikony ako SVG do priečinka

Nahrajte všetky ikony do aplikácie Icomoon

Teraz, keď máme všetky ikony vo formáte SVG, otvorte Icomoon (je to zadarmo) a kliknite na Importovať ikony. Vyberte všetky ikony, ktoré chcete previesť na ikony písiem, a nahrajte ich. Nemusíte sa ani prihlasovať, aby ste to mohli urobiť, a vaša knižnica ikon zostane online vždy, keď navštívite icomoon, pokiaľ ste navštívili z toho istého zariadenia.

Ako by to malo vyzerať po odovzdaní súborov SVG

Konvertujte ikony na ikony písiem

Po odovzdaní všetkých ikon ich vyberte a kliknite na Generovať písmo v pravom dolnom rohu stránky. Teraz sa zobrazí zoznam všetkých vytvorených glyfov a môžete si ich jednoducho stiahnuť v pravom dolnom rohu stránky.

Teraz si môžete stiahnuť ikony písiem pre tieto súbory SVG

To je všetko! Teraz môžeme vývojárom jednoducho poskytnúť súbor ZIP a pomocou obsahu môžu na webe použiť ikony písiem.

Vďaka za prečítanie! Ak sa chcete naučiť, ako hĺbkovo vytvoriť dynamickú knižnicu ikon, môžete prejsť k tomuto článku.