Curso de Photoshop CS5 | Segunda parte

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

(1) Gráficos para la web

Photoshop cuenta con herramientas destinadas al diseño de páginas web. En este capítulo vamos a estudiar las Herramientas sector y Seleccionar sector, que permiten segmentar las imágenes 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 publicarse en Internet.

Las imágenes de la web

Las páginas web pueden estar construidas en Flash o programadas en un lenguaje llamado HTML. Estas últimas son las de uso más generalizado. Son livianas, compatibles con los buscadores que las pueden indexar sin dificultad, etc.

Las páginas HTML pueden contener textos e imágenes. Photoshop cuenta con inmejorables herramientas para crear imágenes para la web. 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):

Este formato fue desarrollado en los comienzos de Internet para compartir imágenes entre diferentes plataformas. 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 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.

En la figura 2 vemos un GIF animado.

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

Figura 2:
CIF animado.

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 3 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 4:
Gráfico en GIF. Gráfico en JPG.
Figura 5:
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 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. Estos archivos se deben usar en tamaños pequeños, ya que son pesados y hacen lenta la carga de la página.

Arriba | Tema siguiente >>