Creación de galerías de fotografías web

Una galería de fotografías web es un sitio web con una página principal con imágenes en miniatura y páginas de galería con imágenes en tamaño completo. Cada página contiene enlaces que permiten al visitante navegar por el sitio. Por ejemplo, cuando un visitante hace clic en una imagen en miniatura de la página principal, la imagen en tamaño completo asociada se carga en la página de la galería. Utilice el comando Galería de fotografías web para generar automáticamente una galería de fotografías web a partir de un conjunto de imágenes.

Photoshop proporciona una variedad de estilos para la galería que pueden seleccionarse mediante el comando Galería de fotografías web. Si es un usuario avanzado de HTML, puede crear un nuevo estilo o personalizar uno editando un conjunto de archivos de plantilla HTML.

Cada plantilla de estilos de galería incluye varias opciones. Si utiliza un estilo preestablecido, algunas opciones pueden aparecer atenuadas o no disponibles para ese estilo concreto.

Creación de una galería de fotografías web

Creación de galerías web con Adobe Bridge

Adobe Bridge proporciona funciones de galería web actualizadas. Para obtener más información, consulte Creación de una galería de fotografías web en la Ayuda de Adobe Bridge, o vea los tutoriales que aparece a continuación.

Uso del plugin anterior opcional de Photoshop

Conseguir que los colores coincidan

Si realiza operaciones con las fotografías en algún espacio de trabajo que disponga de una amplia gama de colores como ProPhoto RGB o Adobe RGB, es posible que los colores de las imágenes varíen al visualizar éstas en una galería web mediante un navegador que no lea los perfiles de color incrustados. En ese caso, intente convertir los perfiles de las imágenes a sRGB (la opción que usa por defecto la mayoría de los navegadores) antes de optimizarlas o incluirlas en una galería de fotografías web. Para realizar la conversión a sRGB, lleve a cabo cualquiera de los procedimientos siguientes. Se recomienda trabajar con una copia de las imágenes.

• Para convertir una sola imagen, elija Edición > Convertir en perfil y, a continuación, seleccione sRGB. Consulte Asignación o eliminación de un perfil de color (Illustrator, Photoshop).

• Para convertir una carpeta de imágenes, utilice el procesador de imágenes. Elija Archivo > Secuencias de comandos > Procesador de imágenes. Consulte Conversión de archivos con el procesador de imágenes.

Si utiliza el procesador de imágenes, puede guardar los archivos directamente en formato JPEG en el tamaño deseado. Si es así, desactive Redimensionar imágenes en las opciones de Imágenes grandes.

Opciones de la galería de fotografías web

Opciones de extensiones de archivo, codificación y metadatos.

Utiliza .htm o .html como extensión del nombre de archivo.

Utiliza codificación UTF 8.

Especifica las dimensiones, reduciéndose así el tiempo de descarga.

Conserva la información sobre metadatos.

Opciones de texto correspondientes al titular que aparece en cada página de la galería. Escriba texto en cada uno de los campos siguientes:

Nombre de la galería.

Nombre de la persona u organización propietaria de las fotografías de la galería.

Información de contacto de la galería, como por ejemplo el número de teléfono o el domicilio social.

Fecha que aparece en cada página de la galería. Por defecto, Photoshop utiliza la fecha actual.

(Disponible para algunos estilos de sitio) Opciones correspondientes al texto del titular.

Opciones correspondientes a las imágenes principales que aparecen en cada página de la galería.

(Disponible para algunos estilos de sitio) Coloca una secuencia numérica (que empieza por el número 1 y termina por el número total de páginas de la galería) en sentido horizontal en la parte superior de cada una de las páginas de la galería. Cada número es un enlace a la página correspondiente.

Redimensiona las imágenes de origen al colocarlas en las páginas de la galería. Seleccione un tamaño en el menú emergente o introduzca un tamaño en píxeles. En Restringir, elija las dimensiones de la imagen que desea limitar durante la redimensión. En Calidad JPEG, seleccione una opción del menú emergente, introduzca un valor entre 0 y 12 o arrastre el regulador. Cuanto mayor sea el valor, mejor será la calidad de la imagen y más grande el archivo.

Especifica la anchura, en píxeles, del borde que rodea la imagen.

(Disponible para algunos estilos de sitio) Especifica las opciones para mostrar los pies de ilustración de las imágenes. Elija Nombre de archivo para mostrar el nombre de archivo, o seleccione Descripción, Créditos, Título y Copyright para mostrar el texto de descripción procedente del cuadro de diálogo Información de archivo.

(Disponible para algunos estilos de sitio) Especifica la fuente y el tamaño de los pies de ilustración.

Opciones correspondientes a la página principal de la galería, que incluyen el tamaño de las imágenes en miniatura.

Especifica el tamaño de la miniatura. Seleccione un valor en el menú emergente o introduzca uno en píxeles para especificar la anchura de cada miniatura.

Especifique el número de columnas y filas de miniaturas de la página principal. Esta opción no se aplica en galerías que utilizan el estilo de cuadro horizontal o vertical.

Especifica la anchura, en píxeles, del borde que rodea cada miniatura.

