Está en la página 1de 46

Contenidos de Diseño Digital

José Manuel López Ujaque

Tema 2. Contenidos gráficos digitales


Índice


►T1: El mundo digital

►T2: Contenidos gráficos digitales
►T3: Bits: Texto (o como la labor de un diseñador es selectiva)
►T4: Píxeles: Fotografía (o como la labor de un diseñador es apropiacionista)
►T5: Píxeles: Video (o como la labor de un diseñador conlleva comprimir)
►T6: Vectores: Ilustración (o como la labor de un diseñador es transparente)
►T7: Superficies: 3D (o como la labor de un diseñador es interactiva)

Contenidos de Diseño Digital – José Manuel López Ujaque 2


Índice


►T8: Continentes digitales
►T9: Narraciones multimedia: Presentaciones
►T10: Narraciones multimedia: Web 1.0, 2.0 y 3.0
►T11: Narraciones hipermedia: Realidades aumentadas
►T12: Narraciones hipermedia: Multipantallas

Contenidos de Diseño Digital – José Manuel López Ujaque 3


Tema 2 – Contenidos gráficos digitales
► 2.1 – ¿Cómo estudiar este tema?

► 2.2 – Bits

► 2.3 – Bits que son píxeles: Photoshop

► 2.4 – Bits que son vectores: Illustrator

► 2.5 – Bits que son superficies

► 2.6 – Referencias bibliográficas

Contenidos de Diseño Digital – José Manuel López Ujaque 4


Tema 2 – Contenidos gráficos digitales

Contenidos de Diseño Digital – José Manuel López Ujaque 5


2.2 – Bits

Contenidos de Diseño Digital – José Manuel López Ujaque 6


2.2 – Bits
► El bit es la unidad mínima de cualquier contenido digital

► Es un acrónimo de la expresión Binary Digit (dígito binario). Solo


puede adquirir los valores numéricos de cero o uno

► El término fue acuñado en 1957 por el ingeniero informático alemán


Werner Buchholz cuando, trabajando para IBM, participó en el diseño
del primer superordenador transistorizado de la marca: el IBM 7030

IBM 7030
Fuente: https://goo.gl/6QCYn6

Contenidos de Diseño Digital – José Manuel López Ujaque 7


2.2 – Bits
► Mientras el bit es el elemento indivisible, el byte es la agrupación de
información mínima utilizada en la informática y las
telecomunicaciones

► Un byte contiene 8 bits que adquieren valores (cero o uno) y


suponía, en el momento de su creación, la cantidad máxima de datos
que un ordenador podía procesar a la vez

Composición de 1 byte
Fuente: https://goo.gl/tTvfC6

Contenidos de Diseño Digital – José Manuel López Ujaque 8


2.2 – Bits

Equivalencias aproximadas entre bytes y objetos reales


Fuente: https://goo.gl/txWf16

Contenidos de Diseño Digital – José Manuel López Ujaque 9


2.2 – Bits
► Lev Manovich

► Artista, teórico y crítico especialista en el mundo digital


► Visión pluridisciplinar
► “El lenguaje de los nuevos medios de comunicación” (2005)

► “El software toma el mando” (2013)

► 5 principios de los nuevos medios (contenidos + continentes)

► 1) Representación numérica
► 2) Modularidad
► 3) Automatización
► 4) Variabilidad
► 5) Transcodificación

Contenidos de Diseño Digital – José Manuel López Ujaque 10


2.2 – Bits
► Los tres últimos principios (automatización, variabilidad y
transcodificación) son posibles gracias a los dos primeros
(representación numérica y modularidad).

Contenidos de Diseño Digital – José Manuel López Ujaque 11


2.2 – Bits
► 1) Representación numérica

► «Todos los objetos de los nuevos medios, ya se creen partiendo de


cero en el ordenador o sufran una conversión a partir de fuentes
analógicas, se componen de código digital. Son representaciones
numéricas»

► Cuando Manovich habla de objetos se está refiriendo a contenidos,


los elementos primigenios de información del diseño digital

► Contenidos → Conformados por cadenas de código compuestas


por números (ceros o unos) → byte

Contenidos de Diseño Digital – José Manuel López Ujaque 12


2.2 – Bits
► 2) Modularidad

► Estructura fractal de los nuevos medios

► Igual que un fractal posee la misma estructura a diferentes escalas,


el objeto de los nuevos medios presenta siempre la misma
estructura modular → Autosimilaridad

Ejemplo de fractal
Fuente: https://goo.gl/9c6KGR

Contenidos de Diseño Digital – José Manuel López Ujaque 13


2.2 – Bits
► 2) Modularidad

► Los elementos mediáticos, ya sean imágenes, sonidos, formas o


comportamientos, son representados como colecciones de
muestras discretas (píxeles, polígonos, caracteres o scripts), unos
elementos que se agrupan en objetos a mayor escala, pero que
siguen manteniendo sus identidades por separado

Contenidos de Diseño Digital – José Manuel López Ujaque 14


2.2 – Bits
► 2) Modularidad

Las páginas web son un ejemplo de modularidad


Fuente: https://goo.gl/GFXaUQ

Contenidos de Diseño Digital – José Manuel López Ujaque 15


2.2 – Bits
► 3) Automatización

► «La codificación numérica de los medios (principio 1) y la estructura


modular de sus objetos (principio 2) permiten automatizar muchas
de las operaciones implicadas en su creación, manipulación y
acceso».

► Eliminación (en parte) de la acción humana

► Bajo Nivel
► Alto Nivel

Contenidos de Diseño Digital – José Manuel López Ujaque 16


2.2 – Bits
► 3) Automatización

► Bajo Nivel

► Algoritmos muy simples o plantillas preexistentes que intervienen


en la creación o mejora automática de algún aspecto (píxeles,
ortografía, etc.) de los contenidos digitales

Aplicación de distintos filtros automáticos en Photoshop


Fuente: https://goo.gl/PDLPvV

Contenidos de Diseño Digital – José Manuel López Ujaque 17


2.2 – Bits
► 3) Automatización

► Alto Nivel

► Más complejo
► Necesita del desarrollo de inteligencias artificiales capaces de
interpretar y crear semánticas (contexto)
► En pleno desarrollo actual

Contenidos de Diseño Digital – José Manuel López Ujaque 18


2.2 – Bits
► 3) Automatización

► Alto Nivel

► Videojuegos
► Aventuras gráficas → Incipientes interacciones con el usuario

Mystery House, primera aventura gráfica de la historia. Desarrollada por Apple (1980)
Fuente: https://goo.gl/CW3k2u

Contenidos de Diseño Digital – José Manuel López Ujaque 19


2.2 – Bits
► 3) Automatización

► Alto Nivel

► Videojuegos
► Aventuras gráficas → Incipientes interacciones con el usuario

Maniac Mansion, primera aventura gráfica desarrollada por Lucasfilm Games (1988)
Fuente: https://goo.gl/7fNHHP

Contenidos de Diseño Digital – José Manuel López Ujaque 20


2.2 – Bits
► 4) Variabilidad

► «Un objeto de los nuevos medios no es algo fijado de una vez para
siempre, sino que puede existir en distintas versiones, que
potencialmente son infinitas».

► Los contenidos digitales son variables, mutables y líquidos

► Introducen la noción de versión y no la de réplica o copia


► La copia es idéntica y cerrada

► La versión introduce múltiples condicionantes y es abierta

Contenidos de Diseño Digital – José Manuel López Ujaque 21


2.2 – Bits
► 4) Variabilidad

Versiones de Photoshop (1987-2010)


Fuente: https://goo.gl/gfAKox

Contenidos de Diseño Digital – José Manuel López Ujaque 22


2.2 – Bits
► 5) Transcodificación

