MiMoriarty

Trucos de diseño para diseñar como locos

Fotografía panorámica interactiva en iPad

En anteriores artículos vimos como realizar una proyección interactiva o con botones de varias fotografías. Ahora, voy a realizar una panorámica fotográfica interactiva en un iPad. Lo primero es montar con varias fotografías una panorámica utilizando PhotoShop. Para terminar, añadimos la interactividad con Overley Creator desde Indesign.

Realizar una fotografía panorámica con PhotoShop

Para construir la panorámica partimos, en este caso, de tres fotografías. Abrimos un nuevo archivo en formato .psd, con las medidas aproximadas en función del tamaño final de inserción en la página. No te preocupes si lo haces más grande de lo necesario, posteriormente lo podremos cortar al tamaño deseado.
En el nuevo archivo colocamos en capas distintas las tres fotos originales.

Con las tres capas seleccionadas, en el menú Edición pulsa “Alinear capas automáticamente”. Escoge un método de proyección en función de la perspectiva final deseada y las fotos originales. La corrección de lente te ofrece la posibilidad de eliminar las viñetas, son los posibles bordes oscuros que tienen las fotos originales. La distorsión geométrica corrige la forma esférica si la fotografía se hizo con un gran angular. Prueba distintos métodos para que no se vea la imagen muy distorsionada.

En la imagen superior puedes ver que hay ciertas zonas en las que se nota la alineación anteriormente realizada. Para corregirlo, con las tres capas de imagen seleccionadas, ve al menú Edición / Fusionar capas automáticamente y elige el método de fusión de panorama. El programa genera, de manera automática, unas máscaras de capa que nos permiten mostrar u ocultar zonas de la composición.
Para terminar, fusiona las capas y con la herramienta recortar puedes dar la edición deseada a la fotografía panorámica, incluso si habilitas la opción de “recorte de perspectiva” modificar la misma.

Panorámica interactiva con Overlay Creator

Diseñamos la página en Indesign, y colocamos la fotografía en el marco de imagen. Si seleccionas la imagen, puedes ver que el alto es el necesario para llenar la caja que la contiene. Observa, también, que es mucho más ancha, ya que es el efecto buscado al crear la imagen panorámica anterior.

Selecciona el marco y sitúa la imagen en la posición que desees. Ésta posición será la que se observe al cargar la página, por tanto escoge un vista descriptiva sobre lo que trate tu artículo.
Abre el Overlay Creator y elige la opción Pan and Zoom. Este efecto interactivo puede realizar dos acciones: desplazar la imagen (pan only) o hacer un desplazamiento con aumento (pan and zoom). En este ejemplo utilizamos sólo desplazar la imagen, ya que no es demasiado grande como para poder aumentarla.

Recuerda que antes de exportar tu revista, debes de comprobar el tamaño de todas las imágenes para optimizar el peso de los archivos. Es decir, si colocas una imagen y sólo utilizas una proporción de 30% de la misma, deberías de abrirla en PhotoShop y reducir su tamaño a ese tanto por ciento. Cuando regreses a la página, en la que está montada en Indesign, verifica que el porcentaje de escala es del 100%. Es muy importante ya que ayudará al iPad a cargar la página más rápidamente. De lo contrario, se originará una mala experiencia de usuario por un tiempo excesivo en cargar la página.

Eso es todo, la imagen ya tiene aplicada la interactividad que permite al usuario desplazarla hacia los lados con su dedo y ver toda la panorámica fotográfica. Para terminar el proyecto, exporta la página al Digital Content Bundler y no olvides realizar la versión de página horizontal.

About miguel monge

Experiencia visual de lo que miras pero no ves, de lo que imaginas y te gustaría enseñar.

2 comments on “Fotografía panorámica interactiva en iPad

  1. adolfodzdpñfp
    June 30, 2011

    para una foto está muy bien, sobre todo si es de 360 grados, pero… se puede hacer lo mismo con los textos, que tengamos una imagen fija y movamos el texto con el dedo para ir leyendo a lo largo de una columna????

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Top Rated

May 2011
M T W T F S S
« Apr   Jun »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
%d bloggers like this: