Création de galeries de photos web

Une galerie de photos web est un site web formé d’une page d’accueil présentant des images miniatures et de pages de galerie contenant des images en taille réelle. Chaque page contient des liens permettant aux visiteurs de naviguer sur le site. Par exemple, lorsqu’un visiteur clique sur une image miniature de la page d’accueil, l’image correspondante en taille réelle est chargée dans une page de galerie. La commande Galerie Web Photo vous permet de générer automatiquement une galerie de photos Web à partir d’une série d’images.

Photoshop propose divers styles de galerie que vous pouvez sélectionner à l’aide de la commande Galerie web Photo. Si vous êtes un utilisateur chevronné connaissant bien HTML, vous pouvez créer ou personnaliser un style en éditant une série de fichiers modèles HTML.

Chaque modèle de styles de galerie est fourni avec différentes options. Si vous utilisez un style prédéfini, certaines options peuvent ne pas être disponibles (en grisé) dans ce style.

Création d’une galerie de photos Web

Création de galeries web à l’aide d’Adobe Bridge

Adobe Bridge offre des fonctionnalités de galerie web mises à jour. Pour obtenir des instructions, voir la section Création d’une galerie web de photos dans l’aide d’Adobe Bridge ou consultez les didacticiels ci-dessous.

Utilisation du module externe Photoshop facultatif et plus ancien

Vérification de la concordance des couleurs

Si vous travaillez avec des photos dans un espace de travail doté d’une gamme de couleurs étendue tel que ProPhoto RVB ou Adobe RVB, leurs couleurs peuvent varier lorsqu’elles sont affichées dans une galerie web à l’aide d’un navigateur qui ne lit pas les profils colorimétriques intégrés. Si cela se produit, essayez de convertir les profils de l’image en sRVB (que la plupart des navigateurs utilisent par défaut) avant de les optimiser ou de les inclure dans une galerie de photos web. Convertissez-les selon l’espace sRVB en procédant de l’une des manières suivantes (il est conseillé de travailler avec une copie de l’image) :

• Pour convertir une seule image, choisissez Edition > Convertir en profil, puis sélectionnez sRVB (voir la section Attribution ou suppression d’un profil colorimétrique (Illustrator, Photoshop)).

• Pour convertir un dossier d’images, utilisez le processeur d’images. Choisissez Fichier > Scripts > Processeur d’images (voir la section Conversion des fichiers avec le processeur d’images).

Si vous utilisez le processeur d’images, vous pouvez enregistrer les fichiers directement au format JPEG à la taille de votre choix. Dans ce cas, veillez à désactiver l’option Redimensionner les images dans les options Grandes images.

Options de galerie de photos Web

Options pour les extensions de fichier, le codage et les métadonnées.

Utilise l’extension .htm ou .html pour le nom du fichier.

Utilise le codage UTF-8.

Spécifie les dimensions, ce qui réduit le temps de chargement.

Conserve les informations sur les métadonnées.

Options de texte pour la bannière reproduite sur chaque page de la galerie. Entrez du texte pour chacun des champs suivants :

Nom de la galerie.

Nom de la personne ou de la société qui a réalisé les photos de la galerie.

Coordonnées du contact pour la galerie telles qu’un numéro de téléphone ou une adresse professionnelle.

Date figurant sur chaque page de la galerie. Par défaut, Photoshop utilise la date du jour.

(Disponible pour certains styles de site) Options pour le texte de la bannière.

Options pour les images principales qui s’affichent sur chaque page de la galerie.

(Disponible pour certains styles de site) Insère une séquence numérique horizontale (commençant par 1 et se terminant par le nombre total de pages de la galerie) en haut de chaque page de la galerie. Chaque numéro est un lien vers la page correspondante.

