DOSSIER Créer un site Web avec Lightroom

DOSSIER Créer un site Web avec Lightroom TISSEZ VOTRE TOILE
AVEC LIGHTROOM !
Une galerie photo bien structurée et harmonieuse est la carte de visite virtuelle
pour tout photographe désirant présenter son travail, qu’il soit amateur ou
professionnel. Par Céline Jentzsch
Page d’accueil du site de Céline Jentzsch (www.cfotogenic.com), réalisé sous Lightroom avec TTG Pages et TTG Highslide Gallery.
«La version HTML
affichera vos photos
de manière plus
statique, mais pourra
être vue par tous les
visiteurs, son langage
étant plus universel »
86
Le Monde de la Photo
Si, comme moi, vous êtes blasé par ces nombreuses
galeries Web au style trop conventionnel, voici une
alternative qui devrait vous plaire. Je vais vous montrer
comment créer facilement, sans connaissance du
langage HTML, une galerie photo harmonieuse à
l’aide d’un modèle TTG (The Turning Gate) de Matthew
Campagna (voir encadré page suivante).
TTG va plus loin qu’un simple diaporama, c’est un
vrai outil de construction de site Web, avec une
page d’accueil, une barre de menu configurable,
une page contact avec un formulaire de soumission
électronique et, bien sûr, un index de vos galeries
d’images. Mais avant de développer en détail les
composants d’un template (modèle) TTG, nous allons
nous familiariser avec l’interface du module Web, qui
garde la même structure que tout autre module de
Lightroom (voir fig. en haut de la page suivante). Sur
le panneau de gauche, vous trouverez, en haut,
différents modèles de galeries prédéfinis. C’est
également ici que vous pourrez enregistrer vos
modèles personnalisés. En dessous, les collections
d’images s’affichent, une fois les galeries créées. Au
centre, une vue de votre site tel qu’il apparaitra sur
le Web. Tout à droite, en haut, figurent les différents
moteurs Web (Web Engine), puis, en dessous, les
outils de mise en page de vos galeries, pour définir
les noms d’albums, choisir la couleur du fond, la taille
de la police, le type de diaporama, et saisir les textes.
HTML ou Flash ?
Commençons tout d’abord par sélectionner et
télécharger les templates de TTG. Votre choix devra
Présentation du module Web de Lightroom.
se faire, en premier lieu, entre une galerie HTML
ou Flash. La version HTML affichera vos photos de
manière plus statique, mais pourra être vue par
tous les visiteurs, son langage étant plus universel
et n’exigeant pas d’installation particulière sur
votre machine. La version Flash, elle, a l’avantage
de rendre le contenu plus dynamique, tout en
donnant un aspect plus agréable à vos photos. Elle
permet également d’empêcher la copie d’image
par clic droit. Cependant, cette version peut
ralentir l’affichage et décourager les internautes
ne bénéficiant pas de connexion à haut débit. Elle
nécessite, d’autre part, l’installation d’un plug-in
dans votre système d’exploitation. Vous aurez le
choix entre une vingtaine de modèles (voir ci-contre),
et trouverez des exemples de chacun d’entre eux sur
le site de Matthew (sous « sample gallery »).
Panneau de réglages dans le module Web.
lrwebengine et lrtemplate
Une fois installés, il faut différencier les moteurs
Web et les templates (visibles dans le panneau
supérieur droit, sous Moteurs). Dans le premier cas,
l’extension sera : lrwebengine, dans le deuxième cas :
lrtemplate. Les moteurs Web et les templates doivent
être déplacés sur votre ordinateur, sous Users/Nom
d’utilisateurs/Library/Application Support/Adobe/
Lightroom/ Galeries Web pour les utilisateurs
de Mac, et C :/Documents and Settings/Nom
d’utilisateur/Library/Application Support/Adobe/
Lightroom/ Galeries Web pour les utilisateurs de PC
sous Windows. À ce stade, vous devez redémarrer
Lightroom pour apercevoir vos nouveaux templates.
Faire un plan de site
Avant de vous lancer, il est essentiel de faire
un plan du site et de définir avec précision
l’organisation de vos pages et de vos galeries.
Un site bien ordonné doit se lire naturellement
et sera d’autant plus agréable si son affichage
est fluide, pour éviter à l’internaute de se lasser.
Une des tâches les plus difficiles sera, ensuite,
le choix des photos. Je vous conseille de les
regrouper par thèmes, par lieux ou tout autre
élément commun pour que l’ensemble reste
harmonieux et cohérent ; cela conduira plus
rapidement les visiteurs à ce qu’ils recherchent.
Il faudra également créer une collection pour
chaque galerie : il suffit, dans le module Web, de
cliquer sur le signe plus (+), à droite de l’en-tête du
panneau Collection, puis de sélectionner « créer
Différents modèles de galeries de TTG.
TTG et Lightroom
Matthew Campagna,
photographe et Webdesigner, a débuté
dans le
développement de
templates Web bien
avant l’arrivée de
Lightroom sur le
marché, en février
2007. À l’occasion de
la sortie de la version
1.0, Matthew publie
son premier template
compatible avec Lightroom et connait, depuis, un vif
succès auprès des utilisateurs. Il compte à ce jour pas
moins de 6 000 abonnés et une vingtaine de produits,
faisant de TTG le fournisseur le plus prolifique du
marché. Son but est d’améliorer les fonctionnalités et
la souplesse d’utilisation, grâce aux retours de ses
clients. Vous pouvez acquérir et télécharger ses
templates sous forme d’abonnement annuel (ou neuf
téléchargements) pour un montant maximum de 25 $
par template. Cette solution à la carte permettra à
chaque photographe de développer sa propre identité
et de mettre en valeur son travail.
http://lr.theturninggate.net
Le Monde de la Photo
87
DOSSIER Créer un site Web avec Lightroom
Plaque d’identité
personnalisée
Il est très facile de personnaliser votre plaque d’identité.
Pour cela, créez une image dans Photoshop (environ
1 600 x 120 pixels) et intégrez-la ensuite dans vos modèles
sous « Identity plate ». (voir encadré page précédente).
TTG Pages par défaut et TTG Pages après personnalisation de l’apparence.
Types de diaporamas: Proofing, Slideshow
et Inline Slideshow.
Renommer les photos
Pour obtenir un référencement de qualité, il est
important de nommer vos photos de façon explicite,
en leur attribuant des mots-clés, car les moteurs de
recherche disposent tous d’un service permettant de
trouver des images.
Voici une liste non exhaustive de règles de dénomination:
! le nom du fichier ne doit pas contenir d’espaces
! éviter les signes et caractères spéciaux, tels que / :
<« ^*+=? etc.
! éviter les chiffres au début
! éviter les accents
! utiliser des tirets plutôt que des traits de soulignement
(un trait de soulignement ne permet pas de séparer des
mots, un tiret oui).
Dans Lightroom, vous pouvez également définir certaines
règles pour la dénomination des fichiers sous Préférences
> Gestion des fichiers (voir encadré ci-dessus).
88
Le Monde de la Photo
«Avant de vous lancer, il est essentiel de faire un plan
du site et de définir avec précision l’organisation de
vos pages et de vos galeries »
galerie Web ». À partir du module Bibliothèque,
transférez les photos sélectionnées dans leurs
collections respectives.
TTG Pages
Comme son nom l’indique, TTG Pages sera le
moteur Web principal de votre site, afin de créer
les pages elles-mêmes. Dans le menu déroulant, à
droite (à partir de « Information sur le site »), vous
allez concevoir votre menu. Il vous faudra au
minimum trois images dans votre collection (dans
l’ordre de votre choix) pour que TTG Pages puisse
fonctionner : une pour la page d’accueil « Home »,
une pour l’à propos « About » et une pour le
formulaire de contact « Contact » (voir encadré page
suivante). Il est également possible de remplacer
ces trois images par une galerie Flash pour changer
celles-ci à chaque visualisation de la page. TTG
pages vous propose déjà un style, cependant,
vous voudrez peut-être personnaliser l’apparence
de votre site à l’aide des panneaux illustrés (voir
fig. bas page 87) : Panneau Informations sur le site
avec personnalisation de votre plaque d’identité
(voir encadré ci-dessus), Palette de couleurs, Aspect,
Informations sur l’image, Paramètres de sortie et
Paramètres de téléchargement. (voir fig. ci-dessus,
avant et après). Il est important de remplir la partie
« HTML » avec votre nom, ou faire une description
sous « Page Settings ». C’est une des clés pour le
référencement de votre site, et le nom s’affichera dans
l’onglet du navigateur Web. Important : pensez bien
à enregistrer et à rafraîchir votre page régulièrement
(Menu>Web>Nouveau modèle) pour ne pas perdre
vos réglages en cas de changement de module.
TTG Highslide Gallery
TTG Highslide Gallery et TTG pages sont conçus pour
fonctionner ensemble. TTG vous propose également
plusieurs modèles, que vous pourrez, comme
TTG pages, remanier à votre gré. TTG Highslide
Gallery intègre trois modes de diaporama: Proofing
(épreuvage), Diaporama et Inline Diaporama (voir
fig. ci-dessus). Créez et enregistrez tout d’abord votre
modèle principal, que vous allez ensuite utiliser pour
chaque galerie. (voir fig. page suivante à gauche). Vous
pouvez réutiliser la même plaque d’identité pour TTG
Pages pour garder une certaine continuité lors du
changement de page. N’oubliez pas, pour chaque
galerie, de saisir les noms des albums afin que ceuxci soient identifiés sur la page Galerie, une fois vos
galeries exportées (voir fig. page suivante à droite). Les
paramètres de sortie définissent la taille de vos images.
Comme vous le savez, il est difficile de se protéger
totalement contre le vol, mais en choisissant une taille
d’image et une résolution moindre, les risques seront
limités. En exportant vos galeries, la résolution des
photos sera automatiquement réglée sur 240 ppp
(valeur non modifiable dans TTG). Il est possible de
Pour chaque galerie, il faut créer une collection au sein du module Web.
Formulaire de
contact : FormToEmail
Les moteurs TTG utilisent le logiciel gratuit
FormToEmail (script PHP). Il traite les formulaires Web
et envoie leur contenu à votre adresse e-mail. Dans le
dossier lrwebengine/resources de votre moteur Web
TTG Pages, ouvrez le fichier FormToEmail.php (dans
un éditeur de texte). Localisez « Step 2 » à la ligne 83,
entrez votre adresse courriel, sauvegardez et
redémarrez Lightroom. N’oubliez pas de revalider votre
adresse lors de mises à jour du moteur Web ou du
modèle (voir encadré page 88).
Page Galerie, visible une fois vos galeries exportées.
Les galeries générées par TTG Highslide Gallery
doivent toutes être placées sous «Galleries ».
simuler le résultat final dans votre navigateur Web
directement à partir de Lightroom en cliquant sur
« Aperçu dans un navigateur», tout en-bas à gauche.
Exporter Il ne vous reste plus qu’à exporter et enregistrer
chacune de vos galeries dans le Finder (Mac) ou
l’Explorer (Windows), à l‘emplacement de votre
choix, grâce au bouton Exporter, en bas, à droite.
Au sein du répertoire principal de TTG Pages se
trouve un dossier « Galleries ». C’est là que devront
être déposées toutes vos galeries générées avec
TTG Highslide Gallery (voir fig. ci-contre). Si vous
souhaitez incruster un filigrane à vos photos, vous
pourrez le faire grâce au plugin Lr2/Mogrify de
Timothy Armes (notez que Lightroom 3 disposera
de son propre éditeur de filigrane).
Votre URL et hébergeur
Les deux étapes suivantes consisteront à finaliser
votre site et à le mettre en ligne. Il faut également
choisir un nom de domaine (adresse Web URL).
Cela peut être votre nom ou le sujet de vos images.
Vous trouverez sur Internet des dizaines
d’hébergeurs pour votre site. Votre choix se
tournera plutôt vers l’un ou l’autre en fonction
de votre budget, de la taille de votre site et de
tous les services annexes dont vous souhaitez
disposer : référencement, statistiques, marketing
etc. Vous trouverez ici les hébergeurs les plus
populaires (www.top10hebergeurs.com),
cependant, il y a peut-être dans votre entourage
des spécialistes tout à fait sérieux et aptes à vous
fournir les mêmes prestations.
Serveur FTP
Lorsque votre hébergeur vous aura fourni les
identifiants de votre site (nom d’utilisateur et
mot de passe), vous pourrez vous connecter sur
un serveur FTP (File Transfer Protocol, protocole
de transfert de fichiers) et y transférer vos
dossiers. Pour cela, il faut installer un petit
logiciel FTP, comme FileZilla, par exemple.
Votre site étant enfin en ligne, vérifiez que toutes
les pages s’affichent correctement et que tous
les liens fonctionnent.
Plus loin avec Paypal, Fotomoto
Si vous souhaitez aller plus loin et commercialiser
vos images, vous pouvez utiliser la version TTG
Highslide Gallery Pro. Ce modèle est polyvalent
et peut être utilisé pour créer plusieurs types de
galeries d’images, dont une pour l’épreuvage par
le client, avec des options de réponse par email,
et trois types de galeries panier.
Ce template intègre différents services d’achat
en ligne, spécifiquement conçus pour les photos.
Il traite vos commandes et vos paiements en
utilisant PayPal, Fotomoto ou Foxycart. Vous
trouverez, sur le site de Matthew, des tutoriels
vidéo très détaillés.
Votre site enfin en ligne, pensez à le faire vivre et à y
apporter des changements régulièrement. Je vous
invite à consulter ma galerie de photos de voyages
(www.cfotogenic.com), qui a entièrement été
réalisée avec TTG Pages et TTG Highslide Gallery.
Le Monde de la Photo
89