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

En aquest tutorial, us mostraré com podeu crear els vostres propis tipus d'escriptura a mà amb Inkscape i fontastic.me.

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.

Tot i que dissenyar una font que funcioni eficaçment en diverses mides amb lletres curosament dissenyades, és una habilitat que pot durar anys, aquest és un projecte ràpid i divertit que us donarà una 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.

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

A la pàgina següent, començarem creant la nostra pròpia font.

01 de 05

Importa una foto de la teva font escrita

Text i imatges © Ian Pullen

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

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 aconsello que utilitzeu l'opció "Incrustar".

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

Text i imatges © Ian Pullen

Anteriorment he descrit el seguiment dels gràfics de mapa de bits a Inkscape , però aquí tornaré a descriure el procés aquí.

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. En el meu cas, he deixat totes les configuracions a la seva predeterminada i ha produït 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 he 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

Text i imatges © Ian Pullen

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 meu cas, 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

Text i imatges © Ian Pullen

Hem d'establir el document en una mida adequada, així que aneu a Fitxer> Propietats del document i, al quadre de diàleg, estableixi l'amplada i l'alçada segons sigui necessari. Vaig fixar la meva 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 manera 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

Text i imatges © Ian Pullen

Fontastic.me requereix que cada lletra sigui un fitxer SVG independent, per tant, hauríem de produir-los abans de prémer.

Arrossegueu totes les lletres perquè estiguin fora de la vora de la pàgina. Fontastic.me ignora tots els elements que estan fora de l'àrea de la pàgina, de manera que podem 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. Vaig trucar 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 teniu més paciència que jo, podeu ajustar l'amplada de la pàgina a mesura que millorareu 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. He explicat una mica sobre aquest procés en un article adjunt que explica com utilitzar aquest lloc per fer que la seva font: Creeu una font amb Fontastic.me