Opret dine egne skrifttyper ved hjælp af Inkscape og Fontastic.me

I denne vejledning skal jeg vise dig, hvordan du kan oprette dine egne håndskriftsfonte ved hjælp af Inkscape og fontastic.me.

Hvis du ikke er bekendt med disse, er Inkscape en gratis og open source vektorlinjetegningsprogram, der er tilgængelig til Windows, OS X og Linux. Fontastic.me er et websted, der tilbyder en række ikon skrifttyper, men giver dig også mulighed for at uploade din egen SVG grafik og konvertere dem til en skrifttype gratis.

Mens du designer en skrifttype, der fungerer effektivt i forskellige størrelser med omhyggeligt udformet brevkrydsning, er en færdighed, der kan tage mange år at skinne, dette er et hurtigt og sjovt projekt, der giver dig en unik skrifttype. Hovedformålet med fontastic.me er at producere ikonfonter til websites, men du kan oprette en skrifttype med bogstaver, som du kan bruge til at producere overskrifter eller små mængder tekst.

Med henblik på denne vejledning skal jeg spore et billede af nogle skriftlige bogstaver, men du kan nemt tilpasse denne teknik og tegne dine breve direkte i Inkscape. Dette kan virke særligt godt for dem, der bruger tegnetabletter .

På næste side begynder vi at lave vores egen skrifttype.

01 af 05

Import et billede af din skriftlige skrifttype

Tekst og billeder © Ian Pullen

Du skal bruge et billede af nogle tegnede bogstaver, hvis du vil følge med, og hvis du ikke ønsker at lave din egen, kan du downloade og bruge a-doodle-z.jpg, der indeholder store bogstaver AZ.

Hvis du skal lave din egen, skal du bruge en mørk farvefarve og hvidt papir til stærk kontrast og fotografere de udfyldte bogstaver i godt lys. Prøv også at undgå lukkede mellemrum i bogstaver, f.eks. 'O', da dette vil gøre livet mere kompliceret, når du forbereder dine sporte bogstaver.

For at importere billedet skal du gå til Filer> Importer og derefter navigere til billedet og klikke på knappen Åbn. I den næste dialog anbefaler jeg, at du bruger indlejringsindstillingen.

Hvis billedfilen er meget stor, kan du zoome ud ved at bruge indstillingerne i undermenuen Vis> Zoom og derefter ændre størrelsen ved at klikke en gang på den for at vise pilehåndtag i hvert hjørne. Klik og træk et håndtag, mens du holder Ctrl eller Command-tasten nede, og den beholder sine originale proportioner.

Næste vil vi spore billedet for at oprette vektorlinjebrev.

02 af 05

Spor fotografiet for at oprette vektorlinjebrev

Tekst og billeder © Ian Pullen

Jeg har tidligere beskrevet sporing af bitmap-grafik i Inkscape , men vil hurtigt beskrive processen igen her.

Klik på billedet for at sikre, at det er valgt, og gå derefter til Path> Trace Bitmap for at åbne dialogboksen Trace Bitmap. I mit tilfælde forlod jeg alle indstillingerne til deres standard og det gav et godt, rent resultat. Det kan være nødvendigt at justere sporindstillingerne, men det kan være lettere at tage billedet igen med bedre belysning for at producere et billede med stærkere kontrast.

I skærmbilledet kan du se de sporede bogstaver, som jeg har trukket væk fra det originale billede. Når sporing er afsluttet, vil bogstaverne placeres direkte over billedet, så de kan ikke være meget oplagte. Inden du går videre kan du lukke dialogboksen Trace Bitmap og også klikke på billedet for at vælge det og klikke på Slet-tasten på tastaturet for at fjerne det fra dokumentet.

03 af 05

Opdel sporingen i individuelle breve

Tekst og billeder © Ian Pullen

På dette tidspunkt er alle bogstaverne samlet, så gå til Path> Break Apart for at opdele dem i individuelle breve. Bemærk, at hvis du har bogstaver, der består af mere end et element, vil disse også være opdelt i separate elementer. I mit tilfælde gælder dette for hvert brev, så det giver mening at gruppere hvert brev sammen på dette tidspunkt.

For at gøre dette skal du blot klikke og trække et markeringsmærke rundt om et bogstav og derefter gå til Objekt> Gruppe eller Tryk på Ctrl + G eller Command + G afhængigt af dit tastatur.

Det er selvfølgelig kun nødvendigt at gøre dette med breve, der indeholder mere end et element.

Før du opretter brevfiler, formaterer vi dokumentet til en passende størrelse.

04 af 05

Indstil dokumentstørrelse

Tekst og billeder © Ian Pullen

Vi skal indstille dokumentet til en passende størrelse, så gå til Fil> Dokumentegenskaber og indstil bredden og højden i dialogboksen efter behov. Jeg satte min til 500px med 500px, men ideelt set ville du sætte bredden anderledes for hvert brev, så de endelige bogstaver passer sammen mere pænt.

Dernæst opretter vi de SVG-breve, der vil blive uploadet til fontastic.me.

05 af 05

Opret individuelle SVG-filer til hvert brev

Tekst og billeder © Ian Pullen

Fontastic.me kræver, at hvert bogstav er en separat SVG-fil, så vi skal producere disse, før du trykker på.

Træk alle dine bogstaver, så de er uden for sidekanterne. Fontastic.me ignorerer elementer, der ligger uden for sidens område, så vi kan lade disse bogstaver parkeres her uden problemer.

Træk nu det første bogstav i siden og brug trækhåndtagene på hjørnet for at omforme det efter behov.

Gå derefter til Filer> Gem som og giv filen et meningsfuldt navn. Jeg kaldte min a.svg - sørg for, at filen har .svg-suffixet.

Du kan nu flytte eller slette det første bogstav og placere det andet bogstav på siden og igen gå til Filer> Gem som. Du skal gøre dette for hvert brev. Hvis du har mere tålmodighed end mig, kan du muligvis justere sidens bredde, når du går for bedre at matche hvert brev.

Endelig vil du måske overveje at producere tegnsætning, selvom du helt sikkert vil have et mellemrum. For et mellemrum skal du bare gemme en tom side. Også, hvis du vil have store og små bogstaver, skal du også gemme alle disse.

Nu kan du besøge fontastic.me og oprette din skrifttype. Jeg har forklaret lidt om denne proces i en ledsagende artikel, der forklarer, hvordan man bruger dette websted til at lave din skrifttype: Opret en skrifttype ved hjælp af Fontastic.me