Zoomify: Creando zooms con interactividad en Photoshop

Seguir @Wakkos

Una herramienta que poca gente conoce desde Photoshop CS3 es Zoomify, el concepto es muy simple: piensa en Google Maps y su manera de hacer zoom hacia detalles de los mapas, pues de este modo crea Zoomify una aplicación para hacer zoom a tus imágenes de alta resolución en la web así cuando un usuario entra en la web a ver dicha imágen, puede hacer zoom inmediatamente en ella en una zona específica de la imagen.

Para empezar debemos elegir una imagen de alta resolución a la que valga la pena hacer zoom (imagenes de poca resolución no sale rentable, ya que pierden resolución con un zoom)

click imagen (+2 MB)

Muy bien, vamos ir a Archivo -> Exportar -> Zoomify (FIle – Export – Zoomify) y veremos que tenemos varias opciones; las que trae por defecto suelen ser las mejores porque están basadas en la imagen que hemos elegido. Podemos elegir el tipo de plantilla para el archivo HTML. La calidad de las imágenes (la mejor si queremos que el usuario aproveche la aplicación) y el tamaño de la tabla donde va a ir insertado.

Una vez que aceptamos, Zoomify crea una carpeta con las secciones del zoom (65 en mi caso) y un archivo flash para darle uso e insertarlo donde queramos  – No olvidemos el archivo HTML del que podemos obtener el código. Listo para subir a la web y ya.

<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" WIDTH="400" HEIGHT="400" ID="theMovie"> 

<PARAM NAME="FlashVars" VALUE="zoomifyImagePath=DSC01763_img&zoomifyNavigatorVisible=false">

<PARAM NAME="BGCOLOR" VALUE="#ffffff">

<PARAM NAME="MENU" VALUE="FALSE">

<PARAM NAME="SRC" VALUE="DSC01763_img/zoomifyViewer.swf">

<EMBED FlashVars="zoomifyImagePath=DSC01763_img&zoomifyNavigatorVisible=false" SRC="DSC01763_img/zoomifyViewer.swf" BGCOLOR="#ffffff" MENU="false" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"  WIDTH="400" HEIGHT="400" NAME="theMovie"></EMBED>

</OBJECT>

Puedes ver el ejemplo en Vivo

---