PDF de programación - Animación y web

GIMP, aplicaciones didácticas.
Animación y web

Ministerio de Educación. ITE |GIMP, aplicaciones didácticas.



GIMP, aplicaciones didácticas

Para la web

Además de ser un potente editor de imágenes digitales, GIMP también dispone de numerosas herramientas para generar imágenes
que van a ser utilizadas en páginas webs.

Darás un repaso a los distintos formatos de imagen que se pueden usar en las páginas webs y aprenderás a usar las diferentes
herramientas y atajos que GIMP proporciona para crear elementos gráficos destinados a ser usados en páginas webs.

Programa

Objetivos

Conocer las características de los formatos de imagen válidos para ser utilizados en páginas webs.

Saber crear imágenes animadas con GIMP.

Utilizar las herramientas de GIMP para crear imágenes para la web.

Hacer un mapa de imagen con diferentes enlaces sobre una imagen.

Contenidos

Formatos de imagen para la web.

Imágenes para el fondo y logotipos.

Imágenes animadas.

Mapa de imagen.

División de una imagen.

Formatos para la web

GIMP proporciona numerosas opciones para obtener imágenes listas para utilizar en páginas webs. En este módulo vamos a tratar
tanto imágenes fijas como animaciones, que se pueden utilizar en páginas webs o aplicaciones desarrolladas para funcionar sobre un
ordenador.

Las imágenes que se utilizan para las páginas web se guardan, básicamente, en tres formatos: JPG, GIF y PNG. Cuando trabajamos
en GIMP habitualmente lo hacemos en el modo RGB que, como ya sabemos, proporciona 8 bits por canal de color; consiguiendo
imágenes de 24 bits que nos permiten tener millones de colores, capaces de reproducir fielmente imágenes fotográficas.

Con GIMP también podemos tener las imágenes en modo Indexado, este modo reduce el número de colores a un máximo de 256, que

1 también nos permite guardar cualquier imagen en escala de grises, gama de colores que abarca todos los grises empezando por blanco
y finalizando en el negro.

Estos modos de imagen se guardan en los formatos JPG y GIF respectivamente, ya que han sido los formatos soportados
tradicionalmente por todos los navegadores de Internet. GIF es un formato que proporciona sólo 8 bits de información de color y JPG
proporciona 24 bits. El formato GIF nos proporciona imágenes de bajo peso ideales para ser utilizadas en la Web, pero no es suficiente
para fotografías, que deben ser guardadas en el formato JPG. GIF también proporciona transparencia de un color, cosa que no hace el
formato JPG. Ante estas limitaciones de uno y otro formato, surge el formato PNG, que proporciona 256 niveles diferentes de
transparencia y nos permite imágenes a todo color, aunque no soporta la animación como hace el formato GIF. Por lo tanto, vamos a
necesitar estos tres formatos para trabajar con imágenes para la Web.

Formato JPG

JPEG (Joint Photographic Experts Group) es un algoritmo diseñado para comprimir imágenes con 24 bits de profundidad o en escala de
grises. Normalmente se le llama JPG debido a la extensión que tiene en sistemas operativos que sólo aceptan tres letras de extensión.

JPEG (JPG) es un algoritmo de compresión con pérdida. Esto significa que al utilizar la imagen tras la compresión no obtenemos
exactamente la misma imagen que teníamos antes de la compresión.

Una de las características que hacen muy flexible el JPEG (JPG) es el poder ajustar el grado de compresión. Si especificamos una
compresión muy alta se perderá una cantidad significativa de calidad, pero obtendremos ficheros extremadamente pequeños. Con una
cantidad de compresión baja obtenemos una calidad muy parecida a la del original, y un fichero pequeño.

Esta pérdida de calidad se acumula. Esto significa que, si comprimes, una imagen y sobre ésta vuelves a comprimir obtendrás una
pérdida mayor. Cada vez que comprimas y descomprimas la imagen esta perderá algo de calidad.

Veamos cómo podemos guardar una imagen en formato JPEG utilizando GIMP. No será igual si tenemos una imagen con capas o si
tenemos una imagen con una sola capa.

Vamos a crear una imagen desde cero con los filtros de Logotipos para posteriormente guardar esa imagen en formato JPG.

1. En el menú de la Ventana Imagen accede a Archivo --> Crear --> Logotipos --> Calor resplandeciente, escribe

"JPG" como texto y acepta.

2. Obtienes una imagen con tres capas que vas a guardar en formato JPG. Archivo --> Exportar y seleccionas la carpeta

donde guardarás el archivo; pon el nombre del archivo y selecciona el formato JPG, y verás que al nombre que has puesto al
archivo se le añade la extensión JPG. Haz clic en Exportar y aparece un aviso de GIMP recordándonos las características de
la exportación.

3. No existe la posibilidad de pérdida de las características de la imagen original porque ésta no se modifica y la exportación al

