Remarque :
Pour créer des galeries web avec Photoshop CS5, reportez-vous à la section Création d’une galerie de photos web 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 sous Windows ou Mac OS.
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.
Adobe Bridge offre des fonctionnalités de galerie web mises à jour. Pour obtenir des instructions, reportez-vous à la section Création d’une galerie de photos web dans l’aide d’Adobe Bridge ou consultez les didacticiels ci-dessous.
-
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).
-
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.
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.
Bannière
Options de texte pour la bannière reproduite sur chaque page de la galerie. Entrez du texte pour chacun des champs suivants :
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.
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.
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.
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).
Remarque :
Pour créer des galeries web avec Photoshop CS5, reportez-vous à la section Création d’une galerie de photos web dans l’aide d’Adobe Bridge. Pour utiliser le module externe facultatif Galerie Web Photo plus ancien décrit ci-dessous, commencez par le télécharger et l’installer sous Windows ou Mac OS.
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 :
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.
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 (%).
-
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 :
%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.
%CONTACTINFO%
Détermine les coordonnées du contact pour la galerie telles que le numéro de téléphone et l’emplacement.
%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.
%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.
%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.
%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éé.
%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.
%NEXTIMAGE _CIRCULAR%
Définit le lien permettant de passer d’une grande image d’aperçu à la prochaine grande image d’aperçu.
%NUMERICLINKS%
Permet d’insérer dans des sous-pages des liens numérotés vers toutes les grandes images d’aperçu.
%PHOTOGRAPHER%
Détermine le nom de la personne ou de la société qui a réalisé les photos de la galerie.
%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éé.
%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.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.