fdw imagenes 2010-ii

Facultad de Ingeniería y ArquitecturaFundamentos de Diseño Web (FDW)

2010 - II

Contenido:

Objetivos:

SEMANA 2

• Imágenes

Fundamentos de Diseño Web

• Brindar los conocimientos básicos teóricos para el manejo de imágenes.

TEMA:

– Imágenes– Teoría del color



IMAGENES

Las imágenes y los gráficos en el ámbito de Multimedia, adquieren una importancia esencial a la hora de fascinar al usuario con atractivos visuales.


FORMATO GRAFICO DE IMAGEN

IMAGEN

MAPA DE BITSGRAFICOS

VECTORIALES

Sin compresión

Compresión sin perdida

Compresión con perdida


MAPA DE BITSLas imágenes de mapa de bits (bitmaps) están formadas por una rejilla de celdas, a cada una de las cuales se les denominada píxel (Picture Element, Elemento de Imagen), a los que se le asigna un valor de color y luminancia propios, de tal forma que su agrupación crea la ilusión de una imagen de tono continuo. Un píxel es pues una unidad de información, es la unidad mínima en que se divide la retícula de la pantalla del monitor.


MAPA DE BITSUna imagen de mapa de bits es creada mediante una rejilla de píxeles única. Cuando se modifica su tamaño, se modifican grupos de píxeles, no los objetos o figuras que contiene, por lo que estos suelen deformarse o perder alguno de los píxeles que los definen. Por lo tanto, una imagen de mapa de bits está diseñada para un tamaño determinado, perdiendo calidad si se modifican sus dimensiones, dependiendo esta pérdida de la resolución a la que se ha definido la imagen.


GRAFICOS VECTORIALESSon más simples que los gráficos de mapas de bits, ya que en ellos las imágenes se almacenan y representan por medio de trazos geométricos controlados por cálculos y fórmulas matemáticas, tomando algunos puntos de la imagen como referencia para construir el resto.

Se componen de vectores, es decir, de líneas, curvas y otros elementos geométricos “planos”.


TABLA COMPARATIVA

Mapa de BitsImágenes fotográficas

Gráfico vectorialManipulación

Los bitmaps (mapas de bits), están compuestos por puntos. A cada punto se le adjudica un atributo cromático, que puede tener una profundidad entre un bit (gráfico monocromo) y 24 bits (imagen de color real).

Los elementos del gráfico vectorial se definen por sus vectores. Por cada línea, se guardan los puntos de partida y de llegada y el grosor de la línea por cada superficie se define, junto con su área, el tipo de relleno.

Cuando los bitmaps son ampliados, o reducidos, pierden calidad en salida de la imagen.

Los gráficos vectoriales son sometidos a un proceso especifico de interpretación y su salida es óptima. Estos gráficos pueden agrandarse y reducirse sin perdida de calidad.

Los mapas de bits se utilizan para obtener imágenes foto realistas y dibujos complejos que requieren de detalles finos.

Los objetos dibujados con vectores se emplean para líneas, cajas, círculos, polígonos y otras figuras gráficas que se pueden expresar matemáticamente en términos de ángulos, coordenadas y distancias.

Las imágenes generadas por un escáner son de tipo bitmaps.

Las imágenes generadas por programas en 3D son de tipo vectorial.

Ocupa más espacio en memoria. Ocupa menos espacio en memoria.


FORMATO DE IMAGENES

GIF (Formato de Intercambio Gráfico)

Cuando utilizar .gif: Imágenes que contienen áreas transparentes. Un número limitado de colores, como 256 o menos. Colores en áreas diferenciadas. Imágenes en blanco y negro. Imágenes de pequeño tamaño, como el botón de un sitio. Imágenes en las que la nitidez y la claridad son

importantes, como los dibujos de líneas o los cómics. Imágenes que contienen texto. Animaciones.


FORMATO DE IMAGENES

JPEG (Grupo Conjunto de Expertos Fotográficos)

Cuando utilizar .jpg: Fotografías. Imágenes de aspecto natural. Gran cantidad de colores, incluso millones de ellos. Gran número de detalles. Imágenes de grandes dimensiones.


FORMATO DE IMAGENES

• PNG (Grupo de Redes Portátiles). Es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps.

• TIF (Tagged Image File Format). Los ficheros TIFF

contienen, además de los datos de la imagen propiamente dicha, "etiquetas" en las que se archiva información sobre las características de la imagen.

• BMP: Es el formato nativo de imágenes en Microsoft Windows y por lo tanto, es un formato ampliamente extendido.


RESOLUCION DE IMAGENES

• Se entiende por “Resolución” de una imagen a la cantidad de puntos que tiene en una superficie.

• Tener mayor resolución se traduce en obtener una imagen con más detalle o calidad visual.

• 2 Sist:

– Pixeles por centímetro cuadrado (ppc)

– Pixeles por pulgada cuadrada (dpi – Dot Per Inch)



• La resolución del monitor (puntos o pixeles que puede representar por área) para una PC es de 72 pixeles por pulgada.

24 dpi

72 dpi

128 dpi


IMÁGENES PARA LA WEB

• No digitalizaremos imágenes a resoluciones superiores a 72 puntos.

• Muchos de los editores HTML permiten reducir la dimensión de la foto pero sólo de forma visual.

• En general los tipos de archivos recomendables son los gif y en segundo lugar los jpg ya que son los más manejables.


EDICION DE ARCHIVOS GRAFICOS

CorelDRAW

Es un programa de dibujo vectorial que facilita la creación de ilustraciones profesionales: desde simples logotipos a complejos diagramas técnicos. Las prestaciones mejoradas de utilización de texto y las herramientas de escritura de CorelDRAW permitirán crear proyectos de gran cantidad de texto como folletos e

informes, con más facilidad que nunca.



Illustrator

Es un completo entorno gráfico de vectores que incluye nuevas transparencias de degradados y varias mesas de trabajo que le invitan a explorar modos más eficaces de diseño.



Photoshop.

El estándar de edición profesional de imágenes que permite a fotógrafos profesionales y a diseñadores gráficos crear imágenes de óptima calidad para imprimir, editar en la Web y en cualquier otro medio.



Fireworks

Es la solución perfecta para diseñar y producir elementos gráficos para la Web. Fireworks puede utilizarse para crear, editar y animar gráficos Web, añadir interactividad avanzada y optimizar imágenes en entornos profesionales. En Fireworks es posible crear y modificar imágenes vectoriales y de mapa de bits en una sola aplicación.


TEORIA DEL COLOR

El color es una parte fundamental de la web, productor de sensaciones.


EJEMPLO – PALETA DE COLORES


PREGUNTAS

¿?

fdw imagenes 2010-ii

Education