El formato GIF responde a las siglas de Graphics Intercharge Format File, formato desarrollado por Compuserve. Es, junto con el JPG, el más usado en la Web. El formato GIF es de menor calidad que JPG, sólo permite 256 colores como máximo, pero muchísimo más ligero, además de permitir transparencias y animaciones.
En esta práctica unidad nos centraremos en el concepto de transparencia ya que una particularidad del formato GIF es la capacidad para realizar imágenes con fondo transparente.
2. Creación desde cero de una imagen con fondo transparente
Vamos a crear una imagen nueva que no tendrá fondo, es decir, tendrá un fondo transparente y luego la usaremos sobre fondos de distintos colores.
Creamos un nuevo archivo desde el menú Archivo→Nuevo. Definiremos la anchura de 500 píxeles, altura de 500 píxeles, 72 píxeles/pulgada, color RGB y relleno con transparencia.
Como puede comprobarse, no tenemos ningún color que nos haga de fondo, ya que estamos viendo la cuadrícula de transparencia.
Creamos una nueva capa de trabajo con el nombre "Rojo" desde el menú Capa→Capa nueva, dejando los valores por defecto.
Seleccionamos la herramienta Marco elíptico.
Dibujamos un círculo.
Elegimos la herramienta de Relleno y lo rellenamos de color rojo.
Creamos una nueva capa de trabajo con el nombre "Verde"desde el menú Capa→Capa nueva, dejando los valores por defecto.
Seleccionamos la herramienta Marco elíptico.
Dibujamos un círculo.
Elegimos la herramienta de Relleno y lo rellenamos de color verde.
Creamos una nueva capa de trabajo con el nombre "Azul" desde el menú Capa→Capa nueva, dejando los valores por defecto.
Seleccionamos la herramienta Marco elíptico.
Dibujamos un círculo.
Elegimos la herramienta de Relleno y lo rellenamos de color azul.
Seleccionamos la herramienta Mover y situamos los círculos tal como se ven en la imagen final.
Ahora guardaremos la imagen que acabamos de realizar:
Guardamos la imagen como cromatico.xcf y nos aseguramos de poner el formato de GIMP (.xcf) para no perder las capas.
Ahora guardamos la imagen como cromatico.gif, mediante el menú Archivo→Guardar como seleccionando el formato GIF. Cuando apretemos el botón de guardar nos aparecerá otro cuadro de diálogo en el que haremos clic en el botón Exportar sin cambiar nada y en el siguiente cuadro de diálogo haremos clic en Guardar.
Ahora observaremos qué sucede si colocamos esta imagen GIF sobre distintos fondos:
El fondo de la imagen al ser transparente deja ver el color de fondo que queda debajo.
Ejercicio
Sube el archivo cromatico.gif a la plataforma.
Contenidos
3. Creación de una imagen con fondo transparente desde una ya existente.
Muchas veces lo que queremos es poder usar una imagen, que ya tenemos, sobre distintos fondos y que quede bien, es el caso de logos de empresas o imágenes para la web en que los fondos pueden ser muy diferntes e incluso ir cambiando con el tiempo.
Vamos a utilizar la imagen estatua.jpg para quitarle el fondo, hacerla más pequeña y así poder usarla en distintos fondos en la web.
Nos descargamos la imagen estatua.jpg y la abrimos en GIMP.
Hacemos un escalado a 156x200 píxeles. (Imagen→Escalar la imagen).
Seleccionamos la estatua, podemos utilizar la herramienta de Seleccionar por color y hacer clic en el cielo para que se seleccione todo de golpe.
Invertimos la selección para tener seleccionada la estatua (Seleccionar→Invertir).
Copiamos la selección (Editar→Copiar) y creamos una nueva imagen (Archivo→Nuevo), comprobaremos que automáticamente toma la medida de nuestra selección. Lo que tenemos que hacer es cambiar el Rellenar con por el valor Transparencia y seguidamente apretamos Aceptar.
Pegamos la selección en la nueva imagen (Editar→Pegar).
Ahora guardamos la imagen como estatua.gif, mediante el menú Archivo→Guardar como seleccionando el formato GIF. Cuando apretemos el botón de guardar nos aparecerá otro cuadro de diálogo en el que haremos clic en el botón Exportar sin cambiar nada y en el siguiente cuadro de diálogo haremos clic en Guardar.
Si colocamos esta imagen GIF sobre distintos fondos, el resultado sería el siguiente:
No se permite un uso comercial de la obra original ni de las posibles obras derivadas, la distribución de las cuales se debe hacer con una licencia igual a la que regula la obra original.
Los reconocimientos se realizan en el apartado Fuentes de información.
Todas las capturas de pantalla tienen copyright y pertenecen a TuInsitutoOnline.com.
TuInstitutoOnline.com permite su uso siempre y cuando se muestren desde el dominio www.tuinstituoonline.com y NO PERMITE enlazar a ellas desde otros lugares.
Además, la estructura diseñada para mostrar el contenido de las unidades es propiedad de TuInstitutoOnline.com.