Técnicas de representación digital

Clase 17: Tipografía y retículas

TAMM-14octubre2016

Objetivos• El alumno aprenderá sobre tipografías, sus

diferencias y a identificar la mejor para transmitir adecuadamente su idea.

TipografíaLa esencia de una buena

comunicación gráfica es la palabra escrita, y cada letra también es parte de la composición gráfica.

“El termino tipografía se emplea para designar al estudio, diseño y clasificación de los tipos (letras) y las fuentes (familias de letras con características comunes)”

FuentesEs la que se define

como estilo o apariencia de un grupo completo de caracteres, números y signos, regidos por unas características comunes.

Las fuentes se clasifican en serif y sanserif.

Fuentes SerifEstas fuentes tienen origen

cuando las letras se cincelaban en bloques de piedra, pero resultaba difícil asegurar que los bordes de las letras fueran rectos, por lo que el tallador desarrolló una técnica que consistía en destacar las líneas cruzadas para el acabado de casi todas las letras, por lo que las letras presentaban en sus extremos unos remates muy característicos, conocidos con el nombre de serif.

Fuente San SerifTambién llamadas etruscas

aparecen en Inglaterra durante los años 1820 a 1830. No tienen remates en sus extremos (sin serif), entre sus trazos gruesos y delgados no existe contraste, sus vértices son rectos y sus trazos uniformes.

Representan la forma natural de una letra que ha sido realizada por alguien que escribe con otra herramienta que no sea un lápiz o un pincel.

Elección de fuentes• La elección de una fuente adecuada es importante ya

que el diseño de los caracteres (tipos) transmiten personalidad, diversidad, fortaleza, institucionalidad, movimiento, etc.

• Una mala elección de la misma puede transmitir un mensaje distinto al que se deseaba.

• La fuente se elige dependiendo de su función: como parte de un logo, texto, transmitir un concepto.

• Lectura: What font should I use: http://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces

/

El principal objetivo de componer un texto con una tipografía determinada es la legibilidad.

En impresos con gran densidad de texto como un periódico o un libro, suele escogerse una fuente con serif. Los remates permiten vincular los caracteres y guían los ojos para ayudar al lector a no perder la línea de texto.

Las fuentes con serif no son recomendables para presentaciones en pantalla. El problema es que los serif y las sutilezas tienden a desaparecer debido a la relativamente baja resolución de los proyectores y a la poca iluminación. Otro inconveniente: la audiencia que esté sentada al costado de la pantalla puede no leer correctamente, ya que debido al ángulo de visión, la modulación de los caracteres puede hacer invisibles los mismos. Se recomienda mejor utilizar un san serif para diapositivas.

Las san serif están asociadas a la tipografía comercial, su legibilidad y durabilidad las hacían perfectas para impresiones de etiquetas, embalajes, envolturas, etc.

Tipografía en movimiento, 22 consejos de Enric Jardihttp://www.youtube.com/watch?feature=player_embedded&v=NXnm-YKvE4s

Ejemplos

TextoIllustrator• Crear vectores a partir de fuentes.• Editores de texto:

– Texto siguiendo un vector.– Texto dentro de un vector cerrado.

PhotoshopRecorte de Texto

Pathfinder• Recortes y edición de vectores (no el

horrible borrador)• https://www.youtube.com/watch?v=0LMqh

HkI76I• https://www.youtube.com/watch?

v=G02Sn9aNjFY

Videos• Typolution (video hecho con tipografía)http://www.youtube.com/watch?

v=zVPfTlpCKaw&feature=player_embedded

• Kinetic Typographyhttp://www.youtube.com/watch?

v=gT2Iii0Psao

Objetivos• El alumno aprenderá sobre diseño

editorial, el uso de retículas y cuadrículas. • Aplicará conocimientos de composición,

diseño y expresión gráfica para presentar un proyecto.

Diseño editorial• Es la rama del diseño

gráfico que se encarga de la maquetación y composición de distintas publicaciones: libros, revistas, folletos, periódicos, etc.

• Se encarga de la realización gráfica del texto y busca una unidad entre el texto, la imagen y la diagramación.

FormatoCaja tipográfica: es el espacio, que rodeado de márgenes,

sirve para colocar los textos, imágenes, etc.

Retícula: esquema que ayuda a subdividir el campo visual dentro de la caja tipográfica. Todos los elementos: texto, imágenes, etc., estarán distribuidos ahí.

El tamaño puede variar entre retículas, dependiendo de lo que se desea expresar.

Se miden por número de líneas y tamaño de fuente.

Es una guía que permite al diseñador realizar una organización coherente y legible.

- La orientación del papel.- El número de columnas y el tamaño de estas.- La separación existente entre ellas (el medianil).- El color y formato del texto (tipografía y tamaño), los titulares, cabeceras, pies de imagen, etc.- El uso de las imágenes como fondo en todas las páginas (marca de agua) y demás elementos ornamentales, tales como los filetes decorativos, etc.

Una retícula base, se encuentra compuesta por las siguientes partes, dependiendo de la composición que se esté diseñando:

MárgenesEn un documento existen cuatro márgenes: el margen superior, el

inferior, el interior y el margen exterior.

La medida de estos márgenes no es fija en ningún caso, aunque en el campo de autoedición o maquetación de profesionales, estos por defecto presentan unos márgenes predefinidos para cada clase de publicación que realizan.

Si se quiere aplicar una buena medida, es posible aplicar la proporción aurea o la siguiente norma:

1- Aplicar un espaciado al margen superior2- El 0,75 de este, se lo aplicaremos al margen interior.3- El doble del margen interior, se lo aplicaremos al margen exterior4- El doble del margen superior, al margen inferior.

Ejercicio 16: Póster tipográfico

Para poder realizar el ejercicio el alumno debió realizar las siguientes actividades:

• Lectura: Roba como un artista y reflexión de los videos.

En base a las actividades anteriores, el alumno resumirá lo que aprendió o lo que más lo impactó en una frase o enunciado.

• Cada alumno diseñará un póster tipográfico para promover la frase o enunciado que redactó.

• El póster tipográfico está basado en fuentes, tendrán que escoger la más adecuada para crear impacto, que permita recordarla, identificarse, generar “algo” en quien la ve.

Evaluación del ejercicioPóster: Impacto visual, concepto, claridad del

mensaje, medidas y normas básicas de diseño gráfico (ley de tercios, retículas, contrastes, equilibrio, manejo de fuentes, etc.)

Requisito de póster• Tamaño: carta• Resolución: entre 100 a 300 dpis• Horizontal o vertical, como gusten• Programas: Los que crean necesarios.• Subir la imagen final y la impresión de pantalla

con el manejo de las retículas.• Entrega: Miércoles 19 de octubre antes de

las 11:59pm• Para más ejemplos de pósters tipográficos

pueden revisar: http://typoholics.deviantart.com/

Recomendaciones• 50 Beautifully Illustrated Graphics with tips to make

you a better designer• https://designschool.canva.com/blog/professional-

design-tips/

• Typoholicshttp://typoholics.deviantart.com/

• Design my Worldhttp://designmyworld.deviantart.com/

• Design Developershttp://designdevelopers.deviantart.com/

Ejercicio 17: Póster Minimalista• Escogerán una película, puede ser live action o de

animación.• Diseñarán un póster publicitario con el concepto de la

película, realizarán una abstracción y utilizarán plastas para diseñarlo (diseño minimalista).

• Realizarán el diseño basado en vectores. Pueden ambientar con imágenes vectorizadas dibujadas también, figuras, letreros, logos, etc. Se pueden mezclar programas: Sketchbook, Photoshop e Illustrator.

• Utilizarán retículas para medir y realizar toda la composición. Subirán la imagen final y la impresión de pantalla con las retículas.

• Tamaño de hoja: carta a 200dpis.• Guardar en RGB para subir a deviantart.• Entrega: Viernes 21 de octubre antes de las 3pm.

• Planifiquen, realicen bosquejos en sucio, antes de empezar a trabajar en el programa (thumbnails).

• Guarden constantemente el archivo mientras trabajan y recuerden dónde lo guardaron.

Requisitos próxima clase• Traer thumbnails o avances de la idea.• Si no tienen avances no se recibirá el

ejercicio.

Ejemplo de Cubismo en el arte digital:http://tutorgrafico.com/impresionantes-ejemplos-del-cubismo-en-el-arte-digital.html

Cosas útiles • Disney movie posters• http://iliketowastemytime.com/

2012/04/18/different-take-disney-movie-posters-10-pics

• Alternative movies posters• http://www.shortlist.com/entertainment/

films/the-30-coolest-alternative-movie-posters-ever#

Referencias• Categorías de fuentes, serifas y san serif http://www.fotonostra.com/grafico/

clasesfuentes.htm

• La tipografía en el diseño gráficohttp://diseno.ciberaula.com/articulo/

tipografia_diseno_grafico/