Sådan laver du dit eget ikon webfont

I denne artikel skal jeg undersøge videnskaben bag at lave vellykkede brugergrænseflader, før jeg lærer dig, hvordan du laver din egen indlejrede ikonfont .

Fra at designe de enkelte ikoner til at konvertere dem til @font-face indlejring, og endda licensiering dem til distribution, skal vi kun bruge gratis software og onlinetjenester. Hvad med det? Du behøver ikke at stole på nogen af de esoteriske viden, der kræves for at lave succesfulde alfanumeriske skrifttyper; bare et øje med at designe ting, der kan synes meget, meget små.

I sidste ende bør du gå væk med en proces til at lave designelementer, der strækker sig langt ud over fremstillingen af enkle ikoner.

Før vi fortsætter, skal der siges noget om, hvad vi lige prøver achieve ved at bruge ikoner i vores designs i første omgang, og hvad gør et ikon mere succesfuldt end det næste. Teori inden ansøgning. For at gøre dette skal vi overveje ikonets rolle som en del af semiologi.

Hvad laver et godt ikon?

semiologi i videste forstand er undersøgelsen af tegnsystemer , hvordan vi bidrager til deres dannelse og vedligeholdelse og deres indvirkning på vores forståelse af verden indenfor og uden os.

Når du overvejer en del af dit designarbejde ud fra hvad det er betegner - hvad det siger til dit publikum eller hvilke begreber det minder om dem - du overvejer dit design som semiotikere. Selv om semiologi, som lingvistik, dækker sprog, er der mange flere ting på en hjemmeside, der "siger" noget uden ord, såsom farver, skrifttyper og de former, vi kalder ikoner . Man bør være forsigtig med, at hvad disse ting siger, har en stærk kulturel dimension. I Kina , farven rød kan betyde lykke, mens det i mange vestlige lande er brugt til at betegne fare.

(Baseret på et billede af ell brun )

Udtrykket "ikon" har en særlig betydning inden for semiologi. Et ikon er en artefakt, der betyder noget ved at ligne det. Tag f.eks. Et kortpindikon . Som en form, der ligner en "ægte" kortpind, er den i stand til at betegne den. Til gengæld kommer den virkelige kortpind til at tænke på alle mulige meningsfulde begreber . Blandt disse er abstrakte begreber som placering samt mindre abstrakte begreber, som det kort, som stiften kan tilhøre.

Nogle såkaldte ikoner er ikke helt ikoniske. Det allestedsnærværende RSS-ikon med sin prikk og to koncentriske cirkelsegmenter ligner ikke mere syndikation end ordene "Really Simple Syndication" ligner det. Konfigurationen af formularer, der udgør RSS-ikonet, betyder, at RSS alene er en konvention; vi er blevet enige om, at dette er hvad de er til. Et RSS-ikon er mere korrekt kaldt et RSS-symbol .

På nuværende tidspunkt håber jeg, at vi har fastslået, at vellykkede webikoner skal opfylde et eller begge af følgende to kriterier:

En stærk lighed med en rigtig ting, for eksempel et printikon, der ligner en faktisk printer
Etablering og dermed bekendtskab som et genkendeligt symbol inden for tegnsystemet

Ikon skrifttyper vinder popularitet

Ikoner har længe været betragtet som en god måde at forbedre UI-design, fordi de giver en visuel stenografi, som hjælper forståelsen af en ellers rent tekstlig besked. Ark af ikonbilleder cirkuleres i hele webdesignsamfundet som smugler, hver sæt lovende at gøre dit design skinnere, mere tiltrækkende og mere klikbart end det sidste.

Sammenlignet med billeder er ideen om at bruge indlejrede skrifttyper til ikoner en relativt ny ide. Men det er en, der får en betydelig trækkraft på grund af de mange iboende fordele i forhold til billedet (eller background-image ) metode. jeg skrev om nogle af disse fordele på min lille blog tilbage i begyndelsen af september. Chris Coyier åbenbart havde en lignende ide, introducerede ideen til et ( meget, meget ) større publikum uger senere. På baggrund af de to indlæg og andre har jeg samlet denne omfattende liste over funktioner:

