Generarea de pictograme de font din Sketch

Există diferite moduri în care pictogramele pot fi utilizate pe web, SVG-urile și pictogramele de fonturi fiind cele mai populare formate. Acest articol va acoperi modul de export al icoanelor pentru a le converti în pictograme cu fonturi cu un singur clic.

De ce pictograme de font? Pictogramele de fonturi sunt ușor de utilizat pentru dezvoltatori. Puteți da cu ușurință pictogramelor o dimensiune a fontului sau orice culoare doriți în timp ce codați. Drept urmare, aveți un control deplin asupra stilului lor. Deci, cum creăm pictograme de font?

Procesul

Creați o bibliotecă cu pictograme

Creați simboluri de pictograme în Sketch, presupunând că nu aveți deja o bibliotecă cu pictograme. Puteți începe cu o tablă de artă 24x24 pentru crearea de icoane, deoarece acesta este de obicei un standard bun și poate fi scalat ușor. Dacă doriți să citiți cum puteți crea o bibliotecă cu pictograme dinamice pe Sketch, accesați acest articol. De asemenea, am creat o resursă Sketch de 4 pictograme pentru acest articol, în cazul în care nu aveți o bibliotecă cu pictograme. Îl poți descărca aici.

Creați un set de simboluri pentru pictograme

Convertiți loviturile în contururi

În cazul în care ați folosit borduri / lovituri pe oricare dintre pictogramele dvs., asigurați-vă că le convertiți în contururi înainte de a continua. Pictogramele font au o singură formă și nu funcționează cu chenare.

Puteți selecta părțile pictogramei care sunt lovituri și selectați Strat> Convertiți în contururi. O comandă rapidă pentru a face acest lucru este doar apăsarea Shift + Cmd + O.

Combinați formele până la o singură formă

Pentru ca o pictogramă să fie o pictogramă de font, trebuie să fie o singură formă combinată. Puteți face acest lucru din bara de instrumente Sketch. Selectați două straturi pe care doriți să le combinați și selectați operația booleană pe care doriți să o efectuați. Repetați acest lucru până când veți rămâne cu o singură formă combinată.

Puteți utiliza aceste operații booleane pe bara de instrumente pentru a crea o singură formă combinatăCum ar trebui să arate icoana dvs. după combinarea totul la o singură formă

Dacă aveți probleme pentru a combina formele, am o resursă disponibilă cu 4 pictograme care sunt toate forme complexe, astfel încât să puteți interacționa cu ele și să vedeți cum sunt făcute acestea. Puteți descărca fișierul Sketch aici.

Exportați pictogramele într-un folder sub formă de SVG

Selectați toate pictogramele pe care doriți să le exportați, faceți-le toate exportabile și selectați SVG-urile din meniul drop-drop sub opțiunile de export. Puteți face acest lucru sub Presetări din bara laterală din dreapta. Exportați-le într-un singur folder pentru o descoperire mai ușoară.

Exportați pictogramele ca SVG-uri într-un folder

Încărcați toate pictogramele în Icomoon

Acum că avem toate pictogramele în format SVG, deschidem Icomoon (este gratuit) și facem clic pe Importați pictograme. Selectați toate pictogramele pe care doriți să le convertiți în pictograme de font și încărcați-le. Nici nu trebuie să vă conectați pentru a face acest lucru, iar biblioteca dvs. de pictograme rămâne online ori de câte ori vizitați icomoon, atât timp cât vizitați de pe același dispozitiv.

Cum ar trebui să arate după încărcarea SVG-urilor

Convertiți pictogramele în pictograme

Odată ce toate pictogramele au fost încărcate, le selectăm pe toate și facem clic pe Generate font în partea dreaptă jos a paginii. Acum veți vedea o listă cu toate glifele create și le puteți pur și simplu să le descărcați din partea dreaptă jos a paginii.

Acum puteți descărca pictogramele de fonturi pentru aceste SVG-uri

Asta e! Acum putem da pur și simplu fișierul ZIP dezvoltatorilor și ei pot utiliza conținutul pentru a utiliza pictogramele de font de pe site-ul web.

Multumesc pentru citit! Dacă doriți să aflați cum să creați o bibliotecă cu pictograme dinamice în profunzime, puteți accesa acest articol.