Creación de Galerías Web V | Simpleviewer y Lightbox JS desde Photoshop

Esta es la última entrega de la serie de tutoriales dedicados a la Creación de Galerí­as Web:

La mejor forma de mostrar y compartir nuestras fotografí­as es a través de una página web. Pero no sólo fotografí­as también portafolios con tus mejores trabajos para añadir a tu CV. Cada dí­a aparecen nuevos sitios, métodos, aplicaciones online o librerí­as AJAX en los que el trabajo del usuario casi se limita a subir sus imágenes.

Introducción

Veremos paso a paso cómo crear galerí­as web con Simpleviewer y Lightbox JS. Ambas opciones son gratuitas, la primera se basa en XML y Flash y en la segunda trabajaremos con algo de Ajax. Este tutorial va a facilitarte las cosas integrando estas herramientas en Photoshop.

Creación de Galerías Web V | Simpleviewer y Lightbox JS desde Photoshop - 0 - elfinalde

Puedes ver ejemplos de lo que vamos a crear en estos enlaces:

No hacen falta conocimientos de programación para realizar el tutorial, simplemente siga los pasos.

Una vez creadas mostraremos cómo colgarlas en un sitio web, gratuito o de su propiedad, de forma que sea accesible a través de Internet.

Paso nº 1: Preparar y seleccionar imágenes

Seleccionaremos las imágenes que vamos a mostrar en nuestra galerí­a. Lo mejor es copiarlas todas en una carpeta. Estas imágenes NO se modificarán por lo que no hay que tener miedo a perderlas.

También podemos utilizar Bridge para hacer la selección. En cualquier caso debes hacer primero todos los retoques que sean necesarios, rotación, corrección de color o recortes. Es recomendable escalarlas de antemano si son demasiado pesadas. Para web no necesitamos más de 96 ppp y formato jpeg. El proceso lo podemos desde PS > Imagen > Tamaño de imagen o de forma automatizada con Procesos por lotes con una acción.

Creación de Galerías Web V | Simpleviewer y Lightbox JS desde Photoshop - 1 - elfinalde

Paso nº 2: Descargar el script SimpleViewer

Puedes descargar, editar y utilizar simpleviewer solo, con Picasa o con Lightroom entre otros. Vamos a integrarlo en Photoshop con un script.  Descarga el archivo haciendo clic aquí­: SimpleViewer Photoshop script here.

Descomprime el archivo zip descargado. Ahora copia y pega la carpeta «simple_viewer» en

C:\Archivos de programa\Adobe\Adobe Photoshop CS3\Ajustes preestablecidos\Secuencias de comandos

Creación de Galerías Web V | Simpleviewer y Lightbox JS desde Photoshop - 2 - elfinalde

Paso nº 3: Ejecutar la secuencia de comandos en PS

Si tení­as abierto Photoshop, reiní­cialo. Todos los scripts o secuencias de comandos se encuentran en el menú Archivo > Secuencias de comando. Escogemos SimpleViewer y se nos abre el cuadro de diálogo.

En Input Folder seleccionamos la carpeta con nuestras imágenes optimizadas en al paso 1.

En Output Folder la carpeta donde se grabarán los archivos de nuestra galerí­a.

Creación de Galerías Web V | Simpleviewer y Lightbox JS desde Photoshop - 3 - elfinalde

Paso nº 4: Opciones de Configuración

Podemos configurar las opciones de salida del archivo Flash en SWF Options.

En Image Size definimos el ancho de las imágenes, serí­a conveniente haber ya escalado las imágenes a esta anchura en el paso 1.

Definimos el color de fondo con un valor hexadecimal (abrir el selector de colores en caso de dudas) en Background Color, uno para el texto (Text Color) y otro para el marco (Frame Color).

La galerí­a se ajustará a la resolución de pantalla pero siempre podemos definir un máximo de escalado para el ancho y para el alto en Maximum Image Width y en Maximum Image Heigth.

Creación de Galerías Web V | Simpleviewer y Lightbox JS desde Photoshop - 4 - elfinalde

Paso nº 5: Opciones de Layout

Podemos configurar la estructura de la galerí­a, su layout.
Frame width:
Ancho del marco.
Stage padding: Espacio de reserva alrededor de la pelí­cula.
Thumbnails columns: Número de columnas de miniaturas.
Thumbnails rows: Número de filas de miniaturas.
Si hay más imágenes que el resultado de multiplicar el nº de columnas por el nº de filas se añadirán flechas de navegación a las otras miniaturas.
Thumbnails nav position: Puedes situar las miniaturas en la parte izquierda, derecha, superior o inferior de tu galerí­a, a la izquierda es la opción por defecto.

Creación de Galerías Web V | Simpleviewer y Lightbox JS desde Photoshop - 4 - elfinalde

Paso nº 6: Creación de la galerí­a

Antes de crear la galerí­a asignamos un tí­tulo (Gallery Title) y decidimos si nuestros usuarios van a poder o no utilizar el botón derecho del ratón, activando o no la casilla de verificación Enable right-click button. De dejarla habilitada en el menú contextual de Adobe Flash Player aparecerá la opción de abrir la imagen en una nueva ventana del navegador (Open Image in New Window).

Listo, tan sólo tenemos que clicar el botón Build Web Gallery y Photoshop creará las imágenes y sus miniaturas así­ como todos los archivos necesarios en la carpeta que indicamos en Output Folder.

Se lanza el navegador y vemos nuestra galerí­a, siempre podemos volver a crearla cambiando las opciones hasta que demos con la configuración deseada.

Creación de Galerías Web V | Simpleviewer y Lightbox JS desde Photoshop - 6 - elfinalde

Paso nº 7: Opciones avanzadas

La carpeta que se ha creado contiene la carpeta images con los jpeg de las imágenes, sus correspondientes miniaturas en la carpeta thumbs, el visor flash, el javascript, el archivo index.html que es el que abrimos en el navegador y el archivo gallery.xml que contiene toda la información que hemos puesto en Photoshop.

Creación de Galerías Web V | Simpleviewer y Lightbox JS desde Photoshop - 7 - elfinalde

Si abrimos gallery.xml con por ejemplo el Bloc de notas podemos cambiar las opciones, añadir un fondo en backgroundImagePath=»», insertando la ruta de la imagen entre las comillas, y sobre todo cambiar el texto que aparece en la galerí­a que por defecto va a ser el mismo que el nombre de las imágenes, incluida la extensión jpg.
Cada imagen tiene asociada la etiqueta <caption>, cambiando ese texto cambiaremos el tí­tulo de cada imagen.

Creación de Galerías Web V | Simpleviewer y Lightbox JS desde Photoshop - 8 - elfinalde

Paso nº 8: Galerí­a Web con Lightbox JS

Lightbox JS es una librerí­a Javascript muy utilizada en diseño web. Podemos integrarla en Photoshop de forma muy sencilla.

Descarga aquí­: http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.04.zip y copia  la carpeta Lightbox en:

C:\Archivos de programa\Adobe\Adobe Photoshop CS3\Ajustes preestablecidos\Galerí­a de fotografí­as Web.

En Photoshop abre el menú Archivo > Automatizar > Galerí­a de Fotografí­as Web.

Del menú desplegable escoge la galerí­a llamada Lightbox. Configura tus opciones y tendrás una galerí­a web con Lightbox. Así­ de sencillo.

Creación de Galerías Web V | Simpleviewer y Lightbox JS desde Photoshop - 9 - elfinalde

Paso nº 9: Colgar una galerí­a en Internet

Para tener un sitio web debemos por un lado adquirir un dominio (el nombre de nuestra URL) y por otro alquilar un espacio en un servidor que aloje nuestros archivos, lo que se conoce como hosting o alojamiento. En total puede salirte por 29€ anuales por ejemplo en Minerva Hosting.

Hay empresas que dan estos servicios de forma gratuita, por ejemplo los dominios .tk los puedes conseguir en www.dot.tk para promocionar las islas Tokelau. Los alojamientos gratuitos son más comunes porque a cambio insertan publicidad en las páginas de sus usuarios. Si no tienes dominio propio suelen ofrecer subdominios gratuitos.

Para no hacer publicidad de ningún sitio en concreto te aconsejo que hagas una búsqueda sobre «alojamiento gratuito» o «free hosting» si el inglés no supone un problema para ti.

Creación de Galerías Web V | Simpleviewer y Lightbox JS desde Photoshop - 10 - elfinalde

Paso nº 10: Darse de alta

Habrá cientos de sitios y deberás seleccionar aquel acorde a tus necesidades, espacio, cuentas de correo, publicidad o no, hay algunos que no admiten el uso de Flash, PHP, BBDD, FTP, lí­mite de transferencia y un largo etcétera.

El siguiente paso es darse de alta, deberás escoger si no tienes dominio, el nombre para tu subdominio. Una vez creada tu cuenta tendrás acceso a la información necesaria para tener tu web, tu galerí­a, disponible a todos los internautas.

Paso nº 11: Colocar archivos

