Enmascaramiento PNG: cómo dar forma dinámica a cualquier imagen de su sitio web

Artículos de Nathan Brown29 de septiembre deeste año

Desde el lanzamiento de Roundfolio , he recibido muchas solicitudes con respecto a las imágenes de la galería redonda y cómo se crearon. La miniatura redonda es en realidad solo una imagen PNG transparente que se superpone a cada miniatura de la galería. Normalmente, se ven imágenes PNG utilizadas como sombras sutiles o bordes de imagen, pero con Roundfolio lo llevamos un paso más allá y creamos una máscara completamente transparente para cambiar la forma de las miniaturas. Veamos más de cerca cómo se hace esto y un poco de HTML/CSS para que todo funcione.

Creando capas separadas en Photoshop

En Photoshop podemos crear las capas que necesitamos que luego se superpondrán mediante CSS. Vea el ejemplo a continuación para comprender la jerarquía visual. Las primeras dos imágenes deberán guardarse como archivos PNG transparentes. Para hacer esto en PS, seleccione (Archivo | Guardar para Web y dispositivos) en la nueva ventana y elija "PNG-24" en el menú desplegable en la esquina superior derecha. Luego, asegúrese de que la opción "Transparencia" esté marcada. Haga clic para guardar en el directorio de imágenes de su sitio web. Cada una de estas imágenes debe tener el mismo ancho y alto, en este caso un cuadrado de 187 px. Guardé mis imágenes como "gallery-thumb.jpg" para la miniatura, "gallery-shadow.png" para la máscara transparente y "gallery-rollover.png" para la imagen de rollover.

Ahora echemos un vistazo al HTML.

a href="imagenes/galeria-completa.jpg"span/spanspan/spanimg src="imagenes/galeria-thumb.jpg"//a

Notarás que tenemos una etiqueta href típica, con una clase de "item", que vincula nuestra imagen en miniatura a su contraparte, el archivo de imagen completo. Lo diferente de este bloque de código es que hay otros elementos entre las etiquetas href de apertura y cierre. Las dos etiquetas span albergarán nuestra máscara y el estado de rollover.

Echemos un vistazo al CSS para ver cómo funciona.

a.item{posición:relativa;pantalla:bloque;altura:187px;ancho:187px;flotar:izquierda;}a.item.gallery-shadow{pantalla:bloque;posición:absoluta;arriba:0%;izquierda:0%;ancho:187px;altura:187px;fondo:url(imagenes/gallery-shadow.png);}a.item.rollover{pantalla:bloque;posición:absoluta;arriba:0%;izquierda:0%;ancho:187px;altura:187px;fondo:url(imagenes/gallery-rollover.png);}

Este CSS es bastante sencillo. Básicamente, configuramos nuestros elementos span para que se "bloqueen", dándoles un ancho y una altura coincidentes y configurando sus posiciones para que también coincidan. Estoy usando un poco de Javascript en el encabezado para controlar el desplazamiento. Echemos un vistazo rápido.

script tipo="texto/javascript"$(documento).ready(función(){$(".rollover").css({'opacidad':'0'});$('#gallery a.item').hover(función() {$(este).find('.rollover').stop().fadeTo(500, 1);  },   función() {   $(este).find('.rollover').stop().fadeTo(500, 0);  } )});/script

Ahora que has visto lo fácil que es recrear el efecto utilizado en Roundfolio , vayamos un paso más allá. Intentemos usar una pincelada como imagen de máscara. Estoy usando un pincel del conjunto de pinceles Dry Paint Strokes . Aquí están mis tres imágenes diseñadas en Photoshop. Recuerda que estas imágenes deben tener exactamente el mismo ancho y alto. Como puedes imaginar, esto crea un efecto bastante genial.

Haga clic aquí para ver mis resultados.

Conclusión

Este es uno de esos tutoriales cuyo único límite es tu imaginación. Prueba distintas formas, patrones y pinceles para crear tus máscaras PNG y comparte tus resultados en el campo de comentarios a continuación. ¡Ya no estás limitado por los bordes cuadrados del diseño web típico!