Sesión 2: Imágenes virtuales · 2014-05-12 · Sesión 2: Imágenes virtuales ....

11
Diseño digital Sesión 2: Imágenes virtuales

Transcript of Sesión 2: Imágenes virtuales · 2014-05-12 · Sesión 2: Imágenes virtuales ....

Page 1: Sesión 2: Imágenes virtuales · 2014-05-12 · Sesión 2: Imágenes virtuales . Contextualización Avances tecnológicos en informática Lenguaje ... Proceso de elaboración de

Diseño digital Sesión 2: Imágenes virtuales

Page 2: Sesión 2: Imágenes virtuales · 2014-05-12 · Sesión 2: Imágenes virtuales . Contextualización Avances tecnológicos en informática Lenguaje ... Proceso de elaboración de

Contextualización

Avances tecnológicos en informática

Lenguaje visual

Exploración de la

creatividad

Programas gráficos

Page 3: Sesión 2: Imágenes virtuales · 2014-05-12 · Sesión 2: Imágenes virtuales . Contextualización Avances tecnológicos en informática Lenguaje ... Proceso de elaboración de

Introducción

¿Qué son los modelos de color?

Son aquellos que describen matemáticamente la manera en

que los colores pueden ser representados.

Tomado de http://mundocreativoblog.wordpress.com/ para fines educativos

Page 4: Sesión 2: Imágenes virtuales · 2014-05-12 · Sesión 2: Imágenes virtuales . Contextualización Avances tecnológicos en informática Lenguaje ... Proceso de elaboración de

El color en los medios virtuales

Hay 2 formas complementarias para conseguir el color:

Aditivo: en el cual se le agrega energía a una superficie que

no la tiene como en el caso de las pantallas de rayos

catódicos. (televisión, monitor, celulares). Los colores básicos

son el rojo, el verde y el azul. Y a este sistema de color se le

conoce como RGB (Red, Green, Blue).

Sustractivo: en este este caso se le resta energía a la

propiedad de reflejar una determinada longitud de onda. Este

método es utilizado por la imprenta. Sus colores básicos son:

cian, magenta y amarillo.

Page 5: Sesión 2: Imágenes virtuales · 2014-05-12 · Sesión 2: Imágenes virtuales . Contextualización Avances tecnológicos en informática Lenguaje ... Proceso de elaboración de

El color en los medios virtuales

Modelo RGB Modelo CMYK Modelo LAB Modelo HSV Modelo HSL Modelo NCS

R = Rojo

G = Verde

B = Azul

Color aditivo.

Las 3 luces de

colores se suman

para generar

diferentes colores.

Color sustracivo.

Usualmente se usa

para impresiones.

Asume que el color

de fondo es blanco.

L = Luminosidad, en

donde el 0 = negro y

100 = blanco.

A= Rojo frente al

verde.

B= Amarillo frente al

azul.

Representación de

la unión de los

colores.

Busca mejorar el

modelo RGB.

Representa un valor

tridimensional.

Representación del

color en 3D.

Conserva el matiz,

la saturación y la

luminosidad.

Sistema de

oposición del color.

Se basa en 6

colores que no

pueden ser usados

para representar a

otro.

Tomado de:

http://www.industriaspesqu

eras.com/noticias/tecnologi

a/10287/fisiologia_del_colo

r_del_monitor_a_la_pintur

a.html para fines

educativos

Tomado de:

http://www.industriaspesqu

eras.com/noticias/tecnologi

a/10287/fisiologia_del_colo

r_del_monitor_a_la_pintur

a.html para fines

educativos

Tomado de:

http://www.proyectacolor.cl

/aplicacion-del-

color/modelos-de-

color/modelo-cie/ para

fines educativos

Tomado de:

http://www.flickr.com/photo

s/bolumena/3252218145/

para fines

Tomado de:

http://rodcanofx.blogspot.m

x/ para fines educativos

Tomado de:

http://upload.wikimedia.org

/wikipedia/commons/7/71/

Opponent_colors.svg para

fines educativos

Page 6: Sesión 2: Imágenes virtuales · 2014-05-12 · Sesión 2: Imágenes virtuales . Contextualización Avances tecnológicos en informática Lenguaje ... Proceso de elaboración de

