Interactividad en Internet' Ideas y procedimientos

1
Imagen y diseño gráfico

• Interactividad en Internet. Ideas y
  procedimientos
• Curso de postgrado
• 6 de octubre de 2001
• Pere Freixa y Font

2
Introducción

• . Definir las características de las imágenes en
  el contexto de Internet
• . Utilizar y realizar imágenes para integrarlas
  en entornos on-line
• . Utilizar las herramientas de tratamiento de
  imagen también como herramientas de diseño

3
Características de la imagen digital

• . Cambio en el registro de la información
  substitución de las sales de plata (proceso
  fotoquímico) por digitalización de tonos de luz
  (codificación numérica en sistema binario).
• . Imágenes formadas por bits y píxeles
• . BIT valor numérico
• . Píxel punto definido por bits
• . Profundidad de color número de bits que puede
  tener un píxel
• (cualidad de matices que puede tener una imagen)
• . Imagen 1 bit 2 colores
• . Imagen 2 bits 4 colores

4
Características de la imagen digital
imágenes originals Yale Style Manual
5
Características de la imagen digital

• . imagen 3 bits 8 colores
• . imagen 4 bits 16 colores
• . imagen 5 bits 32 colores
• . imagen 6 bits 64 colores
• . imagen 7 bits 128 colores
• . imagen 8 bits 256 colores
• . imagen 16 bits miles de colores (65.536)
• . imagen 24 bits color real (16 millones de
  colores)
• . imagen 32 bits color de cuatricromía
• . La imagen analógica y la digital se miden de
  forma distinta
• Analógico formato externo 24x35 mm, 6x6 cm,
  9x12,...
• Digital formato interno nº píxeles x
  profundidad de color

6
Características de la imagen digital

• . ejemplo
• Una imagen de 640 x 480 píxeles a 24 bits de
  color
• 640 x 480 x 24 7.372.800 bits
• 7.372.800 / 8 921.600 bytes
• 921.600 / 1.024 900 kilobytes 900 kb
• . Una pantalla de baja resolución ocupa casi un
  Megabyte de información.
• . Un negativo de paso universal de 100 ASA
  escaneado a 2400 puntos ocupa 22 Mb. Un 9 x12
  ocuparía más de 270 Mb

7
Características de la imagen digital

• . Cuál es el tamaño correcto de una imagen?
• . Qué parámetros hay que valorar?

8
El software de tratamiento de imagen

• . El laboratorio digital.
• . El conjunto de herramientas para tratar las
  imágenes.Transformaciones numéricas de las
  imágenes.
• . Photshop
• . PaintShopPro
• . PhotoStyler
• . Picture Publisher
• . Interfaz de diálogo a través de la pantalla.
  Interacción con el teclado/ratón o tabla gráfica

9
El software de tratamiento de imagen

• . Software complementario
• . Software de escanners
• . Conexión de càmeres, impresoras y otros
  periféricos
• . Utilidades
• . Cambios de formato/paletas
• . Animación de imágenes
• . Morph entre imágenes
• . Complementos de terceras partes
• . Plugg-ins
• . Filtres

10
Guardar las imágenes los formatos

• . El formato de la imagen es lo que nos permite
  ordenar y codificar los bits de información.
• . Permite la transferencia entre software y
  sistemas operativos.
• . Dos grandes grupos
• 1. Formatos sin compresión o con compresión sin
  pérdidas.
• 2. Formatos con pérdidas al comprimir.

11
Guardar les imágenes los formatos

• 1. Formatos sin compresión o con compresión sin
  perdidas.
• BMP Mapa de Bits. Formato común en los
  entornos Windows y MS_DOS. Guarda imágenes de 2,
  8, 16 y 24 bits. No permite canales alpha y
  permite compresión RLE -compresión simple sin
  perdidas-
• TIFF (Tagged-Image File Format). Formato común
  de la mayoría de entornos de imagen, utilizado
  para intercambiar imágenes entre sistemas
  operativos. La mayoría de escanners producen
  TIFF. Guarda imágenes en todos los formatos
  hasta 32 bits, y permite compresión LZW
• PICT Formato de imagen propio de los
  ordenadores Macintosh. permite imágenes en RGB en
  16 y 32 bits, y imágenes de 2, 4 y 8 bits. puede
  incorporar compresión JPEG

12
Guardar les imágenes los formatos

• 1. Formatos sin compresión o con compresión sin
  perdidas.
• PSD Formato propio de Photoshop. permite
  guardar las imágenes con todas les
  características que permite Photoshop todo tipo
  de profundidad de color, imágenes con multicapa y
  multicanales, canales alpha, etc. Crea compresión
  sin perdidas
• TGA El formato TARGA es el propio de les
  tarjetas gráficas Truevision. Común en entornos
  PC y de edición de vídeo digital y efectos en 3D.
  permite RGB de 32 bits, 24 o 16 bits.

13
Guardar les imágenes los formatos

• 2. Formatos con perdidas al comprimir.
• JPEG (The Joint Photographic Experts Group).
  Sistema de almacenamiento de imágenes pensado
  para el lenguaje HTML común en Internet. Formato
  de imagen de alta compresión graduable en el
  momento de cerrar la imagen. La máxima calidad no
  da perdidas perceptibles. Acepta imágenes RGB de
  32 a 8 bits.
