Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Complementos

Manuales necesarios para el desarrollo web distintos de la programación.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 56

Visitas el mes pasado: 65

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Imágenes en la web (II)

Imágenes transparentes

Definición

Denominamos imágenes transparentes a aquellas que en parte de la misma deja ver la capa que hay detrás de la imagen. Es decir una parte de la imagen tiene un color transparente.

Normalmente se trata de dibujos o partes de una foto en el que el fondo es transparente, dejando ver el color o imagen de fondo que tiene la página.

Solamente los formatos de imagen .gif y .png admiten el color "transparente" en la imagen. por lo que al crear una imagen transparente debemos guardarlo en uno de estos formatos.

Crear una imagen transparente a partir de una normal es relativamente sencillo, y tiene la ventaja de que podemos ponerla en cualquier sitio de nuestra web sin tener que preocuparnos de cambiar el fondo de la imagen.


Crear una imagen transparente

imagen de asterix no transparente

Vamos a poner un ejemplo en esta página de cómo transformar una imagen con un fondo de un color uniforme en una imagen transparente. Usaremos aquí el programa GIMP 2 de diseño gráfico. GIMP es un programa de diseño gráfico gratuito. Si quieres saber más sobre este programa y cómo descargarlo consulta en Programas y aplicaciones / diseño gráfico.

Tenemos la imagen de la derecha, El fondo de esta imagen es de color azul claro, sin embargo queremos que este fondo sea transparente para que al insertarla en la página el fondo de la imagen sea del mismo color que el de la página. Para ello seguimos los siguientes pasos:

abrimos la imagen con GIMP 2. Para ello en la barra superior del panel principal pulsamos en Archivo / Abrir. Buscamos la imagen en nuestro ordenador y la abrimos.

explicación transparencia 1

En la misma barra superior vamos a Herramientas / Herramientas de selección / Selección por color y Pulsamos ahí y después llevamos el ratón a cualquier parte del color azul claro dentro de la imagen y pulsamos. Verás que se ha seleccionado todo el fondo de color azul claro de la imagen.

Tenemos seleccionado el color de fondo, sin embargo lo que queremos seleccionar es justamente lo contrario, es decir, todo menos el color de fondo, para lo cual en la barra superior vamos a Seleccionar / Invertir y pulsamos. La selección se invierte.

explicación transparencia paso 2

El siguiente paso es guardar lo seleccionado en el portapapeles, para lo cual vamos en el menú superior a Editar / Copiar y pulsamos.

A partir de aquí crearemos una nueva imagen en la que el fondo sea transparente, y en ella pegaremos el contenido del portapapeles. Para ello vamos primero en el menú superior a Archivo / Nuevo... y pulsamos. Nos sale un nuevo cuadro de diálogo. en él pulsamos en Opciones avanzadas. El cuadro se amplia. Pulsamos entonces en la flecha del menú Rellenar con y en la lista desplegable que aparece pulsamos en Transparencia. Pulsamos después en el boton Aceptar y nos aparece un nuevo panel principal, en el que aparece un recuadro con cuadrados grises. El recuadro representa la nueva imagen, su tamaño será igual que la de la imagen anterior, y los cuadros grises representan el fondo transparente.

Ahora en esta nueva imagen vamos a la barra superior y pulsamos en Editar / Pegar. El resultado en el panel principal de GIMP es el siguiente:

Explicación transparencia 3

Ahora no tenemos más que guardar el archivo con la extensión .gif para ello pulsamos en el menú superior en Archivo / Guardar (o Archivo / Exportar, según la versión de GIMP). Nos sale un cuadro en donde pondremos el Nombre del archivo. Al escribir el nombre lo haremos con su extensión, escribiremos en ese recuadro, por ejemplo asterix.gif. Buscamos la carpeta donde lo queremos guardar y pulsamos en Guardar.

imagen de asterix transparente

Si guardamos la imagen en formato .gif nos saldrá un nuevo cuadro que nos dice "Su imagen debería exportarse antes de que pueda ser guardada como GIF ... . En este cuadro pulsamos en el botón Exportar

Sale ahora un nuevo cuadro Opciones de GIF. Podemos si queremos ponerle un comentario a la imagen. Pulsamos después en Guardar y ya tenemos el archivo con el fondo transparente.

Vemos aquí a la derecha el resultado de nuestro ejemplo. La nueva imagen tiene el color de fondo tranparente, y podemos ponerla en cualquier parte de la página, sin preocuparnos de que el color de fondo de la imagen coincida con el de la página para que no se vea distinto.


Utilización de imágenes transparentes

Las imágenes transparentes se utilizan sobre todo en dibujos, logos, y otras imágenes en las que no queremos ver la imagen con una forma cuadrada o rectangular. La imagen sigue teniendo una forma rectangular, sin embargo veremos de la imagen sólo las partes que no son transparentes. El resto de la imagen la ocupara el fondo que le hayamos puesto a esa parte de la página.



Complementos/Programas

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com