crear una fuente

Que tal camaradas y amigos(as). Por insistencia de unos y sugerencias de otros, me permito brindarles un poco de mi tiempo para explicarles mediante este sencillo tutorial, como elaborar nuestras propias Fuentes (Tipografía).

Esto a raíz de que muchos me han preguntado como he elaborado mi logo en 3D y con animación, así como el logo de la institución donde trabajo actualmente (CECYTEO). Es por eso que aquí explicamos la primera parte, que corresponde a la elaboración de Tipografías.

Esperando sea de su total agrado, pueden dejarme un comentario usando el formulario que se encuentra al calce de este tutorial. ¡Comencemos!

1. Conseguirse un editor de gráficos (MSPaint, Photoshop, Paint Shop Pro, etc) cualquiera es bueno, no se requieren de herramientas avanzadas. En este caso usare Photoshop, en el cual simplemente creamos un lienzo de trabajo (Ctrl + N) o bien ir al Menú Archivo – Nuevo, de preferencia de 300 x 300 pixeles (de 300 ppp). Debo informarles que preferentemente el fondo sea blanco.

Crear Lienzo 300x300

2. Ahora dibujamos nuestro logotipo, imagen o letra modificada usando el color negro como primer plano. Puedes usar vectores o dibujarlos como a tí te guste. En este caso use formas en vectores superpuestas en capas diferentes.

Dibujo en Blanco y Negro

3. Posteriormente ya que el dibujo este terminado, vamos a copiar al clipboard (portapapeles/memoria) nuestro dibujo. Para hacer eso, seleccionamos todo el lienzo (Ctrl + A) o ir al Menu Selección y clic en Todo. Ahora nos vamos al Menu Edición y Copiar combinado o pulsando las teclas Shift + Ctrl + C. Listo, con eso hemos copiado nuestra imagen a la memoria y terminamos el trabajo con el editor de imagenes.

Copiar la imagen al portapapeles.

4. Para realizar nuestra propia Fuente (Tipografía) existen diversos programas, tales como Fontographer, FontLab, Corel Draw, Font-O-Matic, etc.. pero para este tutorial use uno tan fácil que no creo que les sea complicado aprenderlo aunque este en inglés, el FontLab. Para eso ejecutamos nuestro programa:

FontLab Studio 5.0

5. Al cargar el programa, debemos crear un nuevo archivo, para eso nos vamos al Menú File y luego en New (o pulsar la combinación Ctrl + N).

Nuevo archivo en FontLab

6. Lo que permitirá crear un nuevo paquete de Fuente (Tipografía) con todas las letras, numeros y simbolos que corresponden al teclado.

Paquete de Letras...

7. Para empezar a dibujar cada una de las letras que compondrán nuestra tipografía… comenzaremos activando con doble clic el simbolo que corresponda a la letra o numero a editar. Ya que esté seleccionado, pulsamos nuevamente doble clic para abrir el editor de fuente para ese símbolo, en este caso tomé la letra “A” para editarla.

Editando la Letra "A"

8. Como ustedes notarán, aparece la letra “A” de manera tenue o gris, eso quiere decir que es una especie de fondo que usaremos para basarnos al diseñar nuestra propio símbolo. Pero como aquí no queremos usar el mismo diseño, optamos por borrar ese fondo e insertar el que diseñamos en nuestro editor de imagen. Para borrarlo, nos vamos al Menú Tools y luego a Background y posteriormente Remove (que es lo mismo a usar Ctrl + Alt + R).

Borrar el fondo de muestra.

9. Ahora necesitamos insertar nuestro propio fondo de muestra, que anteriormente copiamos a la memoria (portapapeles), para eso, ahora vamos al Menu Edit – Paste (o lo mismo con Ctrl + V) y con esto, nuestra imagen diseñada se pegara como fondo de muestra en nuestro símbolo en edición. Ahora solo falta redimensionar y mover ese fondo de tal manera que quede dentro de los márgenes que nos muestra FontLab para ese símbolo (representados por las lineas largas Izquierda, Derecha y Abajo, así como las punteadas que estan Arriba). Preferentemente debe estar alineado a la parte Izquierda y en la parte de Abajo, para que así cada símbolo tenga su espacio entre cada letra al escribirse en un editor de textos.

Redimensionar y mover el fondo.

10. Ahora, se preguntarán, porque esta muy pixelado nuestro borde del fondo? si yo quiero que se vea mas fino??. No se me adelanten que aún no hemos terminado. Ahora, ese fondo es eso nada mas, un fondo de muestra que nos permitirá crear de manera más rapida nuestro símbolo. Para que se creen las rutas o curvas que conformarán nuestro símbolo, vamos a usar la herramienta Trazar que se encuentra en Tools – Background – Trace, y ahora verán que apareceran una serie de puntos y curvas de color rojo en todo el contorno de nuestro fondo pixelado, pero estas curvas son mas finas… por supuesto que eso es lo que queremos.

Herramientra Trazar.

11. Si por alguna razón no ven su símbolo relleno con el color negro, es porque esta deshabilitada esa función, ya que aquí aparece activada porque así me gusta usarlo. Para activar el relleno en color negro y así ver al momento como quedará tu símbolo, usen la herramienta que esta en el Menú View – Show Layers – Fill Outline (o lo que es lo mismo Ctrl + Shift + P).

