Webs con PNG

Jeff Croft publicó un artículo muy interesante sobre los diferentes usos creativos del PNG en diseño web. (Creative Use of PNG Transparency in Web Design en Digital Web Magazine.
Traduzco y resumo a continuación lo que me ha parecido más interesante:

El formato PNG (Portable Network Graphics) es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes.

Grandes usos del PNG.

Degradados:

En los pasados años los degradados han ido cobrando popularidad en los sitios web. El formato GIF también se ha usado para los gradientes, sobre todo para los que son de dos colores porque funciona nother common graphic design technique is the subtbien. Si embargo el límite de colores de los GIF (256 colores) no siempre puede conseguir algunas complejas transiciones de color.

Con backgrounds:

En ocasiones es necesario crear una imagen que funcione de igual modo sobre diferentes tipos de imagenes de fondo. Un ejemplo de esto son los logotipos y los iconos. En estas situaciones tradicionalmente se han utilizado el GIF, pero el PNG puede ser para esto la mejor opción. PNG contiene transparencia nativa y eso hace que pueda funcionar bien tanto sobre un fondo como debajo de éste. Mantiene el efecto antialiasing de los bordes y eso hace más elegante los diseños.

Este ejemplo está hecho con un PNG:

y lo mismo con un GIF:

Superposiciones:

Una técnica común actualmente en diseño son las superposiciones de una fotografía u otra imagen sobre un texto con secciones transparentes, esto facilita la lectura de este texto. Para evitar tener que crear una imagen donde ya el texto esté integrado en dicha imagen (lo que puede no ser útil si se necesita actualizar el texto con frecuencia). Esta imagen puede ser creada a base de HTML con estilos CSS y el uso del PNG. Disponiendo la imagen PNG como fondo.

Máscaras:

Otro uso interesante del PNG y su canal alpha transparente es la creación de máscaras que tapen parcialmente la imagen que está por detrás de ellas.

El efecto que se busca es el siguiente:

Esto se logra combinando HTML y CSS:

HTML:
<a class="photo-container" href="http://www.flickr.com/photos/jcroft/2622915/">
<img class="full-size-photo" src="http://static.flickr.com/2/2622915_8b78c1207d.jpg"
alt="CTA, a photo by Jeff Croft" />
<img class="mask" src="http://media.jeffcroft.com/img/core/jeffcroft_logo_mask.png"
alt="Mask" />
</a>

CSS:
a.photo-container {
position: relative;
display: block;
}
img.mask {
position: absolute;
top: 0;
left: 0;
}


Responder

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