Diseño gráfico de productos editoriales multimedia. ARGN0110

5.2. Percepción espacial. Encuadre digital

Los nuevos medios de comunicación (fotografía, cine, cómic, imagen digital, etc.) tienen una manera propia de estructurar y encuadrar el espacio, que difiere notablemente de las composiciones gráficas y pictóricas tradicionales. En los nuevos lenguajes se toman en cuenta factores como la posición relativa entre sujeto y objeto, el corte en el encuadre, etc. En este punto vamos a destacar los planos, la angulación y el encuadre.

El plano

El plano es una tipología de encuadre que toma como referencia la figura humana; en concreto qué parte de la misma se representa en el plano y qué protagonismo tiene en relación con el entorno. Los planos más utilizados son:

1 Primerísimo plano o plano de detalle. Solo aparece una pequeña parte del protagonista.

2 Primer plano. Aparece la cara ocupando todo el plano. Tiene un importante efecto dramático y centra la atención en las emociones del protagonista.

3 Plano medio. El protagonista se ve de cintura para arriba.

4 Plano americano. La figura está cortada por las rodillas.

5 Plano completo o entero. La figura aparece de cuerpo entero.

6 Plano general. El sujeto aparece integrado en un contexto con más personajes, o con un fondo que cobra más protagonismo.

7 Gran plano general. Se encuadra el paisaje o entorno, donde la figura apenas tiene presencia.

Planos fotográficos

Sabía que...

El plano americano debe su nombre a las películas del género Western, donde era frecuente recortar la figura a la altura de las rodillas, para dar mayor protagonismo a las piernas, donde estaban las pistolas enfundadas. Sin embargo, existe otra versión según la cual este plano se inventó en las películas de Humphrey Bogart, para disimular su baja estatura. Cuando filmaban un plano junto a otros actores o actrices, cortaban a la altura de las rodillas y la estrella se subía a un taburete o rampa que no aparecía en pantalla.

Angulación

La angulación es la posición relativa vertical entre el fotógrafo y el motivo. Dado que la ubicación del fotógrafo será la que el espectador adopte respecto al motivo, el efecto psicológico de dominancia del sujeto respecto a la imagen dependerá de la altura a la que esté. Existen cinco tipos de angulación:

1 Plano nadir, cuando el fotógrafo está justo debajo del motivo retratado.

2 Contrapicado, cuando el fotógrafo está por debajo del motivo. Esta angulación aporta al objeto retratado una sensación mayor de tamaño y majestad.

3 Plano a nivel o plano normal, cuando no existe una diferencia de altura relevante. Estas fotografías son más naturales y relajadas.

4 Picado, cuando el fotógrafo está por encima. El espectador tendrá una sensación de control y dominio sobre la imagen.

5 Plano cenital, cuando el fotógrafo está justo encima.

Los planos nadir y cenitales, al ser poco frecuentes en la percepción cotidiana, suelen resultar antinaturales, pero despiertan el interés y la curiosidad del espectador por su originalidad.

Encuadre

El encuadre más común es el horizontal y sugiere reposo y equilibrio. Es el más utilizado en paisajes, interiores y retratos de grupo. El encuadre vertical tiene más fuerza y es más utilizado en retratos y publicidad gráfica, ya que las revistas y periódicos se leen en esa misma posición. El encuadre oblicuo se produce cuando el fotógrafo inclina la cámara en un ángulo diferente al horizontal o vertical, resultando en composiciones de mayor dinamismo y acción. Aquí el concepto de encuadre hace referencia exclusiva al momento de captación de la instantánea, ya que estas fotografías normalmente se presentarán horizontal o verticalmente.

Encuadre horizontal

Encuadre vertical

Encuadre oblicuo

Actividades

10. Realice una serie de fotografías del mismo motivo cambiando la angulación, el plano y el encuadre.

5.3. Composición: alineación, repetición, contraste y proximidad

Dentro de los múltiples valores que intervienen en una composición, existen cuatro de ellos de especial importancia en la composición multimedia: alineación, repetición, contraste y proximidad. R. Williams los sintetiza en su libro “Non-Designer’s Design Book” bajo el acrónimo C.R.A.P. design (contrast-repetition-alignment-proximity).

La alineación de elementos sirve para ordenarlos y hacer la composición más compacta y unitaria. Crea un eje compositivo que vertebra la imagen al completo y favorece su visualización. En el caso de productos multimedia complejos, donde aparece mucha información en pantalla, la alineación es fundamental para mantener la unidad visual.

