ImagenImagen DDigitaligitalConceptos BásicosConceptos Básicos

Es una representación visual de un objeto mediante técnicas diferentes de diseño, fotografía, pintura y video.

> | Qué es una Imagen?

>| Imagen Digital

Consideramos Imágenes Digitales a aquellas obtenidas mediante dispositivos como filmadoras, cámaras, celulares, scanners o generadas directamente por ordenadores.

Existen dos grandes formas de representación de imágenes que hacen al conjunto de las “imágenes digitales”. Por un lado se encuentran las Rasterizadas o de Mapa de Bits y por otro los gráficos o imágenes vectoriales.

Resultará interesante conocer las ventajas y desventajas de cada una.

MAPA DE BITS MAPA DE BITS y y VECTORESVECTORES

>| Imágenes de Mapa de Bits>| Imágenes de Mapa de Bits

Los mapas de bits (bitmaps) ó imágenes rasterizadas: Una imagen es un mapa de bits cuando está compuesta por una serie de puntos (también llamados píxel), que contienen información acerca del color. Estos puntos o píxeles que forman la imagen se sitúan en un número determinado, a mayor número de puntos o píxeles, mayor calidad de imagen, esto es lo que se conoce por resolución de imagen. Las imágenes de mapa de bits dependen de la resolución, es decir, contienen un número fijo de píxeles. Cada uno de estos píxeles posee una situación y un valor de color concreto. Cuando trabajamos sobre un mapa de bits,  lo que hacemos en realidad es trabajar sobre cada uno de estos puntos. El píxel es por tanto, dentro de la imagen, la unidad de información básica. Los píxeles están colocados de tal manera que juntos forman una rejilla, cada celda de la rejilla es un píxel y todos juntos forman la imagen. Al modificar esta rejilla, por ejemplo, ampliando su tamaño, cambiamos la distribución, el número y la información de color de cada  uno de ellos, por tanto, realizar cambios o modificaciones sobre estos píxeles afecta directamente a la imagen que forman.

El concepto de píxel

Un píxel es cada uno de los pequeños cuadraditos que componen una imagen digital. Podemos hacernos una idea comparando una imagen digital con un mural formado por cientos de pequeños mosaicos de colores. Cada una de esos mosaicos sería un píxel. Cuando nos acercamos al mural vemos cada una de estos mosaicos; al alejarnos lo suficiente vemos una imagen continua, un todo.

>| Imagen Digital

El píxel es la unidad mínima de información de una imagen digital, pero a diferencia de los mosaicos puede tener hasta 16,7 millones de colores y pesa bastante menos.

>| Formatos de imagen en un sistema de mapa de bits para diseño de pantalla.

- JPG o JPEG: Es uno de los formatos más conocidos y utilizados por su calidad y peso de los archivos. No acepta transparencias.

- GIF: Este tipo de archivo se creó con la finalidad de obtener archivos de tamaño muy pequeños.Es recomendado para guardar imágenes NO fotográficas tales como: Logotipos, imágenes de colores planos, dibujos simples, etc. (8 bits-256 colores). Alacena transparencias. Permite animaciones.

- PNG: Es un formato gráfico que comprime sin pérdida de datos y de uso libre. Almacena imágenes con una mayor profundidad de color (hasta 24 bits). Permite almacenar transparencias

>| Diferencias, ventajas y desventajas.

Pantalla Impresión.jpg, .gif, .png

.pdf, .swfEstos formatos pueden incluirgráficos de vectores y fuentes editables

.tiff , .psd, .bmp

.eps, .jpg y .png(alta calidad).

Estos formatos guardan mayor calidad de imagen pero su peso es considerablemente mayor

Profundidad: El Bit y el color

Los gráficos de mapa de bits almacenan una completa información sobre el color de cada uno de sus píxeles constituyentes. Cuantos más colores pueda tener la imagen, más calidad final tendrá y más información será necesario almacenar.

Relacionados con el número de colores posibles, sus características y su almacenamiento encontramos como característica fundamental la Profundidad del color

8 bits

16 bits

Profundidad: El Bit y el color

La profundidad de color de una imagen se refiere al número de colores diferentes que puede contener cada uno de los puntos o píxeles que la forman, y depende de la cantidad de información (número de bits) que puede almacenar un píxel.

Profundidades de color

Cuanto mayor sea la profundidad de bit en una imagen, mayor será la cantidad de tonos (escala de grises o color) que puedan ser representados, más colores habrá disponibles y más exacta será la representación del color en la imagen digital. Las imágenes digitales se pueden producir en blanco y negro, a escala de grises o a color.

- BITMAP: 1 bit (2 tonos blanco o negro) por pixel

- ESCALA GRISES: 8 bits (256 colores o grises) por pixel

