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:

• Creación de Galerías Web IV | 2 Vídeotutoriales Adobe Ligthroom (0)
• Creación de Galerías Web III | Vídeotutorial Adobe Photoshop Elements  (0)
• Creación de Galerías Web II | Vídeotutorial Photoshop CS3 | Adobe Media Gallery y otras galerías  (0)
• Creación de Galerías Web I | Vídeotutorial Photoshop CS3

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 faciliatrte las cosas integrando estas herramientas en Photoshop.

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

• http://www.airtightinteractive.com/simpleviewer/examples/lores/ (Simpleviewer)
• http://www.huddletogether.com/projects/lightbox2/#example (Lightbox JS)

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

15 de Mayo, 2008

Entrada categorizada en: Diseño, Diseño Web, Flash, Fotografía, Freebies, Photoshop, Utilidades, meta, tutoriales