Skica: savršen tijek ikona rada

Doista brz, dosljedan način korištenja fontova ikona u Sketch-u.

Skica ne nudi dobro rješenje za upravljanje ikonama. Dakle, proveo sam neko vrijeme radeći na procesu ikone kako bih daleko jednostavnije koristio knjižnicu ikona u svim svojim projektima.

Moje rješenje koristi samo jedan simbol, jednu umetničku ploču i jedan font ikone. S ovim možete:

  • Napravite prijenosnu biblioteku ikona koja će se koristiti u svim projektima.
  • Pregledajte ikone izvan skice i uvezite ih, održavajući veze do originalnih umjetničkih djela.
  • Dijelite i sinkronizirajte ikone s članovima tima.

I dosljednost!

Fontovi ikona: Brzi sažetak

Prije svega, ovaj se tijek rada temelji na čvrstom i dobro crtanom fontu ikona, poput Googleovog fontova Icons Material ili Font Awesome. Ili stvorite vlastiti font u Icomoon ili Fontello.

Fontovi ikona su sjajni jer se povećavaju kao vektori, mogu se vrlo lako koristiti na webu i mobilnim aplikacijama, a styling se može primijeniti baš kao i tekst. Upravljanje je jednostavno za sve, dizajnera ili programera; potrebno je instalirati i ažurirati samo jednu datoteku fonta.

Ako datoteku fonta spremate na centralno mjesto poput Dropboxa, vrlo brzo možete dijeliti najnovije ikone sa svim svojim timom.

Počinjemo koristiti ovaj tijek rada u Qumu i doista nam se sviđa. Nadam se da ćete i vi.

Tijek rada

Jedna ploča koja će im vladati svima.

Konstrukcija osnovnog simbola

Vaša čitava biblioteka ikona koristi jedan osnovni simbol.

  1. Instalirajte font ikone. Ponovo pokreni skicu.
  2. Nacrtajte kvadratnu umjetničku ploču pristojne veličine.
  3. U njega postavite tekstualni okvir, a rubovi se pružaju prema ivicama umjetničke ploče.
  4. Podesite font na font ikone i umetnite bilo koji glif.
  5. Ovu memorijsku ploču spremite kao simbol zvan "glifkon".

Dakle, osnovni simbol u sebi sadrži tekstni okvir. Sadrži zadani glif, koji sam postavio kao zvijezdu. Samo da pojasnim, ovo nije SVG ili PNG grafika, ovo je tekstualni glif iz fonta.

Glif i ispravna svojstva tekstnog okvira.

Moja svojstva tekstnog okvira:

Visina x Širina: 17 px *
Promjena veličine: Lebdite na mjestu
Veličina fonta: 17px *
Visina linije: 17px *
Širina: Automatski i
Poravnajte: središte
Boja teksta: Crna
* Postavite na isto na temelju željene veličine

Sada, kada umetnete ovaj osnovni simbol u svoj radni prostor, možete promijeniti svoj glif pomoću preglasavanja teksta kao što je prikazano u nastavku.

Iz tame izlazi svjetlost: Jedan simbol za dosljedno postavljanje ikona.

Animacija iznad pokazuje moju novo postavljenu instancu simbola "Glyphicon". Kopiram i lijepim novi glif u polje "zaobići" na desnom oknu. (Otkrićete kako u minutu dobivam glife).

Skica prikazuje vrijednost polja za poništavanje s upitnikom (jer GUI ovdje ne tumači font ikone), ali kad pritisnete Return, glif će se odmah ažurirati u radnom području.

Ovaj simbol koristimo kao simbol "baze" za sve ikone. Dakle, potreban je jedan simbol da bi sve vaše ikone živele, štoviše da su vaše ikone pohranjene izvana u vaš projekt što je bolje na tako mnogo načina.

To je osnovni princip moje metode. Prednosti ovoga su:

  • Upravljanje samo jednim osnovnim simbolom. Doslovno jedan. Ovo se vrlo lako može kopirati između projekata.
  • Ne morate uvoziti SVG / PNG i stavite ih ručno. Svaki put savršeno se postavlja na sredini umetničke ploče.
  • Budući da se sve vaše ikone pohranjuju izvana u datoteku fonta, vaš projekt ostaje vrlo čist i svi mogu dijeliti istu imovinu.

Uredi: Poništavanja su još lakša

Savjet: Ako koristite font ikone Materijal, svaki je glif imenovan. Tako da ovo zapravo možete tipkati kao poništavanje. Pogledajte primjere u nastavku.

Ipak to neće raditi za sve fontove. Samo ako ih je autor ikona ljubazno imenovao.

'Izbrisati'„Poništi”'Udio'
Ako ikona materijala sadrži više riječi u njenom imenu (npr. "Dodaj košaricu"), upotrijebite podvlake ("add_shopping_cart"). Tada će se pokazati dobro.

Fontbook: Vaš zgodan preglednik glifa

