Crear galerías fotográficas en 1 minuto

galeria

En esta ocasión les voy a explicar como crear una galería fotográfica con Photoshop. En verdad es una opción automatizada que trae el programa, pero que generalmente pasamos por alto al vernos obnubilados por los filtros y demás cosas interesantes de este software.

1º Paso. Guardamos todas las fotos que se incluirán en la galería fotográfica en una carpeta (hablando fuera del programa, claro está).

2º Paso. Abrimos Photoshop y vamos a Archivo > Automatizar > Galería Fotográfica Web. Aquí se nos abrirá la siguiente ventana:

panel galeria

Como pueden ver, tenemos varias opciones, describamos de que se trata cada una:

  1. Estilos: Aquí podremos elegir entre varias plantillas de galerías.
  2. Correo electrónico: mmm, bueno, ya sabes… tu correo (si deseas que aparezca como medio de contacto en la galería).
  3. Imágenes de origen: En "Usar", podremos optar por fotografías guardadas en una carpeta (la que haremos aquí) o fotografías seleccionadas con Adobe Bridge.
    En este caso particular, basta con explorar, buscar la carpeta y seleccionarla.
    En Destino, crearemos una nueva carpeta y la seleccionaremos para que guarde ahí mismo toda la galería.

3º Paso. Aquí veremos las opciones, y lo pongo en otro paso porque es amplio. Comenzemos por el primero, cambiando en el combobox de opciones a "Generales". Veamos:

1. Generales: Veamos en imágenes y luego explicamos.

panel generales

Aquí nos ofrece es elegir la extensión del archivo index y algunas características técnicas. No hay mucho que explicar en este punto, digamos que la extensión htm y html no tienen muchas diferencias entre si, por lo que no afectará al producto final. Igualmente, siempre elijo HTML como extensión de todo archivo con el que trabaje.

2. Titular:

panel titular

Creo que es bastante descriptivo este punto como para explicarlo. A completar!

3. Imágenes grandes:

panel imgrandes

Aquí se pone mas interesante. En esta parte, podremos configurar:

  • Si deseamos redimensionar las imágenes. Muchas veces, sacamos fotografías de alta resolución con la cámara digital que luego, al pasar a web, nos queda demasiado grandes. Por lo que aquí podremos configurar el tamaño preciso. En verdad la versión CS2 se ha quedado un poco en el tiempo con respecto a la resolución que denomina "grande", ya que hoy en día, en monitores de 17´ en adelante, el tamaño de 450px es algo mediano. Así que recomiendo subir un poco los pixeles para una mejor visualización de la galería.
  • En Restingir conviene dejarlo en ambas para que su escalado no se distorcione.
  • Calidad JPEG: Aquí, como es para web, bastará con dejarlo en 6. Mas resolución dificilmente sea captada por la pantalla, lo que nos hará mas pesada la galería sin sentido.
  • Uso de títulos: Hacemos un checkpoint sobre los elementos que querramos aparezcan en la galería.
  • Si bien algunas opciones se ven deshabilitadas, dependiendo del tipo de plantilla que utilicen les dará la posibilidad de modificar esos valores.

4. Miniaturas:

panel miniaturas

En este punto, básicamente seleccionaremos el tamaño de las fotografías pequeñas y cuantas columnas y filas querrán en ella. En cuanto a las opciones deshabilitadas, cabe la aclaración del punto anterior.

5. Colores Personalizados:

panel colores

Aquí es donde podremos personalizar nuestra galería en cuanto a los colores.

6. Seguridad:

panel seguridad

En esta parte podremos ponerle una marca de agua a las fotografías grandes si es que así lo deseamos. La configuración es sencilla, en donde podremos poner nuestro texto, la fuente, tamaño, opacidad y posición.

4º Paso. Le damos OK y el programa comenzará a generar la galería. Así de simple. Luego, si tenemos un poco de conocimientos sobre HTML y PHP, tendremos una excelente base como para que, si así lo deseamos, podamos personalizar aún mas nuestra galería.

Diego Mattei

Diseñador autodidacta freelance ensañado con ayudar a estudiantes y colegas en la búsqueda de recursos y materiales útiles para el aprendizaje diario. Amante del arte digital y la fotografía. Desde hace algunos años me dedico al blogging, una pasión que descubrí y que no pienso dejarla.

Seguir leyendo otras publicaciones

Post navigation

55 Comentarios

  • Hola.. oye, intente hacer la galería fotografica con photo shop pero tengo el cs5 y no me aparece la opcion de crear galería fotográfica web.. SABES POR QUE? O DONDE PUEDO ENCONTRARLO..

  • Hola soy nueva, pero luego de leerlos se que por aqui me voy a quedar…

    tengo una pregunta y te agradecería muchisimo si me puedes ayudar:

    necesito crear la galeria, de 6 imagenes, pero debe estar en punto gif, ¿es posible? y de ser asi, ¿como lo hago?

  • Hola yo llevo tiempo queriendo hacer esto pero en todos los photoshop que lo he probado siempre me da el mismo error, ahora mismo tengo el cs3 y el cs4, el error k me da es este: There is no template folder to run Web Phot Gallery. Alguien sabe x k me da este error? es k se necesita algun plugins o algo asi?
    muxas gracias
    un saludo

  •  
    Genial, Genial, Genial hace mucho tiempo que ando por la red y nunca encontré un tutorial el cual a la primera lo pude conseguir. Solo tuve que reinstalar Photoshop ya que al parecer tenia capada la herramienta de Galerías. Hoy ya soy Feliz… Gracias por su trabajo.

  • Quiero aprender y intento asimilar todo lo referente a la fotografia digital. Y por descontantado, me encantan estos tutoriales sobre PhotoshopGRACCIAS Saludos manolotirado 

  • Estoy trabajando con Dreamwear creando una web que muy pronto publicaré, y esta información fue super super valiosa, muchos saludos.

  • Hola Mandy, realmente sería extenso explicarte como adaptar este tipo de galerias en un blog, ya que tienen diferentes estructuras.
    Lamento no poder ayudarte con eso.

  • Hola me salio bien la galeria fotografica, me podrias ayudar diciendome como la publico en el blog del grupo porfavor, casi no tengo conocimiento en esto y tu pagina me ayudado bastante gracias, y contiua haciendo esto.Quiero publicarlo en la website que te deje.

  • Toma el archivo que genera, mira el código y adaptalo a tu página. No hay mucha mas ciencia que eso. Quizás los comentarios te ayuden a pensar alternativas..
    Saludos Victor!

  • Que tal como integro esa galeria a mi pagina por medio de dreamweaver? en realidad si fue muy sencillo hacerla, ahora quiero entegrarla dentro de una pagina web, gracias saludos

  • Hola Byron, eso es lightbox. Pero supongo que en el caso de Ateneu Popular se trata de un plugin para wordpres.
    Busca en el blog lightbox que hay algo al respecto.
    Saludos!

  • Gracias !Es muy bueno y facil de realizar.Podrias ver como se muestran las imagenes en Atenue Popular, si es lightbox y que version utiliza ? Aca un ejemplo:Cubo de Rubik:  http://www.ateneupopular.com/page/3/Gracias y Adelante

  • >mia:Hola, no entendi la pregunta… Te referis a que si creas una galería luego no podes actualizarla?
    Si fue esa tenes 2 opciones: O bien la actualizas luego fuera de Photoshop o agregás las imágenes y creas nuevamente la galería, reemplazando solo los archivos que hacen al agregado de imágenes.
    Espero que fuera eso.
    Saludos!

  • muchas gracias x este magnificO trukO!
    la vrdad q no abia reparadO n que se podia acer directamnte desd photoshop!!
    :S
    prO.. si cuelGo unas fotos luegO ya no puedO colgar mas???
    gracias!

  • Deberías crear carpetas: galeria1 galeria2 etc..
    Luego subes las diferentes carpetas directamente al servidor.
    En los enlaces, deberás poner http://www.dominio.com/galeria1 y http://www.dominio.com/galeria2
    De esa forma no deberias tener problemas (te puse la ruta absoluta ya que no se como lo estarás subiendo. Tambien puedes probar enlaces relativos: /galeria1 y /galeria2).
    No deberías tener complicaciones de esta forma.

  • ESO ES LO Q E INTENTADO PERO A LA HORA DE CARGARLOS AL SERVIDOR SE VUELVE A SUSTITUIR TU ME PODRIAS DECIR COMO PUEDO SOLUCIONAR ESO

  • Hola Javi, por lo que entiendo, creo que el problema reside en que estás reemplazando los archivos con el mismo nombre.
    Creo que si los guardas en distintos directorios se tendría que solucionar.
    Luego podés hacer enlaces hacia las distintas galerías.
    Espero haberte ayudado.
    Saludos!

  • amigo quisiera saber como hago para subir a una web varias galerias por separado sin q se me dañen cuando pongo otra galeria se cambia la anterior las fotos se le cambian a las de la ultima galeria

  • muy chevere tu aplicacion o mejor dicho tu aporte pero no se si me puedas mandar o darme mas dirreciones similares donde encuentre como usar mejor mi photoshop o en macromedia te lo a gradecer ya q estoy en plena creacion de una pagina y seria de mucho apoyo si me darias una mano gracias

  • Mario, lamento no poder ayudarte mas con el tema. Pero no se me ocurre que puede ser, ya que como te dije en el comentario anterior.. lo probé y anduvo sin problemas.
    Entiendo lo que decis, a veces desespera estar trabado en algo que no debería ser una piedra en el camino. Pero lo que siempre recomiendo en esos casos es comenzar desde cero, todo de nuevo, porque perdemos mas tiempo buscando el error que haciendo desde el inicio las cosas.
    Espero puedas solucionarlo.
    SaLudos.

  • gracias Bati por tu ayuda,pero sigue sin dejarse ver,todos los archivos estan instalados en el sitio,arrastro el galery.swf,!y si,se inserta en la pagina¡,pero a la hora de probarlo con el f12,no me aparece nada,solo el marco y el fondo en blanco,cuando el fondo deberia ser amarilloanaranjado,¿¿¿¿¿¿¿¿¿¿¿¿¿¿???????????,¿que puedo hacer?,estoy a punto de claudicar,y dejarlo todo como esta,porque en la misma pagina hay otro archivo swf y funciona sin problemas,¿por que este no?hay veces que la informatica te desespera,computercabreos que se llaman,volvere a intentarlo….

  • Acabo de probarlo Mario. La verdad es que me deja insertarlo bien. Copia absolutamente todos los archivos al mismo directorio del sitio.
    Luego, una vez que lo veas todo en la barra lateral derecha de Dreamweaver, arrastra galery.swf a la celda (por lo que vi del sitio trabajas con tablas).
    Tendria que funcionar.

  • Gracias Bati por molestarte.
    Inserto el la pelicula flash en la celda,le doy a f12 y no aparece por ningun lado,solo el marco,lo demas en blanco.
    La carpeta que me crea photoshop,la componen 4 carpetas de archivo,dos archivos script(flashobject y photos),dos archivos xml(galleryconfig y photos) el index html y un documento de texto con unos numeros.
    he probado lo que me dices, pero, o no lo hago bien o algo falla.Los archivos script no tengo ni idea de como utilizarlo,una ayudita,la cabeza ya no da mas.

  • Comentario: Hola Mario. Por lo que he visto en tu web, bastaria con mover el swf en una celda de tu html. Luego mira bien si el html original de la galería contiene algún SCRIPT (no creo pero por las dudas chequealo). De ser asi, copia y pega exactamente igual el codigo en tu html.
    Espero te sirva, eso deberia bastar.

  • bueno eso es precisamente lo que quiero decir,como la incorporo a mi sitio,ya lo he logrado poniendo un enlace en la web,imagenes y sale perfectamente,pero yo lo que realmente quiero es que la galeria salga cuando entra en la pagina del enlace,en una de las tablas,no se te lo explico bien, si puedes entra en mi pagina,y veras el enlace a la galeria con la palabra fotografias,que funciona,pero lo que yo deseo es que la galeria salga al abrir la pagina en la celda de la tabla de color rojo.http://www.adtiempolibre.es/Alevina.html

  • Hola Mario. El subir los archivos es mas facil aún. Si contas con un servidor con FTP, solo tenes que subir todos los archivos generados al directorio que desees.
    Si tu pregunta es como incorporar la galería a tu sitio… bueno, quizás eso si te lleve un poco mas de tiempo ya que deberás reorganizar un poco el html. Pero nada imposible.

  • hacer la galeria es muy facil,lo que me resulta complicado es insertarla en mi web,¿que tengo que hacer?

  • Hola Max. Te cuento que Photoshop te exporta solo el swf, pero no el fuente FLA.
    Para crear el archivo FLA existen programas como el Imperator o Flash Decompiler.
    Saludos.

  • ES FANTÁSTICA ESTA OPCIÓN, LA VERDAD QUE PHOTOSHOP ME SIGUEN SORPRENDIENDO Y TU BLOG ME AYUDA MUCHÍSIMO. UN MILLÓN DE GRACIAS Y ABRAZOS A TODOS!!!

  • hola muy bueno el truco no lo conocia
    lo hice y es muy facil
    pero tengo un problema
    como puedo importar el swf a un archivo .fla
    por k lo trato de importar a la biblioteca pero no puedo por que aparece que el archivo esta protegido por el usuario
    si me puedes ayudar porfavor
    muchas gracias

  • Bati Hagamos Un Foro Yo te Puedo Ayudar si quieres,pero opino que si debe haber un foro,haber ademas has una encuesta sobr eso
    😉

  • Vaya vaya jamas me ubiera imaginado q’ el photoshop tubiera esa opcion jejeje, gracias por el aporte

  • ACABO DE HACER MI GALERIA DE FOTOS Y LA VERDAD EL GRADO DE DIFICULTAD ES CERO AHI Q LEER BIEN NADA MAS… BESOS

  • Pues si lo intente pero solo llego al paso 2 y de pronto tengo mi galeria los otros pasos no llego ya que lo que quiero lo optengo con los primeros. Gracias.

  • quiero hacer el sistema este que tienes de recompensa por comentarios como pudo hacerlo en mi web por favor ayudame Bati!!!!

  • Bati tenemos que hablar sobre muchas cosas para esta pagina como un Foro para tus integrantes o mas bien dicho tus pupilos. Y tambien saber como va mi regalo de navidad.

  • wowww, que padre está eso! to hice la mía para entrar a las cosas que hago en photoshop, y ya las veo así más padres jiji. No sabía que había esta opción en photoshop, si habia usado el adobe bridge, y eso desde el photoshop, pero no sabía que se podía hacer directamente aqui, gracias!

  • No hermano solo dije que era de ese grado ya que no sabia que photoshop hacia eso bueno no directamente, pero segun lo que eh aprendido atraves de tu post y otras paginas mas, eh aprendido mucho, no dije directamente que se me hace dificil, pero gracias por la aclarion de todos modos.

  • WtonFox, Jimi. Les propongo una cosa. Hagan hasta el 2º Paso. Van a ver lo simple que es. El 3º paso es simplemente para personalizar el trabajo. Nada mas. Pero bien pueden dejarlo por defecto.

  • Te aceguro que su grado de complejidad es intermedio 1, pero esta bien bueno para uno poder tener una galeria.

  • mmm, realmente crees que es dificil? Cuanto te apuesto a que escribiste el comentario antes de intentarlo.
    Hace el intento y luego comenta nuevamente que grado de dificultad tuvo.
    Vas a ver que te vas a sorprender.

Comentarios cerrados.

8 alas de mariposas en PSD

Crea una Composición Espacial Explosiva con Photoshop

Ayuda para pintar en Photoshop CS5

Cool Brushes: Mas pinceles para Photoshop