Guide d'utilisation Annuler

Création de galeries de photos web

Remarque :

Pour créer des galeries web avec Photoshop CS5, reportez-vous à la section Création d’une galerie web de photos dans l’aide d’Adobe Bridge. Pour utiliser le module externe facultatif Galerie Web Photo plus ancien décrit dans les rubriques ci-dessous, commencez par le télécharger et l’installer (version pour Windows ou Mac OS).

A propos des 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.

Page d’accueil de la galerie de photos web Photoshop
Page d’accueil de la galerie de photos web

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 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

  1. Vous pouvez télécharger et installer le module externe plus ancien Galerie Web Photo pour Windows ou Mac OS.

  2. (Facultatif) Sélectionnez les fichiers ou le dossier à utiliser dans Adobe Bridge.

    Vos images seront présentées dans leur ordre d’affichage dans Bridge. Si vous préférez qu’elles soient affichées dans un autre ordre, modifiez leur ordre d’affichage dans Bridge.

  3. Utilisez l’une des méthodes suivantes :

    • Dans Adobe Bridge, choisissez Outils > Photoshop > Galerie Web Photo.

    • Dans Photoshop, choisissez Fichier > Automatisation > Galerie Web Photo.

  4. Choisissez un style pour la galerie dans le menu déroulant Styles. Un aperçu de la page d’accueil dans le style choisi apparaît dans la boîte de dialogue.

  5. (Facultatif) Entrez une adresse électronique comme coordonnées du contact pour la galerie.

  6. Choisissez les fichiers source pour la galerie dans le menu Utiliser.

    Images sélectionnées dans Bridge

    Les images sélectionnées avant l’ouverture de la boîte de dialogue Galerie Web Photo sont utilisées.

    Dossier

    Utilise les images de dossiers que vous sélectionnez à l’aide de la commande Parcourir (Windows) ou Sélectionner (Mac OS). Sélectionnez Inclure tous les sous-dossiers pour inclure les images contenues dans les éventuels sous-dossiers du dossier sélectionné.

  7. Cliquez sur Destination, puis sélectionnez un dossier dans lequel stocker les images et les pages HTML de la galerie. Cliquez ensuite sur OK (Windows) ou sur Sélectionner (Mac OS).

  8. Sélectionnez des options de mise en page pour la galerie Web. Utilisez le menu Options pour afficher chaque ensemble d’options (voir la section Options de galerie de photos Web).

  9. Cliquez sur OK. Photoshop place les fichiers HTML et JPEG suivants dans votre dossier de destination :

    • La page d’accueil de la galerie, nommée index.htm ou index.html, selon les options d’extension. Ouvrez ce fichier dans un navigateur Web quelconque pour prévisualiser votre galerie.

    • Les images JPEG dans un sous-dossier d’images.

    • Les pages HTML dans un sous-dossier de pages.

    • Les vignettes JPEG dans un sous-dossier de vignettes.

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) :

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.

Général

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

Extension

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

Utiliser le codage UTF 8 pour l’URL

Utilise le codage UTF-8.

Ajouter des attributs de largeur et de hauteur pour les images

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

Conserver toutes les métadonnées

Conserve les informations sur les métadonnées.

Bannière

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

Nom du site

Nom de la galerie.

Photographe

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

Coordonnées du contact

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

Date

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

Police et Corps

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

Grandes images

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

Ajout de liens numériques