Redimensionne les images source avant de les placer dans les pages de la galerie. Choisissez une taille dans le menu déroulant ou entrez une taille en pixels. Dans le menu déroulant Conserver, choisissez les dimensions d’image à conserver lors du redimensionnement. Choisissez une option dans le menu déroulant Qualité JPEG, entrez une valeur comprise entre 0 et 12 ou faites glisser le curseur. Plus la valeur est élevée, plus l’image est de bonne qualité et le fichier volumineux.

Détermine la largeur, en pixels, du cadre de l’image.

(Disponible pour certains styles de site) Définit des options pour l’affichage des légendes sous chaque image. Sélectionnez Nom du fichier pour afficher le nom du fichier ou Description, Auteurs et remerciements, Titre et Copyright pour afficher une description provenant de la boîte de dialogue Informations.

(Disponible pour certains styles de site) Détermine la police et la taille de la légende.

Options pour la page d’accueil de la galerie, y compris la taille des vignettes.

Spécifie la taille des vignettes. Choisissez une option dans le menu déroulant ou entrez une valeur en pixels pour indiquer la largeur de chaque vignette.

Spécifient le nombre de colonnes et de rangées pour l’affichage des vignettes sur la page d’accueil. Cette option ne s’applique pas aux galeries qui utilisent le style Image horizontale ou Image verticale.

Détermine la largeur, en pixels, du cadre de chaque vignette.

(Disponible pour certains styles de site) Définit des options pour l’affichage des légendes sous chaque vignette. Sélectionnez Nom du fichier pour afficher le nom du fichier ou Description, Auteurs et remerciements, Titre et Copyright pour afficher une description provenant de la boîte de dialogue Informations.

(Disponible pour certains styles de site) Détermine la police et la taille de la légende.

Options pour les couleurs des éléments dans la galerie. Pour modifier la couleur d’un élément, cliquez sur son échantillon, puis sélectionnez une nouvelle couleur à l’aide du sélecteur de couleurs Adobe. Vous pouvez modifier la couleur d’arrière-plan de chaque page (option Arrière-plan) et de la bannière (option Bannière).

Affiche du texte sur chaque image afin de dissuader d’éventuels contrevenants.

Spécifie le texte à afficher. Sélectionnez Texte personnalisé afin d’entrer un texte personnalisé. Sélectionnez Nom de fichier, Description, Auteurs et remerciements, Titre ou Copyright pour afficher un texte provenant de la boîte de dialogue Informations.

Spécifie la police, la couleur et la position de la légende.

Fait pivoter le texte de l’image selon un angle.

Styles de galerie de photos web

Photoshop propose divers styles pour votre Galerie web Photo. Si vous êtes un utilisateur chevronné connaissant bien HTML, vous pouvez créer ou personnaliser un style en éditant une série de fichiers modèles HTML.

Les styles de galerie de photos Web proposés par Photoshop sont enregistrés dans des dossiers distincts aux emplacements suivants :

Program Files/Adobe/Adobe Photoshop CS5/Presets/Web Photo Gallery.

Adobe Photoshop CS5/Presets/Web Photo Gallery.

Le nom de chaque dossier à cet emplacement apparaît sous forme d’option dans le menu Styles de la boîte de dialogue Galerie Web Photo. Chaque dossier contient les fichiers modèles HTML suivants que Photoshop utilise pour générer la galerie :

Détermine la disposition de la légende qui apparaît sous chaque vignette sur la page d’accueil.

Détermine la disposition du cadre défini pour afficher les pages.

Détermine la disposition de la page d’accueil.

Détermine la disposition des pages de la galerie contenant des images en taille réelle.

Thumbnail.htm Détermine la disposition des vignettes qui figurent sur la page d’accueil.

Chaque fichier modèle contient du code HTML et des marques. Une marque est une chaîne de texte qui est remplacée par Photoshop lorsque vous définissez l’option correspondante dans la boîte de dialogue Galerie web Photo. Par exemple, un fichier modèle peut contenir l’élément TITLE suivant, dont le texte est une marque :

<TITLE>%TITLE%</TITLE>

