UF1247: Composición de pantallas y animación de fuentes ... · mación de fuentes para proyectos...

UF1247: Composición de pantallas y animación de fuentes para proyectos audiovisuales multimedia

Elaborado por: Cristina Manzano Cánovas Esther Lozano García

Edición: 5.0

EDITORIAL ELEARNING S.L.

ISBN: 978-84-16199-23-5 • Depósito legal: MA 1057-2014

No está permitida la reproducción total o parcial de esta obra bajo cualquiera de sus formas gráficaso audiovisuales sin la autorización previa y por escrito de los titulares del depósito legal.

Impreso en España - Printed in Spain

Presentación

Identificación de la unidad formativa:

Bienvenido a la Unidad Formativa UF1247: Composición de pantallas y ani-mación de fuentes para proyectos audiovisuales multimedia. Esta Unidad Formativa pertenece al Módulo Formativo MF0945_3: Integración de elemen-tos y fuentes mediante herramientas de autor y de edición, que forma parte del Certificado de Profesionalidad IMSV0209: Desarrollo de productos audio-visuales multimedia interactivos, de la familia profesional de Imagen y sonido.

Presentación de los contenidos:

La finalidad de esta Unidad Formativa es componer las pantallas, páginas, niveles o diapositivas según las maquetas y bocetos de diseño, integrando las fuentes necesarias mediante herramientas de autor, además de generar y sincronizar los movimientos de las fuentes en la pantalla, según criterios esta-blecidos en el proyecto y el storyboard.

Objetivos de la unidad formativa:

– Integrar las fuentes en las pantallas, páginas, niveles o diapositivas, aten-diendo a las características del proyecto interactivo multimedia.

4


– Generar y sincronizar los movimientos de las fuentes en la pantalla, ajus-tándolas a las especificaciones narrativas.

Índice

UD1Fuentes tipográficas

1.1. Tipos de acciones .......................................................................11

1.1.1. Valor expresivo ..................................................................12

1.1.2. Separación de Estilo y Contenido. Datos XML ....................14

1.2. Características comunicativas ......................................................15

1.2.1. Coherencia de diseño ........................................................16

1.2.2. Visibilidad ..........................................................................17

1.2.3. Escala y ajustes dinámicos para ayudas a la visión ..............21

1.2.4. Legibilidad .........................................................................22

1.2.5. Texto interactivo frente a texto comunicativo ........................23

1.3. Partes de las fuentes ...................................................................23

1.4. Formatos de las fuentes ..............................................................28

1.4.1. True Type Font (TTF)...........................................................28

1.4.2. PostScript Type 1 ..............................................................29

1.4.3. Open Type Font (OTF) ........................................................30

1.4.4. Datos UTF8 y textos dinámicos ..........................................31

6


1.5. Kerning .......................................................................................32

1.5.1. Operaciones de ajuste entre caracteres ..............................33

1.6. Tipografía ....................................................................................35

1.6.1. Grosor en el trazo ..............................................................35

1.6.2. Negritas y estilos ...............................................................36

1.6.3. Comentarios y pies de imagen/página ................................37

1.6.4. Reseñas y citas .................................................................38

1.6.5. Inclinación del eje vertical o cursiva .....................................39

1.6.6. Proporción entre ejes vertical y horizontal ............................40

1.7. Alineación ...................................................................................41

1.7.1. Opciones de alineación de textos .......................................42

1.8. Interlineado ..................................................................................44

1.8.1. Espacio correcto entre líneas de texto ................................45

1.9. Tamaño .......................................................................................46

1.9.1. Ajuste del tamaño de las fuentes ........................................48

1.9.2. Tamaño de fuentes y jerarquía de información .....................49

1.10. Color .........................................................................................50

1.10.1. Propiedades del color ......................................................53

1.10.2. Tono ...............................................................................54

1.10.3. Valor ...............................................................................55

1.10.4. Intensidad .......................................................................56

1.10.5. Visibilidad ........................................................................56

1.10.6. Contraste entre tipografía y color de fondo ........................57

1.10.7. Problemas de refresco y ‘flikeo’ en pantalla .......................58

UD2Integración de textos en pantalla

2.1. Esquemas de composición .........................................................69

2.1.1. Tipos de composición visual ..............................................72

2.1.2. Distribución y peso informativo ...........................................72

2.1.3. Arquitectura de la Información ............................................74

7

Índice

2.2. Formatos de pantalla ...................................................................75

2.2.1. Formatos de pantalla para la introducción de datos .............76

2.2.2. Campos dinámicos y formularios ........................................77

2.3. Utilización de imágenes de muestra .............................................79

2.4. Texto tipográfico frente a texto como gráfico .................................83

2.5. Creación de plantillas de trabajo ...................................................84

2.5.1. Diseño de plantillas ............................................................85

