Hoe maak je je eigen pictogram webfont

In dit artikel ga ik de wetenschap onderzoeken achter het maken van succesvolle UI-pictogrammen voordat ik u leer hoe u uw eigen pictogram voor een in te voegen pictogram kunt maken .

Van het ontwerpen van de afzonderlijke pictogrammen tot het omzetten ervan @font-face ze inbedden en zelfs in licentie geven voor distributie, zullen we alleen vrije software en online diensten gebruiken. Wat dacht je daarvan? U hoeft niet te vertrouwen op een van de esoterische kennis die nodig is om succesvolle alfanumerieke lettertypen te maken; gewoon een oog voor het ontwerpen van dingen die heel, heel klein lijken.

Uiteindelijk moet je weggaan met een proces voor het maken van ontwerpelementen die veel verder gaan dan het maken van eenvoudige pictogrammen.

Voordat we verder gaan, moet er iets worden gezegd over wat we precies proberen achieve door in de eerste plaats pictogrammen in onze ontwerpen te gebruiken en wat het ene pictogram succesvoller maakt dan het andere. Theorie vóór toepassing. Om dit te doen, moeten we de rol van het pictogram beschouwen als onderdeel van de semiologie.

Wat maakt een goed pictogram?

semiologie , in de ruimste zin, is de studie van tekensystemen , hoe we bijdragen aan hun vorming en onderhoud, en de impact die ze hebben op ons begrip van de wereld binnen en buiten ons.

Wanneer je een deel van je ontwerpwerk beschouwt vanuit het perspectief van wat het is betekent - wat het tegen je publiek zegt of welke concepten het voor hen oproept - je overweegt je ontwerp als een semioticus. Hoewel semologie, net als taalkunde, taal behandelt, zijn er veel meer dingen op een website die iets 'zeggen' zonder woorden, zoals kleuren, letterbeelden en de vormen die we pictogrammen noemen . Men moet op zijn hoede zijn dat wat deze dingen zeggen een sterke culturele dimensie heeft. In China , de kleur rood kan het geluk betekenen, terwijl deze in veel westerse landen wordt gebruikt om gevaar aan te duiden.

(Gebaseerd op een afbeelding van ell bruin )

De term "pictogram" heeft een speciale betekenis op het gebied van semiologie. Een pictogram is een artefact dat iets betekent door er op te lijken. Neem bijvoorbeeld een pictogram voor een punaise . Als een vorm die lijkt op een "echte" punaise, kan hij dit betekenen. Op zijn beurt doet de echte punaise denken aan allerlei zinvolle concepten . Hieronder vallen abstracte concepten zoals locatie en minder abstracte concepten, zoals de kaart waartoe de pin kan behoren.

Sommige zogenaamde pictogrammen zijn niet echt iconisch. Het alomtegenwoordige RSS-pictogram , met zijn punt en twee concentrische cirkelsegmenten, lijkt niet meer op syndicatie dan de woorden "Really Simple Syndication" erop lijken. De configuratie van vormen die het RSS-pictogram vormen, betekent alleen RSS-conventie; we hebben afgesproken dat dit is waar ze voor zijn. Een RSS-pictogram wordt beter een RSS-symbool genoemd .

Inmiddels hoop ik dat we hebben vastgesteld dat succesvolle webpictogrammen moeten voldoen aan een of beide van de volgende twee criteria:

Een sterke gelijkenis met een echt ding, bijvoorbeeld een afdrukpictogram dat lijkt op een echte printer
Vestiging en dus bekendheid als herkenbaar symbool binnen het tekensysteem

Pictogramlettertypen winnen aan populariteit

Pictogrammen worden al lang beschouwd als een goede manier om UI-ontwerpen te verbeteren, omdat ze een visuele afkorting bieden die helpt bij het begrijpen van een verder zuiver tekstueel bericht. Platen met pictogramafbeeldingen worden door de hele webontwerpgemeenschap verspreid, zoals smokkelwaar, waarbij elke set veelbelovend is om uw ontwerp glanzender, aantrekkelijker en klikbaarder te maken dan de vorige.

