Creando transparencias en archivos de Imagen PNG-24 con Canal Alpha

Es indudable la amplitud de posibilidades que el uso de las transparencias soportado por el formato de imagen PNG, nos aporta a la hora de diseñar una página web.

El gran problema que conlleva el uso de este formato es que las versiones de Internet Explorer anteriores a la 7, no interpretan las transparencias aplicadas.

La solución a este problema la podéis encontrar en este Post.

Pero lo que nos ocupa aquí es la creación de una Imagen en formato PNG-24 con transparencia lista para ser aplicada a cualquiera de nuestros diseños web.

Vayamos al tema no sin antes darle las gracias a Beyonce por servir de modelo para este ejempo y por hacer subir el número de visitas a este blog de manera incontrolada ;).

El objetivo de este tutorial será conseguir una imagen PNG con una tranparencia aplicada de forma gradual por medio de un Canal Alpha.

El resultado lo podéis ver aquí: El PNG que contiene la silueta de Beyonce, aparece montada sobre tres fondos diferentes: Una imágen, un fondo plano de color azul, y otro de color rojo. A la imagen se le ha aplicado una tranparencia total que perfila todo su contorno. Además, presenta una transparencia gradual, que va de mas a menos partiendo de la parte inferior de la imagen. También se ha aplicado una sombra blanca difuminada bordeando el contorno derecho de la silueta.

Transparencias Canal Alpha Png

Para éste ejercicio hemos partido de esta imagen.

Imagen Original

Una vez siluetada con cualquiera de las herramientas de selección que el Photoshop nos ofrece, le hemos aplicado la transparencia de forma gradual haciendo uso de un Canal Alpha.

En los canales Alpha, el blanco representa el 100% de opacidad, y el negro las partes transparentes. Con valores intermedios como el gris pueden conseguirse imágenes translúcidas muy interesantes. Pero el tema de los Canales Alpha quizás sea motivo de otro tutorial.

De modo que la silueta de Beyonce de nuestro ejemplo aparecerá con la parte superior totalmente opaca y ofreciendo transparencias de forma gradual en su parte inferior.

Canales Alpha Beyonce Transparente

Ahora lo único que nos queda sería salvar el documento tal y como los hemos mostrado en la imagen de arriba. La parte transparente debe estár indicada el por fondo de cuadraditos grises del tapiz del propio documento.

Para ello iremos a archivo > Guardar para Web

Guardar para Web

Una vez en el Panel de “Save for Web”,

Panel Guardar para Web

indicaremos que queremos guardar el archivo en formato PNG-24, activando la opción de Transparencia (transparency),

Transparency yes

le daremos a OK y ya tendríamos nuestro archivo PNG de 24 con su transparencia alpha.

Una vez tenemos el PNG vamos a integralo en el código.

<html>
<head><title>Beyonce Transparente</title>
</head>
<body>
<div style=”background-color:gray;position:relative;”>
<div style=”position:absolute;top:30px;left:30px;font-size:16px;color:#ffffff;font-weight:bold;line-height:19px;width:40%;”>Beyonce sobre fondo gris …<br />Haz click sobre ella para ver la imagen sin fondo.</div>
<div style=”margin-left:200px;”>
<a href=’http://peachep.files.wordpress.com/2007/05/beyonce.png&#8217; title=’Beyonce con Transparencia Gradual’><img src=’http://peachep.files.wordpress.com/2007/05/beyonce.png&#8217; alt=’Beyonce con Transparencia Gradual’ /></a>
</div>
</div>

</body>

</html>

Y este sería el resultado siempre y cuando estes visualizando este Post desde un navegador que no sea el Explorer en versiones anteriores a la 7.

Beyonce sobre fondo gris …
Haz click sobre ella para ver la imagen sin fondo.
Beyonce con Transparencia Gradual

Nos vemos !! …

About these ads

8 respuestas a Creando transparencias en archivos de Imagen PNG-24 con Canal Alpha

  1. [...] estaba totalmente seguro de que incluir a Beyonce en este humilde Blog me iba a deparar múltiples visitas no relacionadas precisamente con el mundo [...]

  2. Que orrible barvaridad lo que a escrito el idiota amante de linux en esta pagina no es personal solo quiria quejarme

    http://redvip.homelinux.net/varios/explorer-png.html

  3. Ruben dice:

    No entiendo a que te refieres con “orrible barvaridad” la verdad … como no te expliques un poco mejor …

  4. [...] de la posibilidad de incluir transparencias en nuestras Webs gracias al formato PNG-24. En este Post, mostramos el modo de hacerlo y en este otro mostramos una solución al problema que se nos [...]

  5. Juan Carlos dice:

    Para sacar fotos como los de la morocha del ejemplo con una Kodak de cajoncito me arreglo. Yo que de cibernética no entiendo más que para que sirve “@” que utilidad le doy? y de los PDF que opinan?

  6. Pedro dice:

    de donde descargo photoshop??

  7. Pedro dice:

    pero mi photoshop no tiene el alpha ese :S

  8. JasoBeam dice:

    Muchas gracias…muy util! Dios le bendiga! SHalom

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

A %d blogueros les gusta esto: