Stvaranje ikona slova na skici

Postoje razni načini na koje se ikone mogu koristiti na webu, a najpopularniji formati su SVG-ovi i ikone fonta. Ovaj članak će opisati kako izvesti ikone pretvoriti ih u ikone fonta jednim klikom.

Zašto ikone fonta? Ikone fontova programerima je lako koristiti. Ikonama možete lako dati veličinu fonta ili bilo koju boju koju želite kodirati. Kao rezultat toga, imate potpunu kontrolu nad njihovim stilom. Pa kako stvoriti ikone fonta?

Postupak

Napravite biblioteku ikona

Napravite simbole ikona u Sketchu, pod pretpostavkom da još nemate biblioteku ikona. Za početak možete stvoriti ploču veličine 24x24 jer je to obično dobar standard i može se lako smanjiti. Ako želite pročitati kako stvoriti dinamičku biblioteku ikona na Sketch-u, prijeđite na ovaj članak. Za ovaj članak sam također stvorio Sketch resurs od 4 ikone za slučaj da nemate biblioteku ikona. Možete ga preuzeti ovdje.

Napravite skup simbola ikona

Pretvorite poteze u obrise

U slučaju da ste na bilo kojoj ikoni koristili obrube / poteze, prije nastavka pretvorite ih u obrise. Ikone fonta jednog su oblika i ne rade s obrubima.

Možete odabrati dijelove ikone koji su pomicani i odaberite Sloj> Pretvori u obrise. Prečac za to je jednostavno pritiskanje Shift + Cmd + O.

Kombinirajte oblike sve do jednog oblika

Da bi ikona bila ikona fonta, ona mora biti jedan jedini kombinirani oblik. To možete učiniti na alatnoj traci Sketch. Odaberite dva sloja koju želite kombinirati i odaberite boole operaciju koju želite izvesti. Ponavljajte ovo sve dok vam ne ostane jedan jedini kombinirani oblik.

Možete koristiti ove logične operacije na alatnoj traci da stvorite jedinstven kombinirani oblikKako bi trebala izgledati vaša ikona, kombinirajući sve u jedan oblik

Ako imate poteškoće s kombiniranjem oblika, na raspolaganju imam resurs od 4 ikone svih složenih oblika, tako da možete komunicirati s njima i vidjeti kako su izrađeni. Datoteku Sketch možete preuzeti ovdje.

Izvezite ikone u mapu kao SVG datoteke

Odaberite sve ikone koje želite eksportirati, učinite ih da se izveze i odaberite SVG-ove s padajućeg izbornika pod opcijama izvoza. To možete učiniti pod Presets na desnoj bočnoj traci. Izvozite ih sve u jednu mapu radi lakšeg otkrivanja.

Izvezite ikone kao SVG datoteke u mapi

Prenesite sve ikone u Icomoon

Sada kada imamo sve ikone u SVG formatu, otvorite Icomoon (besplatan je) i kliknite Uvezi ikone. Odaberite sve ikone koje želite pretvoriti u ikone fonta i prenesite ih. Ne morate se čak ni prijavljivati ​​da biste to učinili, a biblioteka ikona ostaje na mreži kad god posjetite icomoon, sve dok je posjetite s istog uređaja.

Kako bi trebao izgledati nakon prijenosa SVG-ova

Pretvorite ikone u ikone fonta

Nakon što prenesemo sve ikone, odaberite ih sve i kliknite na Generiraj font u donjem desnom kutu stranice. Sada ćete vidjeti popis svih stvorenih glifova i možete ih jednostavno preuzeti s donje desne strane stranice.

Sada možete preuzeti ikone fonta za ove SVG datoteke

To je to! Sada programerima možemo jednostavno dati ZIP datoteku, a oni mogu upotrijebiti sadržaj za korištenje ikona fonta na web mjestu.

Hvala na čitanju! Ako želite naučiti kako duboko izraditi biblioteku dinamičnih ikona, možete se uputiti na ovaj članak.