Rellenar/vacíar símbolo.

12. Ahora, si por alguna razón, la herramienta Trace, no les trazó bien los puntos y curvas como ustedes quería, los pueden editar usando la barra de herramientas de Trazado, para eso, primero tenemos que ampliar nuestra visualización del area de trabajo para localizar los puntos que necesitamos modificar. Para ampliar el area de visualización (Zoom +) usen la combinación de teclas Ctrl + Barra Espaciadora + Clic Izq. del Raton, y para disminuir la visualización (Zoom -) usar Ctrl + Barra Espaciadora + Alt + Clic Izq. del Ratón. Ahora haciendo clic en los puntos podremos moverlos a conveniencia. Notarán que cada punto puede tener dos lineas con terminación en punto también, esas lineas con terminación en punto se usan para mover las curvaturas. Práctiquenlo y a la larga sabrán que no es dificil usar esas Curvas Bezier.

Modificar puntos de curvas Bezier.

13. Recuerden que esos puntos y curvas Bezier los modificarán basándose en el diseño de fondo de muestra que tienen, por lo que es conveniente que de vez en vez, puedan observar el fondo, para eso activen o desactiven el relleno del símbolo con Ctrl + Shift + P. Además recuerden, que de vez en cuando, guarden el trabajo avanzado, ya que es frustrante que al terminar de editar una letra, se nos bloquee o cierre el programa (típico comportamiento de Windows); para eso vamos al Menú File – Save (o también mas rápido con Ctrl + S) para guardar nuestros cambios en el mismo archivo. Recordando que si es un archivo nuevo al que no le hemos puesto nombre, nos lo solicitará, además de una ruta donde será almacenada. Eso mismo sucede si queremos guardar el archivo con otro nombre preservando el archivo original, para eso usamos el Menú File – Save As.. (Ctrl + Shift + S).

Guardar o Guardar como..

14. En caso de que sea por primera vez o si usamos el comando “Save As..”, nos aparecerá un cuadro de diálogo para escribir el nombre del archivo y la carpeta donde será guardado.

Nombre de archivo y carpeta.

15. Con ese paso almacenamos nuestro archivo fuente / original, mismo que posteriormente podemos usar para agregar o modificar los símbolos. Ahora, necesitamos exportar / convertir nuestra tipografía a un formato entendible para nuestro sistema operativo, en este caso Windows.. para eso, lo exportaremos a TTF (TrueType Font) o a OTF (OpenType Font) que son los dos formatos mas ampliamente aceptados. Pero antes de exportarlos, es recomendable, agregar la información de diseño, version, autor, nombre de la fuente, etc… para nuestro nuevo archivo de fuente. Para esto, tenemos que ir al Menu File – Font Info.. (o de igual manera Ctrl + Alt + F) y aparecerá la siguiente ventana:

Configurar Información de la Fuente.

16. En la opción de “Names and Copyright” configuramos el nombre de la fuente, estilo, etc., y en la opción “Copyright information” los datos del Autor, Fecha, Marca registrada, etc. Son los únicos datos necesarios de modificar.

Información de Copyright.

17. Ahora si, vamos a exportar nuestra fuente (o generar la tipografía TTF u OTF). Para eso en el Menú File – Generate Font.. (o también Ctrl + Alt + G) se abrirá una ventana similar a como si guardaramos el archivo, donde será necesario escribir un nombre y escoger una carpeta, pero además, seleccionar el tipo de fuente que deseamos generar, en este caso, selecciono el TTF (TrueType Font).

Opción Generar Fuente.

Seleccionar Tipo de Fuente.

18. De esta manera nuestra fuente TTF u OTF será generada en la carpeta seleccionada, por lo cual, nos dirigimos con el Explorador de Windows (Win + E) a la carpeta indicada y observamos la información de nuestro archivo de fuente compilada; para eso hacemos clic derecho sobre el icono de nuestra fuente (TTF u OTF) y luego en Propiedades. Aparecerá la siguiente ventana donde pueden observar los datos que acabamos de indicarle mediante FontLab, Copyright, Autor, Nombre de fuente, etc.

Propiedades de archivo TTF u OTF.

19. Otra de las cosas que debemos observar es el contenido de los símbolos que diseñamos dentro de nuestra Fuente. Para eso, hacemos doble clic en el archivo TTF u OTF y aparecerá un cuadro con ejemplos del uso de nuestros símbolos diseñados con FontLab y el editor de imagenes.

Ejemplo de visualización de la Fuente.

20. Ahora solo resta, integrarlo a nuestro repertorio de Fuentes de nuestro Sistema Operativo, para eso, tenemos dos métodos dependiendo de la versión de Windows que estes manejando… en mi caso es Windows 7, por lo que en la misma ventana anterior (Ejemplo de visualización de la Fuente) aparece un botón llamado “Instalar”, con el cual, al pulsarlo, automáticamente instalará y copiará nuestra fuente a la carpeta indicada para ello.

21. De lo contrario, si contamos con Windows XP o anterior, lo podemos hacer de la siguiente manera: