Interaccin y

Multimedia
Grficos
1. Digitalizacin de imgenes

X Significa pasar de analgico a digital

X Muestreo: recogida de valores a intervalos regulares.
X Un pixel no es un cuadrado: es una muestra tomada en un
punto
X Frecuencia de muestreo: DPI (dot per inch) PPP
(puntos por pulgada)
X De ello depende la calidad de la imagen
X http://www.xatakafoto.com/guias/los-puntos-por-
pulgada-ese-gran-desconocido
X Duplicar el nmero de muestras en las dos direcciones =
x 4 el nmero de pxeles
1. Digitalizacin de imgenes

X Resolucin: nmero de muestras en X y en Y

X >200 ppp buena resolucin de impresin
X Calidad fotogrfica 300 ppp
X Tamao: depende del dispositivo de salida
X La resolucin de impresin, es decir, los puntos por
pulgada (ppp) a los que se puede imprimir una imagen
digital de calidad
X Dispositivos ms habituales: mvil, tablet, cmara
digital y escner
Ejercicios

1. Cuntos Mpixel ocupa una imagen en calidad

fotogrfica en tamao DIN A4?
2. Cul es la resolucin de una cmara capaz de obtener
una imagen de 1600 x 1200 pxeles?
3. Cul es la resolucin de impresin mxima para una
imagen de buena calidad (200 ppp) si quiero una
anchura de 1600 pixel? Y si quiero calidad fotogrfica?
4. Cuntos pxeles necesitamos para imprimir una imagen
de 10 x 32 cm a calidad fotogrfica (300 ppp)?
1. Digitalizacin de imgenes

25 px. x 20 px. 100 x 80

1. Digitalizacin de imgenes

X El proceso de digitalizacin tiene dos pasos:

X Muestreo (qu cojo y cada cunto)
X Cuantizacin (cuntos bits utilizo para codificar lo que hay en
ese punto) determina el nmero de colores disponibles
X Cuantizacin: pasar de una paleta ilimitada a una paleta
limitada de colores.
X Hay que determinar:
X Nmero de colores disponibles. Depende del nmero de bits
por pixel: n bits = 2n colores
X P.e. 2 bits 4 colores

X Colores elegidos: han de ser los ms parecidos a la imagen

original
Digitalizacin de imgenes

X Cuantizacin
X Img1 2 bits
X Img2 3 bits
X GIF tienen paletas de colores de 8 bits
1. Digitalizacin de imgenes

X Con paletas de colores antiguas:

X Elegir la paleta
X Cuantizar cada pixel de acuerdo a esa paleta
1. Digitalizacin de imgenes

X Bits por pixel:

X Estndar 24 bpp: 8R, 8G y 8B = 16.777.216 colores. Es
suficiente para la capacidad visual humana
X 32 bpp: 8R, 8G, 8B y 8A (alfa) = 16.777.216 colores y 256
niveles de opacidad
X Estndar de alta calidad 48 bpp: 16R, 16G, 16B = 2.81 x
1014
2. Imgenes bitmap

X Imgenes bitmap:
X Cada pixel:
X Posicin (x, y)
X Color determinado por una serie de valores numricos.

X Formato estndar para la edicin de imgenes

X Dependientes de la resolucin del dispositivo de salida
X Casi todas las imgenes que se gestionan son bitmap
2. Imgenes vectoriales

X Imgenes vectoriales
X Es una descripcin matemtica de la imagen
X Ejemplos: Flash y Prezi, las fuentes (ttf)
X Ms compacta (si la imagen es sencilla, p.e. logo)
X Si es fotorealista todo lo contrario, casi imposible de codificar.
X Independientes de la resolucin del dispositivo de salida
X Se puede escalar sin perder calidad
X Estndar para trabajar con imgenes vectoriales: svg
X https://es.wikipedia.org/wiki/Scalable_Vector_Graphics#/media/F
ile:Bitmap_VS_SVG.svg
X Pueden presentar efecto de aliasing. En cualquier lnea, NO
horizontal o vertical, se nota un escalonado: cuanta menor
resolucin ms se nota
X Pasar de imagen vectorial a bitmap: renderizar
Ejercicio

1. Buscar una imagen bitmap y otra vectorial (svg) y

abrirlas en el navegador. Hacer zoom y observar la
diferencia.
2. Buscar una imagen vectorial, pasarla a bitmap y hacer
zoom. Observar la diferencia.
3. Buscar una imagen sencilla y otra fotorealista.
Vectorizarlas utilizando vectormagic.com y observar la
diferencia.
2. Aliasing y antialiasing
Cmo se hace
aliasing/antialiasing?
Ejercicios

X Realizar un dibujo en negro en la hoja cuadriculada.

Digitalizarlo con aliasing y con antialiasing.
X Guardar un texto como jpg. Volver a abrirlo y observar
cmo se ha hecho el antialiasing automticamente.
3. Tipos de ficheros

X Tipos de ficheros bitmap

Ejercicio

X Guardar una imagen con muchos colores como GIF y ver

a cmo queda la imagen jpg original y la gif. Fijarse
tambin en el tamao que ocupa cada imagen.
X Ejemplo pasarela laberinto 1 y 2 (fijarse en la flecha)
3. Tipos de ficheros

X Tipos de ficheros bitmap

3. Tipos de ficheros

X Tipos de ficheros bitmap

3. Tipos de ficheros

X Tipos de ficheros vectoriales

