Post on 13-Jun-2015
Docente: Daniel Á. González | Fontographer.en.la.UP@gmail.com
FontographerPresentación e Introducción del Software para Diseño de
Tipografías Digitales
Presentado por Universidad de Palermo (DyC) y Fontlab Ltd.
TIPOGRAFÍA ES TODO
¿Qué tan importantes son
las tipografíasen nuestra vida cotidiana?
http://www.youtube.com/v/z-TOOoo2oNs&fmt=18&fs=1&rel=0&autoplay=1
TIPOGRAFÍA ES TODO
La tipografía es el recurso más importante
con que cuenta un diseñador
en su tarea de comunicar.
TIPOGRAFÍA ES TODO
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.
Para el diseño digital de tipografías
el software por excelencia es…
TIPOGRAFÍA ES…
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.
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.
FONTOGRAPHER
Las dos caras de una tipografía: Bitmap y Outline/PostScript
CONCEPTOS BÁSICOS
Bitmap: de "mapa de bits" o pixeles, es la tipografía que se ve en una pantalla, por lo tanto es de baja resolución (no sirve para imprimir o para "agrandar" sin perder definición, ya que se verían los pixeles).
BITMAP OUTLINE
Outline: es la silueta o dibujo de una tipografía y se define con vectores (líneas, arcos y curvas Bézier), su codificaciónen lenguaje PostScript hace posible la impresión en alta resolución.
CONCEPTOS BÁSICOS
Extensión de archivo: .pfm
La tipografía NO es intercambiable entre PC y MAC.
Es un formato más antiguo pero que todavía se usa.
PostScript Type 1
Formatos de tipografías digitales más comunes: PS/T1, TTF,
OTF
TrueType OpenType
Extensión de archivo: .ttf
La tipografía ES intercam-biable entre PC y MAC (solamente en MAC OS X).
*En MAC OS Classic, la TrueType tendría que ser nativa para Macintosh.
Extensión de archivo: .otf
La tipografía ES intercam-biable entre PC y MAC (solamente en MAC OS X).
Las OpenType poseen un mapa extendido (abierto) de caracteres especiales.
CONCEPTOS BÁSICOS
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.
MÉTRICA: veamos la terminología de “font metrics” en un ejemplo.
Baseline
x-height
AscentCap height
Descent
Em
-squ
are
Origen de la “p”
Ancho de la “p” y origen de la “l”
Fontographer
permite ajustar
las métricas
tipográficas
en su ventana
Font Information.
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.
FONTOGRAPHER
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.
INTERFASE BÁSICA
La paleta Toolbox contiene las herramientas de edición para operar en la
Font Window.
INTERFASE BÁSICA
Selecciona y mueve puntos y líneas.
Dibuja cuadrados y rectángulos (con doble-click se ajusta la redondez de las esquinas).
Dibuja círculos y óvalos.
Permite el dibujo a mano alzada(con doble-click se elige el tipo
de trazo y el ángulo caligráfico).
Separa los trazos en segmentos.
Añade puntos de esquina.
Gira la parte seleccionada.
Escala la parte seleccionada.
Mide distancias entre puntos.
Transforma la parte seleccionada en perspectiva 3D.
Mano 11
Multígono 12
Línea recta 13
Pluma 14
Punto de curva 15
Punto tangente 16
Reflejo 17
Inclinación 18
Lupa 19
Arco 20
1 Puntero
2 Rectángulo
3 Óvalo
4 Trazo manual
5 Cuchilla
6 Punto esquina
7 Giro
8 Escala
9 Metro
10 Perspectiva
Permite mover el tablero de dibujo para navegar dentro de la ventana.
Dibuja estrellas y polígonos (con doble-click en la herramienta se establece el tipo de forma).
Traza líneas rectas.
Combina las funciones de trazos con puntos de curva y de esquina.
Traza y añade puntos de curva.
Añade puntos tangenciales.
Refleja la seleccIón sobre un eje axial, vertical u horizontal.
Inclina la parte seleccionada.
Acerca o aleja la visualización.
Dibuja arcos (con doble-click se elige el tipo de arco).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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.
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.
Las tres formas de puntos de dibujo son:
PUNTOS DE DIBUJO
Punto de curva
Punto de esquina
Punto de tangente
Ejemplo de las tres formas de puntos de dibujo:
PUNTOS DE DIBUJO
Este es un punto de curva
Este es un punto de esquina
Este es un punto de tangente
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:
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”.
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).
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.
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…
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.
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
plantilla.
CREANDO UNA FONT
Así me queda
lista la silueta.
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í:
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.
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.
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.
CREANDO UNA FONT
De esta manera obtengo la silueta de la letra P, que aquí vemos en el
modo Preview.
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.
CREANDO UNA FONT
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.
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…
MODIFICANDO FONTS
Edito los outlines de los caracteres que quiero modificar, por ejemplo,
aquí vemos la T, en su Outline Window:
MODIFICANDO FONTS
En este caso, primero borro un par de puntos de dibujo de la mitad
izquierda del serif base.
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.
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.
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).
MODIFICANDO FONTS
Cambio el valor del margen de la izquierda por uno menor (de 211 a 135).
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.
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…
MODIFICANDO FONTS
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.
GENERANDO LA FONT
El producto final es un archivo que puede ser instalado como cualquier
otra tipografía digital en nuestro sistema operativo.
GENERANDO LA FONT
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!
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.
OTRAS FUNCIONES
Otra función especial es Change Weight (cmd-shift-Y) que ofrece diferentes
opciones para modificar el grosor de los caracteres.
OTRAS FUNCIONES
Aquí vemos los resultados alternativos de cambiar el peso de la letra en
varias combinaciones de sus dimensiones vertical y horizontal.
OTRAS FUNCIONES
En el grisado de los ejemplos se puede apreciar la silueta original previa.
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:
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.
OTRAS FUNCIONES
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)...
Y MUCHO MÁS
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
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.
UN POCO DE HISTORIA
"¿Cuál fue el primer programa que utilizó curvas Bézier para dibujovectorial 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 estallidocreativo en el diseño de tipografías como no se ha vistoen cientos de años.”
— HOW Magazine, 1996.
UN POCO DE HISTORIA
Docente: Daniel Á. González | Fontographer.en.la.UP@gmail.com
La propiedad intelectual y derechos de reproducción de la presente presentación y sus tutoriales
son exclusividad de su autor, Daniel Álvarez González. Prohibida su re-utilización total o parcial
en cualquier medio, salvo con la explícita autorización de su autor. Los isologotipos de Fontlab Ltd.
y Universidad de Palermo pertenecen a sus respectivos dueños. Este trabajo contiene partes y
muestra imágenes relacionadas con Fontographer, propiedad de Fontlab Ltd.
© Daniel Á. González, 2009.