La mayorí­a de los sitios te darán acceso al panel de control de tu web. Debes buscar la opción de WebFTP o algo parecido a subir archivos, suele ser incómodo tener que subir los archivos por este sistema, seleccionándolos primero en tu disco duro y luego subiéndolos al servidor.

Si has hecho una buena búsqueda y has conseguido un alojamiento gratuito con FTP podrás hacer este proceso de forma más limpia y rápida. Necesitas un gestor FTP, por ejemplo hay una extensión gratuita para Firefox que se llama FireFTP. En estas aplicaciones verás en un lado tus archivos y en otro los de tu servidor. Debes colocar tus archivos en la carpeta que te indiquen, normalmente la carpeta public_html.

Tienes que subir toda la carpeta de la galerí­a que hayas creado, todos y cada uno de los archivos pero lo que es importante es que no subas la carpeta en sí­, si no su contenido de forma que el archivo index.html quede en la raí­z de public_html.

Si tienes varias galerí­as deberás crear una estructura de navegación entre ellas o al menos un index.html que enlace con el resto.

Creación de Galerías Web V | Simpleviewer y Lightbox JS desde Photoshop - 11 - elfinalde

Paso nº 12: Posicionamiento Web

Una vez que tienes listo tu sitio lo siguiente es promocionarlo. Si has utilizado un alojamiento gratuito el alta en buscadores se hará automáticamente, de lo contrario date a conocer, date de alta en los buscadores, utiliza una descripción clara y palabras claves que ayuden a encontrar tu sitio.

Da de alta tu sitio en sitios o portales relacionados. Intenta que enlacen con tu página el mayor número de sitios. Y si puedes, mantenla siempre actualizada.

