Vous avez fait pas mal de photos sur un sujet particulier ou vous souhaitez présenter vos travaux :
une galerie photo est un moyen idéal.
Pas besoin de créer un site/blog compliqué avec des extensions qui créent des galeries,
Photoshop peut vous créer un ensemble de pages pour assembler votre galerie.
Il vous suffira de transférer tout ça sur un serveur web pour le rendre accessible au plus grand nombre.

Avant sur Photoshop, une fonction automatique permettait de créer une galerie web directement.
Avec CS5 (et même CS4), cette fonction a disparu… 🙁
Enfin pas tout à fait : elle a été transférée dans Adobe Bridge. 😀
Dans cet article, nous allons voir les 3 méthodes pour créer une galerie web :
– avec une ancienne version de Photoshop, ici CS2,
– avec Photoshop CS5 et Bridge (enfin avec Bridge seul, en fait),
– avec Lightroom 3.4 (dernière version à ce jour).

Photoshop CS2
Devoir réinstaller Photoshop CS2 (pas retrouvé CS3) pour les besoins de l’article : check.
Mais ça fait un choc de devoir revenir plusieurs versions en arrière ! 😕

Donc dans CS2 (je ne sais plus si cela existait encore avec CS3), voici comment créer une galerie web.

Dans le menu « Fichier », choisir « Automatisation » puis « Galerie web photo » :

La fenêtre de paramétrage s’ouvre :

Dans le menu déroulant « Styles », on peut choisir le modèle de galerie :
(à droite, une vignette d’aperçu du modèle de galerie)

La plupart des modèles sont en HTML, sauf 2 ou 3 en Flash.

Dans le cadre « Image source », on choisit :
– le répertoire contenant les photos sélectionnées pour la galerie,
– le répertoire de destination dans lequel seront stockés tous les fichiers de la galerie :

Dans le cadre « Options », on va régler plusieurs choses pour la galerie :

– « Général » : rien à régler (choix extension .htm ou .html – désuet),

– « Bannière » : informations de la galerie :

* nom du site : titre de la galerie,
* photographe (à remplir uniquement si l’on souhaite l’afficher),
* coordonnées du contact (si nécessaire),
* date : date de prise de vues des photos,
* selon le modèle, certaines options peuvent être actives (ou non).

– « Grandes images » : réglage de la taille et de la compression JPG des grandes images de la galerie

* selon le modèle, certaines options peuvent être actives (ou non).

– « Vignettes » : réglage de la taille des vignettes de la galerie :

* possibilité d’ajouter un bord (cadre) autour des vignettes,
* selon le modèle, certaines options peuvent être actives (ou non).

– « Couleurs personnalisées » :

* selon le modèle, certaines options peuvent être actives (ou non).

– « Protection » : permet d’ajouter un texte (filigrane) sur chaque photo :
(par défaut : sans)

Une fois tous les réglages effectués, il suffit de cliquer sur le bouton « OK »
et la galerie sera générée
(pendant le déroulement du script, les images sont redimensionnées une par une)

Et on obtient une galerie qui s’affiche automatiquement dans le navigateur :

Modèle "Vignettes grises"

Il ne reste plus qu’à copier le dossier généré (destination) sur un serveur web pour permettre l’accès au plus grand nombre.

Photoshop CS5 + Bridge
Si vous n’avez pas de raccourci sur le bureau,
vous pouvez accéder à Bridge depuis Photoshop CS5,
il suffit de cliquer sur l’icône
dans la partie droite de la barre de menus :

Une fois Bridge ouvert, on choisit le dossier contenant les photos que l’on souhaite utiliser
on aura pris soin de trier les photos au préalable, bien sûr…
voire leur donner un nom (ce que je n’ai pas fait ici) 😕

Ensuite, on clique sur « Sortie » dans la barre des fonction (en haut à droite) :

puis on choisit le bouton « Galerie web » :

Avant de pouvoir tester les différents modèles de galerie,
il faut sélectionner ses photos à utiliser dans le bandeau du bas
<Ctrl> <A> permet de tout sélectionner

Après chaque réglage ci-dessous, on peut avoir un aperçu :
– soit dans la fenêtre centrale de Bridge,
– soit dans le navigateur web par défaut.

La liste déroulante « Modèle » permet de sélectionner le modèle de base que l’on va utiliser :

La plupart sont en Flash mais le modèle « galerie HTML » est en HTML (comme son nom l’indique) ! 😛

Certains modèle permettent de choisir plusieurs tailles de vignettes :