Lorsque Photoshop génère la galerie à partir de ce fichier modèle, il remplace la marque %TITLE% par le texte que vous avez entré dans la zone Nom du site de la boîte de dialogue Galerie Web Photo.

Pour mieux comprendre un style existant, vous pouvez ouvrir et consulter ses fichiers modèles HTML à l’aide d’un éditeur HTML. Etant donné que seuls les caractères ASCII standard sont nécessaires pour créer des documents HTML, vous pouvez ouvrir, modifier et créer ces documents à l’aide d’un éditeur de texte brut tel que le Bloc-notes (Windows) ou TextEdit (Mac OS).

Personnalisation des styles de galerie de photos Web

Vous pouvez personnaliser un style de galerie de photos web existant en éditant un ou plusieurs de ses fichiers modèles HTML. Pour personnaliser un style, veillez à suivre les recommandations suivantes afin de permettre à Photoshop de générer la galerie correctement :

• Le dossier de style doit contenir les fichiers suivants : Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm et FrameSet.htm.

• Vous pouvez renommer le dossier de style, mais pas les fichiers modèles HTML qu’il contient.

• Vous pouvez laisser le fichier Caption.htm vide et placer le code et les marques HTML qui définissent la disposition de la légende dans le fichier Thumbnail.htm.

• Vous pouvez remplacer une marque dans un fichier modèle par le texte ou le code HTML approprié, afin de définir une option par l’intermédiaire du fichier modèle plutôt que la boîte de dialogue Galerie Web Photo. Par exemple, un fichier modèle peut contenir un élément BODY assorti de l’attribut de couleur d’arrière-plan suivant, dont la valeur est une marque :

  bgcolor=%BGCOLOR%

  Pour définir l’arrière-plan de la page en rouge, il suffit de remplacer la marque %BGCOLOR% par « FF0000 ».

• Vous pouvez ajouter du code HTML et des marques aux fichiers modèles. Toutes les marques doivent être en caractères majuscules et commencer et finir par le symbole de pourcentage (%).

Personnalisation ou création d’un style de galerie de photos Web

Marques dans les styles de galerie de photos web

Photoshop inclut des marques dans les fichiers modèles HTML pour définir un style de galerie de photos web par défaut. Ces marques permettent à Photoshop de générer une galerie d’après les données fournies par l’utilisateur dans la boîte de dialogue Galerie Web Photo.

Lors de la personnalisation ou de la création d’un style de galerie, vous pouvez ajouter une marque dans n’importe quel fichier modèle HTML, à l’exception des marques %THUMBNAILS% et %THUMBNAILSROWS%, qui ne peuvent figurer que dans le fichier IndexPage.htm. Lors de l’ajout d’une marque, il peut se révéler nécessaire d’ajouter du code HTML au fichier de sorte que la marque soit correctement utilisée.

Vous pouvez utiliser les marques suivantes dans les fichiers modèles HTML :

Détermine la couleur des liens actifs.

Détermine le nom d’un fichier image.

Permet de retourner à la vignette de l’image que l’utilisateur visualise plutôt qu’au début de l’index. Cette marque prend effet lorsque l’utilisateur clique sur le bouton Accueil.

Détermine la couleur de la bannière.

Détermine la police du texte de la bannière.

Détermine le corps de la police du texte de la bannière.

Détermine la couleur d’arrière-plan.

Détermine la police de la légende affichée sous chaque vignette sur la page d’accueil.

Détermine le corps de la police utilisée pour la légende.

Insère le titre de document extrait des informations sur le fichier pour une légende.

Détermine le jeu de caractères utilisé sur chaque page.

Détermine les coordonnées du contact pour la galerie telles que le numéro de téléphone et l’emplacement.

Affiche la « Galerie web Photo Adobe Photoshop CS5 ».

Insère les informations sur le droit d’auteur extraites des informations sur le fichier pour une légende.

Insère les crédits (auteurs et remerciements) extraits des informations sur le fichier pour une légende.

