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.
Para éste ejercicio hemos partido de esta imagen.
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.
 |
 |
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
Una vez en el Panel de “Save for Web”,
indicaremos que queremos guardar el archivo en formato PNG-24, activando la opción de Transparencia (transparency),
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=’https://peachep.files.wordpress.com/2007/05/beyonce.png’ title=’Beyonce con Transparencia Gradual’><img src=’https://peachep.files.wordpress.com/2007/05/beyonce.png’ 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.
Haz click sobre ella para ver la imagen sin fondo.
Nos vemos !! …
[…] 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 […]
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
No entiendo a que te refieres con “orrible barvaridad” la verdad … como no te expliques un poco mejor …
[…] 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 […]
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?
de donde descargo photoshop??
pero mi photoshop no tiene el alpha ese :S
Muchas gracias…muy util! Dios le bendiga! SHalom