► Partamos de una imagen informatizada (digitalizada)

► En el plano de la representación, pertenece al lado de la cultura


humana, y entra de manera automática en diálogo con otras
imágenes

► A otro nivel, se trata de un archivo informático que consta de un


encabezamiento que la máquina puede leer, seguido por números
que representan la colorimetría de sus píxeles. A este nivel, entra en
diálogo con otros archivos informáticos

► «Se puede pensar en los nuevos medios en general como si


constaran de dos capas diferenciadas: la “capa cultural” y la “capa
informática”»

Contenidos de Diseño Digital – José Manuel López Ujaque 23


2.2 – Bits
► 5) Transcodificación

► Capa cultural VS. Capa informática

► ¿Existe realmente un diseño digital que esté 100% alejado de


formas arraigadas en lo analógico?

► ¿La digitalización implica un salto real o, en la mayor parte de


casos, es una simple imitación?

Contenidos de Diseño Digital – José Manuel López Ujaque 24


2.2 – Bits
► 5) Transcodificación

► Skeumorfismo
► Prima la evocación funcional/familiar (capa cultural) → iOS 6

► Prima la búsqueda de un lenguaje (capa informática) → iOS 7

Comparativa entre iOS 6 y iOS 7


Fuente: https://goo.gl/YZtcND

Contenidos de Diseño Digital – José Manuel López Ujaque 25


2.2 – Bits
► 5) Transcodificación

► Skeumorfismo
► Prima la evocación funcional/familiar (capa cultural) → iOS 6

► Prima la búsqueda de un lenguaje (capa informática) → iOS 7

Comparativa entre iOS 6 y iOS 7


Fuente: https://goo.gl/YZtcND

Contenidos de Diseño Digital – José Manuel López Ujaque 26


2.3 – Bits que son píxeles: Photoshop

Contenidos de Diseño Digital – José Manuel López Ujaque 27


2.3 – Bits que son píxeles: Photoshop
► Los bits se pueden presentar en forma de píxeles (picture element)

► Unidad mínima de color de cualquier imagen digital (contenido digital)

Un píxel a diferentes escalas


Fuente: https://goo.gl/SRE3nv

Contenidos de Diseño Digital – José Manuel López Ujaque 28


2.3 – Bits que son píxeles: Photoshop
► Es habitual el uso del modelo RGB (Red-Green-Blue) en que cada
pixel resulta la suma de tres intensidades de los colores primarios rojo,
verde y azul

► 256 colores

Modelo RGB
Fuente: https://goo.gl/Yp1Mjz

Contenidos de Diseño Digital – José Manuel López Ujaque 29


2.3 – Bits que son píxeles: Photoshop
► Es habitual el uso del modelo RGB (Red-Green-Blue) en que cada
pixel resulta la suma de tres intensidades de los colores primarios rojo,
verde y azul

Un píxel a diferentes escalas


Fuente: https://goo.gl/1S1LY7

Contenidos de Diseño Digital – José Manuel López Ujaque 30


2.3 – Bits que son píxeles: Photoshop
► Los píxeles, al ser magnitudes discretas, introducen gran importancia
en escoger la resolución correcta

► A mayor resolución, más píxeles, más información de color y más


precisión respecto al modelo analógico

► A menor resolución, menos píxeles, menos información de color y más


distancia respecto el original analógico

Gioconda a baja y alta resolución


Fuente: https://goo.gl/sXV4B4

Contenidos de Diseño Digital – José Manuel López Ujaque 31


2.3 – Bits que son píxeles: Photoshop
► Pixel Art

Pixel art, por eBoy (2010)


Fuente: https://goo.gl/oM9Uir

Contenidos de Diseño Digital – José Manuel López Ujaque 32


2.3 – Bits que son píxeles: Photoshop
► Photoshop

► Programa más extendido para el tratamiento y manipulación de


píxeles
► Primera versión en 1991

Interfaz de Adobe Photoshop CC 2015