Détermine le lien vers la page d’accueil active.

Réside dans le fichier subpage.htm et renvoie vers la première page d’index.

Détermine la date qui apparaît sur la bannière.

Détermine l’adresse électronique du contact pour la galerie.

Détermine les informations relatives au fichier image pour une légende.

Détermine le nom de fichier d’une image. Utilisez cette marque pour les métadonnées qui apparaissent sous la forme de texte HTML.

Détermine le nom de fichier de l’URL d’une image. Utilisez cette marque uniquement pour les noms de fichiers d’URL.

Détermine le lien vers la première page de la galerie qui apparaît dans le cadre de droite d’un ensemble de cadres.

Détermine le lien vers la page d’accueil qui apparaît dans le cadre de gauche d’un ensemble de cadres.

Détermine le titre de la galerie.

Détermine la taille du cadre de l’image en taille réelle sur une page de la galerie.

Active la case Ajouter des attributs de largeur et de hauteur pour les images. L’utilisateur peut ainsi télécharger les attributs et réduire les temps de chargement.

Cette marque est remplacée par un nombre (uniquement) représentant la largeur de l’image.

Détermine le lien vers une page de la galerie.

Si l’option Redimensionner les images est sélectionnée, cette marque contient le nombre de pixels de l’image extrait du panneau Grandes images. Si l’option est désélectionnée, cette marque contient une chaîne vide. Cette marque est notamment utile lors de l’utilisation du langage JavaScript dans les modèles, dans la mesure où elle peut afficher les valeurs de hauteur et de largeur maximales de toutes les images du site créé.

Détermine l’URL d’une image en taille réelle sur une page de la galerie.

Active la case Ajouter des attributs de largeur et de hauteur pour les images. L’utilisateur peut ainsi télécharger les attributs et réduire les temps de chargement.

Cette marque est remplacée par un nombre (uniquement) représentant la largeur de l’image.

Détermine la couleur des liens.

Détermine le lien vers la page suivante de la galerie.

Définit le lien permettant de passer d’une grande image d’aperçu à la prochaine grande image d’aperçu.

Détermine le lien vers la page d’accueil suivante.

Permet d’insérer dans des sous-pages des liens numérotés vers toutes les grandes images d’aperçu.

Détermine la position de la page active (par exemple, page 1 sur 3).

Détermine le nom de la personne ou de la société qui a réalisé les photos de la galerie.

Détermine le lien vers la page précédente de la galerie.

Détermine le lien vers la page d’accueil précédente.

Détermine le titre de la galerie.

Détermine le titre de la galerie.

Détermine la couleur du texte.

Détermine la taille des cadres des vignettes.

Active la case Ajouter des attributs de largeur et de hauteur pour les images. L’utilisateur peut ainsi télécharger les attributs et réduire les temps de chargement.

Cette marque est remplacée par un nombre (uniquement) représentant la hauteur de la vignette.

Cette marque est remplacée par les vignettes qui utilisent le fichier Thumbnail.htm pour les styles d’image. Vous devez la placer seule sur une ligne insécable séparée dans le fichier HTML.

Contient le nombre de pixels de la vignette extrait du panneau Vignettes. Cette marque est notamment utile lors de l’utilisation du langage JavaScript dans les modèles, dans la mesure où elle peut afficher les valeurs de hauteur et de largeur maximales de toutes les vignettes du site créé.

Détermine le lien vers une vignette.

Cette marque est remplacée par des rangées de vignettes qui utilisent le fichier Thumbnail.htm pour les styles autres que les styles d’image. Vous devez la placer seule sur une ligne insécable séparée dans le fichier HTML.

Active la case Ajouter des attributs de largeur et de hauteur pour les images. L’utilisateur peut ainsi télécharger les attributs et réduire les temps de chargement.

Cette marque est remplacée par un nombre (uniquement) représentant la largeur de la vignette.

Détermine le titre de la galerie.

Détermine la couleur des liens visités.