Este es el primero de una serie de vídeotutoriales que publicaré para enseñaros cómo crear una galería de imágenes o fotografías web. Actualmente hay cantidad de servicios gratuitos que ofrecen esta función de forma gratuita, te das de alta, subes tus imágenes y poco más. Pero creo que es conveniente aprender a hacer algo más profesional y/o personal sin necesidad de saber nada de programación.
Este primer tutorial os muestra el proceso automatizado que incluye Photoshop, el vídeotutorial se creó para CS3 pero este comando existe desde la versión 5.5
Cómo crear Galerías Web profesionales
Introducción:
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.
Desde Photoshop podemos hacer una galería web de forma automatizada con nuestras imágenes. Obtendremos todos los archivos necesarios para colgar en nuestra web y que esté disponible online.
Podemos editar estas plantillas, añadir nuevas y ver cómo cambian los resultados. Utilizaremos plantillas XHTML y Flash.
Le propondremos en un siguiente capítulo como crear, editar y colgar galerías o portafolio en un sitio de su propiedad o totalmente gratuito.
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 aunque en el proceso de creación PS reduzca las imágenes hacerlo de antemano nos puede ahorrar tiempo y conservaremos mayor calidad.
Paso nº 2: Iniciar el proceso automático:
Desde Adobe Bridge iríamos a Herramientas > Photoshop > Galerías de Fotografías Web y desde Photoshop Archivo > Automatizar > Galerías de Fotografías Web.
En Photoshop existe comando desde la versión 5.5 por lo que si no tienes el CS3 no te preocupes el proceso es muy similar.
Se nos abrirá un cuadro de diálogo en el que debemos seleccionar una de las plantillas. A la derecha veremos una miniatura y una breve descripción. Más adelante veremos cómo añadir otras plantillas. Podemos indicar una dirección de correo electrónico de contacto.
Paso nº 3: Opciones de configuración:
Lo primero que hacemos es seleccionar las imágenes, si venimos de Bridge no es necesario. También debemos indicar una carpeta de destino donde se guardarán todos los archivos de la galería. La podemos tener previamente creada o hacerlo insitu.
Recuerda que puedes incluir archivos vectoriales, pdf, PS se encargará de rasterizarlos para convertirlos a JPEG.
En la parte inferior tenemos las demás opciones que cambian con el desplegable Opciones. Según la plantilla podremos configurar todas las opciones o sólo algunas.
Paso nº 4: Opciones Generales:
Especificamos la extensión .htm o .html. Es indifrente, sólo recuérdalo si vas a vincular estos archivos con otras páginas.
La codificación de caracteres UTF-8 puede darte problemas con las tildes, generando caracteres raros, según la configuración de los navegadores y de la plantilla.
Añadir atributos de altura y anchura para las imágenes agrega esos atributos al código mejorando la descarga. En las plantillas Flash sobra esta opción.
Los metadatos es información anexada al archivo original. Puedes ver dichos metadatos y editarlos en Bridge.
Paso nº 5: Opciones de Titular:
Nombre del sitio: Esto aparecerá también en la barra de títulos y en las pestañas de los navegadores.
Fotógrafo: Puedes indicar opcionalmente y según la plantilla el propietario de las imágenes.
Información de contacto: Un teléfono o una dirección.
Fecha: Puedes indicar la fecha de creación. PS utilizará la de tu sistema si no indicas lo contrario.
Fuente y Tamaño de fuente: La fuente que eligas debe ser una fuente de sistema para asegurarte que tus usuarios la tienen instalada.
Paso nº 6: Opciones de Imágenes Grandes (I):
Añadir enlaces numéricos: Dependiendo de la plantilla y del número de imágenes tenemos la opción de crear un menú de navegación horizontal con los números de las páginas de la galería.
Tamaño del borde: La anchura en píxeles del borde de la imagen.
Uso de títulos: Puedes mostrar junto a la imagen información de los metadatos.
Fuente y Tamaño de fuente: Recuerda elegir una fuente de sistema (Arial, Verdana o Tahoma son las más utilizadas en web).
Paso nº 7: Opciones de Imágenes Grandes (II):
Redimensionar imágenes: Si no has preparado las imágenes para su tamaño final, PS puede hacerlo ahora, selecciona el tamaño. Es importante que antes cambies tus Preferencias Generales en el menú Edición en el desplegable Interpolación de imagen selecciona Bicúbica más enfocada.
No olvides dejar en Restringir: Ambas para hacer el escalado proporcionalmente. Creará JPEG con la calidad que indiques, a mayor calidad mayor peso del archivo y más tiempo de descarga.
Paso nº 8: Opciones de Miniaturas:
En la mayoría de las galerías tenemos una sección, frame o menú de miniaturas, haciendo clic sobre ellas vemos la imagen grande creada en el paso anterior. El diseño en frames o marcos está en desuso. Puedes ver en los archivos adjuntos ejemplos de cada plantilla antes de hacer tu selección.
Tamaño: Este es ancho en píxeles.
Columnas y Filas: Las miniaturas suelen aparecer en rejillas, podemos especificar el número de columnas y de filas que la compondrán.
Tamaño del borde, Uso de títulos y Fuente y Tamaño de fuente (Vea el paso nº 6)
Paso nº 9: Opciones de Colores:
Si la plantilla lo permite podremos elegir el color de fondo de la página, el del Titular, el de los textos y los de los enlaces. El color del enlace activo aparece cuando nos colocamos sobre él y el de visitado cuando ya hemos previamente visto esa página. Si borramos los temporales todos los enlaces vuelven a su color original. Es importante que haya contraste en tu diseño, haciendo clic en el cuadro de color se abre el Selector de color de Adobe. No es necesario que utilices colores Web, hoy en día los monitores y las tarjetas gráficas están preparadas para mostrar millones de colores.
Paso nº 10: Opciones de Seguridad:
Podemos añadir una marca de agua con un texto si no lo hemos hecho al preparar nuestras imágenes con anterioridad.
Contenido: Un texto personalizado o utilizar la información de los metadatos.
Fuente, Color, Posición y Opacidad: Piensa en el mejor contraste pero tampoco destruyas tu trabajo, colócalo de forma que permita apreciar la imagen. Seguro que sabes que si cae en manos de un irresponsable editar la imagen con Photoshop y quitar la marca de agua no es tan difícil.
Opciones de rotación: En ángulos de 45º. Te recomiendo que te ciñas a 90º a la izquierda para que se lea de abajo-arriba o simplemente no rotarlo.
Paso nº 11: Crear la galería:
Una vez configuradas todas las opciones ya sólo queda aceptar. Photoshop creará los JPEG y todos los archivos necesarios de forma automatizada.
Se crearán 3 subcarpetas, unas con las Imágenes Grandes llamada images, otra con las miniaturas de nombre thumbnails y otra donde estarán todas las páginas que nombrará pages.
En la raíz de la carpeta de destino tenemos otros archivos xml, javascript y swf si hemos escogido una plantilla Flash. El archivo index.htm o index.html, según hayamos especificado la extensión en las opciones generales se abrirá automáticamente en nuestro navegador y podremos ver nuestra galería.
Paso nº 12: Adición de otras galerías:
Hay muchas otras aplicaciones que generan galerías con opciones similares, en breve publicaré ejemplos creados con Lightroom 1.1, Picasa 2 (online) y Photoshop Elements.
Veremos cómo editar y crear nuestras galerías para una mayor personalización. Además veremos cómo crearla con Simpleviewer y con LightBox.
Por Columna Única
Estupendo, muchas gracias. Ni siquiera conocía esa utilidad de Photoshop.
Muy buen tutorial me ha servido de mucho ya que no conocia esta utilidad, FELICITACIONES
Hola amigos. Intentando seguir el tutorial, me encuentro con un problema: ya sea haciéndolo desde Bridge o directamente desde Photoshop>Archivo>Automatizar>Galería de fotografías web, me aparece un aviso que dice textualmente lo siguiente: “Error al inhabilitar los controles de distintivos que faltan. Es posible que falte algún archivo o carpeta para el estilo seleccionado.” y un botón con OK que sólo me permite aceptar. Y, por supuesto, las opciones de la galería nunca se abren.
Comprobé que existe la carpeta Galería de fotografías Web. Su ruta es: Archivos de Programa>Adobe>Adobe Photoshop CS3>Ajustes preestablecidos>Galería de fotografías Web.
Pesa 691 KB.
¿Alguna idea de qué puede ocurrir?
Saludos y gracias por la paciencia para llegar hasta aquí
Hola Galois,
Como te he apuntado en el email seguramente sea un problema de instalación. Te he adjuntado la carpeta que efectivamente debe ir en la ruta que dices.
Cuéntanos si lo logras solucionar.
Muchas gracias por los comentarios a Jose y TrUxDeSIGn
Un saludo,
Cristian Eslava
Como hago para que el swf que me genera al insertarlo en una pagina se vea? porque copie todos los archivos generados por photoshop en la misma carpeta de peliculas (de mi web), inserto el swf en una pagina x y no se ve nada. Tengo que copiar algun codigo en la pagina x? Necesito una ayuda… Gracias!!!
Andrea
Hola ameyer,
Al crear una galería web desde Photoshop se crea una carpeta con todos los archivos necesarios, debes subirla entera, todos y cada uno de los archivos, el que enlazas debe ser el index.html que lleva embebido el flash, el swf.
Aquí puedes ver algo más de información:
Creación de Galerías Web V | Simpleviewer y Lightbox JS desde Photoshop
El paso nº 11 responde a tu pregunta.
Un saludo
genial… queria aprender a hacer estas galerias y busque tutoriales, encontre tu video y está de “pelos”… claro que me encontre con un problema.. al momento de ir a Archivo/Automatizar/Galería de fotografías web… sale un pop up que dice “no hay la carpeta de plantilla para controlar la galería de foto de web” le doy a OK que es la unica opción y quedo en nada.. donde encuentro esas plantillas ?
gracias de antemano!
Hola Paulina,
Como te he comento en el email que te he enviado la carpeta debes ponerla en esta ruta de instalación de Photoshop CS3:
Archivos de programa\Adobe\Adobe Photoshop CS3\Ajustes preestablecidos
Un saludo y gracias por tus palabras
Hola,
Tutorial muy interesante y que me va a quitar mucho trabajo para diseñar mi web!!!
Tengo una duda. Si quiero crear una web a partir de varias galerias de imágenes ¿cómo puedo subir todas las galerías página de presentación página con links y contacto, etc y cómo puedo relacionarlas para que se pueda navegar a través de ellas?
Saludos y gracias!
Qué buena esta tu aporte de verdad que estaba buscando esto desde hace mucho tiempo.
Excelente Mil Gracias
88iwoa83jb7gxhr6
Muy bueno, se agradese.
Hola!!
Esta exelente el tutorial !!
Fue de mucha ayuda , pero queria hacer una pregunta espero me puedas ayudar.
Estoy creando una pag web y quiero ocupar estas ociones para meter las galerias
pero no se como publicarlas. No se mucho de esto pues no se de programacion ni
nada de eso, la web la creo con web page make, como con este es muy sencillo
crear web pues se me complica el ocupar otros recursos. Y no se como publicarlas.
Tengo q subir todos los archivos q me crea automaticamnete el programa?
o solo uno de ellos?
Espero me puedas ayudar a saber como publicar las galerias
gracias
Hola,
@Gema y Celli: Para suirla necesitáis un hosting y debéis subir todos y cada uno de los archivos generados, para enlazarlos entre ellos, por ejemplo si subís varias galerías tenéis que vincular los archivos “index”, también podéis incluirlos dentro de un iframe o editar esos archivos index si sabéis de XHTML y le añadís un menú de navegación.
Saludos
Hola .. me podrian ayudar ?.. yo ya cree una galeria de imagenes en photoshop.. dentro de mi pc, todo vincula perfectamente pero al subirla a la web solo la info de la galeria no se deja ver.. no se cual es el problema, he subido todos los archivos tal cual esta en mi pc, he revizado cada codigo, la he rehecho y la he subido tal cual sale en el programa para probar si al manipular el codigo cometi un error y nada.. ojala me puedan ayudar o dat una solucon alterna.. gracias
Saludos
hola me pudieran ayudar con lo siguiente:
tengo 3 galerias de imagenes las cuales enlazan a traves de 3 botones diferentes en mi pagina “index.html” entiendo que debosubir a la carpeta raiz las 3 carpetas de cada galeria mas los archivos que se generan, mi pregunata es la siguienete:
si los archivos generados tienen el mismo nombre ( index.html) mas los otros archivos igualmente , como enlazo el boton con cada index.htmtl y aparte no causa problemas que en la carpeta raiz se encuentren 4 archivos index.html ?
Espero se entienda el problema ,
agradecido por la ayuda que puedan prestarme,
Freddypb
@Miriam: Debes revisar las rutas no apunten a tu equipo, es decir que no apunten a C:/… sino a …http://
Con esto lo resuelves, como consejo si es una web estática utiliza rutas relativas no absolutas.
@freddypb: Creo entender el problema, la solución es fácil, no tienes que subir las 3 galerías, súbelas pero en carpetas separadas, de este modo el enlace sería a:
galeria1/index.html
galeria2/index.html
galeria3/index.html
Saludos
Hola el tutorial esta excelente lo capte de inmediato y ya tengo la galeria lista para subirla a mi pagina web. Mi problema es el siguiente, la estoy creando en Adobe Dreamweaver Cs3 y quien introducir la galeria en un corte, que realize previamente pero no se cual de los documentos que me genero photoshop debo agregar. O es que la geleria debe subir sola en un link? Espero me puedas ayudar.
Gracias de antemano,
Saludos
Hola
yo ya cree la galería, pero estoy haciendo una multimedia en Flash cs3, no sé como hacerle el enlace al botón de manera que cuando le de clic me lleve a la galaería. ¿sabes que pudo hacer? gracias
Que bueno esta tu torial me ayudo mucho! pero tengo una pregunta como puedo hacerlo para poder insertarlo en dreamwear? he buscado pero no encuentro la forma, si me puedes ayudar estare muy agradecido… ahi te dejo mi correo! hasta luego.
En primer lugar felicitarte por el tutorial.
Yo he creado sin ningún problema las galerias, el problema que se me presenta es que algunas fotos, en ocasiones demasiadas, se me presentan en la galeria con los bordes pixelados (dientes de sierra) y no tengo manera de solucionarlo.
He probado de todo, bicubica mas enfocada, guardar en .png, reducir la foto desde tif en vez desde jpg, bicubica mas suavizada….no se de que manera solucionarlo……….