In vergelijking met afbeeldingen is het idee om ingebedde lettertypen voor pictogrammen te gebruiken een relatief nieuw idee. Het is echter een die aanzienlijke grip krijgt vanwege de vele inherente voordelen ten opzichte van het beeld (of background-image ) methode. ik schreef erover sommige van deze voordelen op mijn kleine blog terug in begin september. Chris Coyier had duidelijk een soortgelijk idee, het weken later introduceren van het idee bij een ( veel, veel ) groter publiek. Op basis van de twee berichten en anderen, heb ik deze uitgebreide lijst met functies samengesteld:

Ze kunnen eenvoudig worden verkleind zonder degradatie (omdat ze in wezen vectoren zijn)
Het inkleuren van het pictogram is net zo triviaal als het opnieuw kleuren van tekst. Bijvoorbeeld, color: orange voor een RSS-pictogram
Veel pictogrammen zijn gegroepeerd in één bestand, waarvoor slechts één http-verzoek nodig is
Zoals Chris opmerkt, zijn het vormen met transparante "knockouts" die in IE6 al in browsers werken (in tegenstelling tot alpha PNG's)
Voor pictogrammen die naast tekst moeten worden weergegeven, zijn uitlijning en inwikkeling geen problemen (omdat het tekst is)
Je kunt CSS3-effecten via gebruiken text-shadow en background-clip:text die de vorm van de glyph respecteren
In tegenstelling tot SVG is ondersteuning voor meerdere browsers eenvoudig te bereiken

Problemen

In de woorden van Chris is het gebruik van lettertypen voor pictogrammen een goed idee, dat zeg ik je . Desalniettemin is de status-quo met betrekking tot het gebruik van pictogramlettertypen niet ideaal. Ten eerste zijn de meeste beschikbare kwaliteit lettertypen, dingen genoemd als pictos , Fico , Klepto, Cheetos, Ponyo en Sailor Moon (Ik heb misschien een aantal van deze fouten gehad), zijn betaalde lettertypen. In de praktijk betekent dit dat er echt twee problemen zijn :

Misschien moet u afscheid nemen van geld
Of je nu geld moet afstaan of niet, je zult het vuile ontwerpwerk van iemand anders moeten accepteren

Afgezien van geautomatiseerde crawler-programma's, neem ik aan dat het voornamelijk webontwerpers zijn die dit artikel zullen lezen. Ik ben zelf een ontwerper en ik denk niet dat ik alleen sta tegenover het idee dat ik mijn eigen ontwerp moet compromitteren door te vertrouwen op het werk van iemand anders. Natuurlijk ben ik nog minder gecharmeerd van de gedachte om voor het voorrecht te betalen . Ik weet welke pictogrammen ik wil gebruiken en ik weet precies hoe ik ze wil afstemmen op mijn algehele ontwerp. Ik wil die controle .

Na wat zoeken, was ik uiteindelijk kennis gemaakt met de mogelijkheden van Inkscape 's SVG Font Editor . Met een beetje oefenen met Inkscape en de hulp van een online converter om mijn SVG-lettertype in een TTF te transformeren, kon ik "Heydings" maken. Dit lettertype is nu opgenomen in Simurai's lijst (zoals gekoppeld aan het artikel van Coyier). Ik probeer je mijn lettertype niet te verkopen (het is sowieso gratis), maar ik denk dat het een redelijk goede proof-of-concept is :

Pictogram glyphs maken met Inkscape

Inkscape instellen

Laten we beginnen downloaden en installeren van Inkscape. U moet ook de startsjabloon van mijn pictogramlettertype gebruiken, die zich in de map resources van. Bevindt deze GitHub-repository (later meer over dit GitHub-project). Nadat u dit bestand in uw nieuwe Inkscape-installatie hebt geopend, moet u uw werkruimte instellen door de volgende vensters in het hoofdmenu te openen:

VOORWERP → VULLEN EN TREKKEN
VOORWERP → AANPASSEN EN DISTRIBUEREN
TEKST → SVG FONT-EDITOR

Klik in het deelvenster SVG-lettertypebewerker op "Lettertype 1" onder "Lettertype". Uw werkruimte moet er nu ongeveer zo uitzien als deze screenshot:

Het is de moeite waard erop te wijzen dat de basislijn gids bevindt zich per abuis niet onder de ondergrens van het canvas: om redenen die het best bij iemand anders bekend zijn, moeten je iconen heel erg over de onderkant van het canvas hangen als je wilt dat ze dezelfde basislijn delen als aangrenzende lettertypen. Ik heb dit getest met Georgia, Arial en een aantal weblettertypen.

Je eerste glyph maken

Als u de glyph wilt definiëren, klikt u op het tabblad Glyphs in het deelvenster SVG-lettertypebewerker en klikt u vervolgens op de knop Add Glyph in het onderste gedeelte van het deelvenster. Het is niet meteen duidelijk bij de eerste inspectie, maar als u op uw glyph ("Glyph 1") klikt, verschijnt een veld waarin u het teken kunt invoeren waaraan u uw pictogram wilt toewijzen. Eerst zullen we een eenvoudige stervorm maken, dus ik raad aan dat je het teken "s", "S" of "*" invoert:

Nu we het overeenkomstige karakter van de glyph hebben gedefinieerd, moeten we de glyph zelf maken. Omdat we deze keer alleen maar een ster maken, moeten we het handige hulpmiddel Stars en Polygons van Inkscape selecteren in de linker werkbalk en een ster in het canvas tekenen. Je zult merken dat deze tool wordt geleverd met opties waarmee je het uiterlijk van de ster kunt veranderen. In mijn voorbeeld heb ik 5 hoeken gekozen, een spaakverhouding van 0,5 en een afgeronde waarde van 0,1.

Centreer de ster horizontaal met behulp van het paneel Uitlijnen en verdelen (mogelijk verborgen onder de SVG-lettertypedacteur ) en sleep de vorm naar beneden om de basislijn te halen. Als het raster is uitgeschakeld, ziet het canvas er ongeveer zo uit:

Glyphs in ons pictogramlettertype zijn slechts vormen; vormen zonder kleuren, lagen of verlopen. Dus om van onze ster een legitieme kandidaat voor ons lettertype te maken, moeten we deze van een object omzetten in een padgebaseerde vorm. Om dit te doen, selecteert u de ster en kiest u PAD → VOORWAARDE VOOR PAD in het hoofdmenu. Nu, met de geselecteerde ster, kunnen we naar onze SVG Font Editor gaan , de toepasselijke "s" glyph markeren en op de knop Get curves from selection klikken:

Wanneer u 's' in het veld Voorbeeldtekst invoert, moet uw ster nu als voorbeeld worden weergegeven, zoals:

Complexere pictogrammen maken

U hebt nu uw eerste schaalbare SVG-lettertype-glyph gemaakt. Door opties te gebruiken in het deelvenster Vulling en lijn , het bewerken van padknooppunten en het combineren van objecten en streken kunt u veel ambitieuzere pictogramontwerpen maken. Ik wil niet naar een volledige Inkscape-tutorial gaan, want we hebben nog veel meer te bespreken, maar het volgen van deze eenvoudige regels zal u goed van pas komen:

Blijf bij het gebruik van zwarte lijnen en vullingen, al was het maar om u eraan te herinneren dat de pictogrammen alleen vormen zijn, geen complexe vectorafbeeldingen. Het kleuren van het pictogram is mogelijk in het eindproduct met behulp van CSS.
Alle objecten en lijnen (lijnen) moeten worden omgezet in paden met behulp van PATH → PAND VOORWAARTSEN OF PAD → SLEEP NAAR PAD
Meerdere objecten en / of lijnen die worden gebruikt om één pictogramglyph samen te stellen, moeten met elkaar worden gecombineerd met behulp van PATH → COMBINE (of, in sommige gevallen, PATH → UNION)
Om vormen uit vormen te snijden (zoals het gebruik van een koekjesvorm) plaatst u de vorm die de "knock-out" over de hoofdvorm creëert, selecteert u beide en kiest u PAD → VERSCHIL. Witte gebieden op zwart die eruit zien als "knockouts" zullen niet voldoende zijn, zoals je zult ontdekken wanneer je op Get curves hit from selection Zie regel 1.

Uw lettertype voorbereiden voor insluiting

Stel je voor dat je een aantal nuttige pictogrammen voor je lettertype hebt gemaakt door de glyph-spawning-methode te herhalen die ik zojuist heb beschreven en het bestand op te slaan als myicons.svg . Nu wilt u deze pictogrambibliotheek voorbereiden voor gebruik in webpagina's.

De SVG naar TTF converteren

De eerste maatregel die u zou moeten nemen, is om het SVG-lettertype in een meer bekend en veelzijdig formaat. TTF is het uitstekende formaat voor zowel lokale installatie als distributie. Het biedt ook een goede basis voor reconversie om te ontmoeten @font-face vereisten. Online services waarmee u lettertypen kunt converteren tussen indelingen, zijn http://onlinefontconverter.com/ , http://www.fontconverter.org/ en http://www.font2web.com/ . Mijn persoonlijke favoriet is echter http://www.freefontconverter.com/ omdat ik niet in de wachtrij sta en ik heb nooit geweten dat het problemen oplevert.

Ik zal je niet betuttelen door uit te leggen hoe je deze bron kunt gebruiken. Het opeenvolgende file-uploadveld, select element en gigantische Convert- knop spreken voor zich, echt.

De meta-info van het lettertype bewerken

Nu u de TTF in uw hand hebt, raad ik u aan de gegenereerde metadata te bewerken. Hernoemen, toekennen en beschrijven van het lettertype naar uw tevredenheid maakt het gereed voor installatie, inbedding en distributie . Het is ook een manier om te laten zien dat het lettertype uw eigen werk is. Lezers met Windows hebben de optie om het bedrieglijk klinkende geluid te gebruiken Microsoft Font Properties Editor of de gratis-voor-x-dagen Typograf . Voor Apple- en Linux-gebruikers smeek ik degenen die beter zijn geïnformeerd dan ik om te helpen in de opmerkingen.

De onhandige maar bruikbare Font Properties Editor

Belangrijke opmerking: hoewel u met de Microsoft Font Properties Editor auteurs-, beschrijving- en licentie-informatie kunt toevoegen, lijkt het u niet mogelijk om basisgegevens zoals de naam van het lettertype en de naam van het PostScript-bestand te bewerken. Deze velden zijn uitgeschakeld. Als u dit specifieke stuk software gebruikt, moet u vóór de TTF-conversie de verboden waarden in de SVG-code opzoeken en bewerken. Open de originele SVG in uw favoriete teksteditor (gebruik ik notepad ++ ) en bewerk het volgende:

Lettertypenaam: gevonden in tag, font-family attribuut

Postscriptnaam: gevonden in tag, id attribuut

Beschrijving: u zou een beschrijving (auteur, licentie etc.) in de tag moeten toevoegen. Merk op dat dit niet gelijk is aan de TTF-beschrijvende tekst en niet zal worden bewaard door middel van conversie; je moet de TTF-beschrijving apart toevoegen.

Het lettertype insluitbaar maken

Nadat je de TTF op je lokale systeem hebt geïnstalleerd en een voorbeeld hebt bekeken om er zeker van te zijn dat er niets mis is gegaan, wordt het tijd om Font Squirrel's te gebruiken. @ font-face generator . Om de uitgevoerde code zo efficiënt en effectief mogelijk te maken, zijn er enkele opties die de moeite waard zijn om op te merken in de expertmodus van de generator:

Subsetting : met de subsetoptie kunt u alleen de tekens opnemen die u hebt gedelegeerd, waardoor de bestandsgrootte wordt verkleind.

Spatiëring verwijderen: uw pictogrammen verschijnen bijna altijd geïsoleerd, dus kerning (informatie over de nabijheid van tekens aan elkaar toevoegen) is niet nodig. Dit zal naar verluidt ook de bestandsgrootte verkleinen.

WebOnly ™ : als u evangelisch bent over mensen die uw lettertype gebruiken zoals bedoeld - en niet teruggaat naar het maken van afbeeldingen uit de glyphs in Photoshonk - u kunt deze optie selecteren. Het kan ook beter passen bij uw licentieplan. Ik ga nu over licenties.

Uw lettertype distribueren

Als u geïnteresseerd bent in het vrijgeven van uw lettertype, wordt het als een goede gewoonte beschouwd om het een licentie te geven. Veel lettertype-websites dragen uw lettertype niet zonder. Omdat we gratis, open source software hebben gebruikt om de pictogrammen te maken, is het passend dat we ze als zodanig distribueren.

Er zijn veel licentie-opties beschikbaar en het onderzoeken ervan is soms verwarrend. De GNU General Public License is perfect acceptabel, maar misschien wil je het wel overwegen SIL Open Font-licentie . Het belangrijkste voordeel van deze licentie is het verstrekken van een gereserveerde lettertypenaam : andere ontwerpers mogen uw lettertype wijzigen, als ze maar een andere naam geven. In de praktijk betekent dit dat misdaden tegen pictogramontwerp niet "op uw naam" kunnen worden uitgevoerd.

In het geval van beide licenties moet u een versie in een tekstbestand opnemen, evenals de copyrightkennisgeving en een link naar de volledige licentie-URL invoegen in de meta van het lettertype. Bezoek de respectievelijke licentiepagina's (hierboven gekoppeld) voor meer specifieke instructies.

Het einde van CSS-spriting

Waarom stoppen bij het maken van generieke pictogrammen met SVG-lettertypen? Met de mogelijkheid om pictogrammen te maken, kunt u meer site-specifieke vormen, merkelementen en decoraties maken. Graag willen CSS sprites , al deze visuele elementen kunnen in één bestand worden bewaard, waardoor serveroproepen worden teruggebracht tot een enkel http-verzoek . In tegenstelling tot CSS-sprites, zijn de elementen zowel te wijzigen als niet afhankelijk van positionele coördinaten ( background-position waarden) om correct weer te geven. Dit maakt ze bij uitstek geschikt voor responsief ontwerp .

Laten we doen alsof ik ervoor gekozen heb om een SVG-lettertype te gebruiken om een paar elementaire ontwerpelementen in mijn vaag te bedekken steampunk -graag willen blog . Een eenvoudige HTML-tabelweergave van de componentontwerpen ziet er ongeveer zo uit:

Een van de beste dingen aan deze aanpak is de veelzijdigheid. De tweede tandwielvorm van links kan bijvoorbeeld worden gebruikt als zowel een klein ontwerp met een kogelpunt als een gigantische, geabstraheerde achtergrondversiering . Kleuren is net zo eenvoudig als gebruiken color:maroon , maar het is niet nodig om vast te houden aan vlakke kleuren; een veelvoud aan CSS3- effecten kan worden gebruikt om textuur en tactiliteit toe te voegen. Voor een beetje inspiratie om je op weg te helpen, onderzoek deze uitstekende galerij van CSS3-verbeterde webfonts .

Een korte opmerking over schermlezers

Een probleem met het gebruik van lettertypen om visuele elementen op deze manier weer te geven, is de impact op schermlezer output. Een bezoeker van de site die visueel leest, ziet radertjes, pijlen en dergelijke, maar een schermlezer zal erop staan de tekens te lezen die deze ontwerpen aanduiden. Voor het gebruik van SVG-lettertype-elementen die decoratief zijn, raad ik aan de suggestie van Coyier op te volgen: wijs de vectoren toe aan de Aanvullend privégebruiksgebied van Unicode. Dergelijke tekens mogen niet worden gelezen door lezers.

Een samenwerkend pictogram webfont

Als mijn JavaScript-mentor, Rupert , wees me onlangs de opmerking dat het gebruik van SVG-lettertypen om iconets te maken een interessante mogelijkheid biedt voor samenwerking. U ziet, SVG-code - een vorm van XML - is sterk gestandaardiseerd en gemakkelijk leesbaar voor de mens. Het is precies het soort broncode dat geschikt is voor ontwikkeling met behulp van een "sociale code" -service zoals GitHub .

Het idee resoneerde met mij vanwege de semiotische implicaties ervan: als de onbegrijpelijkheid van een icoon door consensus wordt bepaald , dan zou zeker ook consensus een rol moeten spelen bij de vorming ervan. Door samen te werken via ons pictogram "tekensysteem", zouden alleen de meest archetypische pictogramontwerpen moeten verschijnen. We zouden in staat moeten zijn om pictogramvocabulaires te maken die echt behoren tot de gemeenschappen voor wie ze iets zouden moeten betekenen .

Ik heb een openbare GitHub-repository gemaakt om dit idee te bevorderen. Called Community Icon Font , de codebasis van de repository is niet complex: een nauwkeurige inspectie van de voorgaande Inkscape-zelfstudie en een korte beschrijving van de projectpagina zou je alles moeten geven wat je nodig hebt om mee te doen. Als je nog niet bekend bent met GitHub, kijk dan eens naar hun help pagina's of je buurt techneut vragen (dat is wat ik doe).

typografie webontwerp pictogrammen fonts pictogram ontwerp webfonts Inkscape

Hoe maak je je eigen pictogram Webfont