Creación de gif’s animados

Tomado de http://javipr2010.jimdo.com/ para fines educativos

Page 7: Sesión 2: Imágenes virtuales · 2014-05-12 · Sesión 2: Imágenes virtuales . Contextualización Avances tecnológicos en informática Lenguaje ... Proceso de elaboración de

1. Abrir la secuencia de imágenes que utilizaremos para la animación en el programa de Photoshop.

2. Medir el tamaño de las imágenes para crear un nuevo archivo con esas medidas. (Clic en imagen, tamaño de imagen).

3. Crear el nuevo documento con las medidas tomadas (alto x ancho), con color RGB y con fondo blanco.

4. Vamos seleccionando cada una de las imágenes y se van a ir pegando en el nuevo documento creado.

5. Nos fijamos en la paleta de capas, la cual debe contener el mismo número de capas que de imágenes que componen el gif.

6. Ir a la barra superior de herramientas, clic en ventana, animación.

7. Damos tantos clics como capas tengamos en este ícono.

Tomado de

http://javipr2010.jimdo.com/

para fines educativos

Proceso de elaboración de un gif

animado

Page 8: Sesión 2: Imágenes virtuales · 2014-05-12 · Sesión 2: Imágenes virtuales . Contextualización Avances tecnológicos en informática Lenguaje ... Proceso de elaboración de

8. Nos colocamos encima del primer fotograma y nos vamos a la paleta

de capas, quitamos el ojo que se ve a la izquierda de la capa en

todos excepto en la primera imagen.

9. Repetimos este proceso con las demás capas, dejando siempre

únicamente visible el en la capa que corresponda a cada fotograma.

10. Le damos a la pestaña que se encuentra debajo de cada fotograma y

le damos la interpolación de tiempo que queremos que tenga entre

secuencia y secuencia. Se puede hacer de uno en uno o

seleccionando todas a la vez.

11. Por último le damos clic en la otra pestaña que está un poco más abajo

y le decimos si queremos que el gif sea infinito, que se repita una vez,

2 o las que sean.

12. Le das play y ¡Listo!

13. Para guardarlo da clic en Menu: Guardar para web y dispositivos, y

guarda tu documento como archivo de GIF.

Proceso de elaboración de un gif

animado

Page 9: Sesión 2: Imágenes virtuales · 2014-05-12 · Sesión 2: Imágenes virtuales . Contextualización Avances tecnológicos en informática Lenguaje ... Proceso de elaboración de

Conclusión

Para la elaboración de un gif animado hay un proceso

de elección de las imágenes que es importante

considerar para tener un resultado óptimo en tu trabajo.

Este proceso de elección te ayudará a saber qué

características de las imágenes te son mas favorables

para realizar un gif animado de alta calidad.

Como vimos en estas 2 primeras sesiones la resolución,

el peso y el color de la imagen son factores que influyen

en la calidad y el resultado de la imagen.

Page 10: Sesión 2: Imágenes virtuales · 2014-05-12 · Sesión 2: Imágenes virtuales . Contextualización Avances tecnológicos en informática Lenguaje ... Proceso de elaboración de

Referencias

• Baeza-Yates, R.; Peña, R. y Rodríguez, J. (2003). Gestión digital

de la información, de bits a bibliotecas digitales y la web. México:

Alfaomega.

• Brito Melado, D. (2000) El color, Colores digitales Obtenido de:

http://serdis.dis.ulpgc.es/~ii-dgc/David/Color/digitales.html

• González Arribas, Ángel (s/f) Tipos de imágenes y formatos.

Obtenido de:

https://sites.google.com/site/ticvalcarcel/optimizacion-de-

imagenes-para-internet/tipos-de-imagenes-y-formatos

• s/a (2011). Tutorial para crear animaciones GIF en Photoshop,

Video de YouTube, obtenido de:

http://www.youtube.com/watch?v=EIwt8gKtO-4

Page 11: Sesión 2: Imágenes virtuales · 2014-05-12 · Sesión 2: Imágenes virtuales . Contextualización Avances tecnológicos en informática Lenguaje ... Proceso de elaboración de