De ændres let uden nedbrydning (fordi de er væsentlige vektorer)
Recoloring ikonet er lige så trivielt som recoloring tekst. For eksempel, color: orange til et RSS-ikon
Mange ikoner er grupperet i én fil, der kræver kun en http-anmodning
Som Chris påpeger, er de former, der har gennemsigtige "knockouts", der arbejder i browsere så tidligt som IE6 (i modsætning til alpha PNG'er)
For ikoner, der skal vises ved siden af teksten, er justering og indpakning ikke-problemer (fordi de er tekst)
Du kan anvende CSS3 effekter via text-shadow og background-clip:text der respekterer glyphens form
I modsætning til SVG er cross-browser support nem at opnå

Problemer

I Chris ord er brug af skrifttyper til ikoner en god ide, jeg fortæller dig . Ikke desto mindre er status quo vedrørende ikon skrifttype forbrug ikke ideel. For det første, de fleste af de tilgængelige kvalitetsfonte, kaldte ting som pictos , Fico , Klepto, Cheetos, Ponyo og Sejlmånen (Jeg har måske fået nogle af disse forkerte), er betalt for skrifttyper. I praksis betyder det, at der virkelig er to problemer :

Du skal muligvis dele med penge
Uanset om du skal dele med penge eller ej, skal du acceptere en andens skøre designarbejde

Bortset fra automatiserede crawler-programmer antager jeg, at det for det meste er webdesignere, der læser denne artikel. Jeg er selvstændig designer, og jeg tror ikke, jeg er alene for at genskabe ideen om at skulle kompromittere mit eget design ved at stole på andres håndarbejde. Naturligvis er jeg endnu mindre enamored med tanken om at betale for privilegiet. Jeg ved, hvilke ikoner jeg vil bruge, og jeg ved præcis, hvordan jeg vil skræddersy dem til mit overordnede design. Jeg vil have den kontrol .

Efter lidt søgning var jeg til sidst introduceret til mulighederne af Inkscape s SVG Font Editor . Med lidt øvelse ved hjælp af Inkscape og hjælp fra en online-konverter til at omdanne min SVG-skrifttype til en TTF, kunne jeg lave "Heydings". Denne skrifttype er nu inkluderet i Simurai's liste (som knyttet til Coyiers artikel). Jeg forsøger ikke at sælge dig min skrifttype (det er alligevel gratis), men jeg synes det giver et ret godt bevis på konceptet :

Gør ikon glyphs med Inkscape

Opsætning af Inkscape

Lad os komme i gang med downloading og installere Inkscape. Du skal også bruge min skabelon startskabelon, der findes i ressourcemappen til dette GitHub repository (mere om dette GitHub projekt senere). Når du har åbnet denne fil i din nye Inkscape-installation, skal du oprette dit arbejdsområde ved at åbne følgende vinduer i hovedmenuen:

OBJECT → FILL AND STROKE
OBJECT → ALIGN AND DISTRIBUTE
TEKST → SVG FONT EDITOR

Klik på "Font 1" under "Font" i SVG Font Editor-ruden. Dit arbejdsområde skal nu se noget som dette skærmbillede:

Det er værd at påpege, at baseline guide er ikke under undersiden af lærredet ved en fejltagelse: Af de grunde, der er bedst kendt for nogen andre, skal dine ikoner meget overhængende bunden af lærredet, hvis du ønsker dem at dele samme basislinje som tilstødende skrifttyper. Jeg har testet dette med Georgia, Arial og en række web skrifttyper.

Gør din første glyph

For at definere glyphen skal du klikke på fanen Glyphs i vinduet SVG Font Editor og derefter klikke på knappen Tilføj Glyph i den nederste del af ruden. Det er ikke umiddelbart klart ved første inspektion, men hvis du klikker på din glyph ("Glyph 1") vises et felt, som giver dig mulighed for at indtaste det tegn, som du vil tildele dit ikon til. Vi skal først lave en simpel stjerneform, så jeg anbefaler at du indtaster tegnet "s", "S" eller "*":

Nu hvor vi har defineret glyphs tilsvarende karakter, skal vi gøre glyfen selv. Da vi bare laver en stjerne denne gang, skal vi vælge Inkscapes hjælpsomme Stjerner og Polygoner-værktøj fra venstre værktøjslinje og tegne en stjerne i lærredet. Du vil bemærke, at dette værktøj leveres med muligheder, der giver dig mulighed for at ændre udseendet af stjernen. I mit eksempel har jeg valgt 5 hjørner, et talet forhold på 0,5 og en afrundet værdi på 0,1.

Centrere stjernen vandret ved hjælp af panelet Juster og distribuér (som kan være skjult under SVG Font Editor ) og træk formen nedad for at opfylde basislinjen. Med gitteret slukket, skal lærredet se sådan ud:

Glyfer i vores ikon skrifttype er kun former; former uden farver, lag eller gradienter. Så for at gøre vores stjerne til en legitim kandidat til vores skrifttype, skal vi konvertere det fra en genstand til en banebaseret form. For at gøre dette skal du vælge stjernen og vælge PATH → OBJECT TO PATH fra hovedmenuen. Nu, med stjernen valgt, kan vi gå til vores SVG Font Editor , markere den gældende "s" glyph og trykke på Get kurverne fra valgknappen:

Når du indtaster "s" i feltet Eksempeltekst , skal din stjerne nu vises som et eksempel, sådan:

Gør mere komplekse ikoner

Du har nu lavet din første skalerbare SVG font glyph. Ved at bruge valgmuligheder fra fyld og strejfruden , redigeringsvejsknuder og kombination af objekter og slagtilfælde kan du lave meget mere ambitiøse ikondesigner. Jeg vil ikke gå ind i en fuld Inkscape-vejledning, fordi vi har meget mere at dække, men efter disse enkle regler vil du stå i god stand:

Hold dig til at bruge sorte slag og udfyldninger, hvis du kun vil minde om, at ikonerne kun er former, ikke komplekse vektorgrafik. Farvning af ikonet er muligt i slutproduktet ved hjælp af CSS.
Alle objekter og streger (linjer) skal konverteres til stier ved hjælp af enten PATH → OBJECT TO PATH eller PATH → STROKE TO PATH
Flere objekter og / eller streger, der bruges til at sammensætte et ikon glyph, skal kombineres sammen med PATH → COMBINE (eller i nogle tilfælde PATH → UNION)
For at skære figurer ud af figurer (som ved at bruge en kiksskærer) skal du placere den form, der vil skabe "knockout" over hovedformen, vælg begge og vælg PATH → FORSKEL. Hvide områder på sort, der ligner "knockouts", er ikke tilstrækkelige, som du vil opdage, når du rammer Få kurver fra valg Se regel 1.

Forbereder din skrifttype til indlejring

Forestil dig at du er ved at oprette en række nyttige ikoner til din skrifttype ved at gentage glyph gyning metoden, som jeg lige har beskrevet og gemt filen som myicons.svg . Nu vil du gerne forberede dette ikonbibliotek til brug på websider.

Konvertering af SVG til TTF

Det første mål du skal tage er at konvertere SVG-skrifttype til et mere velkendt og alsidigt format. TTF er det fremtrædende format til lokal installation samt distribution. Det giver også en god base for omvendelse til at mødes @font-face krav. Online-tjenester, der giver dig mulighed for at konvertere skrifttyper mellem formater, omfatter http://onlinefontconverter.com/ , http://www.fontconverter.org/ og http://www.font2web.com/ . Min personlige favorit er dog http://www.freefontconverter.com/ fordi jeg ikke kommer i kø, og jeg har aldrig kendt det for at returnere fejl.

Jeg vil ikke forkæle dig ved at forklare, hvordan du bruger denne ressource. Det efterfølgende fil upload felt, vælg element og gigantisk konverter knap taler for sig selv, virkelig.

Redigering af skrifttypens meta info

Nu hvor du har TTF i din hånd, anbefaler jeg, at du redigerer de genererede metadata . Omdøbe, tildele og beskrive skrifttypen til din tilfredshed gør den klar til installation, indlejring og distribution . Det er også en måde at vise, at skrifttypen er dit eget arbejde. Læsere, der kører Windows, har mulighed for at bruge de bedrøvende grand sounding Redigering af Microsoft Font Properties eller fri-for-x-dage Typograf . For Apple og Linux brugere, beder jeg dem bedre informeret end jeg er for at hjælpe med i kommentarerne.

Den klare, men anvendelige Font Properties Editor

Vigtig note: Selvom redigeringsprogrammet til Microsoft Font Properties giver dig mulighed for at tilføje forfatter-, beskrivelse- og licensoplysninger, ser det ikke ud til at lade dig redigere grundlæggende data som skrifttypenavnet og efterskriftets navn . Disse felter er deaktiveret. Hvis du bruger dette særlige software, skal du lokalisere og redigere de forbudte værdier i SVG-koden forud for TTF-konvertering. Åbn den oprindelige SVG i din yndlings tekstredigeringsenhed (jeg bruger notepad ++ ) og rediger følgende:

Skriftnavn: Fandt i tag, font-family attribut

PostScript-navn: fundet i tag, id attribut

Beskrivelse: Du skal tilføje en beskrivelse (forfatter, licens osv.) I taggen. Bemærk, at dette ikke svarer til TTF beskrivelsesteksten og ikke bevares via konvertering; du bliver nødt til at tilføje TTF-beskrivelsen separat.

Gør skrifttypen indlejret

Når du har installeret TTF'en på dit lokale system og forudset det lidt for at sikre, at intet er gået galt, er det tid til at køre det gennem Font Equirrel's @ font-face generator . For at gøre den udgående kode så effektiv og effektiv som muligt, er der et par valgmuligheder værd at bemærke i generatorens ekspert tilstand:

Subsetting: Subdetteringsindstillingen giver dig mulighed for kun at inkludere de tegn, du har delegeret, hvilket reducerer filstørrelsen.

Fjern kerning: Dine ikoner vil næsten altid være isoleret, så det er ikke nødvendigt at kigge (tilføjet oplysninger om nærhed af tegn til hinanden). Dette vil angiveligt også reducere filstørrelsen.

WebOnly ™ : Hvis du er evangelisk om folk, der bruger din skrifttype som beregnet - og ikke vender tilbage til at lave billeder ud af glyphs i Photoshonk - Du kan vælge denne indstilling. Det kan også bedre passe din licensplan. Jeg dækker licens nu.

Distribution af din skrifttype

Hvis du er interesseret i at frigive din skrifttype, anses det for god praksis at give den en licens. Mange skrifttypewebsteder vil ikke bære din skrifttype uden en. Da vi brugte gratis, open source software til at gøre ikonerne, er det passende at vi skal distribuere dem som sådan.

Der er mange licensmuligheder til rådighed, og efterforskning af dem er nogle gange forvirrende. Det GNU General Public License er helt acceptabelt, men du vil måske overveje SIL Åben skrifttype licens . Den største fordel ved denne licens er levering af et reserveret skrifttypenavn : Andre designere har tilladelse til at ændre din skrifttype, så længe de navngiver det anderledes. I praksis betyder det, at forbrydelser mod ikondesign ikke kan udføres "i dit navn".

Hvis der er tale om en licens, skal du inkludere en version i en tekstfil, samt indsætte ophavsretsmeddelelsen og et link til den fulde licenswebadresse i skrifttypens meta. Besøg de respektive licenssider (linket ovenfor) for mere specifikke instruktioner.

Slutningen af CSS-spredning

Hvorfor stoppe ved at gøre generiske ikoner ved hjælp af SVG-skrifttyper? Med evnen til at lave ikoner kommer evnen til at gøre mere site-specifikke former, branding elementer og dekorationer. Synes godt om CSS sprites , alle disse visuelle elementer kan opbevares i en fil, hvilket reducerer serveropkald til en enkelt http-forespørgsel . I modsætning til CSS sprites er elementerne både størrelsesmæssige og ikke afhængige af positionskoordinater ( background-position værdier) for at vise korrekt. Dette gør dem i høj grad bedre egnet til lydhør design .

Lad os foregive, at jeg valgte at bruge en SVG-skrifttype til at dække nogle grundlæggende designelementer i min vagt steampunk -synes godt om blog . En simpel HTML-tabel gengivelse af komponentdesignerne ville se sådan ud:

En af de bedste ting ved denne tilgang er alsidigheden. For eksempel kan den anden tandhjulsform fra venstre kunne bruges som både et lille punktpunktdesign og en kæmpe, abstrakt baggrundsdekoration . Farvning er lige så let som at bruge color:maroon , men det er ikke nødvendigt at holde fast i flade farver; en række CSS3- effekter kan anvendes til at tilføje tekstur og taktilitet. For lidt inspiration for at komme i gang, undersøge dette fremragende galleri af CSS3-forbedrede webfonter .

En hurtig note om skærmlæsere

Et problem med at bruge skrifttyper til at vise visuelle elementer på denne måde er virkningen på skærmlæser produktion. En besøgende på webstedet, der læser visuelt, vil se tandhjul, pile og lignende, men en skærmlæser vil insistere på at læse de tegn, der angiver disse designs. Til brug for SVG-skrifttyper, der er dekorative, anbefaler jeg, at Coyiers forslag henvises til: Tildele vektorerne til Supplerende privat brugsområde af Unicode. Sådanne tegn bør ikke læses af læsere.

Et samarbejde ikon webfont

Som min JavaScript mentor, Rupert , påpegede mig den anden dag, ved at bruge SVG-skrifttyper til at skabe ikonsæt giver en interessant mulighed for samarbejde. Du ser, SVG-kode - som er en form for XML - er yderst standardiseret og let læselig. Det er netop den slags kildekode, der er egnet til udvikling ved hjælp af en "social kodning" service som GitHub .

Idéen resonerede med mig for sine semiotiske implikationer: Hvis en ikones forståelighed er bestemt af konsensus , så bør konsensus også spille en rolle i dens dannelse. Ved at samarbejde om vores ikon "signagesystem", skal kun de mest arketypiske ikondesigner dukke op. Vi bør være i stand til at oprette ikonforståelser, der virkelig tilhører de lokalsamfund, for hvem de skal betyde noget.

Jeg har oprettet et offentligt GitHub-depot for at hjælpe med at fremme denne ide. Hedder EF-ikon skrifttype , er depotets kodebase ikke kompleks: En tæt inspektion af den foregående Inkscape-vejledning og en hurtig læsning af projekt side skal give dig alt, hvad du behøver for at blive involveret. Hvis du er ny til GitHub, så prøv at kigge på deres hjælpesider eller spørg dit kvarter techie (det er hvad jeg gør).

typografi webdesign ikoner skrifttyper ikon design webfonts Inkscape

Sådan laver du dit eget ikon Webfont