7. TIPOGRAFÍA ES TODO
La tipografía es el recurso más importante
con que cuenta un diseñador
en su tarea de comunicar.
8. Nuevas fuentes tipográficas son creadas constantemente en
la búsqueda de diferenciación personal de los diseñadores y
en respuesta a las necesidades particulares de diferentes
proyectos y clientes.
11. FONTOGRAPHER
Fontographer hace posible el diseño de tipografías digitales
desde cero o modificar fonts existentes, permitiendo crear
fuentes digitales de letras, pictogramas o isologotipos, en
diferentes formatos para los sistemas operativos de Mac y PC.
Fontographer posee herramientas específicas para manipular
todos los parámetros de una fuente tipográfica operando en
planos de edición vectorial y bitmap.
12. FONTOGRAPHER
Fontographer es el software elegido universalmente por
tipógrafos y diseñadores profesionales desde que las
computadoras Macintosh revolucionaron el diseño gráfico.
Utillizado por los grandes creadores de tipografías de la era
digital: Neville Brody, Zuzana Licko, Erik Spiekermann, David
Berlow, Barry Deck, Lucas de Groot, Just van Rossum, Peter
Bruhn, Jonathan Hoefler, Tobias Frere-Jones, Carlos Segura,
Frank Heine, Rian Hughes, Nancy Mazzei, David Carson, etc.
14. CONCEPTOS BÁSICOS
Las dos caras de una tipografía: Bitmap y Outline/PostScript
BITMAP OUTLINE
Bitmap: de "mapa de bits" o pixeles, es la Outline: es la silueta o dibujo de una
tipografía que se ve en una pantalla, por lo tipografía y se define con vectores (líneas,
tanto es de baja resolución (no sirve para arcos y curvas Bézier), su codificación
imprimir o para "agrandar" sin perder en lenguaje PostScript hace posible la
definición, ya que se verían los pixeles). impresión en alta resolución.
15. CONCEPTOS BÁSICOS
Formatos de tipografías digitales más comunes: PS/T1, TTF,
OTF
PostScript Type 1 TrueType OpenType
Extensión de archivo: .pfm Extensión de archivo: .ttf Extensión de archivo: .otf
La tipografía NO es La tipografía ES intercam- La tipografía ES intercam-
intercambiable entre PC y biable entre PC y MAC biable entre PC y MAC
MAC. (solamente en MAC OS X). (solamente en MAC OS X).
Es un formato más antiguo *En MAC OS Classic, la Las OpenType poseen un
pero que todavía se usa. TrueType tendría que ser mapa extendido (abierto)
nativa para Macintosh. de caracteres especiales.
16. CONCEPTOS BÁSICOS
MÉTRICA: veamos la terminología de “font metrics” en un ejemplo.
Em-square = Altura tipográfica, de cuadratín o “Eme” (usualmente: del descendente al ascendente).
Ascent = Altura de los trazos ascendentes.
Cap height = Altura de las mayúsculas.
x-height = Altura de las minúsculas (o letra “x”).
Baseline = Línea base.
Descent = Altura/profundidad de los trazos descendentes.
Cap height Ascent
Em-square
x-height
Baseline
Descent
Origen de la “p”
Ancho de la “p” y origen de la “l”
18. FONTOGRAPHER
Cuando en Fontographer abrimos una tipografía o creamos una nueva,
la primer ventana que vemos es la Font Window, que muestra el
mapa de caracteres de la fuente.
19. INTERFASE BÁSICA
Haciendo doble-click en uno de los caracteres del mapa de la Font Window
(o cmd-Y con el teclado), abrimos la ventana Outline de ese carácter.
20. INTERFASE BÁSICA
La paleta Toolbox contiene las herramientas de edición para operar en la
Font Window.
Selecciona y mueve puntos y 1 11 Permite mover el tablero de dibujo
líneas. 1 Puntero Mano 11 para navegar dentro de la ventana.
Dibuja cuadrados y rectángulos 2 Rectángulo Multígono 12 Dibuja estrellas y polígonos (con
(con doble-click se ajusta la 2 12 doble-click en la herramienta se
redondez de las esquinas). 3 Óvalo Línea recta 13 establece el tipo de forma).
Dibuja círculos y óvalos. 3 4 Trazo manual Pluma 14 13 Traza líneas rectas.
Permite el dibujo a mano alzada Combina las funciones de trazos
(con doble-click se elige el tipo 4
5 Cuchilla Punto de curva 15 14 con puntos de curva y de esquina.
de trazo y el ángulo caligráfico). 6 Punto esquina Punto tangente 16 15 Traza y añade puntos de curva.
Separa los trazos en segmentos. 5 16 Añade puntos tangenciales.
7 Giro Reflejo 17
Añade puntos de esquina. 6 Refleja la seleccIón sobre un eje
8 Escala Inclinación 18 17
Gira la parte seleccionada. 7 axial, vertical u horizontal.
Escala la parte seleccionada. 8 9 Metro Lupa 19 18 Inclina la parte seleccionada.
Mide distancias entre puntos. 9 19 Acerca o aleja la visualización.
10 Perspectiva Arco 20
Transforma la parte seleccionada Dibuja arcos (con doble-click se
10 20
en perspectiva 3D. elige el tipo de arco).
21. PUNTOS DE DIBUJO
Fontographer utiliza líneas y curvas vectoriales (curvas Bézier) para
definir formas complejas a través de un mínimo de puntos de dibujo.
Punto de dibujo
Manejador (Handle)
Punto de control (BCP)
A medida que se
arrastra un punto de
control del manejador,
la curva definida por el
punto de dibujo va
cambiando de forma.
22. PUNTOS DE DIBUJO
Las tres formas de puntos de dibujo son:
Punto de esquina
Punto de curva
Punto de tangente
23. PUNTOS DE DIBUJO
Ejemplo de las tres formas de puntos de dibujo:
Este es un punto de esquina
Este es un punto de curva
Este es un punto de tangente
24. CREANDO UNA FONT
Para crear una nueva font en Fontographer puedo partir, por ejemplo, de un
boceto que haya realizado en papel, en este caso, aquí está una letra A:
25. CREANDO UNA FONT
Podría pintarla y luego escanearla (o directamente rellenarla con color negro
en algún programa como Photoshop) y salvarla como imagen: “A.jpg”.
26. CREANDO UNA FONT
En Fontographer elijo del menú File > New Font (o cmd-N), y abro la Font
Window del casillero correspondiente a la letra A (doble-click o cmd-Y).
27. CREANDO UNA FONT
Copio la imagen de la A del .jpg y la pego (cmd-V) como plantilla (template).
Observar que previamente seleccioné Template en la paleta de Layers.
28. CREANDO UNA FONT
Con la plantilla como guía podría trazar la A con las herramientas de dibujo,
pero también puedo hacer algo más fácil: elijo del menú Element >
Auto-trace…
29. CREANDO UNA FONT
De esta forma se dibuja automáticamente una primer silueta con puntos
de dibujo, lo cual puede ahorrarme mucho tiempo de trazado.
30. CREANDO UNA FONT
Esa primer silueta la mejoro, puliendo los puntos de dibujo (mediante sus
manejadores y puntos de control, como vimos antes) y borrando los puntos
innecesarios.
Ya puedo
borrar la
imagen que
usé como Así me queda
plantilla. lista la silueta.
31. CREANDO UNA FONT
Copio la silueta (cmd-X) sacándola de la capa Template y la pego (cmd-V)
en la capa Outline. Puedo elegir del menú View > Preview y Show Points,
para verla así:
32. CREANDO UNA FONT
Saliendo del modo Preview, vuelvo a ver la silueta (outline) sin el relleno
negro, que en algunos casos mejora la visualización de los puntos de dibujo.
33. CREANDO UNA FONT
Si abro la venta Bitmap Window (del menú Window, o cmd-J), puedo editar
cómo se verán los diferentes bitmaps en la pantalla. Aquí vemos la A en el
tamaño 12 pt.
34. CREANDO UNA FONT
A partir de una forma básica, puedo dibujar otras letras, en este caso,
copié la silueta de la A en el casillero de la P y fui modificando los puntos.
35. CREANDO UNA FONT
De esta manera obtengo la silueta de la letra P, que aquí vemos en el
modo Preview.
36. CREANDO UNA FONT
Eventualmente puedo continuar con el resto de las letras, dibujando
los demás caracteres de mi tipografía, que irán visualizándose en la
Font Window.
37. MODIFICANDO FONTS
Qué tal si en vez de crear una tipografía desde cero, quiero modificar una
existente, hacer mi propia versión o remix de una font que tengo.
Veamos en este caso una clásica Times a la cual me gustaría intervenir
con un toque personal, creando una versión de sólo medio serif.
38. MODIFICANDO FONTS
Comienzo abriendo la tipografía Times, arrastrando el icono del archivo
(TrueType o PostScript) hacia dentro del icono de Fontographer,
también con cmd-O, o desde el menú File > Open Font…
39. MODIFICANDO FONTS
Edito los outlines de los caracteres que quiero modificar, por ejemplo,
aquí vemos la T, en su Outline Window:
40. MODIFICANDO FONTS
En este caso, primero borro un par de puntos de dibujo de la mitad
izquierda del serif base.
41. MODIFICANDO FONTS
Luego desplazo los puntos que quedaron sueltos para unirlos, a diferencia
de otros programas de dibujo vectorial, Fontographer suelda automáticamente
los puntos.
42. MODIFICANDO FONTS
Realizo las modificaciones que deseo en el resto de los caracteres, por
ejemplo, aquí vemos la f, a la cual también recortamos su trazo horizontal
medio, para mantener la armonía con el serif de apoyo.
43. MODIFICANDO FONTS
En el caso de la f deberíamos también ajustar el espacio lateral izquierdo
ya que al borrar esa mitad, el carácter ha quedado más separado del origen.
Una de las formas de hacerlo es a través de la ventana Metrics (cmd-K).
45. MODIFICANDO FONTS
Obtenemos una separación interletra optimizada. En esta ventana también
se puede ajustar el valor del margen derecho, asimismo como el “kerning”
o espaciado propio de cada combinación (par) de letras.
46. MODIFICANDO FONTS
En algún momento nos conviene guardar nuestro trabajo, Fontographer creará
un archivo de formato propio. Algo pendiente también por hacer
es darle un nombre acorde a nuestra tipografía, para ello vamos al
menú Element > File Info…
47. GENERANDO LA FONT
Una vez finalizada la tarea de modificar los caracteres y la corrección de
espaciado y kerning, ya podemos generar nuestra font. Vamos a File >
Generate Font Files… y elegimos la plataforma y el formato, junto a otros
parámetros.
48. GENERANDO LA FONT
El producto final es un archivo que puede ser instalado como cualquier
otra tipografía digital en nuestro sistema operativo.
Tanto en Macintosh como en PC, una forma muy sencilla de hacerlo es
arrastrando y copiando el archivo al directorio Fonts del sistema operativo.
Luego, ¡ya podemos usarla con cualquier aplicación!
50. OTRAS FUNCIONES
Veamos otras funciones específicas de Fontographer, por ejemplo una
muy útil es Clean Up Paths (cmd-shift-C), que permite simplificar la cantidad
de puntos de dibujo sin cambiar la silueta.
51. OTRAS FUNCIONES
Otra función especial es Change Weight (cmd-shift-Y) que ofrece diferentes
opciones para modificar el grosor de los caracteres.
52. OTRAS FUNCIONES
Aquí vemos los resultados alternativos de cambiar el peso de la letra en
varias combinaciones de sus dimensiones vertical y horizontal.
En el grisado de los ejemplos se puede apreciar la silueta original previa.
53. OTRAS FUNCIONES
El comando Expand Stroke (cmd-shift-E) brinda la posibilidad de convertir
un simple trazo de línea, tal vez realizada a mano, en una silueta de letra.
Ejemplo de dos alternativas:
54. OTRAS FUNCIONES
En este ejemplo vemos el resultado de comenzar partiendo en una línea
realizada con la herramienta Trazo Manual, y luego ejecutar Expand Stroke,
para finalmente aplicar otra función muy útil de Fontographer: Remove
Overlap (cmd-shift-O), removiendo las superposiciones en la silueta.
55. Y MUCHO MÁS
Y muchas funciones más, que dejamos fuera de esta breve introducción,
para ser detalladas en profundidad junto a todas las capacidad del software
en el curso de manejo de Fontographer que brindará la UP.
Por ejemplo, más sobre las funciones de interletrado (kerning)...
59. UN POCO DE HISTORIA
Apple y Adobe revolucionaron el diseño gráfico con la creación de
la computadora Macintosh y el lenguaje PostScript respectivamente,
entendiendo desde sus comienzos el rol esencial que las tipografías
tienen para los diseñadores. Así es como uno de los ejes comercia-
les de Adobe ha sido producir tipografías digitales, y en el caso
de Apple, el mismo Steve Jobs
cuenta su interés por la tipografía,
siendo un valor diferencial clave
para su concepción de la Mac,
en su elocuente discurso de 2005
en la Universidad de Stanford:
http://www.youtube.com/watch?v=RtbJM9ksxo8#t=3m36s
60. UN POCO DE HISTORIA
El team de las 4 ‘A’ finaliza con Aldus y Altsys, las empresas que
completarían la artillería de software para liberar el poder creativo de
los diseñadores. Aldus crea PageMaker para el diseño editorial
(tecnología que más tarde compraría Adobe). Altsys desarrolla
Freehand para el dibujo vectorial (que sería comprado por Aldus,
y luego por el mismo Adobe) y otro software que cambiaría la historia
de la producción tipográfica: Fontographer.
A pocos meses del discurso de Steve Jobs en Stanford en 2005
Fontlab lanza Fontographer optimizado para Mac OS X.
61. UN POCO DE HISTORIA
"¿Cuál fue el primer programa que utilizó curvas Bézier para dibujo
vectorial en las computadoras Macintosh? No, no fue Illustrator.
Tampoco fue FreeHand. La respuesta es: Fontographer.”
— creativepro.com, 2001.
"Fontographer es en gran medida responsable de un estallido
creativo en el diseño de tipografías como no se ha visto
en cientos de años.”
— HOW Magazine, 1996.