formato JPG se hace de forma externa a la imagen sobre la que estamos trabajando. Haz clic en Exportar. Si haces clic en
Opciones avanzadas se mostrarán las opciones de exportación JPG y detrás una Ventana Imagen (si has marcado la
opción Mostrar vista previa en la Ventana imagen) que te muestra la imagen previa del resultado de la exportación de
acuerdo a los valores elegidos.

2 4. El cuadro de diálogo es muy completo cuando hacemos clic en Opciones avanzadas, aunque vamos a centrarnos sólo en

algunos aspectos que nos permitirán guardar nuestras imágenes de acuerdo a nuestra elección. En cuanto a los parámetros que
vamos a utilizar, solamente haremos referencia a las opciones de Calidad y Suavizado.

5. La Calidad se puede seleccionar desde 0 hasta 100, aunque por defecto marca 85. Esta opción dice a GIMP la compresión
que establecerá para el archivo. Puedes ir modificando la Calidad para observar, en la imagen, los cambios que se producen,
así como los cambios en el tamaño de la imagen.

6. Seamos un poco exagerados para comprobar, antes de guardar, los resultados que se producen sobre nuestra imagen al hacer
cambios en la Calidad. Pon una calidad de 85 (obtienes un archivo de 8.483 bytes); a continuación cambia a 20 (el archivo es
de 3121 bytes).

¿Notas la diferencia?

7. Para que los efectos de la compresión con pérdidas no sean tan evidentes puedes modificar la cantidad de Suavizado hasta

1,00.

8. El Suavizado no soluciona una excesiva compresión, por lo que deberás manejar con cuidado la Calidad de la compresión.

Podemos decir que la Calidad no debe bajar de 60 cuando las imágenes estén destinadas para la Web.

9. Deja marcadas las demás opciones que vienen por defecto y añade cualquier comentario a la imagen para poder reconocerla

posteriormente.

3 Formato GIF

Existen diferentes versiones de este formato (GIF87a, GIF89a...) que permiten transparencia de 1 bit, de tal forma que cada píxel de
la imagen puede ser o no transparente. Las versiones actuales permiten hacer animaciones simples, aunque la compresión es muy
deficiente. Además, este formato admite utilizar entrelazado en imágenes, de tal forma que las imágenes se visualicen al completo nada
más empezar su descarga, pero con una baja definición que va progresando hasta cargarse por completo en los navegadores:

1. Crea una imagen con las mismas características que la anterior, pero ahora pones "GIF" como texto y el tamaño del tipo de letra

lo fijamos en 100.

2. Archivo --> Exportar..., pon nombre al archivo y después elige formato GIF. Exporta. Muestra la siguiente ventana:

Tanto las imágenes en formato GIF, como JPG y PNG no pueden guardar capas, hemos de tenerlo en cuenta para no
encontrarnos con sorpresas más adelante.

3. GIF guarda en 256 tonos de color. La exportación elige de forma automática esos 256 colores. Si quieres elegir tú los colores y
la forma de indexar los colores de la imagen original debes hacerlo previamente en el menú Imagen --> Modo --> Indexado
y después Exportar como GIF.

4. Si exportas con las opciones que vienen por defecto, obtendrás la siguiente imagen:

5. Si haces invisible la capa de fondo de la imagen y exportas, obtendrás:

4 Los píxeles transparentes de la imagen inicial también lo son en la imagen GIF exportada.

Formato PNG

Es un formato de almacenamiento de imagen basado en un algoritmo de compresión sin pérdida. El formato permite imágenes con color
verdadero, escala de grises y paleta de 8 bits.

PNG también permite canales alfa, para especificar transparencias. A diferencia de GIF, que sólo permite especificar si un píxel de un
color es transparente o no. PNG permite especificar 255 grados de transparencia.

Comparado con JPG, este formato es mejor (tanto en calidad como en peso de los archivos generados) para el almacenaje de
imágenes con pocas variaciones de colores y/o grandes áreas sólidas, mientras que para fotografías el JPG es más adecuado:

1. Crea una imagen igual que las anteriores pero con el texto "PNG" y el tamaño del tipo de letra lo fijas en 100.

2. Elige Archivo --> Exportar..., pon nombre al archivo y elige el formato PNG. Te aparece la siguiente advertencia que te

obliga a aplanar la imagen para poder guardarla en formato PNG. Haz clic en Exportar.

3. Tienes las siguientes opciones para guardar en el formato elegido:

Puedes modificar el nivel de compresión desde 9 (menor calidad, mayor compresión) a 0 (mayor calidad, menor
compresión) y las opciones que puedes observar. Si quieres obtener la transparencia debes hacer invisible la capa de fondo y
exportar como PNG.

5 4. Realiza distintas pruebas al exportar en formato PNG para familiarizarte con las distintas opciones y comprobar la calidad de la

compresión.



Una vez conocidos los formatos en que podemos guardar nuestras imágenes para la Web, comencemos a ver las posibilidades que nos
proporciona GIMP para la Web.

Logo y textura

A lo largo de este módulo hablaremos de las diferentes imágenes que podemos obtener con GIMP y que pueden ser utilizadas en una
página web. El objetivo de este módulo se centra en mostrar las posibilidades que tiene GIMP como programa de tratamient