2.6. Definición de hojas de estilo .........................................................87

2.6.1. Funciones .........................................................................89

2.6.2. Reglas de definición de estilo .............................................90

2.6.3. Herencia y jerarquía ...........................................................92

2.6.4. Selectores (de tipos, universales, de id, secundarios,

de atributos) ......................................................................94

2.6.5. Declaración de estilo ........................................................101

2.6.6. Declaraciones múltiples ...................................................104

2.7. Ficheros externos de configuración ............................................105

2.8. Optimización de las fuentes .......................................................106

2.9. Ajuste de los parámetros de calidad, tamaño y formato...............107

UD3Sincronización de fuentes

3.1. Generación de rutas o guías de movimiento ...............................117

3.2. Ajustes temporales (ritmo, duración y comprensión lectora) .........142

3.3. Software específico de animación tipográfica ..............................143

3.4. Sincronización de ritmos narrativos frente a asimilación informativa ..144

3.5. Adaptación a la intencionalidad dramática del proyecto ...............145

3.6. Generación de transiciones .......................................................147

3.7. Animación tipográfica programada frente a animación manual .....148

Glosario ...........................................................................................155

Soluciones .......................................................................................157

8


UD1Fuentes tipográficas

10


1.1. Tipos de acciones1.1.1. Valor expresivo1.1.2. Separación de Estilo y Contenido. Datos XML

1.2. Características comunicativas1.2.1. Coherencia de diseño1.2.2. Visibilidad1.2.3. Escala y ajustes dinámicos para ayudas a la visión1.2.4. Legibilidad1.2.5. Texto interactivo frente a texto comunicativo

1.3. Partes de las fuentes1.4. Formato de las fuentes

1.4.1. True Type Font (TTF)1.4.2. PostScript Type 11.4.3. Open Type Font (OTF)1.4.4. Datos UTF8 y textos dinámicos

1.5. ‘Kerning’1.5.1. Operaciones de ajuste entre caracteres

1.6. Tipografía1.6.1. Grosor en el trazo1.6.2. Negritas y Estilos1.6.3. Comentarios y pies de imagen/página1.6.4. Reseñas y citas1.6.5. Inclinación del eje vertical o cursiva1.6.6. Proporción entre ejes vertical y horizontal

1.7. Alineación1.7.1. Opciones de alineación de textos

1.8. Interlineado1.8.1. Espacio correcto entre líneas de texto

1.9. Tamaño1.9.1. Ajuste del tamaño de las fuentes1.9.2. Tamaño de fuentes y jerarquía de la información

1.10. Color1.10.1. Propiedades del color1.10.2. Tono1.10.3. Valor1.10.4. Intensidad1.10.5. Visibilidad1.10.6. Contraste entre tipografía y color de fondo1.10.7. Problemas de refresco y ‘flikeo’ en pantalla

11

1.1. Tipos de acciones

En informática, una fuente tipográfica es un archivo vectorial que contiene la información necesaria para indicar al Sistema Operativo el tamaño, forma, in-terletraje, y demás características del tipo, aplicados a cada uno de los carac-teres, también llamados glifos, de la fuente.

Para crear una fuente tipográfica se utiliza un software denominado ‘Editor de Fuente’, con el que se genera un archivo para cada tipo de fuente, que puede contener:

– Un alfabeto en minúsculas

– Un alfabeto en mayúsculas

– Signos de puntuación

– Símbolos...

Para poder utilizar una fuente tipográfica en el equipo tendremos que instalar el archivo que contiene toda la información necesaria, normalmente en una carpeta del Sistema Operativo diseñada para este fin.

12


Una vez instalada una fuente, podremos utilizarla en todos aquellos programas instalados en nuestro equipo informático, tanto si realizamos un trabajo para ser visto en pantalla, como si va a ser impreso.

1.1.1. Valor expresivo

Igual que el color, una fuente tiene su propia fuerza expresiva y hace sentir al espectador antes de ponerse a leer. La tipografía comunica por sí misma me-diante la forma visual que la caracteriza.

Para tener claro cuál será el tipo de letra que mejor se adecue al mensaje que quiero transmitir, será muy útil trabajar el texto hasta tener muy claro:

– Cuál es el objetivo del mensaje.

– Cuál es el estilo del texto.

– Qué tipo de texto es.

13

UD1

Tipografía

Mensaje

Objetivo

Tipo de texto

Estilo

La tipografía, en resumen, es la forma del mensaje que queremos comunicar a través de un texto escrito.

Es fundamental tener en cuenta que para cada proyecto debemos utilizar la fuente que sea más adecuada para transmitir el mensaje que tengamos en mente.

Así por ejemplo podemos establecer los siguientes paralelismos entre algunas familias tipográficas y lo que expresan:

Familia tipográfica Ejemplo Expresa