- RGB (Red, Green, Blue) 24 bits (imágenes en color 16,7 millones de colores) por pixel

- CMYK (Cian, Magenta, Yellow, Black) 32 bits ( solo para impresión)

Modo: tiene que ver con la composición del color de la imagen

Formato: .png Modo: RGB - 24 bitsPeso: 167 Kb.

Formato: .gif Modo: indexado – 8 bits (256 colores)Peso: 111 Kb.

Formato: .jpgModo: Escala de Grises 8 bitsPeso: 127 Kb.

Formato: .jpg Modo: RGB - 8 bitsPeso: 155 Kb.

PPP o PPI o DPI

Le resolución es la medida detallada y precisa que de una imagen.La escala de resolución se mide en píxeles por pulgada (PPP o DPI o PPI). Cuanto mayor sea la resolución, más detallada y definida es la imagen. Por lo tanto también será más pesada.

¿Qué formato y resolución utilizar e acuerdo al medio y el dispositivo de salida?

Diseños para pantalla: web, DVDs. interactivos o presentaciones multimedias

- Extensión del archivo Fotos: jpg, gif o png - Extensión del archivo Gráficos Vectoriales: swf- Resolución: 72 o 96 dpi

Diseños para impresión: folletos, afiches, impresiones laser, transparencias, etc.

- Extensión del archivo Fotos: tiff, psd, bmp, jpg o png (alta calidad)- Extensión del archivo Gráficos Vectoriales: ai, cdr, pdf.- Resolución: de 150 a 300 dpi dependiendo del la técnica de impresión.

Resolución de una imagen (Importante para el peso de la imagen y para impresión)

Las fotografías que se obtienen a partir de las cámaras digitales son mapas de bits, las imágenes que captura un escáner también lo son; en estas imágenes la calidad máxima que tienen (o sea el número de píxel por unidad de medida, píxeles/cm, píxeles/pulgada.) viene determinada en el momento de crearlas por lo que no podremos ampliar la resolución o número de píxeles posteriormente, es decir, no podremos ampliar su resolución sin que la imagen se vea afectada, en general deformándose y perdiendo nitidez, ya que se modifican los píxeles que las definen.

Al intentar ampliar la resolución y el tamaño de la imagen vemos que esta se deforma y pierde nitidez.

(Ej: Imagen de 150 DPI)

Una imagen en alta resolución, se puede ampliar en pantalla y siguirá

siendo nítida y con detalle. Pero su peso será grande (Imagen de 300 dpi de resolución)

La misma imagen en baja resolución, los píxeles se verán a simple vista (efecto pixelado) y con la ampliación en

pantalla la imagen la perderá calidad.

(Imagen de 72 dpi de resolución)

El tamaño de los píxeles determina la cantidad de detalle de la imagen; las dimensiones de estos píxeles y el número de ellos, es lo que da la calidad  final (alta, media ó baja). Se puede modificar el tamaño de los píxeles siempre y cuando los reduzcamos o hagamos más pequeños, en este caso la imagen no se verá afectada ya que no estamos modificando la información de los mismos (Color), simplemente reducimos su tamaño.

Utilizar una resolución demasiado baja para una imagen impresa produce una pixelación, píxeles de gran tamaño con un aspecto muy desigual en la impresión.

Al intentar ampliar la resolución y el tamaño produce el efecto de imagen pixelada o difusa si se interpola.

Ejemplo: la original pesa 207kb en (jpg), se ha ido variando la compresión de la misma en formato (gif) hasta llegar a 22.5kb.

Se puede reducir aún mas el peso de la foto, sin embargo la calidad empeorará bastante.

Compresión de la Imagen:

Lo que no mejora la calidad de la imagen es el aumento forzado de la resolución (el número de dpi) ya que al aumentarlos los nuevos píxeles deberán ser inventados, es decir, aumentar la resolución de una imagen de baja resolución sólo extiende la información de los píxeles originales a través de un número mayor de píxeles pero esto no mejora la imagen. Esto se puede ver fácilmente cuando se imprime la imagen. Los diferentes softwares utilizan formas diferentes de INTERPOLAR la representación para atenuar el resultado.

Proceso de Interpolación

Formato: .jpgResolución: 72 dpiPeso: 168 Kb.

Formato: .jpg Resolución: 300 dpiPeso: 1167 Kb. ó 1.14 Mb

El monitor las va a mostrar similares pero el peso será notoriamente menor mientras menos dpi tenga.

>|>| Tamaño o Dimensiones de la imagen Tamaño o Dimensiones de la imagen