(Disponible para algunos estilos de sitio) Especifica las opciones para mostrar los pies de ilustración de las miniaturas. Elija Nombre de archivo para mostrar el nombre de archivo, o seleccione Descripción, Créditos, Título y Copyright para mostrar el texto de descripción procedente del cuadro de diálogo Información de archivo.

(Disponible para algunos estilos de sitio) Especifica la fuente y el tamaño de los pies de ilustración.

Opciones correspondientes a los colores de los elementos de la galería. Para cambiar el color de un elemento, haga clic en su muestra de color y, a continuación, seleccione un nuevo color mediante el Selector de color de Adobe. Puede cambiar el color de fondo de cada página (opción Fondo) y del titular (opción Titular).

Muestra texto sobre cada imagen como aviso disuasorio de robo.

Especifica el texto que se va a mostrar. Seleccione Texto personalizado para introducir texto personalizado. Seleccione Nombre de archivo, Descripción, Créditos, Título o Copyright para mostrar texto procedente del cuadro de diálogo Información de archivo.

Especifique la fuente, el color y la alineación del pie de ilustración.

Coloque el texto sobre la imagen en un determinado ángulo.

Estilos de la galería de fotografías web

Photoshop ofrece una gran variedad de estilos para su galería de fotografías web. Si es un usuario avanzado de HTML, puede crear un nuevo estilo o personalizar uno editando un conjunto de archivos de plantilla HTML.

Los estilos de las galerías de fotografías web que proporciona Photoshop se almacenan en carpetas individuales en las siguientes ubicaciones:

Archivos de programa/Adobe/Adobe Photoshop CS5/Ajustes preestablecidos/Galería de fotografías Web.

Adobe Photoshop CS5/Ajustes preestablecidos/Galería de fotografías web.

El nombre de cada carpeta de estas ubicaciones aparece como una opción en el menú Estilos del cuadro de diálogo Galería de fotografías web. Cada carpeta contiene los siguientes archivos de plantilla HTML, que Photoshop utiliza para generar la galería:

Determina la composición del pie de ilustración que aparece debajo de cada miniatura en la página principal.

Determina la composición del conjunto de cuadros para las páginas que se visualizan.

Determina la composición de la página principal.

Determina la composición de las páginas de la galería con imágenes en tamaño completo.

Thumbnail.htm Determina la composición de las miniaturas que aparecen en la página principal.

Cada archivo de plantilla contiene código HTML y distintivos. Un distintivo es una cadena de texto que Photoshop sustituye cuando se define su opción correspondiente en el cuadro de diálogo Galería de fotografías web. Por ejemplo, un archivo de plantilla puede contener el siguiente elemento TITLE que utiliza un distintivo como texto adjunto:

<TITLE>%TITLE%</TITLE>

Cuando Photoshop genera la galería utilizando este archivo de plantilla, sustituye el distintivo %TITLE% por el texto que haya introducido en Nombre del sitio en el cuadro de diálogo Galería de fotografías web.

Para entender mejor un estilo existente, puede abrir y estudiar sus archivos de plantilla HTML mediante un editor HTML. Como solo son necesarios los caracteres ASCII estándar para crear documentos HTML, puede abrir, editar y crear estos documentos mediante un editor de texto sin formato como Bloc de notas (Windows) o TextEdit (Mac OS).

Acerca de la personalización de estilos de galería de fotografías web

Para personalizar un estilo de galería de fotografías web existente, edite uno o más de sus archivos de plantilla HTML. Cuando se personaliza un estilo, es necesario seguir estas pautas para que Photoshop pueda generar correctamente la galería:

• La carpeta de estilos debe contener estos archivos: Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm y FrameSet.htm.

• Puede cambiar el nombre de la carpeta de estilos pero no de los archivos de plantilla HTML de la carpeta.

• Puede tener un archivo Caption.htm vacío y colocar el código HTML y los distintivos que determinan la composición del pie de ilustración en el archivo Thumbnail.htm.

• Puede reemplazar un distintivo de un archivo de plantilla por el texto o código HTML adecuado, de manera que una opción se defina a través del archivo de plantilla en vez de a través del cuadro de diálogo Galería de fotografías web. Por ejemplo, un archivo de plantilla puede contener un elemento BODY con el siguiente atributo de color de fondo que utiliza un distintivo como su valor:

  bgcolor=%BGCOLOR%

  Para definir el rojo como color de fondo de la página, puede reemplazar el distintivo %BGCOLOR% por "FF0000".

• Puede añadir código HTML y distintivos a los archivos de plantilla. Todos los distintivos deben estar en mayúsculas y comenzar y acabar con el símbolo de porcentaje (%).

Personalización o creación de estilos de galería de fotografías web

Distintivos de estilos de galería de fotografías web

Photoshop utiliza distintivos en los archivos de plantilla HTML para definir un estilo de galería de fotografías web por defecto. Photoshop utiliza estos distintivos para generar una galería basada en la entrada de usuario en el cuadro de diálogo Galería de fotografías web.

