PDF de programación - Unidad 10 - Animación y web - Aplicaciones didácticas con Gimp

MINISTERIO
DE EDUCACIÓN
Y CIENCIA


SECRETARÍA GENERAL
DE EDUCACIÓN



DIRECCIÓN GENERAL
DE EDUCACIÓN,
FORMACIÓN PROFESIONAL
E INNOVACIÓN EDUCATIVA

CENTRO NACIONAL
DE INFORMACIÓN Y
COMUNICACIÓN EDUCATIVA



GIMP, APLICACIONES DIDÁCTICAS

Unidad 10

Animación y web



C/ TORRELAGUNA, 58
28027 - MADRID






MINISTERIO
DE EDUCACIÓN
Y CIENCIA



SECRETARÍA GENERAL
DE EDUCACIÓN



DIRECCIÓN GENERAL
DE EDUCACIÓN,
FORMACIÓN PROFESIONAL
E INNOVACIÓN EDUCATIVA

CENTRO NACIONAL
DE INFORMACIÓN Y
COMUNICACIÓN EDUCATIVA

INDICE DE UNIDADES
0 Conociendo GIMP
1 Imagen digital
2 Las capas en GIMP
3 Los textos
4 Máscaras y selecciones
5 Canales
6 Rutas
7 El color
8 Filtros
9 Script-Fu
10 Animación y web
11 Taller práctico



Animación y web

GIMP nos proporciona numerosas opciones para obtener imágenes listas para utilizar en páginas web. En esta
unidad vamos a tratar tanto las imágenes como las animaciones que se pueden utilizar en páginas web o
aplicaciones desarrolladas para funcionar sobre el ordenador.

Desde elementos web hasta animaciones pasando por mapas de imagen o la división de imágenes para ser
más fácilmente cargadas por el usuario de nuestra página web.

Comenzaremos hablando de los formatos en que debemos guardar nuestras imágenes para ser incorporadas a
las páginas web.



Animación y web
Contenidos
Formatos
Logo y textura
Elementos Web
Animación
Mapa de imagen
Dividir
Práctica guiada 10
Ejercicios 10



C/ TORRELAGUNA, 58
28027 - MADRID






Unidad 10 Animación y web

Formatos
GIMP nos proporciona numerosas opciones para obtener imágenes listas para utilizar en páginas web. En esta
unidad vamos a tratar tanto las imágenes como las animaciones que se pueden utilizar en páginas web o
aplicaciones desarrolladas para funcionar sobre el ordenador.

Las imágenes que se utilizan para las páginas web se guardan 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 y que nos permiten tener imágenes con millones de colores
para reproducir imágenes fotográficas. Con GIMP también podemos tener las imágenes en modo Indexado que
reduce el número de colores a un máximo de 256 y, por último, también nos permite guardar cualquier imagen
en escala de grises desde el blanco hasta el negro.

Estos modos de imagen se guardan en los formatos JPG y GIF respectivamente, ya que han sido los formatos
soportados tradicionalmente por los navegadores. 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 son guardadas en el formato JPG. GIF también
proporciona transparencia de un color, cosa que no hace el formato JPG. Ante estas limitaciones surge el
formato PNG que proporciona 256 niveles diferentes de transparencia y nos permite imágenes a todo color. No
soporta la animación como hace el formato GIF por lo que vamos a necesitar estos tres formatos para trabajar
con imágenes para la web.

1. Formato JPEG

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 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 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 perdida de calidad se acumula. Esto significa que si comprime una imagen y sobre ésta se vuelve a
comprimir se obtendrá una perdida mayor. Cada vez que comprima y descomprima la imagen esta perderá algo
de calidad.

Veamos como 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 un Scrip-Fu de Logos para posteriormente guardar esa imagen en
formato JPG.

1. En la Caja de Herramientas accedemos a Exts Script-Fu Logos Calor fulgurante,

escribimos "JPG" como texto y aceptamos.

2. Obtenemos una imagen con tres capas que vamos a guardar en formato JPG. Archivo Guardar
como y seleccionamos la carpeta donde guardaremos el archivo; ponemos el nombre del archivo y
seleccionamos el formato JPEG y vemos que al nombre que hemos puesto al archivo se le añade la
extensión JPG. Hacemos clic en Aceptar y nos aparece un aviso de GIMP recordándonos las
características del formato.



1





Unidad 10 Animación y web

No existe ningún problema porque la imagen original queda como estaba y la exportación al formato
JPEG se hace de forma externa a la imagen que estamos trabajando. Hacemos clic en Exportar.
Aparecen un cuadro de diálogo con las opciones de exportación JPEG y detrás una Ventana Imagen
(si hemos marcado la opción Mostrar vista previa...) que muestra la imagen previa del resultado de la
exportación de acuerdo a los valores elegidos.

3. 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. La Calidad se puede seleccionar desde 0 hasta 100 viniendo por
defecto 85. Esta opción dice a GIMP la compresión que establecerá para el archivo. Podemos 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.

4. Seamos un poco exagerados para comprobar, antes de guardar, los resultados que se producen sobre
nuestra imagen al hacer cambios en la Calidad. Pongamos una calidad de 85 (obtenemos una archivo
de 8.483 bytes); cambiemos a 20 (el archivo es de 3121 bytes).

Calidad 0,85

Calidad 0,20



Observemos la diferencia entre las dos imágenes con diferencias de Calidad.

5. Para que los efectos de la compresión con pérdidas no sea tan evidente podemos modificar la cantidad

de Suavizado hasta 1,00.

Calidad 0,20 - Suavizado 0,1

Calidad 0,20 - Suavizado 1,0



6. El Suavizado no arregla una excesiva compresión, por lo que deberemos 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.

7. Dejaremos marcadas las demás opciones que vienen por defecto y añadiremos cualquier comentario a

la imagen para poder reconocer esa imagen posteriormente.



2





2. Formato GIF

Unidad 10 Animación y web

Existen diferentes versiones de este formato (GIF87a, GIF89a ...). Permite 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. Permite 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. Creamos una imagen con las mismas características que la anterior, pero ahora ponemos "GIF" como

texto y el tamaño del tipo de letra lo fijamos en 100.

2. Archivo Guardar como, ponemos nombre al archivo y después elegimos formato GIF. Aceptamos.

Aparece un cuadro que nos avisa de los cambios que se producirán en nuestra imagen y, dado que
nuestra imagen tiene capas, nos avisa sobre la posibilidad de guardar la imagen como una animación
en la que se mostrarán las capas una a una formando dicha animación.

También nos dice que la imagen cambiará de modo de color y que pasará a ser indexada o que
podemos convertirla a tonos de gris, también con 256 tonos.

3. Hacemos clic en Exportar con las opciones que vienen por defecto. Al ser una imagen fija el siguiente
cuadro de diálogos nos permite escribir un comentario sobre la imagen y elegir la opción de
Entrelazado. El resultado se observa a continuación.

Guardando todas las capas
de que consta la imagen.


Guardando
las capas que
tienen una parte transparente.

4. Podemos hacer el proceso previo antes de guardar la imagen, lo que nos permitirá un mayor control
sobre las características de la imagen indexada. En la Ventana Imagen accedemos a Imagen
Modo Indexado. El cuadro Convertir la imagen a colores indexados nos permite seleccionar el

3







Unidad 10 Animación y web

tipo de paleta que queremos utilizar con un máximo de 255 colores, si la imagen tienen partes
transparentes, y 256 si no hay nada transparente.

Es conveniente "Activar el difuminado de transparencia" si tenemos áreas transparentes en nuestra imagen.

3. PNG

Es un formato de almacenamiento de imagen basado en un algoritmo de compresión sin pérdida. El formato
permite imagenes con color v