Kuinka tehdä oman kuvakkeen webfont

Tässä artikkelissa aion tutkia tieteellistä taustasta tehdä onnistuneita UI-kuvakkeita ennen kuin opettaa sinua tekemään oman sulautettavan kuvakkeen fontti .

Yksittäisten kuvakkeiden suunnittelusta muunnettavaksi @font-face upottamalla ja edes lisensoimalla niitä jakeluun, käytämme vain ilmaisia ohjelmistoja ja verkkopalveluja. Entä siitä? Sinun ei tarvitse luottaa mihinkään esoteeriseen tietämykseen, joka tarvitaan onnistuneiden aakkosnumeeristen kirjasinten suorittamiseen; vain silmällä sellaisten asioiden suunnitteluun, jotka voivat näyttää hyvin, hyvin pieniltä.

Viime kädessä sinun pitäisi mennä pois prosessista, jolla voidaan muotoilla elementtejä, jotka ulottuvat kauas yksinkertaisten kuvakkeiden valmistuksen ulkopuolelle.

Ennen kuin jatkamme, meidän on sanottava, mitä juuri yritämme achieve käyttämällä kuvakkeita kuvioissamme ensisijaisesti, ja mikä tekee yhdestä ikonista menestyksekkään kuin seuraavaksi. Teoria ennen soveltamista. Tätä varten meidän on otettava huomioon ikonin rooli osana semiologiaa.

Mikä tekee hyvän kuvakkeen?

semiologian , laajimmassa merkityksessä, on merkintäjärjestelmien tutkimus , miten voimme edistää niiden muodostumista ja ylläpitoa sekä niiden vaikutusta ymmärtämiseen maailmasta sisällä ja ilman meitä.

Aina kun harkitset osaa suunnittelutyöstäsi sen näkökulmasta merkitsee - mitä se sanoo yleisölle tai mitä käsitteitä se muistuttaa heille - harkitset suunnittelua semiotiikkana. Vaikka semiologia, kuten kielitiede, ei peitä kieltä, verkkosivustolla on paljon enemmän asioita, jotka sanovat jotain ilman sanoja, kuten värejä, kirjasimia ja muotoja, joita kutsumme kuvakkeiksi . Olisi varottava, että näillä asioilla on vahva kulttuurinen ulottuvuus. Kiinassa , punainen väri voi merkitä hyvää onnea, kun taas monissa länsimaissa sitä käytetään merkitsemään vaaraa.

(Perustuu kuvaan ell brown )

Termillä "kuvake" on erityinen merkitys semiologian alalla. Kuvake on artefakti, joka merkitsee jotain muistuttaen sitä. Ota esimerkiksi karttapin kuvake . Muotona, joka muistuttaa "todellista" karttatapaa, se pystyy merkitsemään sen. Toisaalta todellinen karttatappi tuo mieleen kaikenlaisia mielekkäitä käsitteitä . Näistä ovat abstraktit käsitteet, kuten sijainti sekä vähemmän abstraktit käsitteet, kuten kartta, johon pin voi kuulua.

Jotkut niin sanotut kuvakkeet eivät ole todella symbolisia. Kaikkialla oleva RSS-kuvake , jossa on pistemäärä ja kaksi samankeskistä ympyräosaa, ei enää muistuta syndikaatiota kuin sanat "Todella yksinkertainen syndikaatio". RSS-kuvaketta muodostavien muodoiden kokoonpano merkitsee RSS: ää yksinään; olemme sopineet, että tämä on se, mitä he ovat. RSS-kuvake on oikeutetusti nimetty RSS-symboli .

Nyt toivon, että olemme todenneet, että menestyneiden verkkokuvakkeiden on täytettävä yksi tai molemmat seuraavista kahdesta kriteeristä:

Vahva yhtäläisyys todelliseen asiaan, esimerkiksi tulostekuvake, joka muistuttaa todellista tulostinta
Perustaminen ja siten tuntemus tunnistettavana merkkinä merkin järjestelmässä

Ikonin fontit ovat suosittuja

Kuvakkeita on pitkään pidetty hyvänä tapana parantaa UI-malleja, koska ne tarjoavat visuaalisen lyhenteen, joka auttaa ymmärtämään muutoin puhtaasti tekstiviestin. Kuvakkeiden kuviot levitetään koko verkkoyhteisöyhteisöön, kuten salakuljetukseen, ja jokainen lupaus tekee suunnittelusta paremman, entistä houkuttelevan ja selkeämmin kuin viimeinen.

