martes, noviembre 14, 2006

Transparencia PNG

La transparencia PNG es una de esas cosas geniales para el diseño gráfico pero que por culpa de un navegador no se pudo utilizar hasta ahora. Doce años después de la especificación final, el casposo producto de (la no menos cutre) Microsoft llamado Internet Explorer 7 por fin la soporta.

Como he leído en los foros que la transparencia en PNG no se puede hacer con Corel Photo-Paint, que si no lo soporta nativamente, o que hace falta tener el Photoshop o el Fireworks, o sino hacer importaciones y exportaciones rocambolescas, voy a demostrar que sí se puede hacer sin ningún tipo de dificultad.

Lo primero es crear un objeto que tenga algún tipo de transparencia, por ejemplo un simple texto de color blanco al que se le aplica un desenfoque gaussiano de 10 píxels de radio:

Aplicando desenfoque Gauss

Con el objeto seleccionado, hacemos Ctrl+M o vamos al menú “Máscara” y seleccionamos “Crear >> Máscara a partir de objeto(s)”, ahora ya tenemos la máscara de transparencia que vamos a usar con el PNG, y dado que el texto era de color blanco, el color de fondo del documento tiene que ser del mismo color, si no es así, hay que cambiarlo.

Ahora simplemente hay que guardar el archivo, vamos a “Guardar como...” y en el menú desplegable para seleccionar la extensión ponemos “PNG - Portable Network Graphics” y nos aparecerá el siguiente cuadro de diálogo:

Cuadro de diálogo para PNG

Evidentemente seleccionamos la opción “Área enmascarada” y guardamos. Y ya está. Si dispones de cualquier navegador que no sea Internet Explorer 6 ó inferior verás la transparencia PNG funcionando. El fondo de color demuestra la suavidad de la transición.


Transparencia en acción

No hay comentarios: