Zoomify

Últimamente las fotos gigapíxel están cobrando un gran protagonismo, probablemente debido a dos acontecimientos: por una parte las 14 fotos de alta resolución hechas por Madpixel en el Museo del Prado para Google, y por otra la foto del discurso de Obama realizada a modo de panorámica de 220 imágenes tamadas con una Canon G10.

En ambos casos se recurre a visores piramidales para poder mostrar las fotos en la web. Es decir, visores que utilizan sucesivas versiones de la foto cada vez a más resolución (de ahí su nombre de piramidales) y en los que las versiones de mas resolución están divididas en fragmentos. De este modo no es necesario cargar una imagen muy pesada y la navegación se agiliza. Es el mismo sistema que se utiliza en Google Earth.

Pero ¿podemos usar uno de estos visores en cualquiera de nuestras fotos? La respuesta es que sí. Incluso es posible que ya lo tengas sin saberlo.

Si utilizas Photoshop CS3 o CS4, la opción Zoomify te va a generar automáticamente todo lo necesario para publicar una foto, con todo lujo de detalles, en un visor piramidal. Veamos como.

Lo primero que vamos a hacer es actualizar Zoomify a su última versión. Ve a la web de Zoomify y descarga la última versión. Descomprime el ZIP para extraer el archivo zoomifyViewer.swf y cópialo en la carpeta \\Program Files\\Adobe\\Adobe Photoshop CS4\\Presets\\Zoomify\\ si tu sistema está en inglés o bien en \\Archivos de Programa\\Adobe\\Adobe Photoshop CS4\\Ajustes preestablecidos\\Zoomify\\ si está en español (usar “Program Files” o “\Archivos de Programa” dependerá del idioma de Windows, mientras que “Presets” o “Ajustes preestablecidos” depende del de Photoshop, de manera que pueden darse varias combinaciones de estas rutas).

Una vez actualizado abre Photoshop y carga una foto. No hace falta que sea una foto gigapixel, basta con una sencilla imagen con toda la resolución que de tu cámara. Para el ejemplo he usado una foto del Arco del Triunfo de París que tiene 2.431 x 3.648 píxeles y que ocupa unos 2 MB con calidad de compresión 8.

Ve al menú Archivo -> Exportar -> Zoomify… y te aparecerá el siguiente cuadro de diálogo:

menuzoomify.gif

En el deplegable Plantilla, puedes escoger el aspecto que tendrá la página web donde se muestre la foto. Puedes escoger el color de fondo (blanco, gris o negro) y si se mostrará o no un navegador, es decir, una miniatura de la foto que ocupa la esquina superior izquierda para permitirte moverte por ella y ver en que parte estás, pero que tapa una parte de la foto. Mi consejo es que no uses navegador, pero también puedes evitar que tape la foto, como veremos más adelante.

En Carpeta le debes indicar donde quieres que guarde el resultado, y Nombre base, será el nombre del archivo HTML y el de la carpeta que contendrá el resto de archivos.

Solo queda indicar la calidad de imagen y el tamaño del navegador, que debe ser, como máximo, de 1.000 x 1.000 píxeles. La imagen más pequeña se adaptará al tamaño que pongas aquí, de manera que si no se mantienen las proporciones, quedará un margen a los lados o arriba y abajo. Esto puede ser útil para hacer que el navegador no pise la imagen, sólo tienes que darle un ancho superior al que correspondería para obtener algo como esto:

ejemplozoomify.gif

¿Y si no quieres que el fondo sea de los tres colores que permite Zoomify? En realidad el color se ajusta en el fichero HTML que genera, de modo que con un mínimo conocimiento de este lenguaje podrás personalizar algunas cosas.

Editando el fichero HTML podrás modificar los colores de varios elementos o los bordes de la tabla que contiene la imagen. Incluso podrás hacer que se muestre el navegador o no, sin tener que volver a Photoshop. Bastará con cambiar el valor de la variable zoomifyNavigatorVisible de FALSE a TRUE o viceversa. Pero recuerda que cualquier cambio que hagas entre las etiquetas OBJECT deberás repetirlo en dos sitios: el primero es para que funcione en Internet Explorer, el segundo para el resto de navegadores. Ya sólo queda que subas los archivos a tu servidor y copies el código y lo integres en tu página web para tener un resultado parecido a este:

Si te aficionas a Zoomify, puede que las prestaciones de la versión que integra Photoshop se te queden cortas. En su web podrás comprar versiones más avanzadas, y desde 29 dólares ya incluye varios visores, opciones de personalización, vista a pantalla completa, modos para galerías, marcas de agua y muchas funciones más.

Un comentario en “Cómo publicar fotos de alta resolución en la web

Deja un comentario