Cuando personaliza o crea un estilo de galería, puede añadir cualquier distintivo a cualquier archivo de plantilla HTML, a excepción de %THUMBNAILS% y %THUMBNAILSROWS%, que solo pueden aparecer en el archivo IndexPage.htm. Cuando añada un distintivo, tenga en cuenta que también puede ser necesario añadir código HTML al archivo para que el distintivo se utilice correctamente.

Pueden utilizarse los siguientes distintivos en los archivos de plantilla HTML:

Determina el color de los enlaces activos.

Determina el nombre de un archivo de imágenes.

Proporciona la posibilidad de volver a la miniatura de la imagen que está viendo el usuario, en lugar de al principio del índice. Esto se efectúa cuando el usuario hace clic en el botón Inicio.

Determina el color del titular.

Determina la fuente del texto del titular.

Determina el tamaño de fuente del texto del titular.

Determina el color de fondo.

Determina la fuente del pie de ilustración que hay debajo de las miniaturas de la página principal.

Determina el tamaño de fuente del pie de ilustración.

Inserta el título del documento para un pie de ilustración a partir de la información del archivo.

Determina el conjunto de caracteres utilizado en cada página.

Determina la información de contacto de la galería, como el número de teléfono y la ubicación.

Se expande a "Galería de fotografías web de Adobe Photoshop CS5".

Introduce la información de copyright para un pie de ilustración a partir de la información del archivo.

Introduce los créditos para un pie de ilustración a partir de la información del archivo.

Determina el enlace a la página principal anterior.

Reside en el archivo SubPage.htm y apunta a la primera página del índice.

Determina la fecha que aparece en el titular.

Determina el correo electrónico de la información de contacto de la galería.

Determina la información de archivo de imágenes del pie de ilustración.

Determina el nombre de archivo de una imagen. Utilice este valor para los metadatos que aparecen como texto HTML.

Determina el nombre de archivo de la dirección URL de una imagen. Utilice esta opción solo para nombres de archivo de URL.

Determina el enlace a la primera página de la galería que aparece en el cuadro derecho de un conjunto de cuadros.

Determina el enlace a la página principal que aparece en el cuadro izquierdo de un conjunto de cuadros.

Determina el título de la galería.

Determina el tamaño del borde de la imagen en tamaño completo en la página de la galería.

Activa la casilla de verificación Añadir atributos de altura y anchura para las imágenes. Esta opción permite al usuario descargar los atributos, reduciéndose así el tiempo de descarga.

Este distintivo se sustituye por un valor numérico (solo) que representa la anchura de la imagen.

Determina el enlace a una página de la galería.

Si se ha seleccionado el cuadro Redimensionar imágenes, este distintivo contiene el valor en píxeles de la imagen utilizado en el panel Imágenes grandes. Si el cuadro no se ha seleccionado, este distintivo contiene una cadena vacía. Esto resulta útil para JavaScript en las plantillas, ya que puede mostrar los valores de altura y anchura máximos para todas las imágenes del sitio que se ha generado.

Determina la dirección URL para una imagen en tamaño completo en una página de la galería.

Activa la casilla de verificación Añadir atributos de altura y anchura para las imágenes. Esta opción permite al usuario descargar los atributos, reduciéndose así el tiempo de descarga.

Este distintivo se sustituye por un valor numérico (solo) que representa la anchura de la imagen.

Determina el color de los enlaces.

Determina el enlace para la siguiente página de la galería.

Establece un enlace de la imagen grande de previsualización a la siguiente.

Determina el enlace a la siguiente página principal.

Inserta enlaces numerados en las subpáginas con todas las imágenes grandes de previsualización.

Determina la ubicación actual de la página (por ejemplo, página 1 de 3).

Determina el nombre de la persona u organización propietaria de las fotografías de la galería.

Determina el enlace a la página anterior de la galería.

Determina el enlace a la página principal anterior.

Determina el título de la galería.

Determina el título de la galería.

Determina el color de texto.

Determina el tamaño de los bordes de las miniaturas.

Activa la casilla de verificación Añadir atributos de altura y anchura para las imágenes. Esta opción permite al usuario descargar los atributos, reduciéndose así el tiempo de descarga.

Este distintivo se sustituye por un valor numérico (solo), que representa la altura de la miniatura.

Este distintivo se sustituye por miniaturas utilizando el archivo Thumbnail.htm para los estilos de cuadros. Es necesario colocar este distintivo solo en una única línea indivisible del archivo HTML.

Contiene el valor en píxeles de la miniatura en el panel Miniaturas. Esto resulta útil para JavaScript en las plantillas, ya que puede mostrar los valores de altura y anchura máximos de todas las miniaturas del sitio que se ha generado.

Determina el enlace a una miniatura.

Este distintivo se sustituye por filas de miniaturas utilizando el archivo Thumbnail.htm para los estilos que no son de cuadro. Es necesario colocar este distintivo solo en una única línea indivisible del archivo HTML.

Activa la casilla de verificación Añadir atributos de altura y anchura para las imágenes. Esta opción permite al usuario descargar los atributos, reduciéndose así el tiempo de descarga.

Este distintivo se sustituye por un valor numérico (solo) que representa la anchura de la miniatura.

Determina el título de la galería.

Determina el color de los enlaces visitados.