Arial Texto Neutral

Trajan Pro Texto Clásico

Rage italic Texto Informal

Gill Sans Bold Italic Texto Acción

Garamond Italic ‘Texto’ Cita

Edwardian Script ITC Texto Elegancia

14


1.1.2. Separación de Estilo y Contenido. Datos XML

Como consecuencia de las diferencias que se daban a la hora de plasmar un mismo diseño en diferentes aplicaciones o en aplicaciones de distintas marcas, el w3c (World Wide Web Consortium) consorcio internacional que produce recomendaciones para la World Wide Web, desarrolló XML.

XML (eXtensibleMarkupLanguage), es un lenguaje de marcas extensible, que sirve para intercambiar información, de manera que sea posible definir de ma-nera separada el estilo que aplicaremos a los mismos textos en diferentes plataformas.

Así el contenido se define de una sola vez mientras que de manera separada se especifican los diferentes estilos que tomará dependiendo de dónde vaya a ser visualizado y no hay que hacer un diseño completo distinto.

A continuación se muestra un breve esquema de la cantidad de destinos que puede tener un mismo contenido.

XML

Html

Sobremesa iPad Quark

Smartphone

Portátil Kindle InDesign

Tablet

Pdf Ebook Imprimir

15

UD1

1.2. Características comunicativas

La tipografía, el tipo de fuente, de un texto no es únicamente un medio para transcribir el lenguaje oral, sino que además posee un significado propio, tiene su propia fuerza expresiva. De esta manera, podemos utilizarla para reforzar el mensaje que necesitemos transmitir, pero si no la cuidamos, puede suceder que elijamos una tipografía que no esté acorde con el mensaje a comunicar dando como resultado un texto que de sensación de que el diseñador no es muy bueno.

Por poner un ejemplo, vamos a ver una misma palabra con dos fuentes distintas:

Psicosis|Psicosis

Se pone de manifiesto con en el ejemplo cómo el mismo texto con distintas fuentes aplicadas transmite ideas distintas.

Pero seleccionar el tipo de letra adecuado, teniendo en cuenta la cantidad de ellas que podemos aplicar, puede convertirse en una tarea muy complicada, por lo que tendremos que tener en cuenta:

– La fuente tendrá que crear interés visual, por lo que habrá que tener en cuenta no sólo su aspecto estético letra a letra, sino cómo se comporta en el contexto en que vayamos a utilizarla.

– Si es conveniente. Para lo que tendremos que realizar un análisis de la audiencia, de qué se quiere comunicar y con qué tono, además de cómo vamos a expresarlo. Cada tipografía tiene un significado y conocerlo, co-nocer cómo está clasificada y su historia será fundamental para conocer ese significado, que en ocasiones puede quedar en el ámbito de la sub-consciente, pero que funciona igualmente.

– Su legibilidad. La facilidad con que se reconocen los caracteres de un tipo facilitará la lectura y generará una mejor experiencia de usuario. Para estimar la legibilidad de una tipografía hay que saber que:

∙ Las demasiado finas o demasiado gruesas no se ven bien en tama-ños pequeños.

∙ Las que tienen muy diferente grosor de trazo son difíciles de leer en tamaños pequeños.

16


∙ Comprimir y expandir texto afecta a la forma de las letras y puede hacer que se confundan unas con otras o que se pierda su conti-nuidad en una palabra.

∙ Los textos en mayúsculas son difíciles de leer en textos largos.

∙ Un contraste alto entre texto y fondo aumentará la legibilidad.

∙ Los textos con colores muy saturados son más difíciles de leer.

∙ Se leen primero los textos con colores más oscuros.

– La relación que tendrá con el resto de elementos visuales. Si compartirán características, si el peso comunicativo recaerá sobre el resto de elemen-to o si será al contrario.

1.2.1. Coherencia de diseño

La coherencia en un diseño significa mantener la línea gráfica de cada uno de los elementos que lo componen, iconos, botones, tamaño y estilo de los mismos elementos de texto, a lo largo de todo el proyecto.

Mantener la coherencia en un diseño, sobre todo cuando hablamos de un proyecto grande, o de un proyecto que implique varias pantallas, puede ser complicado, pero no hacerlo afectará a la calidad del producto final.

Para que un diseño sea coherente en lo que se refiere a las familias tipográfi-cas es necesario que se utilicen 3 o 4 de ellas como mucho y que al mismo tipo de texto le corresponda el mismo tipo y tamaño de fuente, en todo el proyecto y durante toda su vida activa.

En caso contrario se dará imagen de desorden, falta de comunicación, falta de claridad etc.

Las recomendaciones para mantener la coherencia en el diseño son:

– Situar el menú principal de navegación en el mismo sitio en todas las pantallas. Esto facilitará al usuario localizar el lugar al que debe dirigirse en caso de querer cambiar de pantalla