4. Dispositivos de captura

X Concepto de escner
4. Dispositivos de captura

X Resolucin de escaneo:
X N muestras/longitud (DPIs)
X Resolucin ptica e interpolada
X Para imprimir: depende de la resolucin de la impresora
4. Dispositivos de captura

X Resolucin de escaneo: ejemplo

X Qu resolucin de escaneo en DPIs habr que usar para
que una imagen de 16,5 cm. de ancho por 12,7 cm. de alto
aparezca con un tamao de 10 x 10 cm. en una pantalla de
32 cm. de ancho por 24 cm. de alto y una resolucin de
1024x768 pxeles? (1 pulgada = 2,54 cm.)
4. Dispositivos de captura

X Resolucin de escaneo: ejemplo

X Puntos por cm. de la pantalla:
X 1024/32=768/24=32 pt./cm.

X Resolucin imagen para ocupar 10x10 cm:

X 320x320pt.

X Imagen original en pulgadas:

X 16,4/2,54 x 12,7/2,54 = 6,5 x 5

X DPIs de escaneo
X 320 pt./6,5 = 50 DPIs en horizontal
X 320 pt./5 = 64 DPIs en vertical
Actividad

X Elegir dos fotos Creative Commons de Internet y hacer

una composicin para crear una campaa publicitaria
que anime a los chicas y chicas jvenes a estudiar
ingeniera.
X Por parejas
5. Modelos de color

X Modelos de color: distintos mtodos para representar los

colores, segn las necesidades
X 3 componentes
X Distintas gamas representables
5. Modelos de color

X Modelo de color RGB

X Modelo aditivo
X Se usa en monitores y proyectores
X Anlogo al mecanismo de visin del color
5. Modelos de color

X El cubo RGB
5. Modelos de color

X El cubo RGB y la seleccin de un color

5. Modelos de color

X El modelo CMYK
X Cyan, Magenta, Yellow, blacK
X Modelo sustractivo
X Se usa en impresoras (V01)
5. Modelos de color

X El modelo HSB
X Ms intuitivo para la seleccin de colores
X Hue: pigmento (de 0 a 360)
X Saturation: saturacin, es la distancia a un gris de igual
intensidad (de 0 a 1)
X Brightness: intensidad, es la luminosidad del color (de 0
a 1)
X Se representa como una pirmide invertida
5. Modelos de color

X El modelo HSB
5. Modelos de color

X Otros modelos de color

X YUV: Transmisin de TV en sistema PAL
X YIQ: Transmisin de TV en sistema NTSC
X Ambos separan luminancia y crominancia
X CIE L*a*b*: permite especificar colores con
independencia de dispositivo.
5. Modelos de color

X Reproduccin precisa del color

X Es muy difcil reproducir exactamente los colores en
distintos dispositivos

X Los Sistemas de Gestin del Color (CMS) intentan

resolver el problema
6. Edicin de imgenes

X Secuencia tpica:
X Recorte y alineacin
X Quitar imperfecciones
X Ajuste del rango tonal (contraste)
X Ajuste del equilibrio de color
X Ajuste de partes de la imagen: herramientas de
seleccin
X Enfoque y otros filtros
X Marcos, adornos.
X Mantener esta secuencia
6. Edicin de imgenes

X Ajuste del rango tonal (contraste):

X Indicadores: negro, blanco, gris
X Colocando los indicadores negro y blanco en los
extremos del histograma, se maximiza el contraste
X El indicador gris seala los pxeles que mostrarn un
tono gris medio.
6. Edicin de imgenes
X Ajuste del rango tonal (contraste)
6. Edicin de imgenes
X Ajuste del rango tonal
6. Edicin de imgenes

X Ajuste del equilibrio de color:

7. El lenguaje de la imagen

X Aspectos del concepto de imagen:

X Representacin de una entidad
X Componente afectivo
X Visin personal (arte)
X Esquemas

X Contenidos de la imagen:
X Representante: lo que se ve
X Significante: lo que quiere decir
 7. El lenguaje de la imagen

X La escala es la parte de la realidad que se incluye en la

imagen: (los tipos de planos del cine):

Plano Detalle

Plano Medio

Plano Americano
Plano Normal
Primer Plano
7. El lenguaje de la imagen

X El ngulo: normal, picado, contrapicado...

ngulo normal ngulo picado ngulo cenital

ngulo contrapicado ngulo nadir

ngulo inclinado
7. El lenguaje de la imagen
X Alfabeto del lenguaje de la imagen:
X La iluminacin: modifica el relieve, el dramatismo...

Claroscuro Luz plana

7. El lenguaje de la imagen
X Alfabeto del lenguaje de la imagen:
X La clave: predominio de colores claros (clave alta) u oscuros (clave baja).

Clave alta Clave baja

7. El lenguaje de la imagen
X Alfabeto del lenguaje de la imagen:
X El color:
X Funcin denotativa y connotativa
X Sensacin de profundidad: clidos cercana, fros lejana.
X Dependencia cultural

X La composicin:
X Imagen esttica, secuenciada y en movimiento
X Finalidad: comunicacin clara
7. El lenguaje de la imagen
X Combinacin texto e imgenes
X Proporcin:
X Boletines oficiales
X Peridicos
X Revistas
X Anuncios

X Relacin:
X Texto enmarcando
X Texto dentro
X Texto al pi

X Funcin del texto:

X Aclaratoria, redundante, referencial...