Fdw imagenes 2010-ii

Facultad de Ingeniería y Arquitectura
Fundamentos 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 BITS
GRAFICOS
VECTORIALES
Sin compresión
Compresión sin perdida
Compresión con perdida

MAPA DE BITS
Las 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 BITS
Una 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 VECTORIALES
Son 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 Bits
Imágenes fotográficas
Gráfico vectorial
Manipulació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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (7)

Destacado

Destacado (20)

Similar a Fdw imagenes 2010-ii

Similar a Fdw imagenes 2010-ii (20)

Último

Último (20)

Fdw imagenes 2010-ii