Hvordan lage ditt eget ikon Webfont
I denne artikkelen skal jeg undersøke vitenskapen bak å lage vellykkede UI-ikoner før du lærer deg hvordan du lager din egen innebygde ikonfont .
Fra å designe de enkelte ikonene for å konvertere dem til @font-face embedding, og til og med lisensiering dem for distribusjon, skal vi kun bruke gratis programvare og online-tjenester. Hva med det? Du trenger ikke å stole på noen av de esoteriske kunnene som kreves for å lage vellykkede alfanumeriske skrifttyper; bare et øye for å designe ting som kan virke veldig, veldig små.
Til slutt bør du gå bort med en prosess for å lage designelementer som strekker seg langt utover produksjonen av enkle ikoner.
Før vi fortsetter, bør det sies noe om hva vi prøver å achieve ved å bruke ikoner i våre design i første omgang, og hva som gjør ett ikon mer vellykket enn det neste. Teori før søknad. For å gjøre dette må vi vurdere ikonets rolle som en del av semiologi.
Hva lager et godt ikon?
semiologi I bredeste forstand er studiet av tegnsystemer , hvordan vi bidrar til formasjon og vedlikehold, og virkningen de har på vår forståelse av verden i og uten oss.
Når du vurderer en del av designarbeidet ditt fra det perspektivet betyr - hva det sier til publikum eller hvilke konsepter det er tilbakekalling for dem - du vurderer ditt design som semiotikere. Selv om semiologi, som lingvistikk, dekker språk, er det mange flere ting på et nettsted som "sier" noe uten ord, for eksempel farger, skrifttyper og former som vi kaller ikoner . Man bør være forsiktig med at hva disse tingene sier har en sterk kulturell dimensjon. I Kina , fargen rød kan bety hell, mens det i mange vestlige land er vant til å betegne fare.
(Basert på et bilde av ell brun )
Begrepet "ikon" har en spesiell betydning innen semiologi. Et ikon er en artefakt som betyr noe ved å ligne det. Ta for eksempel et kartpinneikon . Som en form som ligner en "ekte" kartpinne, er den i stand til å betegne den. I sin tur kommer den virkelige kartpinnen til å tenke på alle slags meningsfulle konsepter . Blant disse er abstrakte begreper som plassering og mindre abstrakte begreper, som kartet som stiften kan tilhøre.
Noen såkalte ikoner er ikke helt ikoniske. Det allestedsnærværende RSS-ikonet , med sin prikk og to konsentriske sirkelsegmenter, ligner ikke mer syndikasjon enn ordene "Really Simple Syndication" ligner det. Konfigurasjonen av figurer som utgjør RSS-ikonet, signifiserer RSS etter konvensjon alene; Vi har blitt enige om at dette er hva de er for. Et RSS-ikon er mer riktig kalt et RSS-symbol .
Nå håper jeg at vi har oppdaget at vellykkede webikoner skal oppfylle ett eller begge av følgende to kriterier:
- En sterk likhet med en ekte ting, for eksempel et utskriftsikon som ligner en faktisk skriver
- Etablering og dermed kjennskap som et gjenkjenneligt symbol i tegnsystemet
Ikonfonter blir stadig mer populære
Ikoner har lenge vært ansett som en god måte å forbedre UI-design fordi de gir en visuell stenografi som hjelper forståelsen av en ellers rent tekstlig melding. Ark av ikonbilder blir sirkulert i hele webdesigns samfunnet som smugling, hver sett lovende å gjøre designen skinnere, mer fristende og mer klikkbar enn sist.
Sammenlignet med bilder, er ideen om å bruke innebygde fonter for ikoner en relativt ny idé. Det er imidlertid en som oppnår betydelig trekkraft på grunn av de mange iboende fordeler over bildet (eller background-image ) metode. Jeg skrev om noen av disse fordelene på min lille blogg tilbake i begynnelsen av september. Chris Coyier åpenbart hadde en lignende ide, introduserte ideen til et ( mye, mye ) større publikum uker senere. Tegning på de to innleggene og andre, jeg har samlet denne omfattende listen over funksjoner:
- De blir enkelt omformet uten nedbrytning (fordi de er vesentlige vektorer)
- Recoloring ikonet er like trivielt som tilbakekalling av tekst. For eksempel,
color: orangefor et RSS-ikon - Mange ikoner er gruppert i én fil, og krever bare en http-forespørsel
- Som Chris påpeker, er de former som har gjennomsiktige "knockouts" som fungerer i nettlesere så tidlig som IE6 (i motsetning til alfa PNGs)
- For ikoner som skal vises ved siden av tekst, er justering og innpakning ikke-problemer (fordi de er tekst)
- Du kan bruke CSS3 effekter via
text-shadowogbackground-clip:textsom respekterer glidens form - I motsetning til SVG er støtte for kryssbrowser lett å oppnå
problemer
I Chris ord er bruk av fonter for ikoner en god ide, jeg forteller deg
. Likevel er status quo-ikonet for bruk av ikonfonter ikke ideelt. For det første, de fleste kvalitetsfonter tilgjengelig, kalt ting som Pictos , Fico , Klepto, Cheetos, Ponyo og Sailor Moon (Jeg kan ha fått noen av disse feilene), er betalt for fonter. I praksis betyr det at det virkelig er to problemer :
- Du må kanskje dele med penger
- Enten du må dele med penger eller ikke, må du akseptere andres skitne designarbeid
Bortsett fra automatiserte robotsøkeprogrammer antar jeg at det hovedsakelig er webdesignere som vil lese denne artikkelen. Jeg er designer selv, og jeg tror ikke jeg er alene for å motstå ideen om å måtte gå på kompromiss med mitt eget design ved å stole på andres håndarbeid. Selvfølgelig er jeg enda mindre enamored med tanken på å betale for privilegiet. Jeg vet hvilke ikoner jeg vil bruke, og jeg vet nøyaktig hvordan jeg vil skreddersy dem til min generelle design. Jeg vil ha kontrollen .
Etter litt søk var jeg til slutt introdusert til mulighetene av Inkscape s SVG Font Editor . Med litt øvelse ved hjelp av Inkscape og hjelp av en online-omformer for å forvandle min SVG-skrift til en TTF, kunne jeg lage "Heydings". Denne skrifttypen er nå inkludert i Simurai's liste (som knyttet til Coyiers artikkel). Jeg prøver ikke å selge deg min skrift (det er gratis uansett), men jeg tror det gir et ganske godt bevis på konseptet :
Gjør ikonet glyphs med Inkscape
Sette opp Inkscape
La oss begynne med nedlasting og installere Inkscape. Du bør også bruke ikonet skrifttype startmalen, som ligger i ressursmappen til dette GitHub-depotet (mer om dette GitHub prosjektet senere). Når du har åpnet denne filen i den nye Inkscape-installasjonen, bør du sette opp arbeidsområdet ved å åpne følgende vinduer fra hovedmenyen:
- OBJECT → FILL AND STROKE
- OBJECT → ALIGN AND DISTRIBUTE
- TEXT → SVG FONT EDITOR
I SVG Font Editor-ruten klikker du på "Font 1" under "Font". Ditt arbeidsområde bør nå se ut som dette skjermbildet:
Det er verdt å påpeke at grunnlinje guide er ikke under undersiden av lerretet ved en feiltakelse: Av grunner som er best kjent for noen andre, bør ikonene dine svært lite overhengende bunnen av lerretet hvis du ønsker at de skal dele samme grunnlinje som tilstøtende skrifttyper. Jeg har testet dette med Georgia, Arial og en rekke webfonter.
Gjør din første glyph
For å definere glyph, klikk på Glyphs- fanen i SVG Font Editor-ruten , og klikk deretter Legg til Glyph- knappen i den nedre delen av ruten. Det er ikke umiddelbart klart ved første inspeksjon, men hvis du klikker på glyphen din ("Glyph 1") vises et felt som lar deg skrive inn tegnet du vil tilordne ikonet til. Vi skal først lage en enkel stjerneform, så jeg anbefaler at du skriver inn tegnene "s", "S" eller "*":
Nå som vi har definert glyphs tilsvarende karakter, må vi gjøre glyfen selv. Siden vi bare lager en stjerne denne gangen, bør vi velge Inkscapes nyttige stjerner og polygoner verktøy fra venstre verktøylinje og tegne en stjerne i lerretet. Du vil legge merke til at dette verktøyet kommer med alternativer som lar deg endre stjernens utseende. I mitt eksempel har jeg valgt 5 hjørner, et talesforhold på 0,5 og en avrundet verdi på 0,1.
Senter stjernen horisontalt ved hjelp av panelet Juster og distribuér (som kan være skjult under SVG Font Editor ) og dra formen nedover for å møte baseline. Med rutenettet slått av, kan lerretet se slik ut:
Glyfer i vår ikon font er bare figurer; former uten farger, lag eller gradienter. Så, for å gjøre stjernen vår en legitim kandidat for fonten vår, må vi konvertere den fra et objekt til en banebasert form. For å gjøre dette, velg stjernen og velg PATH → OBJECT TO PATH fra hovedmenyen. Nå, med stjernen som er valgt, kan vi gå til vår SVG Font Editor , markere gjeldende "s" glyph og treffe Get kurver fra valgknappen:
Når du skriver inn "s" i feltet Eksempeltekst , skal stjernen din nå vises som en forhåndsvisning, slik som:
Å gjøre mer komplekse ikoner
Du har nå laget din første skalerbare SVG font glyph. Ved å bruke alternativer fra Fyll og Stroke- ruten, redigeringsbanenoder og kombinere objekter og streker, vil du kunne gjøre mye mer ambisiøse ikondesigner. Jeg vil ikke gå inn i en full Inkscape opplæring fordi vi har mye mer å dekke, men etter disse enkle reglene vil du stå i god stand:
- Hold deg til å bruke svarte slag og fyll, bare for å minne deg på at ikonene bare er figurer, ikke komplisert vektorgrafikk. Farging av ikonet er mulig i det endelige produktet ved hjelp av CSS.
- Alle objekter og streker (linjer) må konverteres til baner med enten PATH → OBJECT TO PATH eller PATH → STRONG TO PATH
- Flere objekter og / eller streker som brukes til å lage et ikon glyph, bør kombineres sammen med PATH → COMBINE (eller i noen tilfeller PATH → UNION)
- For å kutte former ut av figurer (som å bruke en kakeskytter) plasser formen som vil skape "knockout" over hovedformen, velg begge og velg PATH → DIFFERENCE. Hvite områder på svart som ser ut som "knockouts" vil ikke være tilstrekkelig, som du vil oppdage når du treffer Få kurver fra valg Se regel 1.
Forbereder fonten din for å legge inn emnet
Tenk deg at du har gått på å lage en rekke nyttige ikoner for skrifttypen din ved å gjenta glyph gytemetoden som jeg nettopp har beskrevet og lagret filen som myicons.svg . Nå vil du forberede dette ikonbiblioteket til bruk på nettsider.
Konvertere SVG til TTF
Det første tiltaket du bør ta er å konvertere @font-face krav. Online-tjenester som lar deg konvertere skrifttyper mellom formater, inkluderer http://onlinefontconverter.com/ , http://www.fontconverter.org/ og http://www.font2web.com/ . Min personlige favoritt er imidlertid http://www.freefontconverter.com/ fordi jeg ikke kommer i kø, og jeg har aldri kjent det for å returnere noen feil.
Jeg vil ikke patronisere deg ved å forklare hvordan du bruker denne ressursen. Det suksessive filopplastingsfeltet, velg element og gigantisk Konverter- knapp snakker for seg selv, egentlig.
Redigering av skriftens meta info
Nå som du har TTF i hånden, anbefaler jeg at du redigerer de genererte metadataene . Omdøpe, tilordne og beskrive skriften til din tilfredshet gjør den klar for installasjon, innlemming og distribusjon . Det er også en måte å vise at skrifttypen er ditt eget arbeid. Lesere som kjører Windows, har mulighet til å bruke deceptively grand sounding Microsoft Font Properties Editor eller gratis-for-x-dagene Typograf . For Apple og Linux-brukere ber jeg dem bedre informert enn jeg skal hjelpe til i kommentarene.
Den klare, men brukbare Font Properties Editor
Viktig merknad: Selv om redigeringsverktøyet for Microsoft Font Properties lar deg legge til forfatter-, beskrivelse- og lisensinformasjon, ser det ut til at du ikke kan redigere grunnleggende data, for eksempel skrifttypenavnet og etternavnet . Disse feltene er deaktivert. Hvis du bruker dette bestemte programvaren, må du finne og redigere de forbudte verdiene i SVG-koden før TTF-konvertering. Åpne den opprinnelige SVG i favoritt tekstredigeringsprogrammet (jeg bruker Notepad ++ ) og rediger følgende:
Skriftnavn: Funnet i tag, font-family Egenskap
PostScript Name: Funnet i tag, id Egenskap
Beskrivelse: Du bør legge til en beskrivelse (forfatter, lisens etc.) i taggen. Vær oppmerksom på at dette ikke er ekvivalent med TTF beskrivelsesteksten og vil ikke bli bevart gjennom konvertering; du må legge til TTF-beskrivelsen separat.
Gjøre skriften innlemmet
Når du har installert TTF på ditt lokale system og forhåndsforestått det litt for å være sikker på at ingenting har gått galt, er det på tide å løpe det gjennom Font Equirrel's @ font-face generator . For å gjøre den utgående koden så effektiv og effektiv som mulig, er det noen alternativer som er verdt å merke seg i generatorens ekspertmodus:
Subsetting: Subsettingsalternativet lar deg bare inkludere tegnene du har delegert, reduserer filstørrelsen.
Fjern kerning: Ikonene dine vil nesten alltid vises isolert, slik at kerning (tilleggsinformasjon om nærhet til tegn til hverandre) ikke er nødvendig. Dette vil, angivelig, også redusere filstørrelsen.
WebOnly ™ : Hvis du er evangelisk om folk som bruker skriften din som beregnet - og ikke går tilbake til å lage bilder ut av glyphene i Photoshonk - Du kan velge dette alternativet. Det kan også bedre passe din lisensplan. Jeg vil dekke lisensiering nå.
Distribuerer fonten din
Hvis du er interessert i å gi ut skrift, anses det som god praksis å gi den en lisens. Mange font nettsteder vil ikke bære fonten din uten en. Siden vi brukte gratis, åpen kildekode programvare for å lage ikonene, er det passende at vi skal distribuere dem som sådan.
Det finnes mange lisensieringsalternativer, og det er noen ganger forvirrende å undersøke dem. De GNU General Public License er helt akseptabelt, men du vil kanskje vurdere SIL Open Font License . Den største fordelen med denne lisensen er å gi et reservert skrifttypenavn : Andre designere har lov til å endre skrifttypen din, så lenge de heter det annerledes. I praksis betyr dette at forbrytelser mot ikondesign ikke kan utføres "i ditt navn".
Hvis det gjelder en lisens, bør du inkludere en versjon i en tekstfil, samt sette inn opphavsrettsvarsel og en kobling til full lisens-URL i skriftens meta. Besøk respektive lisenssider (koblet over) for mer spesifikke instruksjoner.
Slutten på CSS sprite
Hvorfor stoppe ved å lage generiske ikoner med SVG-skrifter? Med muligheten til å lage ikoner kommer muligheten til å lage flere nettstedsspesifikke former, merkevareelementer og dekorasjoner. Som CSS sprites , alle disse visuelle elementene kan lagres i en fil, og reduserer serveranrop til en enkelt http-forespørsel . I motsetning til CSS sprites, er elementene både tilpassbare og ikke avhengig av posisjonskoordinater (
background-position verdier) for å vise riktig. Dette gjør dem svært godt egnet til lydhør design .
La oss late som jeg valgte å bruke en SVG-skrifttype for å dekke noen grunnleggende designelementer i min vage steampunk -som blog . En enkel HTML-tabell gjengivelse av komponent designene ville se noe slikt ut:
En av de beste tingene med denne tilnærmingen er allsidigheten. For eksempel kan den andre tannformen fra venstre brukes som både et lite punktpunktdesign og en gigantisk, abstrakt bakgrunnsdekorasjon . Coloring er like enkelt som å bruke color:maroon , men det er ikke nødvendig å holde seg til flate farger; en rekke CSS3- effekter kan benyttes for å legge til tekstur og taktilitet. For litt inspirasjon for å komme i gang, undersøk dette glimrende galleriet av CSS3-forbedrede webfonter .
Et raskt notat om skjermlesere
Et problem med å bruke skrifter for å vise visuelle elementer på denne måten, er virkningen på skjermleser produksjon. En besøkende på nettstedet som leser visuelt, vil se tannhjul, piler og lignende, men en skjermleser vil insistere på å lese ut tegnene som utpeker disse designene. For bruk av SVG-skriftelementer som er dekorative, anbefaler jeg å heie Coyiers forslag: Tilordne vektorer til Ekstra privat bruk av Unicode. Slike tegn skal ikke leses ut av leserne.
Et samarbeidende ikon webfont
Som min JavaScript-mentor, Rupert , påpekte meg om dagen, ved å bruke SVG-skrifter for å skape ikonsett gir en interessant mulighet for samarbeid. Du ser, SVG-kode - som er en form for XML - er svært standardisert og lett lesbar. Det er akkurat den typen kildekode som er egnet til utvikling ved hjelp av en "sosial koding" tjeneste som GitHub .
Ideen resonanserte med meg for sine semiotiske implikasjoner: Hvis forståelsen av et ikon er bestemt av konsensus , så bør konsensus også spille en rolle i formasjonen. Ved å samarbeide over ikonet "tegn system", bør bare de mest arketypiske ikondesignene dukke opp. Vi bør kunne lage ikonordforråd som virkelig tilhører de lokalsamfunnene de burde bety for noe.
Jeg har opprettet et offentlig GitHub-depot for å bidra til å fremme denne ideen. Kalt Fellesskap Ikon Skrift , er depotets kodebase ikke komplisert: En nøye inspeksjon av foregående Inkscape opplæring og en rask lesning av prosjektside bør gi deg alt du trenger for å bli involvert. Hvis du er ny på GitHub, kan du prøve å se på dem hjelpesider eller spør din nabolaget techie (det er det jeg gjør).