(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.

Redimensionner les images

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.

Remarque :

Photoshop utilise la méthode d’interpolation de l’image par défaut définie dans les préférences. Choisissez Bicubique plus net par défaut pour obtenir des résultats optimum avec une taille d’image réduite.

Taille du cadre

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

Titres avec

(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.

Police et Corps

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

Vignettes

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

Taille

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.

Colonnes et Lignes

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.

Taille du cadre

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

Titres avec

(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.

Police et Corps

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

Couleurs personnalisées

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).

Protection

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

Contenu

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.

Police, Couleur et Position

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

Rotation

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

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 :

Windows

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

Mac OS

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 :

Caption.htm

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

FrameSet.htm

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

IndexPage.htm

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

SubPage.htm

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).

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 (%).

  1. Recherchez le dossier contenant les styles de galerie de photos web existants.
  2. Utilisez l’une des méthodes suivantes :
    • Pour personnaliser un style, créez une copie du dossier des styles et stockez-la au même emplacement que les dossiers de style existants.

    • Pour créer un nouveau style, créez un dossier pour le nouveau style et stockez-le au même emplacement que les dossiers de style existants.

    Le style nouveau ou personnalisé (nommé d’après son dossier) s’affiche dans le menu Styles de la boîte de dialogue Galerie Web Photo.

  3. A l’aide d’un éditeur HTML, effectuez l’une des opérations suivantes :
    • Personnalisez le fichier modèle HTML.

    • Créez les fichiers modèles HTML requis et stockez-les dans le dossier des styles.

    Lors de la création des fichiers modèles, veillez à respecter les recommandations données à la section Personnalisation des styles de galerie de photos Web.

    Remarque :

    Lors de la personnalisation ou de la création d’un modèle de style de galerie, placez les marques suivantes sur une ligne séparée du fichier HTML : %CURRENTINDEX%, %NEXTIMAGE%, %NEXTINDEX%, %PAGE%, %PREVIMAGE% et %PREVINDEX%. Lors de la génération de pages spécifiques d’une galerie, Photoshop saute les lignes d’un modèle contenant des marques qui ne s’appliquent pas à ces pages. Par exemple, lorsque Photoshop génère la première page de la galerie, il ignore les lignes du modèle qui contiennent la marque %PREVIMAGE%, puisque celle-ci détermine le lien vers la page précédente dans la galerie. En plaçant la marque %PREVIMAGE% sur une ligne distincte, vous êtes assuré que Photoshop n’ignorera pas d’autres marques dans le modèle.

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 :

%ALINK%

Détermine la couleur des liens actifs.

%ALT%

Détermine le nom d’un fichier image.

%ANCHOR%

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.

%BANNERCOLOR%

Détermine la couleur de la bannière.

%BANNERFONT%

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

%BANNERFONTSIZE%

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

%BGCOLOR%

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

%CAPTIONFONT%

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

%CAPTIONFONTSIZE%

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

%CAPTIONTITLE%

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

%CHARSET%

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

%CONTACTINFO%

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

%CONTENT_GENRATOR%

Affiche la « Galerie web Photo Adobe Photoshop CS5 ».

%COPYRIGHT%

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

%CREDITS%

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

%CURRENTINDEX%

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

%CURRENTINDEXANCHOR%

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

%DATE%

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

%EMAIL%

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

%FILEINFO%

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

%FILENAME%

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.

%FILENAME_URL%

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

%FIRSTPAGE%

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.

%FRAMEINDEX%

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

%HEADER%

Détermine le titre de la galerie.

%IMAGEBORDER%

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

%IMAGE_HEIGHT%

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.

%IMAGE_HEIGHT_NUMBER%

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

%IMAGEPAGE%

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

%IMAGE_SIZE%

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éé.

%IMAGESRC%

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

%IMAGE_WIDTH%

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.

%IMAGE_WIDTH_NUMBER%

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

%LINK%

Détermine la couleur des liens.

%NEXTIMAGE%

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

%NEXTIMAGE _CIRCULAR%

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

%NEXTINDEX%

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

%NUMERICLINKS%

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

%PAGE%

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

%PHOTOGRAPHER%

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

%PREVIMAGE%

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

%PREVINDEX%

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

%SUBPAGEHEADER%

Détermine le titre de la galerie.

%SUBPAGETITLE%

Détermine le titre de la galerie.

%TEXT%

Détermine la couleur du texte.

%THUMBBORDER%

Détermine la taille des cadres des vignettes.

%THUMBNAIL_HEIGHT%

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.

%THUMBNAIL_HEIGHT_NUMBER%

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

%THUMBNAILS%

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.

%THUMBNAIL_SIZE%

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éé.

%THUMBNAILSRC%

Détermine le lien vers une vignette.

%THUMBNAILSROWS%

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.

%THUMBNAIL_WIDTH%

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.

%THUMBNAIL_WIDTH_NUMBER%

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

%TITLE%

Détermine le titre de la galerie.

%VLINK%

Détermine la couleur des liens visités.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?