Hvernig á að búa til eigin táknið þitt Webfont
Í þessari grein ætla ég að skoða vísindin á bak við að gera árangursríka UI tákn áður en þú kennir þér hvernig á að búa til eigin innbyggða leturgerðina þína .
Frá að hanna einstaka tákn til að breyta þeim fyrir @font-face embedding, og jafnvel leyfi þeim til dreifingar, eigum við aðeins að nota ókeypis hugbúnað og netþjónustu. Hvað með þetta? Þú þarft ekki að treysta á einhverja esoteric þekkingu sem þarf til að búa til árangursríka stafatöflu; bara auga fyrir að hanna hluti sem geta virst mjög, mjög lítill.
Að lokum ættir þú að fara í burtu með ferli til að búa til hönnunarmiðla sem nær langt út fyrir framleiðslu á einföldum táknum.
Áður en við höldum áfram ætti að segja eitthvað um hvað nákvæmlega við erum að reyna achieve með því að nota tákn í hönnun okkar í fyrsta lagi og hvað gerir eitt tákn meira vel en næst. Saga fyrir umsókn. Til þess að gera þetta, verðum við að íhuga hlutverk helgimyndarinnar sem hluti af hálffræði.
Hvað gerir gott tákn?
Sálfræði Í víðtækasta skilningi er rannsókn á skilti kerfi , hvernig við stuðlar að myndun og viðhaldi og áhrifum þeirra á skilning okkar á heiminum innan og utan okkar.
Hvenær sem þú telur hluti af hönnuninni þinni frá sjónarhóli hvað það táknar - hvað það er að segja til áhorfenda þína eða hvaða hugmyndir það er að muna fyrir þá - þú ert að íhuga hönnunina sem hálfleiðandi. Þótt hálffræði, eins og málvísindi, nær yfir tungumál, eru margt fleira á vefsíðum sem "segja" eitthvað án orða, eins og liti, letur og form sem við köllum tákn . Það ætti að vera á varðbergi gagnvart því að það sem þetta segist hefur sterkan menningarþætti. Í Kína , liturinn rauður getur bent til hamingju en í mörgum vestrænum löndum er það notað til að tákna hættu.
Hugtakið "táknið" hefur sérstaka merkingu á sviði hálffræðinnar. Táknmynd er artifact sem táknar eitthvað með því að líkjast því. Taktu til dæmis kortatáknmynd . Sem lögun sem líkist "alvöru" kortapinnanum er hægt að merkja það. Aftur á móti kemur alvöru kortapinnan í hug allar tegundir af mikilvægum hugtökum . Meðal þessara eru abstrakt hugtök, svo sem staðsetning og minna abstrakt hugtök, eins og kortið sem spjaldið gæti tilheyrt.
Sumir svokölluðu tákn eru ekki sannarlega helgimyndar. Fjölbreytt RSS táknið , með punktur hennar og tveimur sammiðjahringum, lítur ekki lengur á samkynhneigð en orðin "Really Simple Syndication" líkjast því. Stillingar forma sem tákna RSS táknið tákna RSS eftir venju einum; Við höfum samþykkt að þetta sé það sem þeir eru fyrir. RSS-tákn er meira almennt kallað RSS-tákn .
Núna vona ég að við höfum staðfest að árangursríkar vefurartákn ættu að uppfylla eitt eða báðar eftirfarandi tvö skilyrði:
- Sterk líkindi við raunverulegan hlut, til dæmis prentunarmerki sem líkist raunverulegum prentara
- Stofnun og því þekking sem viðurkennd tákn innan skilti kerfisins
Táknmyndartákn fá vinsældir
Táknin hafa lengi verið talin góð leið til að auka UI-hönnun vegna þess að þeir veita sjónskýringu sem hjálpar skilningi annars eðlis textaskilaboða. Blöð táknmynda eru dreift í gegnum vefhönnunarsamfélagið eins og smygl, hvort sem það er vænlegt að gera hönnunina skínandi, meira tæla og smelltu meira en það síðasta.
Í samanburði við myndir er hugmyndin um að nota innbyggð letur fyrir tákn tiltölulega ný hugmynd. Hins vegar er það eitt sem vinnur umtalsvert grip vegna margra, íhluta kosta yfir myndina (eða background-image ) aðferð. Ég skrifaði um nokkrar af þessum kostum á litlu blogginu mínu í byrjun september. Chris Coyier augljóslega hafði svipaða hugmynd og kynnti hugmyndina að ( miklu, miklu ) stærri áhorfendum vikum síðar. Teikning á tveimur innleggunum og öðrum, ég hef safnað þessari alhliða lista yfir eiginleika:
- Þeir eru auðveldlega breyttar án niðurbrots (vegna þess að þeir eru í raun vektorar)
- Recoloring táknið er eins léttvæg og recoloring texti. Til dæmis,
color: orangefyrir RSS-tákn - Mörg tákn eru flokkuð í eina skrá og þarfnast aðeins eina http-beiðni
- Eins og Chris bendir á, eru þau form sem hafa gagnsæ "knockouts" sem virka í vafra eins fljótt og IE6 (ólíkt alfa PNG)
- Fyrir tákn sem eiga að birtast við hliðina á texta eru röðun og umbúðir ekki vandamál (vegna þess að þau eru texti)
- Þú getur sótt um CSS3 áhrif um
text-shadowogbackground-clip:textsem virða lögun gljúfunnar - Ólíkt SVG er stuðningur við vafra auðvelt að ná
Vandamál
Í orðum Chris er að nota letur fyrir táknin góð hugmynd, ég segi þér
. Engu að síður er stöðuskilyrðin um táknnotkun notkunar ekki tilvalin. Í fyrsta lagi eru flestir gæði letursins tiltækir, kallaðir hlutir eins og Myndir , Fico , Klepto, Cheetos, Ponyo og Sailor Moon (Ég gæti fengið eitthvað af þessu rangt), eru greiddir fyrir leturgerðir. Í reynd þýðir þetta að það eru tvö vandamál :
- Þú gætir þurft að deila með peningum
- Hvort sem þú þarft að deila með peningum eða ekki, verður þú að samþykkja hreint hönnunarmann annars manns
Innskot frá sjálfvirkum vefskriðlarum er gert ráð fyrir að það sé að mestu leyti vefhönnuðir sem vilja lesa þessa grein. Ég er hönnuður sjálfur og ég held ekki að ég sé einn í því að resenting hugmyndina um að þurfa að málamiðlun eigin hönnun með því að reiða mig á handverksverk einhvers annars. Auðvitað er ég jafnvel minna enamored með hugsunina um að borga fyrir forréttindi. Ég veit hvaða tákn ég vil nota og ég veit nákvæmlega hvernig ég vil aðlaga þá í heildarhönnunina. Ég vil stjórna því .
Eftir nokkrar leitir var ég að lokum kynnt um möguleika af Inkscape SVG Font Editor . Með smá æfingu með því að nota Inkscape og hjálp vefkúla til að umbreyta SVG letur mínum inn í TTF, gat ég búið til "Heydings". Þetta letur er nú með í Listi Simurai (sem tengist greininni af Coyier). Ég er ekki að reyna að selja þér letrið mitt (það er ókeypis samt) en ég held að það skapi nokkuð gott sönnun fyrir hugmyndinni :
Gerðu táknmynd glímur með Inkscape
Uppsetning Inkscape
Við skulum byrja með niðurhal og setja upp Inkscape. Þú ættir líka að nota táknið leturgerðartafla míns, sem er staðsett í auðlindarmöppunni á þetta GitHub geymsla (meira um þetta GitHub verkefni síðar). Þegar þú hefur opnað þessa skrá í nýja Inkscape uppsetningu þinni ættir þú að setja upp vinnusvæði með því að opna eftirfarandi glugga úr aðalvalmyndinni:
- OBJECT → FYLLA OG STROKE
- OBJECT → ALIGN OG DISTRIBUTE
- TEXT → SVG FONT EDITOR
Smelltu á "Font 1" undir "letur" í SVG leturstærð ritstjórans. Vinnusvæði þín ætti nú að líta eitthvað eins og þessa skjámynd:
Það er þess virði að benda á að grunngildi Leiðbeiningar eru ekki fyrir neðan neðri mörk striga við mistök: Af ástæðum sem þú þekkir einhvern annan, ætti táknin þín mjög örlítið að liggja yfir botninn á striga ef þú vilt að þau deila sömu grunnlínu og aðliggjandi leturgerð. Ég hef prófað þetta með Georgíu, Arial og nokkrum vefritum.
Gerir fyrsta gljúfrið þitt
Til að skilgreina gluggann skaltu smella á flipann Glyphs í SVG Font Editor-glugganum og smelltu síðan á Add Glyph hnappinn í neðri hluta glugganum. Það er ekki strax ljóst á fyrstu skoðuninni, en ef þú smellir á gluggann þinn ("Glyph 1") birtist reit sem leyfir þér að slá inn stafinn sem þú vilt tengja táknið þitt við. Við munum gera einfalda stjörnuform fyrst og fremst, svo ég mæli með að þú slærð inn stafinn "s", "S" eða "*":
Nú þegar við höfum skilgreint samsvarandi staf, þá þurfum við að gera gluggann sjálfan. Þar sem við erum bara að gera stjörnu í þetta sinn, ættum við að velja hjálpsamur Stars og Polygons tól frá Inkscape til vinstri tækjastikunnar og teikna stjörnu í striga. Þú munt taka eftir því að þetta tól kemur með valkosti sem gerir þér kleift að breyta útliti stjörnunnar. Í mínu dæmi hefur ég valið 5 horn, talað hlutfall 0,5 og ávalið gildi 0,1.
Miðjaðu stjörnuna lárétt með því að nota hnappinn Align and Distribute (sem kann að vera falið fyrir neðan SVG leturgerðir ) og draga lögunina niður til að mæta grunnlinlinum. Þegar ristið er slökkt, þá ætti striga að líta svona út:
Glyphs í leturgerðinni okkar eru bara form; form með engum litum, lögum eða stigum. Svo, til að gera stjörnuna okkar lögmæt frambjóðandi fyrir leturgerðina okkar, verðum við að breyta því frá hlut í slóð sem byggir á formi. Til að gera þetta skaltu velja stjörnuna og velja PATH → OBJECT TO PATH í aðalvalmyndinni. Nú, með stjörnuna sem valin er, getum við farið í SVG Font Editor okkar , lagt áherslu á viðeigandi "s" glugga og smellt á Fá línur úr valhnappinum:
Þegar þú slærð inn "s" í reitinn fyrir reitinn, þá ætti stjarnan þín nú að birtast sem forsýning, eins og svo:
Gerðu flóknari tákn
Þú hefur nú gert fyrsta skalanlegt SVG leturgluggann. Með því að nota valkosti úr fylla og höggdeildinni , breyta hnúta og breyta hlutum og höggum geturðu gert mikið metnaðarfullt táknmynd. Ég vil ekki fara í fulla Inkscape kennslu vegna þess að við eigum mikið meira til að ná, en eftir þessar einföldu reglur munum við standa þig vel:
- Haltu áfram að nota svörtum höggum og fyllingum, ef aðeins til að minna þig á að táknin séu bara form, ekki flókin vektorgrafík. Litað táknið er mögulegt í endanlegri vöru með því að nota CSS.
- Allir hlutir og högg (línur) verða að breyta í slóðir með því að nota annaðhvort PATH → OBJECT TO PATH eða PATH → SLIP TO PATH
- Margfeldi hluti og / eða högg sem notaðir eru til að búa til eitt táknið glyph ætti að sameina með PATH → COMBINE (eða, í sumum tilvikum, PATH → UNION)
- Til að skera form út úr formum (eins og með því að nota kexskúffu) skaltu setja formið sem mun skapa "knockout" yfir aðalformið, veldu bæði og veldu PATH → DIFFERENCE. Hvítt svæði á svörtu sem líta út eins og "knockouts" mun ekki nægja, eins og þú munt uppgötva þegar þú smellir Fáðu línur í vali Sjá reglu 1.
Undirbúningur letur fyrir innbyggingu
Ímyndaðu þér að þú hafir gengið til að búa til nokkrar gagnlegar tákn fyrir letrið þitt með því að endurtaka glyph hrygninguna sem ég hef bara lýst og vistað sem myicons.svg . Nú viltu undirbúa þetta táknmyndasafn til notkunar á vefsíðum.
Umbreyti SVG til TTF
Fyrsta málið sem þú ættir að taka er að umbreyta @font-face kröfur. Online þjónusta sem gerir þér kleift að umbreyta leturgerðir á milli sniða eru http://onlinefontconverter.com/ , http://www.fontconverter.org/ og http://www.font2web.com/ . Persónulega uppáhaldið mitt er hins vegar http://www.freefontconverter.com/ vegna þess að ég fæ ekki í biðstöðu og ég hef aldrei vitað það að skila einhverjum galli.
Ég mun ekki patronize þig með því að útskýra hvernig á að nota þessa síðu. Áframhaldandi skrá upphleðsla sviði, veldu þáttur og risastór Umbreyta hnappur tala fyrir sig, í raun.
Breyting á metaupplýsingum letursins
Nú þegar þú ert með TTF í hendi þinni, mælum við með að þú breytir mynda metadata . Endurnefna, rekja og lýsa leturgerðinni til fullnustu þinnar gerir það tilbúið til uppsetningar, innbyggingar og dreifingar . Það er líka leið til að sýna að letrið er þitt eigið verk. Lesendur sem keyra Windows hafa möguleika á að nota sviksamlega hljómandi Microsoft Font Properties Editor eða ókeypis-fyrir-x daga Typograf . Fyrir Apple og Linux notendur bið ég þá betur upplýst en ég er að hjálpa í athugasemdunum.
The clunky en nothæf Font Properties Editor
Mikilvægur athugasemd: Þó að ritstjórinn fyrir Microsoft leturgerðir leyfir þér að bæta við höfundar-, lýsingar- og leyfisupplýsingum virðist það ekki leyfa þér að breyta grunngögnum, svo sem leturheiti og eftirskriftarheiti . Þessir reitir eru óvirkir. Ef þú notar þetta tiltekna hugbúnað þarftu að finna og breyta bönnuð gildi í SVG kóðanum fyrir TTF viðskipti. Opnaðu upprunalega SVG í uppáhalds textaritlinum þínum (ég nota Notepad + + ) og breyttu eftirfarandi:
Leturgerð: finnast í merkjum, font-family eigindi
Postscript Name: Fann í tagi, id eigindi
Lýsing: Þú ættir að bæta við lýsingu (höfundur, leyfi osfrv.) Í merkinu. Vinsamlegast athugaðu að þetta er ekki jafngilt TTF lýsingu texta og verður ekki varðveitt í gegnum viðskipti; þú verður að bæta við TTF lýsingu sérstaklega.
Gerðu letur innbyggðan
Þegar þú hefur sett upp TTF á staðbundnu kerfinu þínu og sýnt það smá til að ganga úr skugga um að ekkert hafi farið úrskeiðis, þá er kominn tími til að keyra það í gegnum letur íkorna @ font-andlit rafall . Til að gera úthlutað kóða eins skilvirkt og skilvirkt og mögulegt er, þá eru nokkrar möguleikar sem eiga sér stað í sérfræðingsstillingum rafallarinnar:
Subsetting: The subsetting valkosturinn gerir þér kleift að innihalda aðeins stafina sem þú hefur falið, draga úr skráarstærð.
Fjarlægðu kerning: Táknin þín munu nánast alltaf birtast í einangrun, þannig að kerning (viðbótarupplýsingar um nálægð stafir til annars) er ekki nauðsynleg. Þetta mun, að sögn, draga úr skráarstærð eins og heilbrigður.
WebOnly ™ : Ef þú ert evangelical um fólk sem notar letrið þitt eins og ætlað er - og ekki aftur á að gera myndir úr gluggum í Photoshonk - þú getur valið þennan valkost. Það gæti líka passað leyfisveitingaráætlunina þína. Ég mun ná leyfi núna.
Dreifa leturgerðinni þinni
Ef þú hefur áhuga á að gefa út leturgerðina þína er talið gott að gefa það leyfi. Margir leturgerðir munu ekki bera letrið þitt án þess að vera einn. Þar sem við notuðum ókeypis, opinn hugbúnað til að gera táknin, það er viðeigandi að við ættum að dreifa þeim sem slíkum.
There ert margir leyfi valkostur í boði og rannsaka þá er stundum pirrandi. The GNU General Public License er fullkomlega ásættanlegt, en þú gætir viljað íhuga SIL Open Font Leyfi . Helstu kosturinn við þetta leyfi er að veita áskilinn leturgerðarnúmer : Aðrir hönnuðir mega breyta leturgerðinni svo lengi sem þeir nefna það öðruvísi. Í reynd þýðir þetta að glæpi gegn táknmyndum sé ekki hægt að framkvæma "í þínu nafni".
Ef um er að ræða annaðhvort leyfi ættir þú að innihalda útgáfu í textaskrá, auk þess að setja upp höfundarréttarviðvörunina og tengil á fullan leyfisveituslóð í meta letursins. Farðu á viðkomandi leyfisveitandi síður (tengd hér að ofan) til að fá nánari leiðbeiningar.
Enda CSS ritun
Afhverju hættir þú að gera almennar tákn með SVG leturgerð? Með hæfileikanum til að búa til tákn kemur hæfileiki til að búa til fleiri svæðisbundnar stærðir, vörumerki og skreytingar. Eins CSS sprites , allar þessar sjónrænu þættir geta verið geymdir í einum skrá, sem dregur úr símtali símtala í eintölu http beiðni . Ólíkt CSS sprites eru þættirnir bæði stærðarhæfir og ekki háð stöðuhnitum (
background-position gildi) til að sýna rétt. Þetta gerir þeim betur í stakk búið til móttækilegrar hönnun .
Við skulum þykjast að ég valdi að nota SVG leturgerð til að hylja nokkrar undirstöðuþættir hönnunarinnar á óljósan hátt steampunk -likk blogg . Einföld HTML tafla flutningur á hönnun efnisins myndi líta svona út:
Einn af bestu hlutunum um þessa nálgun er fjölhæfni. Til dæmis, annarri cog formi frá vinstri gæti verið notaður sem bæði örlítið bullet punkt hönnun og risastór, abstrakt bakgrunn skraut . Litun er eins auðvelt og að nota color:maroon , en það er engin þörf á að fylgja íbúðum litum; Fjölmargir CSS3 áhrif geta verið notaðar til að bæta við áferð og taktility. Fyrir smá innblástur til að hefjast handa skaltu skoða þetta framúrskarandi gallerí af CSS3-auka vefmyndum .
A fljótur minnispunktur um skjá lesendur
Eitt vandamál með því að nota leturgerðir til að sýna sjónræna þætti á þennan hátt er áhrifin á skjálesari framleiðsla. A gestur á síðuna sem lesa sjónrænt mun sjá tönn, örvar og þess háttar, en skjálesari mun krefjast þess að lesa út stafina sem tilnefna þessa hönnun. Fyrir notkun SVG leturgerðarefna sem eru skreytingar, mælum við með því að hugleiða fyrirmæli Coyier: Taktu vektorana við Viðbótarupplýsingar um einkanota af Unicode. Slíkar persónur ættu ekki að lesa af lesendum.
Samstarfsmerki webfont
Sem JavaScript leiðbeinandi minn, Rupert , benti mér á daginn með því að nota SVG leturgerðir til að búa til táknmyndatökur sem bjóða upp á áhugavert tækifæri til samvinnu. Þú sérð, SVG kóða - sem er form XML - er mjög staðlað og auðvelt að lesa. Það er einmitt sú tegund af uppspretta kóða sem hentar þróun með því að nota "félagslega erfðaskrá" þjónustu eins og GitHub .
Hugmyndin resonated með mér fyrir hálfvitandi afleiðingar þess: Ef hugsanlegt tákn er ákvörðuð með samstöðu , þá ætti vissulega samstaða einnig að gegna hlutverki í myndun þess. Með því að vinna saman yfir táknið okkar "táknkerfi", þá ætti aðeins að koma fram í flestum formúluverkum. Við ættum að geta búið til táknorð sem eru sannarlega tilheyra þeim samfélögum sem þeir ættu að þýða eitthvað fyrir.
Ég hef búið til opinbera GitHub geymslu til að stuðla að þessari hugmynd. Kallað Táknmynd samfélagsins , kóðinn í geymslunni er ekki flókin: Nákvæmt eftirlit með undanfarandi Inkscape námskeiðinu og fljótleg lesa af verkefni síðu ætti að gefa þér allt sem þú þarft til að taka þátt. Ef þú ert nýr GitHub skaltu reyna að horfa á þær hjálparsíður eða spyrðu tæknihverfið þitt (það er það sem ég geri).