Cuadratines

Todas las noticias y novedades del mundo de la tipografía en un solo enlace

Historia

El desarrollo de la tipografía y la imprenta desde su invención hasta la actualidad

Manos a la obra

Aprende a usar y diseñar correctamente los carácteres del alfabeto

Textos

Ideas, pensamientos y reflexiones en torno a la tipografía.

Tratado de tipografía

Los conocimientos clásicos sobre la práctica de la composición tipográfica

Inicio » Manos a la obra

Taller de tipografía digital. 1 Dibujando en Postscript

Enviado por el Miércoles, 12 enero 2005Sin Comentarios

Introducción e índice del taller

Herramientas de Fontographer

Como hemos citado en la introducción a este taller, el programa Fontographer ha sido adquirido por su gran rival en la creación digital de tipos Fontlab, y si bien al principio  se hablaba de su discontinuidad en el mercado, parece ser que al final los nuevos dueños lo van a seguir ofreciendo en forma de programa de creación de tipos “básico” y Fontlab se quedaría con el estatus de “profesional”.

Como las distintas herramientas y menús de ambos programas no difieren sobremanera, no hemos creido necesario rehacer el manual para adaptarlo a Fontlab, por lo que lo dejamos como está y los diferentes usuarios de uno u otro programa no tendrán ninguna dificultad para adaptar las instrucciones plasmadas en este taller a su software preferido.

Para empezar comentar que la ventana de edición donde vamos a dibujar los caracteres, llamada cuadrado M (la voz en castellano sería cuadratín) porque asemeja el tamaño de la M de caja alta en la antigua tipografía de plomo, se compone principalmente de una línea base donde reposan el ojo medio de las letras y que por arriba y por abajo se extiende para ajustar los ascendentes y descendentes de las letras que los lleven.

Figura 2 . Ventana de edición del programa Fontographer y dibujo de las proporciones de las letras

A continuación, vamos a describir brevemente las herramientas del programa. En la paleta de herramientas disponemos de las siguientes utilidades:

1. Puntero
Selecciona y mueve puntos.
2. Rectángulo
Sirve para dibujar rectángulos.
ALT+CLIC establece la redondez de sus esquinas.
SHIFT+CLIC limita la forma a un cuadrado.
ALT+CLIC dibuja la forma desde el centro.
3. Círculos y elipses
SHIFT+CLIC limita la forma a un círculo.
ALT+CLIC dibuja la forma desde el centro.
4. Dibujo manual
Con un doble-click se abre una ventana para establecer el tipo y la anchura del trazo así como el ángulo de la pluma para los efectos caligráficos.
5. Cuchilla
Para separar trazados en diferentes segmentos.
6. Punto de esquina
Añade un punto de esquina.
7. Rotación Rota la figura seleccionada.
8. Escala Modifica la escala de la figura seleccionada.
9. Metro Para medir distancias entre dos puntos.
10. Perspectiva Distorsiona una forma variando su perspectiva.
11. Mano Para navegar por la pantalla.
12. Polígonos y estrellas Para dibujar estas figuras
13. Líneas Dibuja líneas rectas.
14. Pluma Combina la función de las herramientas de curva y esquina.
15. Curva Añade un punto de curva.
16. Tangente Añade un punto tangente.
17. Reflejar una forma Refleja una forma sobre su eje.
18. Distorsión Distorsiona una forma.
19. Lupa Para aumentar la vista.
20. Arco Para dibujar arcos.

También podemos observar en la parte superior de la ventana de edición una barra en la que se nos muestra la siguiente información:

 

1. Distancia del puntero desde el origen

2. Distancia a un punto seleccionado desde el origen

3. Distancia del puntero desde un punto seleccionado

4. Distancia del puntero desde el punto base

5. Distancia de un punto seleccionado desde el punto base

6. Número de puntos en el carácter

7. Número de puntos seleccionados

 Dibujando en PostScript

El procedimiento básico para dibujar en PostScript, es localizar los puntos críticos de la forma en cuestión para situar sobre los mismos puntos de dibujo y a continuación unirlos hasta formar la figura en cuestión.

