A falta de un nombre mejor en castellano, que seguramente existirá y me avergüenzo de no saberlo, utilizaré la expresión tilear, o convertir en tiles, baldosas. Es decir, conseguir que la imagen termine en sus extremos de forma que encaje consigo misma, y así pueda repetirse siguiendo un patrón (horizontal, vertical, o ambos) pareciendo una única imagen continua.

Como ejemplo voy a utilizar la antigua imagen de cabecera de www.ciudadcapital.net, perteneciente al theme frozenage de WordPress (que es Creative Commons Attributions 2.5). Es una imagen de una cordillera, de 960 píxeles de ancho, que yo quería ampliar para que pudiera utilizarse en todo el ancho de la página. La foto original es de pdphoto.org, por lo que es de dominio público.

Guardamos la imagen y la abrimos con Photoshop (en mi caso CS5, aunque la funcionalidad que vamos a utilizar existe desde hace muchas versiones). Si vamos a Image / Canvas Size (Imagen / Tamaño de lienzo), podremos ver el tamaño que tiene en horizontal. En mi caso es de 960 píxeles. Apuntamos el tamaño para no olvidarnos y cerramos el menú.

Nos vamos ahora a Filter / Other / Offset… (Filtros / Otro / Desplazamiento…), seleccionamos Wrap Around (Dar la vuelta) y especificamos la mitad de los píxeles que habíamos apuntado (480 en este caso), en sentido horizontal. Si estuviéramos utilizando una imagen que quisiéramos repetir según un patrón en todas direcciones (una textura, un fondo para una página web o fondo de escritorio, etc), tendríamos que hacer lo mismo en sentido vertical, especificando la mitad del número de píxeles que tuviera la imagen como tamaño vertical.

Con esto obtendremos una imagen que encajaría si la repitiéramos varias veces en horizontal, aunque con el “pequeño” detalle de que ahora no encaja en su mitad.

Sólo nos queda utilizar las herramientas que nos proporciona Photoshop para editar esta zona central y retocar la imagen para que parezca que es continua. En mi caso recomiendo el Tampón de clonar: Pinchamos en una zona montañosa mientras pulsamos la tecla alt y así centramos el tampón en ese lugar. Después volvemos a pinchar en la zona central de la imagen y así copiamos poco a poco pequeños “trozos” de imagen hasta que parezca que no hay una discontinuidad:

Y ahora ya podemos utilizar la imagen encajándola en sentido horizontal, haciendo que sea perfectamente válida para repetirla mediante hojas de estilo css, por ejemplo, y poder llenar todo el ancho de la página independientemente de la resolución del monitor de quien la esté viendo.

Hoy he aprendido algo nuevo (¡guau!) mientras navegaba por una página que tenía unos logotipos bastante majos que se “iluminaban” cuando pasabas el ratón sobre ellos. Tenía ganas de ver cómo funcionaba así que he estado mirando el código de su página y su css para entenderlo.

Donde lo encontré parecía estar generado con un plugin y, como prefería saber como controlarlo y hacer mis propios botones, he investigado un poco más. Al final he encontrado una buena explicación de cómo hacerlo (yo he seguido su manual) en el blog randomnessf1.

El truco está en definir una zona donde utilizaremos un fondo mediante css [con la propiedad background: url(ejemplo.png);]. Esta imagen de fondo tendrá las dos partes del botón, iluminado y sin iluminar, como dos frames de una animación. Cuando pasemos el ratón sobre su zona, cambiaremos las coordenadas de la imagen de fondo, lo que provocará que se muestre el otro “frame”, dando la ilusión de que la imagen ha cambiado. Ejemplo:

Actualizado: la imagen de ejemplo ya no está en esta web.

Pasa el ratón sobre la imagen para comprobar el efecto.

En el código de la web únicamente tenemos que identificar el elemento mediante una clase y un id, como en este ejemplo:

<a id="fb_icon" class="trick" title="FeedBurner!" href="http://www.feedburner.com"></a>

En nuestra hoja de estilos css, identificaremos la clase y el elemento mediante estas etiquetas:

.trick { overflow: hidden; display:block; float: left; }
#fb_icon { background: url(images/feedburner.png); }
a#fb_icon { background-position: -47px 0px; height: 35px; width: 40px; }
a:hover#fb_icon { background-position: 0px 0px; }

Lo que nos interesa es cambiar las coordenadas de background-position dependiendo del momento (cuando tenemos el ratón encima o fuera). Hay que tener en cuenta cuál de los dos frames tengamos primero en la ilustración, claro, si el iluminado o el sin iluminar. Dependiendo de la opción, modificaremos las coordenadas en hover o en el estado normal.