– Los botones del mismo tipo de un mismo proyecto tendrán que tener el mismo color de fondo, la misma tipografía y el mismo aspecto cuando

17

UD1

el botón pase por encima. Por ejemplo, si establecemos un botón ‘Leer más’ con color de fondo gris claro y texto de color negro y que al pasar el ratón sobre él, el color de fondo cambie a gris oscuro y el texto a blanco, todos los botones ‘Leer más’ del sitio tendrán que ser iguales y tomar el mismo aspecto. De esta manera facilitaremos al usuario el reconocimiento rápido del tipo de elemento que visualiza.

– Los títulos de la misma importancia tendrán que ser iguales a lo largo de todo el proyecto, de manera que jerarquicemos la información, lo que redundará en una mayor claridad e interés visual.

– De la misma manera deberán mantenerse colores de fondo, iconos etc., a lo largo de todo un proyecto, lo cual, unido a lo anteriormente expuesto ayudará a consolidar la imagen del proyecto.

Recuerda

La coherencia en el diseño es fundamental para mejorar la experiencia de usuario que redundará en una mejor captación de nuestro mensaje y para ofrecer una imagen sólida, consistente y congruente del mensaje que necesi-temos expresar en nuestro proyecto.

1.2.2. Visibilidad

La visibilidad del texto que contiene la información que queremos transmitir, va a ser fundamental a la hora de crear un texto que comunique el mensaje que queremos transmitir.

Enunciamos a continuación diferentes elementos que influyen en la correcta visualización del texto en pantalla, como introducción a un tratamiento más explícito en puntos siguientes del tema.

VISIBILIDAD

Contraste color fuente - color fondo

Tamaño del texto

Texto destacado

Alineaciones Distribución

18


En general el color del tipo de fuente y el color del fondo debe haber un con-traste suficiente para favorecer la lectura.

Una relación de color fuente-fondo ordenada de mayor a menor quedaría como sigue:

1º Negro sobre blanco

2º Negro sobre amarillo

3º Naranja sobre blanco

4º Rojo sobre blanco

5º Verde sobre blanco

Tamaño del texto

A la hora de elegir el tamaño del texto para visualizar en pantalla lo primero que hay que tener en cuenta es que leer en un monitor es muy cansado.

El tamaño del texto que elijas para tu proyecto debe mitigar esta dificultad teniendo en cuenta que, no ve igual un niño, un anciano, una persona con discapacidad visual, etc.

Importante

No se deben utilizar tamaños de fuente absolutos. Con ello se favorece que el usuario pueda adaptar el tamaño de la fuente a sus necesidades, bien sea por gusto o por discapacidad.

19

UD1

Texto destacado

A la hora de destacar texto en pantalla debes tener en cuenta que:

Estilo Uso

SubrayadoReserva el uso de subrayados para los vínculos, no los utilices para destacar texto.

Negrita Es muy efectivo si se limita a textos muy cortos.

Cursiva Utilízala para citas, o texto en otros idiomas.

Mayúsculas Utilízalas con cuidado y en textos muy cortos.

Como norma, ten siempre presente no abusar del destacado de textos ya que es contraproducente.

Lo mejor es que se establezcan unas reglas para enfatizar y utilizarlas a lo largo de todo un proyecto.

Alineaciones:

La alineación de un texto va a marcar la disposición de sus bordes y su apa-riencia.

Cuando alineamos un texto a la izquierda, su borde izquierdo queda a la dis-tancia que indiquemos del margen izquierdo, mientras que la distancia con respecto al margen derecho dependerá del texto que contenga.

Cuando alineamos un texto a la derecha, su borde derecho queda a la dis-tancia que indiquemos del margen derecho, mientras que la distancia con respecto al margen izquierdo dependerá del texto que contenga.

En un texto centrado la distancia con respecto a ambos márgenes será la misma.

Y en un texto justificado el texto queda a la distancia que indiquemos respecto de ambos márgenes, distribuyéndose los espacios entre palabras para que esto sea posible.

20


En cuanto a cuál de las alineaciones es mejor para una correcta visualización, depende del contexto y de cómo se va a utilizar el texto

IzquierdaCon ella se consigue una mejor visibilidad, puesto que en occidente estamos acostumbrados a comenzar a leer desde la izquierda.

Derecha Adecuada para textos cortos.

Centrada Adecuado cuando sólo hay una columna en pantalla.

JustificadaNo recomendable en todos los casos, ya que puede dar lugar a que se produzcan espacios demasiado grandes entre palabras.

UF1247: Composición de pantallas y animación de fuentes ... · mación de fuentes para proyectos...

Documents

Transcript of UF1247: Composición de pantallas y animación de fuentes ... · mación de fuentes para proyectos...