Cada punto de dibujo tiene dos manejadores compuesto por una línea recta cada uno y acabadas ambas por una pequeña cruz que se denomina punto de control (en inglés Bézier Control Point BCP). Usando estos puntos de control es posible ajustar las curvas de la figura que estamos dibujando. A continuación se muestra una figura dibujada con curvas Bézier en la que podemos observar sus distintos componentes:

Figura 3 . Curvas Bézier con sus elementos

Los puntos de control (BCP) se encuentran al final de los manejadores (indicados por unas pequeñas cruces). Así es que moviendo un manejador se mueve a su vez el punto de control al que pertenece. Todos los puntos de dibujo tienen dos manejadores aunque, en algunos casos, debido a que tengan una longitud 0 uno o ambos no sean visibles.

A su vez, los puntos de dibujo pueden ser de tres tipos: Tangentes (Tangent point -usados generalmente para juntar con suavidad un segmento curvo a otro recto y representados por un triángulo), de esquina (Corner point -para añadir una esquina a la figura y representados con un cuadrado) y curvos (Curve point -para añadir una curva y representados con un círculo).

NOTA: en los ejemplos mostrados los puntos tangentes están representados con una x

Los puntos críticos

Los puntos críticos de una figura dada, son aquellos sobre los que vamos a situar los puntos de dibujo. Con frecuencia estos puntos críticos se sitúan sobre curvas que se encuentran momentáneamente paralelas a la línea base (el eje x en matemáticas) o el espacio en blanco lateral izquierdo (el eje y en matemáticas o sidebearing en Fontographer). Para nuestra conveniencia usaremos el término matemático ortogonal para describir aquellos lugares en los que la forma es paralela a alguno de los ejes citados.

El primer problema que se nos presenta es identificar los puntos críticos sobre los que vamos a dibujar la figura. Estos se encuentran en los lugares en los cuales la curva que deseamos dibujar cambia de dirección (punto de inflexión). Este cambio de dirección puede ser brusco o sutil (por ejemplo, donde la curva se junta con un trazado recto).

En la siguiente figura podemos apreciar que para dibujar la forma hemos situado cuatro puntos de dibujo sobre los puntos críticos de la misma. Estos puntos son suficientes para completar su forma ya que están situados sobre los lugares en los cuales el segmento curvo cambia de dirección.

Figura 4 . Puntos de dibujo situados sobre los puntos críticos de la figura

En cambio para completar el dibujo de esta h de caja baja hemos tenido que utilizar más puntos de diferentes tipos debido a su mayor complejidad y a los distintos segmentos y uniones presentes.

Figura 5 . Esta letra nos muestra los tres tipos de puntos de dibujo

Cuatro reglas básicas para dibujar un carácter

Llegados a este punto podemos definir las cuatro reglas básicas que nos ayudarán a la hora de dibujar un carácter en PostScript.

Sitúa correctamente los puntos de dibujo
Estos deberán estar situados en los puntos de inflexión (donde los segmentos que forman el dibujo cambian de dirección)

Vigila la distancia entre un punto de dibujo y sus puntos de control
La distancia entre un punto de dibujo y unos de sus puntos de control asociados debe de ser de una longitud estimada en un tercio de la longitud de la curva que se pretende dibujar. Hay muchas excepciones a esta regla pero como punto de partida es bueno.

Usa solamente los puntos necesarios
Añadir puntos innecesarios a una figura solamente logrará dificultar su edición e incluso, cuando esté convertida a fuente, su correcta impresión. Utiliza los puntos estrictamente necesarios de acuerdo a los puntos de inflexión.

Estate atento a la disposición de los manejadores
Los manejadores deben de situarse de manera ortogonal (esto es, perpendiculares con respecto a los ejes x e y). Esto es particularmente válido para segmentos rectos y curvos que se beneficiarán a la hora de realizar el hinting (optimizar la figura del carácter para su impresión en tamaños pequeños en impresoras de baja resolución)

A continuación podemos ver estas reglas aplicadas de forma práctica:

Figura 6 . La correcta disposición de los manejadores

Manejadores ortogonales