Se denomina disensión al tamaño que tiene la imagen de cada Se denomina disensión al tamaño que tiene la imagen de cada lado. Las imágenes digitales comúnmente se expresan en lado. Las imágenes digitales comúnmente se expresan en pixeles. Si se modifica la resolución inmediatamente se pixeles. Si se modifica la resolución inmediatamente se modificarán las dimensiones.modificarán las dimensiones.

>| Conclusión 1

La para la Optimización de imágenes para diseños de pantalla se deberá tener en cuentaLa calidad de la imagen en relación con el menor peso posible para lograr presentaciones Atractivas y de rápida visualización.

Para fotografías:- formato .jpg o .png- 72 dpi de resolución- 8 bits de profundidad - Modo RGB

Para logos simples con colores planos:- formato .gif- 72 dpi de resolución- Modo Indexado

Softwares de tratamiento de imágenes más utilizados:

-Photoshop

-Fireworks

-Picnik (editores online)

-Splashup (editores online)

- Ver: http://photoshopen.blogspot.com/

>| Imágenes Vectoriales>| Imágenes Vectoriales

Las imágenes vectoriales ó gráficos orientados a objetos:

Las imágenes vectoriales se construyen a partir de vectores. Los vectores son objetos formados matemáticamente. Un vector se define por una serie de puntos que tienen unos controladores con las que se puede manejar la forma de la línea que crean al estar unidos entre sí. Los principales elementos de un vector son las curvas Béizer (curvas representadas matemáticamente).

Estas líneas o curvas béizer son muy manejables ya que permiten muchas posibilidades por su plasticidad. Estas características las convierten en la manera ideal de trabajar cuando se trata de diseño gráfico, (como creación de logotipos o dibujos). La versatilidad de las mismas las convierten en una manera muy útil para trabajar también con textos ya que se pueden modificar y deformar sin límite, a cada letra se le pueden asignar contornos editables además de poder descomponer la misma en varios objetos.

Las imágenes vectoriales ó gráficos orientados a objetos:

Las imágenes vectoriales se construyen a partir de vectores. Los vectores son objetos formados matemáticamente. Un vector se define por una serie de puntos que tienen unos controladores con las que se puede manejar la forma de la línea que crean al estar unidos entre sí. Los principales elementos de un vector son las curvas Béizer (curvas representadas matemáticamente).

Estas líneas o curvas béizer son muy manejables ya que permiten muchas posibilidades por su plasticidad. Estas características las convierten en la manera ideal de trabajar cuando se trata de diseño gráfico, (como creación de logotipos o dibujos). La versatilidad de las mismas las convierten en una manera muy útil para trabajar también con textos ya que se pueden modificar y deformar sin límite, a cada letra se le pueden asignar contornos editables además de poder descomponer la misma en varios objetos.

Controlador

Imagen vectorial. Curva de Béizer. La curva queda definida por los nodos o puntos de anclaje y por los controladores que definen y modelan su forma. Para modificarlas simplemente hay que mover las flechas hasta que consigamos la curva deseada.

Escala infinita:

Al utilizar los formatos vectoriales coordenadas matemáticas para formar imágenes concretas, la resolución de las mismas es infinita, es decir, toda imagen vectorial se puede escalar ampliando o reduciendo sin que la visibilidad de la misma se vea afectada, ni en pantalla ni a la hora de imprimir.

La imagen vectorial nos permite crear contornos de línea variada y definir el color de las formas que éstas crean. La forma se puede controlar de manera muy precisa y cada objeto se puede manejar de forma independiente al resto ya que esta construido con una fórmula matemática propia.

Dibujo original y ampliado del reloj sin que por ello se produzca ni perdida de color ni de forma

Formatos de Imágenes Vectoriales:

-CDR- Corel Draw: Es el formato del programa que lo genera. Los gráficos que realizamos con  Corel Draw son vectoriales y están compuestos por líneas y planos que se sitúan en unas coordenadas concretas en la página.

-AI - Adobe Ilustrator: Sus características en la forma de construir gráficas son iguales a las del Programa Corel Draw.

-EPS - Encapsulated Postscript:El EPS es uno de los mejores formatos para ser importados desde la mayoría de software de diseño. Es un formato muy adaptable ya que podemos utilizarlo igualmente para imagen vectorial como mapa de bits.

- FLA y SWF:Extensiones generadas por el software Flash. Optimo para animaciones de bajo peso

- SVG: Scale Vector Graphics

1 megapixel equivale a 1 millón de pixeles. El megapixel suele utilizarse para contar la cantidad de píxeles que contiene una imagen digital o también para medir la resolución de las cámaras digitales.

Por ejemplo, una cámara digital de 3,1 megapixeles puede tomar imágenes con un máximo de resolución de 2048 x 1536 (o sea 3.145.728 pixeles)

>|>| Megapixel Megapixel