Skip to main content

Creeu les vostres pròpies fonts usant Inkscape i Fontastic.me

Anonim

Tot i que dissenyar una font que funcioni eficaçment en diverses mides amb lletres curosament dissenyades, és una habilitat que pot trigar anys a fer, aquest projecte ràpid i divertit us mostrarà com podeu crear els vostres propis tipus d'escriptura a mà amb Inkscape i fontastic.me tu la teva pròpia font única. L'objectiu principal de fontastic.me és produir fonts d'icones per als llocs web, però podeu crear una font de lletres que podreu utilitzar per produir títols o petites quantitats de text.

Si no esteu familiaritzat amb aquests, Inkscape és una aplicació de dibuix de línia vectorial de codi obert i lliure que està disponible per a Windows, OS X i Linux. Fontastic.me és un lloc web que ofereix una varietat de fonts d'icones, però també us permet carregar els vostres propis gràfics SVG i convertir-los a una font de forma gratuïta.

A l'efecte d'aquest tutorial, traçarem una foto d'algunes lletres escrites, però podeu adaptar fàcilment aquesta tècnica i dibuixar les vostres lletres directament a Inkscape. Això podria funcionar especialment bé per a aquells que usen tauletes de dibuix.

01 de 05

Importa una foto de la teva font escrita

Necessiteu una foto d'algunes lletres dibuixades si voleu continuar i si no voleu fer la vostra, podeu baixar-vos i fer servir a-doodle-z.jpg que conté les lletres majúscules A-Z.

Si crees el teu propi compte, utilitzeu una tinta de color fosc i un paper blanc per a contrastar i fotografiar les lletres completes amb bona llum. A més, intenteu evitar espais tancats amb lletres, com ara "O", ja que això farà que la vida sigui més complicada quan es preparen les vostres lletres traçades.

Per importar la foto, aneu a Fitxer> Importa i, després, navegueu fins a la foto i feu clic al botó Obre. Al següent diàleg, us recomanem que utilitzeu l'opció Insereix.

Si el fitxer d'imatge és molt gran, podeu reduir-vos el zoom utilitzant les opcions del menú de visualització> Ampliar i, a continuació, torneu-lo a fer clic fent clic una vegada per mostrar les nanses de les fletxes a cada cantonada. Feu clic i arrossegueu un identificador, manteniu premuda la tecla Ctrl o Comandament i mantindrà les proporcions originals.

A continuació, traçarem la imatge per crear lletres de línies vectorials.

02 de 05

Trace la foto per crear lletres de línies vectorials

És una bona idea revisar el procés de seguiment dels gràfics de mapa de bits abans de començar.

Feu clic a la foto per assegurar-vos que estigui seleccionat i aneu a Camí> Rastrejar mapa de bits per obrir el quadre de diàleg de mapa de traça. Aquí, deixem tota la configuració a la seva predeterminada i produïa un resultat bo i net. És possible que hagueu d'ajustar la configuració de traça, però és possible que us sigui més fàcil tornar a disparar la vostra foto amb una millor il·luminació per produir una imatge amb un contrast més fort.

A la captura de pantalla, podeu veure les lletres tractades que hem arrossegat fora de la foto original. Quan es completi el rastreig, les lletres es col·loquen directament sobre la foto, de manera que poden no ser molt obvis. Abans de continuar, podeu tancar el quadre de diàleg de mapa de bits de seguiment i fer clic a la foto per seleccionar-la i fer clic a la tecla Supr del teclat per eliminar-la del document.

03 de 05

Dividiu el rastreig en lletres individuals

En aquest punt, totes les lletres s'uneixen, així que aneu a Camí> Break, a més de dividir-les en lletres individuals. Tingueu en compte que si teniu lletres que formen més d'un element, aquestes també s'han dividit en elements separats. En el cas del nostre exemple, això s'aplica a totes les lletres, de manera que té sentit agrupar cada lletra junts en aquesta etapa.

Per fer-ho, només cal fer clic i arrossegar una carpeta de selecció al voltant d'una carta i anar a Object> Group o Premeu Ctrl + G o Command + G depenent del teclat.

Òbviament, només cal fer-ho amb lletres que continguin més d'un element. Abans de crear els fitxers de lletres, tornarem a dimensionar el document a una mida adequada.

04 de 05

Estableix la mida del document

Haureu d'establir el document en una mida adequada, així que aneu a Fitxer> Propietats del document i al diàleg, estableixi l'amplada i l'alçada segons sigui necessari. Hem posat la nostra a 500px en 500px, encara que, idealment, fixar l'amplada de manera diferent per a cada lletra, de manera que les lletres finals s'ajusten de forma més ordenada.

A continuació, crearem les lletres SVG que es penjaran a fontastic.me.

05 de 05

Creeu fitxers SVG individuals per a cada lletra

Fontastic.me requereix que cada lletra sigui un fitxer SVG independent, de manera que haurà de produir-los abans de prémer.

Arrossegueu totes les lletres perquè estiguin fora de la vora de la pàgina. Fontastic.me ignora els elements que estan fora de l'àrea de la pàgina, de manera que podeu deixar aquestes cartes estacionades aquí sense cap problema.

Ara arrossegueu la primera lletra a la pàgina i utilitzeu les nanses d'arrossegament a la cantonada per tornar-la a dimensionar segons sigui necessari.

A continuació, vés a Fitxer> Desa com i dóna al fitxer un nom significatiu. Hem anomenat mine a.svg - assegureu-vos que el fitxer tingui el sufix .svg.

Ara podeu moure o esborrar la primera lletra i col·loqueu la segona lletra a la pàgina i torneu a Fitxer> Desa com. Cal fer això per cada lletra. Si sou pacient, podeu ajustar l'amplada de la pàgina a mida que millor s'adigui cada lletra.

Finalment, és possible que vulgueu considerar la producció de puntuació, tot i que definitivament voleu un caràcter d'espai. Per a un espai, només has de desar una pàgina en blanc. A més, si voleu lletres majúscules o minúscules, heu de desar tots aquests elements.

Ara pots fer una visita a fontastic.me i crear la vostra font. Podeu aprendre una mica sobre aquest procés en un article adjunt que explica com utilitzar fontastic.me per fer el tipus de lletra.