• GIF (Compuserve GIF, Graphics Interchange
  Format). formato originario de 8 bits pensado
  para lenguaje HTML. No permite imágenes en RGB.
  permite acceder y modificar la paleta de color.
• PNG (Portable Network Graphics). Formato libre
  de licencias pensado para sustituir el formato
  GIF. Acepta hasta 24 bits y incorpora gran parte
  de les características de los gifs color de
  transparencia, descompresión por fases, etc.

14
Guardar les imágenes los formatos

• 3. Otros formatos de imagen los formatos
  vectoriales
• La generalización de programas como flash en el
  diseño de páginas Web, ha permitido recuperar los
  programas de imagen vectorial para su uso en
  Internet
• EPS (Encapsulated PostScript) mantiene
  información vectorial y de Bitmap. Es un formato
  habitual en artes gráficas y de intercambio entre
  programas de diseño y programes de imagen
• PDF (Portable Document Format, Adobe) formato
  que, como el EPS, permite incorporar en un mismo
  documento, información vectorial, imagen y
  navegación.
• AI (Adobe Illustrator) Formato propio de adobe
  illustrator para guardar información vectorial.
  Permite su exportación a otros programas

15
Conclusiones

• 1. Las imágenes se definen por el número de
  píxeles que ocupan.
• . Base x altura x profundidad de color
• 2. En la producción de imágenes digitales, hay
  que definir los parámetros de uso de les
  imágenes.
• . Qué resolución final utilizaremos?
• . A Internet, la resolución es de 72 ppp
• 3. Hay que establecer un criterio de producción
  de las imágenes.
• . imagen original TIF, BMP
• . imagen de trabajo PSD
• . imagen final JPG, GIF, PNG

16
Photoshop 6. Previos

• Conjunto de herramientas para el tratamiento de
  la imagen fotográfica.
• . Antecedentes el laboratorio analógico, el
  retoque fotográfico y la preimpresión fotográfica
• . Posibilidades Potencialidad de los códigos
  digitales. Todo píxel o conjunto de píxeles de la
  imagen es susceptible de ser modificado
• . Evolución herramienta fotográfica que
  incorpora conceptos y procedimientos de campos
  tradicionales afines herramientas de diseño
  gráfico (incorporación de texto, tramados, etc.)
  diseño videográfico (efectos visuales )
• . Evolución adaptación a los nuevos entornos
  Redes y interactividad

17
Photoshop 6. Previos

• Primeros controles emular el laboratorio
  fotográfico
• . Midas de las imágenes
• . Reencuadres
• . Cambio de formato
• . Características de la imagen
• . Ajustes
• . Contraste
• . Dominantes de color
• . Paso de negativo a positivo
• . Saturación

18
Photoshop 6. Previos

• Características de las imágenes
• . NOMBRE
• . TAMAÑO
• . RESOLUCIÓN
• . ESPACIO DE COLOR

19
Photoshop 6. Previos

• Características de les imágenes
• . ESPACIO DE COLOR
• . GAMMA de visualización
• Asegurar que lo que vemos en Photoshop se
  corresponderá con lo que se verá después en otros
  programas o ordenadores

20
Photoshop 6. Previos

• Características de las imágenes
• . Tamaño de la imagen
• . Espacio de la imagen

21
Photoshop 6

• Ejercicio 1
• Abrir la imagen avio.jpg
• . Comprobar sus características
• . Tamaño de la imagen
• . Espacio de color
• . Transformarla en una imagen de 300 x 200
  píxeles, a 72 ppp y escala de grises
• . Transformarla en una imagen de 350 x 200
  píxeles, a 72 ppp y 8 bits de color

22
Photoshop 6

• imagen avio.jpg
• . Menú
• Imagen/Modo
• . herramientas
• de selección
• Salvar, en la carpeta propia les versiones que se
  generen

23
Photoshop 6

• herramientas de selección
• . Menú
• Edición/cortar
• copiar
• pegar
• Imagen/recortar

24
Photoshop 6

• Guardar
• JPG
• . Menú
• Archivo/guardar
• guardar como
• guardar para
• Web

25
Photoshop 6

• Guardar
• JPG
• . Menú
• Archivo/guardar
• guardar como
• guardar para
• Web

26
Photoshop 6

• Ejercicio 2
• De una imagen fotográfica realizar
• . Comprobación de parámetros Tamaño, etc.
• . AJUSTAR
• . Ajuste de dominante
• . Ajuste tonal
• . Viraje
• . Reencuadre según características de uso final
• . Cierre de todas ellas según ajuste final

27
Photoshop 6 / Ejemplos ejercicio 2
Original nen1.jpg
Dominante de color
Contraste
28
Photoshop 6 / Ejemplos ejercicio 2
Saturación
negativo
sepia
29
Photoshop 6

• Menú Imagen/Ajustar

30
Photoshop 6

• Menú Imagen/Ajustar

31
Photoshop 6

• Ejercicio 3
• De una imagen realizar un cambio de fondo
• . Ajustar y calibrar la imagen
• . Separación de la imagen en capas
• . Capa nueva de fondo
• . Borrar la parte de imagen a descartar
• . Crear un fondo degradado
• . Ajustar áreas conflictivas
• . Cierre de la imagen final

32
Photoshop 6

• Ejercicio 3.
• .Menús de capas
• .Herramientas de selección
• .Borrado de imagen
• .Degradado
• .Corrección tonal
• .Ajuste de áreas
• conflictivas