Curso de Illustrator CS5

<< Capítulo anterior | Capítulo siguiente >>
<< Índice general
Capítulo 11: Gráficos para la web

(1) Gráficos para la web

Illustrator cuenta con un conjunto de herramientas para al diseño de páginas web. En este capítulo vamos a estudiar las Herramientas sector y Seleccionar sector, que permiten segmentar las ilustraciones y exportarlas como un conjunto de imágenes y código HTML para usar en maquetaciones de páginas web.

Otra prestación de gran importancia para generar gráficos web es la prestación Guardar para web y dispositivos, una completa herramienta para optimizar gráficos destinados a publicar en Internet.

Las imágenes de la web

Las páginas web pueden contener textos e imágenes. Los formatos más usuales de estas imágenes son GIF, JPG y PNG. Veamos las características de cada uno.

GIF (Graphic Intercharge Format):

Es un formato de mapa de píxeles con una profundidad de color de uno hasta ocho bits por píxel.

Un bit es la medida de información más pequeña, es un número binario que puede valer cero o uno. En el caso que el archivo GIF sea de un bit por píxel tendremos una imagen de dos colores y de muy poco peso. Al aumentar la cantidad de bits por píxel aumenta la cantidad de colores, y también el peso de la imagen. Con ocho bits por píxel tenemos una imagen de 256 colores.

El GIF es ideal para imágenes de colores planos: logotipos y gráficos. Es liviano y permite limitar la cantidad de colores, cosa muy conveniente en dibujos de colores planos. Otra de sus ventajas es que admite zonas transparentes.

En la figura 1 vemos un mismo archivo guardado en tres variantes de este formato.

Figura 1:
Original.
GIF de 256 colores.
CIF de 64 colores.
GIF de 16 colores.

JPG

Este formato fue desarrollado por el Joint Photographics Experts Group para compartir imágenes fotográficas entre diferentes plataformas. A diferencia del GIF, el formato JPG tiene una profundidad de color de 24 bits por píxel, puede representar millones de colores. Es un formato de compresión de imágenes con pérdida de calidad: a menor peso menor calidad de la imagen.

En la figura 2 se muestra una imagen en JPG en dos diferentes calidades o grados de compresión. La pérdida de calidad es notable en compresiones altas.

El JPG es el formato adecuado para fotografías o imágenes con texturas o degradados suaves. En las figuras 4 y 5 vemos las diferencias entre JPG y GIF. Las imágenes ilustran la conveniencia de usar JPG para fotografías y GIF para gráficos de colores planos.

Figura 3:
Gráfico en GIF. Gráfico en JPG.
Figura 4:
Fotografía en GIF. Fotografía en JPG.

PNG-8 y PNG-24 (Portable Network Graphics)

PNG es un formato gráfico de compresión sin pérdida de calidad para imágenes de píxeles, de uso libre y no sujeto a patentes. Este formato fue desarrollado para resolver las deficiencias del formato GIF, ya que permite almacenar imágenes con mayor calidad y menor peso.

Tiene dos versiones, el PNG-8 con una profundidad de color de 8 bits por píxel (análoga al GIF) y el PNG-24, con millones de colores y compresión sin pérdida (supera en calidad al JPG, pero los archivos son de mayor peso). Una mejora importante sobre el formato JPG es que el PNG-24 soporta transparencias.

GiFs animados

Una de las ventajas del formato GIF es la de poder contener animaciones: un archivo con diferentes gráficos que se presentan secuencialmente. Existen muchos programas que crean GIFs animados.

Arriba | Tema siguiente >>