Creación de Galerías Web V | Simpleviewer y Lightbox JS desde Photoshop - 12 - elfinalde

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  1. He decargado y copiado el archivo lightbox, tal i como dice en el paso 8, peró me sale el siguiente mensaje de error: Error al inhabilitar los controles de distintivos que faltan. Es posible que falte algún archivo o carpeta para el estilo seleccionado.

  2. Hola!
    ¿Cómo se crea la estructura de navegación?
    Porqué quiero crear una página web completa con página de presentación y un í­ndice que me permita acceder a las diferentes galerí­as, volver a página principal, etc.
    Gracias!

  3. Hola, me encuentro tratando de colocar Simpleviewer en la paguina que tengo en construcción mediante Dreamweaver, y realizo las comprobaciones y funciona bien, pero cuando intento ver la paguina directamente en internet, esta se ve bien pero el visor no me muestra las imagenes. Me podriais indicar que puedo estar haciendo mal. Un saludo de un desesperado

  4. # Claudio: Lo más difí­cil a veces es lo más fácil… o viceversa
    # Manuel: revisa la ruta de las imágenes, no las pongas absolutas, deben ser relativas, quizás por eso te funciona sólo en local.

    Saludos

  5. Ceslava, primero agradecer tu contestación a mi problema y segundo decirte que mi nivel sobre estos temas es muy bajo, pero me propuse realizar esta Web y espero poder conseguirlo.
    Sobre la posible solución que planteas a mi problema, seguramente será buena pero siento decirte que no entiendo que quieres decirme con que no ponga las imágenes en absolutas, sino en relativas.
    Si no es mucho abusar de tu paciencia, te diré que es lo que realice y me dices que es lo que puedo estar haciendo mal.
    1º Descargué Simpleviewer, 2º En las carpetas imagen y thumbs, coloque las fotografí­as grandes y las miniaturas, siempre con el mismo nombre en las dos carpetas 3º en la carpeta de gallery, llame a las imágenes que guarde en las carpetas anteriores. Todo esto se encuentra en una carpeta donde descargue Simpleviewer.
    Después de esto, si abro la carpeta index, el visor se muestra correctamente y veo perfectamente las imágenes seleccionadas. Es mas si entro en Dreamweaver, que es con el programa que estoy realizando la Web, y en una de las paginas de esta Web vinculo el archivo index de la carpeta de Simpleviewer, y subo esto al dominio donde tengo la pagina, entrando en Internet yo veo las imágenes pero si lo realizo desde otro ordenador se me muestra la pagina correctamente, pero al dar el vinculo para que me muestre las imágenes estas no se ven. Espero no parecer muy pesado pero te prometo que esto me tiene muy angustiado pero no cesare asta conseguirlo, espero pueda contar con tu ayuda, un saludo y mi mas grato agradecimiento.

    Si lo necesitas, te mando mi correo, [email protected]

    Manuel

  6. Manuel, revisa en Dreamweaver si la ruta es algo así­ como:

    C:\mi_web\img\imagen1.jpg (ruta absoluta)

    Cámbialo por la ruta relativa, depende de la ubicación del archivo desde donde llames a la imagen:

    ../img/imagen1.jpg

    Por último si quieres hacerlo aún más fácil pon una ruta absoluta pero con tu dominio, es decir:

    http://www.tudominio.com/img/imagen.jpg

    Os recuerdo que para las consultas y dudas privadas debéis utilizar el foro, así­ le servirán a más usuarios:

    http://www.ceslava.com/campus/mod/forum/view.php?id=8

    Saludos

  7. Hola Ceslava, te comunico que tus indicaciones son de gran ayuda y en este momento siento una alegria contenida, ya que puedo visualizar Simpleviewer en mi web, pero nuevamente necesito de tu ayuda, ya que solo visualizo la primera imagen, el resto de las imagenes no se ven. Te agradeceria me indicaras que puede estar pasando, ya comprove todos los nombres en las dos carpetas y estan bien. Te mando la direccion de la web para que puedas ver lo que te digo.
    http://www.castillosweb.net/VISOR%20Simpleviewer/Albun%20de%20prueba%201/index.html. Espero puedas darme el empujon que necesito. Un saludo, Manuel

  8. Hola,
    en primer lugar darte la enhorabuena por estas estupendas indicaciones.
    He descargado e instalado el pluggins para Adobe CS2 de «simple_viewer” … lo ejecuto desde PhotoshopCS2 y se muestra la ventana de configuración .. pero, oh sorpresa, no están los dos botones de abajo: el de cancelar y el de «built web gallery» .. por lo que no puedo hacer nada.
    He reiniciado. He descargado la ultima versión de “simple_viewer” para cs2 .. y nada ..
    ¿alguna idea??

  9. Gracias por laq info.
    SimpleView esta de pelos, ahora debo mencionar que es posible subir las imagenes sin necesidad de generar el thumbs , es decir, subimos el mismo archivo en mabas carpetas y ya todo va ok, se genera solo el thumbs. El problema de esto es el peso… ya saben, la carga y el espacio ¡¡¡

    Saludos y gracias

    Ahora si saben de algun software libre que genere thumbs, me lo hacen saber ¡¡¡

    Gracias y saludos

  10. Hola chicos,quizás alguno de vosotros pueda ayudarme,al modificar el archivo .xml para que no aparezca la extensión .jpg en la galerí­a, me desaparecen de la misma las imagenes al hacer la vista previa una vez modificado dicho .xml.

    A que se puede deber? Agradecerí­a mucho vuestra ayuda y mil gracias de antemano.

  11. Hola, estoy con Simpleviewer y me quede trabada en dos puntos.
    Uno es como hago par cambiar elo color del marco delas fotos y el color y tipo de letra del caption. En colos, si ponfo en frameColor=»» el hexadecimal sin#, me aparece cualquier color menos el que yo quiero, a lo mejor usa otro codigo y no lo se…
    la otra duda es: quiero hacer varias galerias, le cambio los nobres (gallery_1.xml; gallery_2.xml, etc) pero al hacerlo, cuando queiro ver la pagina me dice gallery not found. Que estoy haciendo mal?? si puede ser paso a paso por favor.
    Gracias

  12. amigo acabo de descargar Simpleviewere hice una galeria, claro sin photoshop, este programa me ha nenerado unos archichivos los cuales los copie en mi carpeta de dream y me da el hipervinculo, la pregunta es si puedo subir esto a internet y funciona como funciona en mi computador…

  13. He decargado el archivo lightbox,, peró me sale el siguiente mensaje de error: Error al inhabilitar los controles de distintivos que faltan. Es posible que falte algún archivo o carpeta para el estilo seleccionado

  14. tengo un problema, ya hice mi galeria en lightroom, pero cuando trato de insertarla en dreamweaver, y publicarla en el navegador, me dice que faltan plugins y no funciona, ya trate de descargar el plugin, pero no queda
    alguna recomendacion?

  15. Hola, estoy desesperado porque no logro insertar dentro de un div de mi web una galeria realizada en simpleviewer pro. He copiado el codigo-x siguiente:

    jQuery(document).ready(function () {
    SV.simpleviewer.load(«sv-container», «500», «500», «transparent», true );
    });

    »

    y lo he pegado entre y no aparece en la pagina de mi web la galeria.
    si puedes ayudarme te lo agradeceria muchisimo.

  16. Hola, respecto al paso n11 tengo un problema, si subo el contenido de la galeria creada y la pongo en public, alli ya se encuentra el index de mi propia pagina web, que hago?, lo renombr0?
    gracias por adelantado