Informática
Tratamiento de imágenes.

Tu Instituto Online
   


 
Nivel Medio GIMP: GIF transparente
Duración aproximada: 1/2 sesión
   
Objetivos Objetivos
  • Aprender como hacer una imagen con el fondo transparente en GIMP.
   
Fuentes de información Fuentes de información
   
Contenidos
Contenidos
   
 

1. Introducción

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

CromaticoVamos 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. Distribución de las capas
  • 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.

Exportar archivo

  • Ahora observaremos qué sucede si colocamos esta imagen GIF sobre distintos fondos:
Imagen cromatico.gif Imagen cromatico.gif Imagen cromatico.gif

El fondo de la imagen al ser transparente deja ver el color de fondo que queda debajo.

Ejercicios
Ejercicio
 

Sube el archivo cromatico.gif a la plataforma.

   
Contenidos
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).Estatua con el fondo transparente
  • 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:

 

Ejercicios
Ejercicio
 

 

 

Sube el archivo estatua.gif a la plataforma.

 

   
Creditos Créditos
Licencia de Creative Commons

Este documento es de dominio público bajo licencia de Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 España.
TuInstitutoOnline.com M.Donoso, G.García, P.Gargallo, A.Martínez. v. 2.0.2.1.0

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.

Los iconos empleados están protegidos por la licencia LGPL y se han obtenido de:
https://commons.wikimedia.org/wiki/Crystal_Clear
https://www.openclipart.org


Licencia de Creative Commons

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.

TuInstitutoOnline.com M.Donoso, G.García, P.Gargallo, A.Martínez. Versión 2021.