Si bien el diseño de una fuente que funcionará de manera efectiva en varios tamaños con un kerning de letras cuidadosamente elaborado es una habilidad que puede tardar años en perfeccionarse, este proyecto rápido y divertido le mostrará cómo puede crear sus propias fuentes de escritura a mano usando Inkscape y fontastic.me. tu propia fuente única El objetivo principal de fontastic.me es producir fuentes de iconos para sitios web, pero puede crear una fuente de letras que pueda usar para producir encabezados o pequeñas cantidades de texto.
Si no está familiarizado con estos, Inkscape es una aplicación de dibujo de líneas vectoriales de código abierto y gratuita que está disponible para Windows, OS X y Linux. Fontastic.me es un sitio web que ofrece una variedad de fuentes de iconos, pero también le permite cargar sus propios gráficos SVG y convertirlos a una fuente de forma gratuita.
Para el propósito de este tutorial, trazaremos una foto de algunas letras escritas, pero puede adaptar esta técnica fácilmente y dibujar sus letras directamente en Inkscape. Esto podría funcionar especialmente bien para aquellos que usan tabletas de dibujo.
Importar una foto de su fuente escrita
Necesitará una foto de algunas letras dibujadas si desea seguirla y si no quiere hacer la suya, puede descargar y usar a-doodle-z.jpg que contiene las letras mayúsculas A-Z.
Si va a crear el suyo propio, use una tinta de color oscuro y papel blanco para obtener un fuerte contraste y fotografíe las letras completas con buena luz. Además, trate de evitar los espacios cerrados en las letras, como la 'O', ya que esto hará la vida más complicada al preparar sus letras trazadas.
Para importar la foto, vaya a Archivo> Importar y luego navegue hasta la foto y haga clic en el botón Abrir. En el siguiente cuadro de diálogo, le recomendamos que utilice la opción Incrustar.
Si el archivo de imagen es muy grande, puede alejarse utilizando las opciones en el submenú Ver> Zoom y luego redimensionarlo haciendo clic una vez en él para mostrar los controles de flecha en cada esquina. Haga clic y arrastre un controlador, mientras mantiene presionada la tecla Ctrl o Comando y mantendrá sus proporciones originales.
A continuación, rastrearemos la imagen para crear letras de líneas vectoriales.
02 de 05Traza la foto para crear letras de líneas vectoriales
Es una buena idea revisar el proceso de seguimiento de los gráficos de mapa de bits antes de comenzar.
Haga clic en la foto para asegurarse de que esté seleccionada y luego vaya a Ruta> Trazar mapa de bits para abrir el cuadro de diálogo Trazar mapa de bits. Aquí, dejamos todas las configuraciones a su valor predeterminado y produjo un resultado bueno y limpio. Es posible que deba ajustar la configuración de la traza, pero puede que le resulte más fácil volver a tomar su foto con una mejor iluminación para producir una imagen con un contraste más fuerte.
En la captura de pantalla, puede ver las letras trazadas que hemos arrastrado lejos de la foto original. Cuando se complete el rastreo, las letras se colocarán directamente sobre la foto, por lo que pueden no ser muy obvias. Antes de continuar, puede cerrar el cuadro de diálogo Trazar mapa de bits y también hacer clic en la foto para seleccionarla y hacer clic en la tecla Eliminar del teclado para eliminarla del documento.
03 de 05Dividir el trazado en letras individuales
En este punto, todas las letras están unidas, así que vaya a Ruta> Separación para dividirlas en letras individuales. Tenga en cuenta que si tiene letras que se componen de más de un elemento, éstas también se habrán dividido en elementos separados. En el caso de nuestro ejemplo, esto se aplica a cada letra, por lo que tiene sentido agrupar cada letra en esta etapa.
Para hacer esto, simplemente haga clic y arrastre un recuadro de selección alrededor de una letra y luego vaya a Objeto> Grupo o Presione Ctrl + G o Comando + G dependiendo de su teclado.
Obviamente, solo necesita hacer esto con letras que contengan más de un elemento. Antes de crear los archivos de cartas, cambiaremos el tamaño del documento a un tamaño adecuado.
04 de 05Establecer el tamaño del documento
Tendrá que configurar el documento a un tamaño adecuado, así que vaya a Archivo> Propiedades del documento y, en el cuadro de diálogo, configure el Ancho y la Altura según sea necesario. Establecimos el nuestro a 500px por 500px, aunque lo ideal sería que establecieras el ancho de manera diferente para cada letra, de modo que las letras finales encajen mejor entre sí.
A continuación, crearemos las letras SVG que se cargarán a fontastic.me.
05 de 05Crear archivos SVG individuales para cada letra
Fontastic.me requiere que cada letra sea un archivo SVG separado, por lo que tendrá que producirlas antes de continuar.
Arrastra todas tus letras para que queden fuera de los bordes de la página. Fontastic.me ignora cualquier elemento que se encuentre fuera del área de la página, por lo que puede dejar estas letras estacionadas aquí sin ningún problema.
Ahora arrastre la primera letra a la página y use los controles de arrastre en la esquina para cambiar el tamaño según sea necesario.
Luego vaya a Archivo> Guardar como y dé un nombre significativo al archivo. Llamamos a mine a.svg - aseguramos que el archivo tenga el sufijo .svg.
Ahora puede mover o eliminar la primera letra y colocar la segunda letra en la página y, de nuevo, ir a Archivo> Guardar como. Necesitas hacer esto para cada letra. Si eres paciente, puedes ajustar el ancho de la página a medida que avanzas para que coincida mejor con cada letra.
Finalmente, es posible que desee considerar la producción de puntuación, aunque definitivamente querrá un carácter de espacio. Para un espacio, simplemente guarda una página en blanco. Además, si desea letras mayúsculas y minúsculas, debe guardar todos estos también.
Ahora puedes visitar fontastic.me y crear tu fuente. Puede aprender un poco acerca de este proceso en un artículo que acompaña y explica cómo usar fontastic.me para hacer su fuente.
