PDA

Ver la Versión Completa : ¿Como hacer fotos interactivas giratorias (No panoramicas).



CaronteGF
22/08/13, 20:49:35
Hola a todos. Estoy seguro que este tema se ha debido tratar ya una y mil veces, y sin embargo al no disponer de un nombre técnico concreto, mis búsquedas han sido en vano.

Veréis, quiero hacer las fotografías típicas de producto giratorio que se pueden ver en muchas Webs. Fotográficamente no tienen ningún misterio salvo las tretas conseguidas para hacer girar los objetos, pero a la hora de exportarlas... ni idea de como se haría.

Por ejemplo:
Fotografía de producto 360º |Fotoo (http://www.fotoo.es/fotografia-de-producto-360/)

La foto "gira" (cambia) sola, pero uno puede pinchar en ella y arrastrar a derecha e izquierda. Imagino que estará en HTML5 o Flash. ¿Pero con que programa de edición fotográfica podría hacerlo?
¿Cómo se llama este tipo de fotos?. ¿Algún lugar donde haya información detallada de como hacer dicho efecto?.

Muchas gracias a todos.
Un saludo.

Walyx
29/08/13, 04:31:35
Hola!. Como bien decis es con HTML5... o con Flash, lo dice tambien la pagina.
Aca hay una pagina que se acerca a lo que vos estas buscando ... creo...
Efecto girar imagen 360 grados con HTML5 y CSS3 | Antonio Navajas (http://www.antonionavajas.com/blog/categoria-tutoriales/efecto-girar-foto-360-grados-con-html5-y-css3/)
Supongo que con dreamweaver se pueden hacer estas cosas.
Saludos!

NerveNet
29/08/13, 09:15:01
Diseccionando esa página verás que es un visualizador realizado en javascript de una secuencia de imágenes en JPEG.

El código HTML y Javascript está aquí: HTML5 Viewer (http://www.fotoo.es/wp-content/uploads/360/lente-360/LENTE-360.html)
He mirado el código Javascript pero lo han "ofuscao" para protegerse de los mirones. :wink:

Las imágenes individuales del producto (secuencia de 24 imágenes):
http://www.fotoo.es/wp-content/uploads/360/lente-360/Images/LENTE-360/Lv2/img01.jpg
http://www.fotoo.es/wp-content/uploads/360/lente-360/Images/LENTE-360/Lv2/img02.jpg
...
http://www.fotoo.es/wp-content/uploads/360/lente-360/Images/LENTE-360/Lv2/img24.jpg

El código Javascript es el que se encarga de mostrar la secuencia de imágenes y de controlar la respuesta de la imágen en función del movimiento del puntero.

CaronteGF
02/09/13, 19:02:51
Gracias.
En realidad no me importa mucho EXACTAMENTE ese, sino que me gustaría poder hacerlo a mi mismo.
Estoy seguro que debe haber "Plugins" o directamente programas para realizar esto (Porque a fin de cuentas, es sólo un método de exportación).

¿Nadie conoce algún tutorial o programa para hacerlo?.

Lo peor de todo es que para buscar información (en inglés o español) no vale "Foto 360º" porque como resultado da las imágenes panorámicas en pla Google Earth.

NerveNet
02/09/13, 19:19:28
Gracias.
En realidad no me importa mucho EXACTAMENTE ese, sino que me gustaría poder hacerlo a mi mismo.
Estoy seguro que debe haber "Plugins" o directamente programas para realizar esto (Porque a fin de cuentas, es sólo un método de exportación).

¿Nadie conoce algún tutorial o programa para hacerlo?.

Lo peor de todo es que para buscar información (en inglés o español) no vale "Foto 360º" porque como resultado da las imágenes panorámicas en pla Google Earth.

Básicamente es una tontería, la dificultad estriba en que debes tener conocimientos de programación javascript, lo que haces es cargar todas las fotos en el navegador y las muestras en carrusel, el que responda al movimiento del ratón lo complica un poco más.

En cuanto a las fotos, son 24 fotos, por las sombras se ve que la cámara está fija (probablemente montada sobre un trípode), el objeto estará puesto sobre una mesa giratoria, quizás ya las vendan hechas con marcas de 15 grados como referencia para hacer el giro completo de 360 grados y las 24 posiciones, la mesa la puedes hacer tu mismo en casa.

Te dejo unos enlaces:
DIY 360 Product Photography Turntable - PhotoGear 360 (http://www.photogear360.com/content/8-diy-360-product-photography-turntable)
Titan 360° Photography Turntable (http://emedigital.co.uk/imageCapture/TitanTurntable.htm)
PhotoCapture 360 Series automates in-house 3-D photography (http://www.gizmag.com/photocapture-360-series-automates-in-house-3-d-photography/10712/)
Mastering 360 Product Photography ~ Part I | PhotoGear 360 Blog (http://www.photogear360.com/blog/mastering-360-product-photography-part-i/)
YouSpin Demo Video 360 Turntable - YouTube (http://www.youtube.com/watch?v=CIanQtqvxYE)

CaronteGF
02/09/13, 19:46:01
Básicamente es una tontería, la dificultad estriba en que debes tener conocimientos de programación javascript, lo que haces es cargar todas las fotos en el navegador y las muestras en carrusel, el que responda al movimiento del ratón lo complica un poco más.

En cuanto a las fotos, son 24 fotos, por las sombras se ve que la cámara está fija (probablemente montada sobre un trípode), el objeto estará puesto sobre una mesa giratoria, quizás ya las vendan hechas con marcas de 15 grados como referencia para hacer el giro completo de 360 grados y las 24 posiciones, la mesa la puedes hacer tu mismo en casa.

Te dejo unos enlaces:
DIY 360 Product Photography Turntable - PhotoGear 360 (http://www.photogear360.com/content/8-diy-360-product-photography-turntable)
Titan 360° Photography Turntable (http://emedigital.co.uk/imageCapture/TitanTurntable.htm)
PhotoCapture 360 Series automates in-house 3-D photography (http://www.gizmag.com/photocapture-360-series-automates-in-house-3-d-photography/10712/)
Mastering 360 Product Photography ~ Part I | PhotoGear 360 Blog (http://www.photogear360.com/blog/mastering-360-product-photography-part-i/)
YouSpin Demo Video 360 Turntable - YouTube (http://www.youtube.com/watch?v=CIanQtqvxYE)

¡Gracias!. Ahora mismo estoy haciendo un pequeño diseño de mesa giratoria basada en el motor de los tocadiscos de vinilo. El problema principal que tengo es que tendré que cambiar el motor, porque no tiene la fuerza suficiente para hacer girar las cosas más pesadas.

Sólo me quedan dudas en cuanto a la parte informática (que en realidad es donde más dudas tengo). Estoy seguro que tiene que haber un método más fácil que hacerlo a mano.

NerveNet
02/09/13, 19:57:26
En plan chapucero puedes usar un PNG animado (apng), pero no todos los navegadores saben utilizarlos.

El PNG animado es la versión del GIF animado pero para color veradero en lugar de la paleta de 256 colores.