Fuente: https://goo.gl/KDZG99

Contenidos de Diseño Digital – José Manuel López Ujaque 33


2.3 – Bits que son píxeles: Photoshop
► Photoshop y las capas

► Han redefinido cómo se crean las imágenes e incluso el significado


mismo de “imagen”. Lo que antes era un todo indivisible se ha
vuelto una composición hecha de partes separadas

Capas en Adobe Photoshop


Fuente: https://goo.gl/FXw41A

Contenidos de Diseño Digital – José Manuel López Ujaque 34


2.3 – Bits que son píxeles: Photoshop
► Photoshop y las capas

► Las capas de Photoshop modifican nuestra forma de trabajo con las


imágenes

► Frente al imaginario analógico donde la linealidad era patente


(borrar y deshacer no siempre era un proceso fácil), las imágenes
digitales dinamitan tanto el concepto temporal (podemos deshacer,
copiar y volver a hacer) como el concepto unidireccional

► En el diseño digital con píxeles el tiempo se superpone y bifurca

► Este modo de trabajo se extiende a prácticamente todos los


softwares

Contenidos de Diseño Digital – José Manuel López Ujaque 35


2.4 – Bits que son vectores: Illustrator

Contenidos de Diseño Digital – José Manuel López Ujaque 36


2.4 – Bits que son vectores: Illustrator
► Los vectores están definidos por atributos matemáticos (posición
inicial y final, dirección, sentido, color, etc.)

Contenidos de Diseño Digital – José Manuel López Ujaque 37


2.4 – Bits que son vectores: Illustrator
► Este formato es diametralmente opuesto al formato de los píxeles
► Valores individuales de color

► Discreto

Contenidos de Diseño Digital – José Manuel López Ujaque 38


2.4 – Bits que son vectores: Illustrator
► Ausencia de escala
► Podemos aumentar el tamaño de la imagen tantas veces como

queremos sin que eso suponga pérdida de calidad

Ausencia de escala vectorial


Fuente: https://goo.gl/wmU1ht

Contenidos de Diseño Digital – José Manuel López Ujaque 39


2.4 – Bits que son vectores: Illustrator
► Illustrator

► Programa más extendido para el tratamiento y manipulación de


vectores
► Sistema de capas → No linealidad

Interfaz de Adobe Illustrator CS6


Fuente: https://goo.gl/LDKtRE

Contenidos de Diseño Digital – José Manuel López Ujaque 40


2.5 – Bits que son superficies

Contenidos de Diseño Digital – José Manuel López Ujaque 41


2.5 – Bits que son superficies
► Los atributos vectoriales pueden complejizarse introduciendo la
tercera dimensión

► La implementación del 3D parecía reservada al diseño de producto o a


la ingeniería industrial, pero existen proyectos digitales que
demuestran que el campo de acción es mucho más diverso

Contenidos de Diseño Digital – José Manuel López Ujaque 42


2.5 – Bits que son superficies
► Utilizando como base la forma geométrica en 3D del edificio real, el
logo muta sus atributos vectoriales (colores y punto de vista) en
función de los imputs que se le introducen (fotografías de personajes
célebres del mundo de la música). Exportando el resultado a través de
archivos con formato vectorial (*.PDF, *.PS, *.SVG).

Diseño de identidad para la Casa de Música de Oporto, de Sagmeister & Walsh (2005)
Fuente: https://goo.gl/KuL6xc

Contenidos de Diseño Digital – José Manuel López Ujaque 43


Tema 2 – Contenidos gráficos digitales

Contenidos de Diseño Digital – José Manuel López Ujaque 44


Recomendaciones
► Clase magistral: Kim Cascone y el presente post-digital
► Skeumorfismo

► No dejes de leer…
► Tipos de contenidos

► No dejes de ver…
► Language of Tomorrow

► Gráficos vectoriales, ¿qué son?

Contenidos de Diseño Digital – José Manuel López Ujaque 45


www.unir.net