On remplit ensuite toutes les informations qui vont apparaître dans la galerie
si on ne veut pas qu’une information apparaisse, il suffit de laisser la case vide

On peut modifier la palette de couleurs (ou laisser celle par défaut) :

On peut utiliser ses paramètres personnalisés de :
– largeur totale de la galerie,
– largeur de l’image en grand format,
– largeur des vignettes,
– qualité de compression pour le JPG,
– durée de diapo pour les modes diaporama,
– nombre de colonnes et nombre de lignes du tableau des miniatures…
Les options sont différentes selon le modèle de galerie choisi.

Une fois que l’aperçu correspond à ce que l’on souhaite, on passe à la finalisation de la galerie :
– on peut enregistrer dans un dossier sur son disque dur,
– on peut envoyer directement sur le serveur web par FTP

On obtient ainsi une galerie complète et fonctionnelle (ici modèle standard) :

un autre exemple de galerie HTML :

Il ne reste plus qu’à copier le dossier généré sur un serveur web pour permettre l’accès au plus grand nombre.

Lightroom 3.4
Pour ceux qui ont un budget plus serré et souhaitent disposer d’un logiciel de traitement d’image évolué, le logiciel Adobe Lightroom est une solution.
Il permet de faire de nombreuses fonctions de réglages et corrections des photographies.
Parmi ses nombreuses fonctions, on trouve également la possibilité de faire une galerie photo
de façon assez similaire à celle de Bridge.

Dans la bibliothèque de Lightroom, choisir un dossier de photos :

(Cliquer pour agrandir)

Sur la droite de la barre flottante du haut (qui se masque automatiquement),
choisir l’option « Web » :

Sur la droite, choisir le modèle de galerie photo :
la plupart des modèles sont en Flash, seul « Galerie HTML Lightroom » est en HTML (d’où son nom) 😛

Sur la gauche, un explorateur de modèle permet d’utiliser des modèles prédéfinis (entièrement) :

mais on peut y enregistrer ses propres modèles (utilisateur) :

Sur la droite, le cadre « Informations sur le site » permet de modifier les informations de la galerie :

Voici comment cela apparaît (selon le modèle de galerie choisi) :

Pour la galerie HTML, on peut ajouter une plaque d’identité au dessus du titre :

que l’on peut modifier, sous forme de texte ou d’image importée :

Toute modification apportée dans les réglages provoque un rafraîchissement de la fenêtre centrale aperçu :

La rangée de vignette du bas peut être masquée en cliquant sur le petit triangle au centre, dessous

On peut modifier la palette de couleurs pour la galerie :

Les différentes options du cadre « Aspect » :
(les options peuvent varier selon le modèle de galerie)

* ombre portée des vignettes,
* bordures de section : trait pointillé sous le titre ou sous l’ensemble de vignettes,
* la grille permet de régler le nombre de lignes et colonnes,
* les numéros de cellules s’affichent dans le cadre derrière chaque vignette,
* la couleur de bordure autour des miniatures peut être modifiée ou supprimée,
* la taille de la grande image peut être réglée (largeur),
* la couleur et la taille du contour de la grande image (ou suppression)
Les options peuvent être différentes selon le modèle de galerie choisi.

On peut afficher des informations d’image pour les grandes images :

* titre : affiché au dessus de l’image,
* légende : affiché sous l’image.
Ces informations peuvent être modifiées en cliquant sur la droite (double flèche).

Réglage des paramètres de sortie des grandes images :

* qualité de compression des JPG,
* application d’un filigrane sur les grandes images (paramétrable),
* netteté de l’image (faible, standard ou élevée).

Si vous désirez transférer directement vers un serveur web par FTP :

* serveur FTP : réglage des paramètres FTP,
* choix de stocker les photos dans un dossier particulier (ou non).

Une fois tous les paramètres réglés, il suffit de cliquer sur :
– « Exporter » pour enregistrer dans un dossier du disque dur,
– « Télécharger » pour envoyer directement par FTP.

On obtient une galerie photo fonctionnelle dont voici des exemples :

Airtight SimpleViewer

Airtight PostcardViewer

Galerie HTML Lightroom

Articles qui pourraient vous intéresser :

• Photoshop : adoucir la peau sans perdre la texture
• Photoshop : créer une icône RSS en 15 étapes
• Photoshop : remplacement de la couleur dans une image
• Un simulateur d’appareil photo
• InDesign : Mettre en page un document
• Photoshop : évolution darwinienne
• Flash : ondulation de drapeau
• 20 ans de Photoshop en une image
• Photoshop : faire des petits gâteaux
• Illustrator : vectorisation dynamique