La repetición de elementos visuales o estructuras compositivas dota también a la obra de coherencia interna. Cuando una empresa realiza su marca corporativa o un libro de estilo, por ejemplo, establece elementos visuales que serán comunes a todas las imágenes y productos asociados a la misma, con el fin de crear una identidad de empresa. En el caso de las estructuras compositivas de productos interactivos, la repetición de estructuras también ayuda a la navegabilidad, puesto que el espectador se familiariza con la disposición visual del producto: recuerda dónde debe estar cada cosa, sabe dónde dirigirse y así puede centrar su atención en el contenido de la obra.

Alineación

Repetición

El contraste entre distintas áreas de la composición facilita al espectador la lectura porque separa las partes que deben ser diferenciadas, para que pueda saltar de una a otra sin dificultad.

Contraste

Finalmente, la proximidad produce el efecto contrario: los elementos se agrupan formando unidades visuales que facilitan la lectura del mismo. Es un factor a tener en cuenta, según nuestros intereses, para potenciarlo o evitarlo; la proximidad inadecuada entre elementos diferentes puede provocar que el usuario los asocie, generando confusión en la lectura.

Proximidad

Actividades

11. Busque en internet cuatro páginas web donde se apliquen claramente los recursos de proximidad, contraste, repetición y alineación.

6. La imagen como elemento de comunicación

El concepto de imagen abarca objetos de tipología muy diversa: el garabato de un niño, una señal de tráfico, la Capilla Sixtina... Vamos a analizar la imagen como concepto, centrándonos en el tipo de imágenes que vamos a utilizar con más frecuencia en los proyectos multimedia: fotografía, ilustración e imagen digital.

6.1. Imagen como concreción de una idea

Para estudiar la importancia de la imagen podemos remontarnos a los primeros vestigios de la cultura humana. Antes que la escritura, las pinturas rupestres ya sirvieron al ser humano como herramienta de poder. Puesto que estas piezas se han encontrado mayoritariamente en lugares sin luz o de difícil acceso, la interpretación más común entre los historiadores es que tenían un significado mágico, y que en ellas se pretendía dibujar aquellos sucesos o conceptos que el hombre prehistórico deseaba ver cumplidos (escenas de caza o de fertilidad, o representaciones simbólicas del mundo, o de sí mismo). Aquí la imagen ya muestra su poder sobrenatural, que a lo largo de la historia se ha ido volviendo a manifestar en la devoción por las esculturas religiosas barrocas, las guerras iconoclastas contra la representación de Dios, la destrucción de los Budas gigantes en Afganistán y un largo etc.

Pinturas rupestres en Lascaux

A partir del siglo XX la imagen ha experimentado un auge sin precedentes. La eclosión de la fotografía llevó a la sociedad a un nivel superior de comunicación, donde todo era más fidedigno, más rápido, más eficaz. El siglo XXI ha dado una vuelta de tuerca a la capitalidad de la imagen en el mundo contemporáneo, con la nueva revolución de las imágenes multimedia, arropadas por sonido y movimiento, y un largo etcétera de fenómenos tecnológicos y sociales como la fotografía digital, las redes sociales o Internet, etc.

Más allá del tópico de la imagen que vale más de mil palabras, tenemos que tener en cuenta como profesionales que el ciudadano consume a diario una cantidad ingente de información visual. Para que nuestra imagen sea óptima en eficacia debemos valorar todos los factores individuales y colectivos que intervienen en el proceso de percepción visual.

6.2. Tipos de imágenes: fotografía e ilustración

Cuando elijamos las fuentes visuales en nuestro diseño, tendremos que decidir qué tipo de imagen interesa en cada momento. Las imágenes fotográficas son las que son producidas por un proceso fotomecánico. La naturaleza de esta imagen es bien conocida. A efectos cromáticos, pueden ser en blanco y negro, color o monocromas. En el resto de aspectos formales las posibilidades son prácticamente infinitas, pero tienen en común que, al no intervenir en su trazado la mano humana, sino una captación mecánica de la luz, el espectador tiende a atribuirles una carga de realidad mayor que a la ilustración (lo que se denomina valor icónico en la imagen).

La ilustración es aquella imagen realizada mediante una técnica gráficoplástica. Estas técnicas se pueden clasificar en secas, cuando en el proceso artístico no intervienen líquidos (lápices, tizas, pastel, grafito, carbón, sanguina, etc.) o húmedas (acuarelas, acrílicos, óleos, encáustica...). Cuando se mezclan varias técnicas diferentes esta se denomina mixta.

Importante

La frontera entre ilustración e imagen digital es difusa. Muchas imágenes combinan técnicas tradicionales con procesamiento posterior en pantalla, por lo que son mixtas. Pero incluso la ilustración tradicional dentro de un proyecto editorial multimedia es también imagen digital, puesto que se trata de un escaneado y su soporte no es físico.

Ilustración de técnica seca: grafito

Ilustración de técnica húmeda: acuarela

La imagen digital es la imagen creada o procesada por ordenador. Puede compartir características formales con la fotografía o la iluminación. Este tipo de imágenes puede ser plana o en gradiente, imitar técnicas gráfico-plásticas tradicionales, utilizar texturas fotográficas o virtuales, y un largo etcétera de recursos. De igual modo, puede estar generada por ordenador al completo, o bien partir de ilustraciones escaneadas o fotografías digitales, que se utilizan como un elemento más de la imagen o como base sobre la que hacer retoques.

Ilustración digital

6.3. Conceptos básicos de fotografía

La fotografía es un campo tan extenso que puede ser estudiado independientemente del diseño, pero existen ciertos conceptos básicos que debemos conocer a la hora de trabajar con imágenes.

Velocidad de obturación y apertura de diafragma

Estos son los dos factores que intervienen en el disparo fotográfico. El interior de la cámara fotográfica tiene una abertura llamada diafragma que al disparar se abre durante una pequeña fracción de tiempo, dejando que entre luz suficiente para registrar la imagen en el negativo (en las cámaras analógicas) o en la unidad de memoria (en las digitales).

La apertura del diafragma es un número regulable en las cámaras tipo reflex, que determina el diámetro de su apertura del diafragma. A mayor apertura, más luz entrará en la cámara. La velocidad de obturación es otro número que mide en fracciones de segundo el tiempo que estará el diafragma abierto. Cuanto menos tiempo esté abierto, menos luz entrará en la cámara.

Sabía que...

Algunos artistas como Picasso hicieron “dibujos con luz”. En un cuarto oscuro, colocaban la cámara con un trípode dejando el obturador abierto, y dibujaban en el aire con una linterna. En el negativo quedaba registrado el rastro del movimiento de la fuente de luz, como si fuera un dibujo.

Enfoque y profundidad de campo

Las fotografías no pueden enfocar todo el campo visual. Al igual que nuestro ojo, solo son capaces de enfocar un espacio limitado en profundidad. Esta área se denomina profundidad de campo, y las cámaras tipo reflex pueden hacer que sea mayor o menor manipulando la apertura y la velocidad.

Grano

La fotografía analógica registra la luz en una superficie de celuloide, el negativo, que está impregnado de sustancias químicas fotosensibles. Estas sustancias forman una trama estocástica que se denomina grano, que puede ser más o menos evidente dependiendo de las características del negativo (su sensibilidad ISO) y las condiciones en las que se tome la instantánea (las fotos disparadas en condiciones de luz difícil o de mucho contraste darán un grano más perceptible).

La fotografía digital, al prescindir de la química en el proceso de registro de la luz, no tiene esta cualidad per se, y los fotógrafos que deseen una imagen con grano tendrán que añadírselo mediante filtros, con programas de retoque fotográfico. No obstante, las fotos digitales tomadas en condiciones inadecuadas sí que producen cierta irregularidad granular en el color, denominada “ruido digital”, a modo de motas de color discordante. El ruido digital se considera por lo general antiestético en una fotografía. El grano fotográfico en cambio añade atmósfera a la imagen y suele valorarse positivamente cuando se utiliza de forma intencionada.

Grano en fotografía

Movimiento

Captar en una superficie estática la impresión de movimiento ha sido objeto de investigación artística desde los primeros estilos artísticos. Desde la secuenciación de la columna Trajana, hasta el “desnudo bajando la escalera” de Duchamp, pasando por la rueca de las Hilanderas en el cuadro homónimo de Velázquez, los experimentos del orfismo y el futurismo y mil ejemplos más, los artistas plásticos han querido suplir el estatismo inherente al dibujo y la pintura con diferentes efectos de movimiento.

La representación del movimiento en las artes plásticas: Velázquez, Duchamp y Delaunay