Da biste koristili tijek rada, morate biti u mogućnosti zalijepiti ispravan Glyph u okvir za poništavanje simbola. Skica nema način pretraživanja glifova kao druge aplikacije. No, u svaki Mac postoji ugrađeni preglednik Glyph. Zove se Fontbook.

Font Book je idealan preglednik za glifove fonta fonta.

Pokrenite zgodan preglednik glifa

  1. Pritisnite CMD + razmak i upišite Fontbook u središte svjetla.
  2. Pronađite font ikone u Fontbook.
  3. Idite na prikaz> Repertoar na alatnoj traci da biste vidjeli sve glifove.
  4. Podesite veličinu u gornjem desnom kutu na prikladnu ljestvicu. Koristim 18–24px.
  5. Kopirajte i zalijepite svoj Glyph iz fontane u polje za poništavanje simbola Sketch-a.

Fontbook čini sjajan preglednik glifa. Budući da je vanjski prozor prozora Sketch, možete pregledavati i uspoređivati ​​rezultate bez prebacivanja konteksta. Još moram pronaći jednostavnije ili povoljnije rješenje.

Skica i Fontbook mogu biti prijatelji.

Smanjivanje veličine

Gornja metoda izvrsna je za brzo postavljanje ikona, ali za nju su potrebne veličine i veličine boja. Pa evo kako to radim Umnožavam svoje osnovne simbole, preimenovam ih i mijenjam veličinu kako bih stvorio dodatne simbole s nizom kombinacija stilova.

Iako ovo stvara više mogućnosti izbora, također se ograničavam i na samo nekoliko opcija. To je zapravo dobra stvar, rezultira s više dosljednosti. Ograničenje je majka svega dizajna!

Lijepi i dosljedni osnovni stilovi.

skladištenje

Napravio sam stranicu pod nazivom "Simboli / ikone". Ovdje žive svi osnovni simboli (pogledajte gornji lijevi izbornik stranice gore).

Spremanje skupova simbola na zasebne stranice nešto je što radim u sklopu mog tijeka rada. To čini stvari vrlo organiziranim, štoviše olakšava „uvoz” vaših ikona u nove projekte vrlo lako - mogu prevući cijelu ovu stranicu u drugi dokument Sketch i on će ih uvesti. Super je brzo napraviti.

Ova stranica u osnovi postaje vrlo lagana knjižnica koju mogu koristiti u svim dokumentima. Stilovi ostaju vrlo dosljedni.

Uredi: Skica sada podržava Biblioteke, tako da možete spremiti svoje prethodno postavljene ikone u vanjsku datoteku!

Konvencija o imenovanju

glifkon / veličina boje

Ova konvencija o imenovanju djeluje za mene jer simboli lijepo sortiraju u izborniku.

Koristim naziv mape "Glyphicons", a ne "Icons" da bih ih odvojio od ostalih sredstava ikona koja bi mogla ući u moj projekt. "Ikona" je vrlo uobičajeno ime.

Veličine: xs, sm, md, lg, xl, xxl, itd
Boje: tamna, svijetla, sredina, primarna, uspjeh, opasnost, upozorenje.
Naziv primjera: glyphicon / light xl

Smatram da su te klase vrlo fleksibilne. Također se podudaraju s klasama koje koristi Bootstrap, a koji koriste naš dizajnerski i razvojni tim. Razumjet će ih.

Savjet: Boju pozadine ploča umjetničkih ploča postavim na boju ikone. Ovo je osiguravanje boja vidljivih u izborniku "Umetni simbol". Ako nije postavljena pozadina, pregled je prazan. (Obavezno isključite i ovdje "Uključi u izvoz"!).
Postavite boju pozadine za brzi vizualni znak.Izbornik koji je rezultirao. Bojom označeno i organizirano.

Izbacivanje glifa, boja, veličina

Zatim možete promijeniti boju ili veličinu osnovnog simbola pomoću padajućeg izbornika "Zamijeni simbol" na bočnoj traci. Iako promijenite osnovni simbol, glif se zadržava u taktu (tekstna polja moraju biti označena identično).

Osnovni simboli djeluju kao unaprijed postavljeni.

Demo datoteka

Možete isprobati. Ali ako vam se sviđa ova metoda, potičem vas da stvorite vlastite postavke kako biste ih potpuno razumjeli. Tako ćete i steći bolje razumijevanje kako rade simboli.

Simboli čine Sketch izvrsnim.

Preuzmite demo datoteku na Git

Ovo je moj dosadašnji tijek ikona. S vremenom bi se mogao razviti i cijenio bi povratne informacije o tome kako ga je moguće poboljšati.

Hvala!

Daljnje čitanje

  • Slučaj za fontove ikona u Sketch
  • Izrada fontova ikona pomoću Grunta
  • Radni tijek ikone fonta sa Sketch + Grunt
  • Kako koristiti fontove ikona u mobilnim aplikacijama