Echa un vistazo a la figura inferior de la letra p. En ella existen algunas partes que posiblemente deseemos estandarizar: el asta, los trazos gruesos y finos de la panza y los remates. Los manejadores ortogonales al sistema de coordenadas (esto es, paralelos a los ejes x e y) actúan como una señal para el interprete PostScript indicando que las curvas a las que pertenecen debe de ser tratadas de una manera especial a la hora de aplicar el hinting, en concreto estos trazos deberán ser de una anchura uniforme. También puedes observar que en la zona donde se conecta la panza al asta los manejadores no son ortogonales. En esta zona no es tan importante visualmente mantener la uniformidad.

Figura 7 . Manejadores ortogonales

Figura 8 . Detalle de la disposición de los manejadores

Acerca del hinting

El hinting tiene como finalidad que los caracteres sean impresos fielmente en impresoras con una resolución media o baja. Evidentemente conforme las impresoras ganan en resolución el hinting se hace menos importante. En cualquier caso, Fontographer hace un trabajo excelente para calcular el “hinting” de un tipo romano con apenas intervención del usuario.

Algunas cosas a evitar
Al dibujar un tipo en Fontographer debemos evitar ciertos problemas que pueden dar lugar a que una vez que tengamos la fuente operativa, al intentar usarla el interprete PostScript nos de un error. Son estas:

1 Es conveniente estar seguro de que todos los trazados están cerrados. Esto es una causa frecuente de que la fuente de un error de impresión y para que esto ocurra es suficiente con que solamente un trazado de un carácter esté abierto.

2 Hay que evitar que los puntos de control no se crucen entre sí, así como que las líneas dibujadas a partir de ellos tampoco crucen un punto de control adyacente. En el siguiente gráfico podemos ver un ejemplo de este tipo de errores.

Figura 9 . Posiciones a evitar

3 Los dibujos no deben solaparse unos con otros o con el mismo. Este también es un error común que provoca que la fuente no funcione. Esto suele ocurrir por haber olvidado ejecutar la opción de Fontographer “Remove overlap”; por haber dibujado un carácter extremadamente complejo y haberle perdido “la pista” o por haber usado el comando “Change Weight” para cambiar el grosor del carácter (en este caso conviene revisar todo el contorno cuidadosamente).

4 No hay que situar un punto de dibujo sobre otro ya existente. El interprete PostScript no sabe que hacer en esta situación y la misma suele llevar a un fallo del mismo.

5 Evitar dibujos complejos o excesivos. (Muchas versiones de PostScript tienen un límite interno de 1.500 puntos a la hora de trazar los segmentos que componen las curvas de la figura; excediendo el citado límite aparece el error de impresión). Si no obstante debes de tener obligatoriamente caracteres que excedan este límite puedes optar por usar el formato Type 3 que no está sujeto a estas restricciones.

Ten en cuenta que estos puntos no se refiere a puntos de dibujo sino que son los que necesita PostScript para dibujar las curvas Bézier. A mayor tolerancia de error menos segmentos se necesitan para dibujar la curva pero ésta es menos perfecta; por el contrario, una menor tolerancia proporciona un mejor dibujo de la curva pero a costa de utilizar más segmentos.

Poniendo todo junto

Vamos a empezar con un ejemplo sencillo: un círculo. Usando las reglas enumeradas anteriormente vamos a situar los puntos de dibujo.

Figura 10 . Dibujo básico del círculo

Aquí podemos ver los puntos de dibujo visibles y como la totalidad de los mismos son paralelos/perpendiculares a los ejes x o y.

A continuación dibujaremos una elipse donde se nos muestran los manejadores

Figura 11 . Dibujo básico de una elipse

Ahora vamos a trazar la misma elipse anterior solamente que esta vez vamos a añadir una rotación de 20º

Figura 12 . La elipse rotada con los puntos de dibujo mal situados

Los puntos de dibujo quedan mal situados con respecto a la forma de la figura y los manejadores ya no están situados en paralelo/perpendicular (ortogonales) respecto a los ejes. Para lograr su correcta posición debemos hacerlos visibles, y clikear sobre ellos al mismo tiempo que oprimimos la tecla SHIFT. Cuando los hayamos ajustado tendremos una figura perfecta.