La fotografía tiene una forma de captar el movimiento muy característica y expresiva. Al tratarse del registro de la luz sobre un soporte durante un espacio de tiempo muy corto, cabe esperar que los objetos que se muevan en el campo visual durante ese momento queden registrados de diferente forma a los que están quietos. Un objeto que se ha desplazado durante la toma dejará una estela detrás suya, que pondrá en evidencia el movimiento que ha descrito. Las primeras fotografías de retrato de finales del siglo XIX requerían de un posado lento y tedioso, ya que la película fotosensible no tenía suficiente fuerza para captar la luz en décimas de segundo, lo que provocaba unos contornos diluidos, aterciopelados, provocados por el movimiento natural del pulso y la respiración del retratado. Por el contrario, con la tecnología actual es posible incluso fotografiar el efecto del disparo de una bala mientras se produce. Entre un extremo y el contrario, los fotógrafos pueden decidir mediante la velocidad de obturación cuándo permitir que el movimiento quede registrado como tal en la imagen.

Representación de movimiento en la fotografía

Ley de tercios

Todas las reglas compositivas que hemos visto en este capítulo son aplicables a la fotografía; pero en comparación con la ilustración y el resto de imágenes artísticas, el carácter de este lenguaje ha dado lugar a una libertad mucho mayor y a unas normas específicas, de las cuales la más relevante es la Ley de los tercios. Esta norma establece que, dividiendo las imágenes en una retícula de 3 filas y columnas, las figuras estarán mejor distribuidas cuando se ubiquen a lo largo de estos ejes, y tendrán una mejor presencia si ocupan los espacios que quedan entre estos. Este principio es aplicable a cualquier otro medio visual, y es de especial utilidad en las maquetaciones, menús y diseños multimedia.

Actividades

12. Localice tres fotografías artísticas donde se aplique el principio compositivo de los tercios.

6.4. Desarrollo en la creación de la imagen gráfica digital

La imagen digital permite al diseñador un trabajo más rápido y efectivo que los procedimientos tradicionales, si bien requiere unos conocimientos técnicos específicos tanto conceptuales (tipos de imagen digital y cualidades) como técnicos (manejo de las herramientas adecuadas).

Una imagen digital puede ser generada íntegramente por ordenador, dibujando directamente en la aplicación digital, o importada a través de dispositivos de entrada y posteriormente editada.

Las imágenes digitales pueden estar constituidas por gráficos vectoriales o mapas de bits o bitmaps. Los gráficos vectoriales están compuestos por vectores matemáticos que definen las líneas y curvas que conforman la imagen. Su edición por tanto no se hace píxel a píxel, sino modificando los parámetros de dichos vectores mediante comandos o entorno gráfico. En estas imágenes predomina el carácter geométrico y la homogenidad de los planos. La excelente escalabilidad de los vectores (no se pierde calidad ni resolución al cambiar de tamaño) y sus características formales, los hace perfectos para logotipos, gráficos de texto o imágenes por planos. Los archivos vectoriales tienen además mucho menos peso (tamaño en bytes) que los bitmaps. Formatos vectoriales muy extendidos son SVG (de licencia libre), CDR (de Corel) o AI (de Adobe).

Los mapas de bits por el contrario son cuadrículas de píxeles con información lumínica. Pierden calidad al ser escalados, pero permiten mucha más libertad para representar imágenes complejas como fotografías o ilustraciones gráfico-plásticas. Al ocupar mucho más espacio en memoria que los vectores, existen distintos formatos de compresión (jpg, gif, png, tiff...) que crean patrones de codificación en el guardado, reduciendo el número de colores (gif, png) o eliminando información que el ojo es menos susceptible de detectar (jpg). Un factor muy importante a tener en cuenta en los bitmaps es la resolución, que puede hacer una imagen inservible para su impresión, si la resolución es baja, o demasiado pesada para su publicación en internet, si la resolución es alta. La resolución estándar para una pantalla convencional es de 72 o 96 ppp (píxeles por pulgada).

Definición

Resolución

Es el número de puntos o píxeles por unidad lineal, generalmente expresados en puntos por pulgada.

6.5. Evaluación técnica y cualitativa de la imagen

La imagen que estamos creando puede ser, como acabamos de ver, vectorial o bitmap. Según su naturaleza, el tratamiento y características de la imagen es muy variado, así como las finalidades para las que son idóneas.

Las imágenes vectoriales son de concepto plano, aunque estos planos tengan rellenos con gradientes o textura. Los bitmap pueden estar compuestas por planos o no, pero el archivo de imagen solo almacenará información cuantitativa sobre la cantidad de luz que hay en cada píxel, sin que haya un reconocimiento cualitativo de las formas que la componen. Los programas de edición y retoque fotográfico, no obstante, tienen utilidades y filtros para detectar líneas y planos en la edición de bitmaps.

Otro aspecto técnico de la imagen digital es la resolución de la misma. Al hablar de resolución tenemos que tener en cuenta dos elementos: la definición de la propia imagen, y la del dispositivo de salida (monitor, TV, impresora). En el caso de las imágenes multimedia, que van a ser visualizadas en pantalla, el tamaño aparente de una imagen dependerá, por un lado, de las dimensiones reales de los puntos de la pantalla, y por otro lado, de la resolución de la imagen. Es muy importante que exista una concordancia entre ambas para evitar problemas técnicos. Un monitor de 21 pulgadas muestra 1152 puntos en horizontal y 870 en vertical. Una imagen a pantalla completa tendrá que tener, por tanto, 1152x870 píxeles.

Como hemos visto anteriormente, las imágenes vectoriales pueden ser escaladas sin ningún problema. Los bitmap, sin embargo, deben ser optimizados en tamaño y resolución para que su aspecto en pantalla sea el adecuado.

Respecto al color, existen, como veremos más adelante, dos tipos de color diferente: el de los objetos físicos, denominado color-pigmento, y el de la luz, denominado color-luz. En las imágenes susceptibles de ser impresas (color-pigmento), la imagen digital se descompone en cuatro colores: amarillo, cyan, magenta y negro. Esta escala se denomina CMYK. Por el contrario, las imágenes destinadas a aparecer en pantalla utilizan la escala de color luz, que se descompone en rojo, azul y verde (RGB).

En el tratamiento digital de la imagen podemos pasar una imagen de CMYK a RGB y viceversa, pero tenemos que tener en cuenta que algunos colores RGB no son reproducibles en CMYK, por lo que el paso de una escala a otra podrá generar pérdidas. Muchas aplicaciones informáticas advierten cuando un tono RGB sobrepasa la escala CMYK, y por tanto se pierde en la conversión, mediante un símbolo de admiración en un triángulo (!) o una advertencia similar.

Del mismo modo, las imágenes CMYK que aparecen en pantalla se están visualizando en RGB, ya que el monitor emite luz, no pigmento, con lo cual el aspecto de la imagen en el monitor puede tener discordancias con el resultado impreso.

Otro aspecto técnico del color es, en el caso de las imágenes bitmap, los formatos de imagen y su idoneidad. Como hemos visto anteriormente, existen diferentes formatos que comprimen la imagen para que ocupe menos. Algunos generan pérdida de definición, como los JPG, y otros, pérdida de color, como los GIF y los PNG. Los archivos que no generan pérdida como los TIFF tienen el inconveniente de ser demasiado pesados.

Los JPG tienen pérdida de definición porque simplifican los datos de la imagen en las áreas de color donde hay pocos cambios de contraste o luminosidad, eliminando así los datos más sutiles al ojo humano. Esta compresión puede regularse en el guardado, por lo que se puede lograr que sea imperceptible; aunque a menor pérdida de datos, mayor peso de la imagen. La compresión JPG se hace más evidente en las zonas de línea o de contornos contrastados. Es por ello que es más conveniente para imágenes fotográficas o de gran tamaño.

Los GIF y PNG no tienen pérdida de definición, pero sí de color. Estos formatos crean una paleta de colores limitada, y convierten los colores que no están en dicha paleta al tono más afín que haya en la misma. Este proceso se llama indexación. Cada archivo GIF o PNG crea su propia paleta al generarse, utilizando los colores más frecuentes en la misma. La aplicación informática puede definir la paleta o índice de colores (index) con el número de colores que el usuario decida. Es por ello que en imágenes simples o de tonos planos la pérdida es imperceptible. Además, permite definir áreas transparentes en la imagen, haciendo que el fondo en el que se inserta la figura pueda verse dentro del área de la imagen.

GIF admite también imágenes animadas. PNG, por otra parte, ofrece las mismas prestaciones (salvo la animación), con algunas ventajas: su código de compresión es libre, mientras que el del formato GIF pertenece a la empresa Unisys; permite incluir metadatos en la imagen, lo que facilita que los motores de búsqueda puedan indexar la imagen en función de la descripción y no solo del nombre; y, por último, permite el entrelazado de imagen, que hace que la descarga de la misma se haga mediante líneas distribuidas por toda la superficie, para que el usuario tenga una idea aproximada de su aspecto desde que la descarga se inicia.

Importante

Cada vez que guardamos un archivo como JPG, se vuelve a realizar el proceso de compresión de imagen, por lo que la pérdida de calidad aumenta. Es más conveniente trabajar con otro formato y realizar el guardado en JPG cuando la imagen ya esté terminada.

Actividades

13. Realice cinco guardados en JPG de una imagen fotográfica, a distinto nivel de compresión. Sitúelos consecutivamente en un único archivo y compare los resultados.