Kuvien vertailuun ajatus sulautettujen kirjasimien käyttämisestä kuvakkeille on suhteellisen uusi idea. Se on kuitenkin huomattavaa vetokykyä johtuen monista eduista kuvan yli (tai background-image ) menetelmällä. minä kirjoitti joitain näistä eduista pienessä blogissani syyskuun alussa. Chris Coyier oli ilmeisesti samanlainen idea, ja esitteli idean ( paljon, paljon ) suuremmalle yleisölle viikkoa myöhemmin. Piirustelemalla kahteen tehtävään ja muihin, olen laatinut tämän kattavan luettelon ominaisuuksista:

Ne voidaan helposti muuttaa ilman hajoamista (koska ne ovat olennaisesti vektoreita)
Uudelleenkuviointi kuvakkeesta on yhtä triviaa kuin uudelleenkirjoittava teksti. Esimerkiksi, color: orange RSS-kuvaketta varten
Monet kuvakkeet ryhmitellään yhteen tiedostoon, mikä edellyttää vain yhtä http-pyyntöä
Kuten Chris huomauttaa, ne ovat muotoja, joilla on läpinäkyvät "knockouts", jotka toimivat selaimissa jo IE6 (toisin kuin alfa-PNG)
Kuvakkeiden, jotka pitäisi näkyä tekstin vieressä, kohdistaminen ja kääriminen eivät ole ongelmia (koska ne ovat tekstiä)
Voit käyttää CSS3-tehosteita kautta text-shadow ja background-clip:text jotka kunnioittavat glyfin muotoa
Toisin kuin SVG, cross-browser-tuki on helppo saavuttaa

ongelmat

Chris sanoin, kuvakkeiden fonttien käyttö on hyvä ajatus, kerron teille . Kuitenkin ikoneiden fonttikäytön tilanne ei ole ihanteellinen. Ensinnäkin useimmat laadukkaista kirjasimista, joita kutsutaan esimerkiksi Pictos , Fico , Klepto, Cheetos, Ponyo ja Sailor Moon (Ehkä saattanut joitakin näistä vääristä), ovat maksullisia fontteja. Käytännössä tämä tarkoittaa, että on todellakin kaksi ongelmaa :

Saatat joutua jakamaan rahaa
Riippumatta siitä, onko sinulla osa rahaa vai ei, sinun täytyy hyväksyä joku muu filosofinen suunnittelutyö

Automaattisten indeksointiohjelmien lisäksi oletan, että kyse on enimmäkseen web-suunnittelijoista, jotka lukevat tätä artikkelia. Olen suunnittelija itse ja en usko olevani yksin vastenmielessä ajatusta siitä, että minun täytyy kompromissi minun omasta suunnittelusta luottaen jonkun toisen käsityöhön. Luonnollisesti olen vielä vähemmän innoissaan ajatella maksaa etuoikeudesta. Tiedän, mitä kuvakkeita haluan käyttää ja tiedän tarkalleen, miten haluan räätälöidä heidät yleiseen suunnitteluun. Haluan tämän valvonnan .

Jälkeen jonkin verran etsiä, olin lopulta mahdollisuuksia of Inkscape SVG-fonttieditori . Pienellä käytännöllä Inkscapen avulla ja online-muunnoksen avulla SVG-fontin muuttamiseksi TTF: ään saatoin tehdä "Heydings". Tämä fontti on nyt sisällytetty Simurain luettelo (johon liittyy Coyierin artikkeli). En yritä myydä teitä kirjasimallani (se on joka tapauksessa ilmainen), mutta mielestäni se on melko hyvä todiste käsitteestä :

Kuvakkeiden kuvakkeiden tekeminen Inkscapen kanssa

Inkscape-asetusten määrittäminen

Aloitetaan lataaminen ja asennat Inkscape. Käytä myös kuvakkeen fonttien käynnistysmallia, joka sijaitsee Resurssien kansion sisällä tämä GitHub-arkisto (lisää tästä GitHub-projektista myöhemmin). Kun olet avannut tämän tiedoston uudessa Inkscape-asennuksessa, sinun on määritettävä työtila avaamalla seuraavat ikkunat päävalikosta:

TAVOITE → TÄYTTÄÄ JA SIJOITTAA
TAVOITE → ALIGN ja DISTRIBUTE
TEKSTI → SVG FONT EDITOR

Valitse SVG-fontinmuokkausruudussa Fontti 1. Työtilan pitäisi nyt näyttää jotain tällaista kuvakaappausta:

On syytä huomauttaa, että lähtötilanteessa opas ei ole vahingossa vahingossa kankaan alarajan alapuolella. Jos joku toiseksi tunnistaa, kuvakkeet olisivat hieman ylittäneet kankaan pohjan, jos haluat, että ne jakavat saman perusviivan kuin viereiset kirjasimet. Olen testannut tämän Georgia, Arial ja useita Web-fontteja.

Tee ensimmäinen glyph

Voit määrittää glyfin napsauttamalla SVG- fontinmuokkausruudun Glyphs- välilehteä ja napsauttamalla sitten Lisää Glyph- painiketta ruudun alaosassa. Ensimmäinen tarkastus ei ole välittömästi selvää, mutta jos napsautat glyfsiasi ("Glyph 1"), ilmestyy kenttä, jonka avulla voit kirjoittaa merkin, johon haluat määrittää kuvasi. Teemme ensin yksinkertaisen tähden muodon, joten suosittelen syöttämään merkin "s", "S" tai "*":

Nyt, kun olemme määrittäneet glyfin vastaavan luonteen, meidän on tehtävä sama glyfti. Koska olemme tällä hetkellä tekemässä tähtiä tällä kertaa, meidän on valittava Inkscapen hyödyllinen tähtien ja monikulmioiden työkalu vasemmasta työkalupalkista ja piirrettävä tähti kangasta. Huomaat, että tällä työkalulla on vaihtoehtoja, joiden avulla voit muuttaa tähtien ulkonäköä. Esimerkissani olen valinnut 5 kulmaa, puhuja 0,5 ja pyöristetty arvo 0,1.

Keskitä tähti vaakasuorassa kohdasta Kohdista ja jakaa paneeli (joka saattaa olla piilotettu SVG-fonttieditorin alapuolella) ja vetää muoto alaspäin täyttämään perusviivan. Kun verkko on pois päältä, kankaalle pitäisi näyttää jotain tällaista:

Kuvakkeiden fontissa olevat glysit ovat vain muotoja; muodot ilman värejä, kerroksia tai kaltevuuksia. Joten, jotta tähti olisi oikeutettu ehdokas kirjasimme, meidän on muunnettava se objektista polkuin perustuvalle muodolle. Voit tehdä tämän valitsemalla tähdellä ja valitsemalla päävalikosta PATH → OBJECT TO PATH. Nyt valitun tähdellä voimme siirtyä SVG-fonttieditorille , korostaa sovellettavan "s" -kuvion ja painaa Get-käyrät valintapainikkeesta :

Kun kirjoitat S- mallin kentän "s", tähti tulee nyt esikatseluksi, kuten:

Monimutkaisten kuvakkeiden tekeminen

Olet nyt tehnyt ensimmäisen skaalattavan SVG-kirjasinlehden. Käyttämällä vaihtoehtoja Täytä ja ajetta -ruudusta, muokkaamalla polun solmuja ja yhdistämällä esineitä ja aivohalvauksia pystyt tekemään paljon kunnianhimoisempia kuvakkeita. En halua mennä täydelliseen Inkscape-opetusohjelmaan, koska meillä on paljon enemmän kattamaan, mutta näiden yksinkertaisten sääntöjen noudattaminen kestää sinua hyvänä:

Käytä mustia lyöntejä ja täytä, jos vain muistuttaa, että kuvakkeet ovat vain muotoja, ei monimutkaisia vektorigrafiikkaa. Kuvakkeen väritys on mahdollista lopullisessa tuotteessa CSS: n avulla.
Kaikki kohteet ja aivoitukset (rivit) on muunnettava poluiksi joko PATH → OBJECT TO PATH tai PATH → STROKE TO PATH
Useita esineitä ja / tai aivohyppyjä, joita käytetään muodostamaan yksi kuvake-merkki, on yhdistettävä PATH → COMBINE (tai joissakin tapauksissa PATH → UNION)
Jos haluat leikata muodot pois muodoista (kuten evästeiden leikkaaja), aseta muoto, joka luo "knockout" päämuodon päälle, valitse molemmat ja valitse PATH → DIFFERENCE. Valkoiset musta-alueet, jotka näyttävät "knockout-pisteiltä", eivät riitä, kuten huomaat, kun osut Get curves from selection. Katso sääntö 1.

Valmistetaan fontti upotukseen

Kuvittele, että olet luonut useita hyödyllisiä kuvakkeita fontistasi toistamalla glyph- kututamenetelmää, jonka olen juuri kuvannut ja tallentanut tiedoston myicons.svg . Nyt haluat valmistaa tämän kuvakekirjaston käytettäväksi verkkosivuilla.

SVG: n muuntaminen TTF: ään

Ensimmäinen toimenpide, jonka sinun pitäisi tehdä, on muuntaa SVG fontti tutummaksi ja monipuolisemmaksi. TTF on tärkeä muoto paikalliselle asennukselle ja jakelulle. Se tarjoaa myös hyvän pohjan konversointia varten @font-face vaatimuksista. Online-palvelut, joiden avulla voit muuntaa fontit formaalien välillä ovat http://onlinefontconverter.com/ , http://www.fontconverter.org/ ja http://www.font2web.com/ . Oma suosikki on kuitenkin http://www.freefontconverter.com/ koska en saa jonoa, enkä ole koskaan tiennyt sen palauttavan mitään glitches.

En holhota sinua selittämällä, miten käyttää tätä resurssia. Toistuva tiedoston latauskenttä, valitse elementti ja jättimäinen Muunna -painike puhuvat itsestään, todella.

Fontin metatietojen muokkaaminen

Nyt kun sinulla on TTF kädessäsi, suosittelen muokkaamaan luotuja metatietoja . Kirjasimen nimeäminen, attribuution ja kuvaaminen tyydyttävällä tavalla tekee sen valmiiksi asennettavaksi, upotettavaksi ja jakeluksi . Se on myös tapa osoittaa, että kirjasin on oma työsi. Windowsin lukijoilla on mahdollisuus käyttää petollista suurta kuulostavaa ääntä Microsoftin kirjasinominaisuuseditori tai vapaa-x-päivät Typograf . Apple- ja Linux-käyttäjille kehotan niitä paremmin tiedottamaan kuin auttamani kommentteihin.

Selvä mutta hyödyllinen Font Properties -editori

Tärkeä huomautus: Vaikka Microsoftin kirjasinasetusten muokkausohjelman avulla voit lisätä tekijä-, kuvaus- ja käyttöoikeustietoja, se ei näytä anna sinun muokata perustietoja, kuten fontin nimeä ja postikirjojen nimeä . Nämä kentät on poistettu käytöstä. Jos käytät tätä ohjelmistoa, sinun on löydettävä ja muokattava kiellettyjä arvoja SVG-koodilla ennen TTF-muuntamista. Avaa alkuperäinen SVG suosikki tekstieditorissa (käytän Notepad ++ ) ja muokkaa seuraavaa:

Fontin nimi: Löydetty tagista, font-family ominaisuus

Postscript Name: Löydetty tag, id ominaisuus

Kuvaus: Sinun on lisättävä kuvaus (tekijä, lisenssi jne.) Tunnisteeseen. Huomaa, että tämä ei vastaa TTF: n kuvaustekstiä eikä sitä säilytetä muuntamalla; sinun on lisättävä TTF-kuvaus erikseen.

Fontin upottaminen

Kun olet asentanut TTF: n paikalliseen järjestelmään ja esikatsellut sitä hieman varmistaaksesi, ettei mikään ole mennyt epäonnistumaan, on aika käyttää sitä Font-oravien @ font-face generaattori . Jotta tuotettu koodi olisi mahdollisimman tehokas ja tehokas, generaattorin asiantuntijatilassa on muutamia vaihtoehtoja:

Subsetting: Subsetting- vaihtoehdon avulla voit lisätä vain ne merkit, jotka olet siirtänyt, pienentämällä tiedoston kokoa.

Poista reunus: Kuvakkeet näkyvät lähes aina eristyksissä, joten karkaisu (lisättyjä tietoja merkkien läheisyydestä toisiinsa) ei ole tarpeen. Tämä väistämättä pienentää tiedostokokoa.

WebOnly ™ : Jos olet evankelinen niistä henkilöistä, jotka käyttävät kirjasintasi haluamallasi tavalla - eikä palauta kuvista ulos kuvakkeista Photoshonk - voit valita tämän vaihtoehdon. Se voi myös sopia paremmin lisensointisuunnitelmaan. Käsittelen lisensointi nyt.

Fontin jakaminen

Jos olet kiinnostunut julkaisemaan fonttisi, pidetään hyvänä käytäntönä antaa sille lisenssi. Monet fontti-sivustot eivät kanna fonttisi ilman sitä. Koska käytimme ilmaisia avoimen lähdekoodin ohjelmistoja kuvakkeiden luomiseen, on soveliasta jakaa ne sellaisenaan.

Käytettävissä on monia lisensointivaihtoehtoja ja niiden tutkiminen on joskus hämmentävää. GNU General Public License GNU yleinen julkinen lisenssi on täysin hyväksyttävää, mutta sinun kannattaa harkita sitä SIL Open Font License . Tämän lisenssin tärkein etu on varatun kirjasinnimen tarjoaminen: Muilla suunnittelijoilla on oikeus muuttaa fonttiaan niin kauan kuin ne ovat nimenneet eri tavoin. Käytännössä tämä tarkoittaa sitä, että kuvakkeiden suunnittelusta tehtyjä rikoksia ei voida tehdä "sinun nimellesi".