Figura 13 . La elipse rotada con los puntos de dibujo bien situados

Situando los puntos correctamente
Conforme vas dibujando una curva, ésta se encontrará paralela en algún lugar a cualquiera de los dos ejes (x e y).
En estos puntos es donde debes situar la mayoría de los puntos de dibujo. Otros se situarán donde la curva cambia de dirección: en este caso los puntos serán de esquina (corner). En la siguiente figura se muestran puntos de las dos clases:

Figura 14 . Una correcta disposición de los puntos adecuados a su función

Un procedimiento de trabajo

Este procedimiento lo podemos aplicar a la mayoría de los dibujos de caracteres que realicemos:

A Sitúa los puntos de dibujo
Usando la herramienta correcta sitúa los puntos de dibujo en los puntos críticos apropiados. Los trazados externos deben de dibujarse en el sentido de las agujas del reloj; posteriormente los trazados internos deben alternar en su dibujo el sentido de las agujas y el sentido contrario.

B Ortogonaliza los manejadores
Haz los manejadores y los puntos de control visibles (clikeando en los puntos de dibujo o usando el comando Select All) y la vez que pulsas la tecla SHIFT clikea sobre los puntos de control para que los manejadores se situen de forma paralela a alguno de los ejes. En este punto (si tienes los puntos de dibujo situados correctamente) notarás una mejora espectacular en la forma de la curva que has dibujado.

C Refina la posición de los puntos de control
Posiblemente deberás hacer unos ajustes menores de la situación de los puntos de control. Asegúrate de que estos se mantengan ortogonales oprimiendo la tecla SHIFT a la vez que los mueves.

C Corrige la dirección de los trazados
Asegúrate de que todos los trazados tienen la dirección correcta usando el comando Check Path. Esto lo puedes hacer cuando tengas acabado el carácter.

Ejemplos
Los siguientes ejemplos se muestran para dejar más claros los puntos que hemos vista hasta ahora. En la siguiente figura los puntos de dibujo se sitúan en su correcto lugar, pero los situados en la parte inferior y superior de la letra no tiene sus manejadores ortogonales. Esto debe de ser así ya que la curva en esos puntos no es paralela a ninguno de los ejes.

Figura 15 . Es fundamental situar bien los puntos de dibujo

En esta h de caja baja podemos ver, otra vez, cómo en los segmentos curvos que se unen al trazo vertical principal (asta) sus manejadores tampoco están situados de manera ortogonal (paralelos al eje x o y). Asimismo se han utilizado puntos tangentes para unir el asta con los remates y que esta unión sea lo más suave posible.

Figura 16 . Es fundamental situar bien los puntos de dibujo

Es innecesario consumir tiempo dibujando caracteres como X o H con trazos continuos. Es mejor dibujar primero las partes individuales de las letras usar a continuación el comando Correct Path Direction y finalmente Remove Overlap. De esta forma el propio programa se encarga de unir en un solo trazado los trazos que se superponen lo que supone un ahorro de tiempo considerable. Esta figura es un buen ejemplo de ello.

Figura 17 . Utilización de los comandos Correct Path y Remove Overlap

A la hora de utilizar la herramienta Remove Overlap debemos tener un par de cosas en cuenta para que esta trabaje de la manera más eficiente.

Lo primero es, antes de hacer nada, utilizar Correct Path Direction para asegurarnos que todos los trazados del carácter tienen la dirección correcta.

Después es preciso recordar que la herramienta Remove Overlap debe ser utilizada con solo dos trazados a la vez. Un error muy frecuente es seleccionar todo el carácter y aplicar el comando a todos los trazos del mismo.

Con este procedimiento que hemos detallado nos aseguramos que nuestros dibujos presenten el mejor aspecto posible, a la vez que evitamos que por una mala configuración de los trazados tengamos posteriormente problemas a la hora de imprimir.
En este capítulo hemos aprendido las particularidades de dibujar con curvas Bézier. Ahora vamos a aplicar estos conocimientos en el dibujo de tipografías.

Be Sociable, Share!
Etiquetas: |