Jos kyseessä on jompikumpi lisenssi, sinun on sisällytettävä versio tekstitiedostoon sekä lisännyt tekijänoikeusilmoitus ja linkki koko lisenssin URL-osoitteeseen fontin metaani. Katso tarkemmat ohjeet vastaavan lisenssisivun (edellä linkitetty) kautta.

CSS-spritingin loppu

Miksi lopettaa yleisten kuvakkeiden luominen SVG-fonttien avulla? Kuvanmuodostuskyky kykenee tekemään enemmän sivustokohtaisia muotoja, brändäyselementtejä ja koristeet. Kuten CSS sprites , kaikki näistä visuaalisista elementeistä voidaan säilyttää yhdessä tiedostossa, vähentäen palvelinkutsuja yksittäiseen HTTP-pyyntöön . Toisin kuin CSS-spritsejä, elementit ovat sekä resizeable että position-koordinaateista riippumattomia ( background-position arvot). Tämä tekee niistä hellävaraisesti paremmin reagoivan suunnittelun .

Teeskennellä, että päätin käyttää SVG-fonttia kattamaan joitain perusrakenteellisia elementtejä epämääräisesti steampunk -Kuten blogi . Yksinkertainen HTML-taulukko tekee komponenttisuunnittelusta jotain tällaista:

Yksi parhaista asioista tässä lähestymistavassa on monipuolisuus. Esimerkiksi vasemmalla olevan toisen hammasmuodon muotoa voidaan käyttää sekä pienenä luodipistekuviona että jättimäisenä, abstrakti taustakuvana . Värjäys on yhtä helppoa kuin käytössä color:maroon , mutta ei tarvitse noudattaa tasomaisia värejä; monia CSS3- tehosteita voidaan käyttää tekstuurin ja kosketuksen lisäämiseen. Jos haluat insinöörin aloittaa, tutki tämä erinomainen CSS3-parannettujen webfont-galleria .

Nopea muistiinpano näytönlukijoista

Yksi ongelma fonttien käyttämisessä visuaalisten elementtien näyttämiseksi tällä tavalla on vaikutus näytönlukija ulostulo. Vieraileva sivusto visuaalisesti luettavaan sivustoon näkee hammasrattaita, nuolia ja muita vastaavia, mutta näytönlukija vaatii lukemaan merkkejä, jotka määrittelevät näitä malleja. Käytettävissä olevien SVG-fonttielementtien käyttöä suosittelen Coyierin ehdotuksen huomioimista: Määritä vektorit Täydentävä yksityinen käyttöalue Unicodesta. Tällaisia merkkejä ei pitäisi lukea lukijoilta.

Yhteistyökumppanikuvake webfont

Kuten minun JavaScript mentori, Rupert , huomautti minulle toinen päivä, käyttämällä SVG-fontteja kuvakekokoelmien luomiseen tarjoaa mielenkiintoisen yhteistyön mahdollisuuden. Näet, että SVG-koodi - joka on XML- muoto - on erittäin standardoitu ja helposti luettavissa ihmisen luettavaksi. Se on juuri sellainen lähdekoodi, joka sopii kehitykseen käyttämällä "sosiaalista koodausta" palvelua kuten GitHub .

Ajatus resonoi kanssani sen semiotiikan vaikutuksista: Jos kuvakkeen ymmärrettävyys määräytyy konsensuksen perusteella , silloin myös konsensuksella pitäisi olla rooli sen muodostumisessa. Yhteistyöllä kuvakkeen "merkkijärjestelmän" yli, vain kaikkein archetypal ikoni kuvioita tulee esiin. Meidän pitäisi pystyä luomaan kuvasanoja, jotka todella kuuluvat yhteisöihin, joille heidän pitäisi tarkoittaa jotain.

Olen luonut julkisen GitHub-tietovaraston, joka auttaisi edistämään tätä ajatusta. Nimeltään Yhteisön kuvake fontti , arkiston koodipohja ei ole monimutkainen: edellisen Inkscape-opetusohjelman tarkka tarkastus ja nopea lukeminen projektisivulla pitäisi antaa sinulle kaikki, mitä tarvitset osallistumaan. Jos olet uusi GitHub, yritä katsella heidän Ohje-sivuja tai pyytämällä naapurustasi techie (se mitä teen).

typografia Web-suunnittelu kuvakkeet kirjasimet kuvakkeen suunnittelu webfonts Inkscape

Kuinka tehdä oman kuvakkeen Webfont