4
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 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 congurable, 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 g. en haut de la page suivante ). Sur le panneau de gauche, vous trouverez, en haut, diérents modèles de galeries prédénis. C’est également ici que vous pourrez enregistrer vos modèles personnalisés. En dessous, les collections d’images s’achent, une fois les galeries créées. Au centre, une vue de votre site tel qu’il apparaitra sur le Web. Tout à droite, en haut, gurent les diérents moteurs Web ( Web Engine ), puis, en dessous, les outils de mise en page de vos galeries, pour dénir 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 «La version HTML affichera vos photos de manière plus statique, mais pourra être vue par tous les visiteurs, son langage étant plus universel » DOSSIER Créer un site Web avec Lightroom 86 Le Monde de la Photo TISSEZ VOTRE TOILE AVEC LIGHTROOM! Page d’accueil du site de Céline Jentzsch (www.cfotogenic.com), réalisé sous Lightroom avec TTG Pages et TTG Highslide Gallery.

TISSEZ VOTRE TOILE AVEC LIGHTROOM - …files.theturninggate.net/pdf/Le-Monde-de-la-Photo_TTG-Feature-2010... · simuler le résultat !nal dans votre navigateur Web directement à

Embed Size (px)

Citation preview

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

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 con!gurable, 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 !g. en haut de la page suivante). Sur le panneau de gauche, vous trouverez, en haut, di#érents modèles de galeries prédé!nis. C’est également ici que vous pourrez enregistrer vos modèles personnalisés. En dessous, les collections d’images s’a$chent, une fois les galeries créées. Au centre, une vue de votre site tel qu’il apparaitra sur le Web. Tout à droite, en haut, !gurent les di#érents moteurs Web (Web Engine), puis, en dessous, les outils de mise en page de vos galeries, pour dé!nir 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

« La version HTML affichera vos photos

de manière plus statique, mais pourra être vue par tous les

visiteurs, son langage étant plus universel »

DOSSIER Créer un site Web avec Lightroom!

86 Le Monde de la Photo

TISSEZ VOTRE TOILE AVEC LIGHTROOM !

Page d’accueil du site de Céline Jentzsch (www.cfotogenic.com), réalisé sous Lightroom avec TTG Pages et TTG Highslide Gallery.

se faire, en premier lieu, entre une galerie HTML ou Flash. La version HTML a$chera 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’a$chage et décourager les internautes ne béné!ciant 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 »).

lrwebengine et lrtemplateUne fois installés, il faut di#é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 siteAvant de vous lancer, il est essentiel de faire un plan du site et de dé!nir 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 a$chage est %uide, pour éviter à l’internaute de se lasser. Une des tâches les plus di$ciles 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 su$t, 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

TTG et LightroomMatthew Campagna, photographe et Web-designer, 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

DOSSIER Créer un site Web avec Lightroom!

87Le Monde de la Photo

Présentation du module Web de Lightroom.

Différents modèles de galeries de TTG.

Panneau de réglages dans le module Web.

galerie Web ». À partir du module Bibliothèque, transférez les photos sélectionnées dans leurs collections respectives.

TTG PagesComme son nom l’indique, TTG Pages sera le moteur Web principal de votre site, a!n 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 !g. 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 !g. 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’a$chera 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 GalleryTTG 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 : Proo!ng (épreuvage), Diaporama et Inline Diaporama (voir !g. ci-dessus). Créez et enregistrez tout d’abord votre modèle principal, que vous allez ensuite utiliser pour chaque galerie. (voir !g."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 a!n que ceux-ci soient identi!és sur la page Galerie, une fois vos galeries exportées (voir !g. page suivante à droite). Les paramètres de sortie dé!nissent la taille de vos images. Comme vous le savez, il est di$cile 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 modi!able dans TTG). Il est possible de

DOSSIER Créer un site Web avec Lightroom

88 Le Monde de la Photo

Plaque d’identité personnaliséeIl 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).

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

Types de diaporamas : Proofing, Slideshow et Inline Slideshow.

TTG Pages par défaut et TTG Pages après personnalisation de l’apparence.

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

simuler le résultat !nal 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 !g. ci-contre). Si vous souhaitez incruster un !ligrane à 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 !ligrane).

Votre URL et hébergeurLes deux étapes suivantes consisteront à !naliser 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 FTPLorsque votre hébergeur vous aura fourni les identi!ants 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 !chiers) et y transférer vos dossiers. Pour cela, il faut installer un petit logiciel FTP, comme FileZilla, par exemple. Votre site étant en!n en ligne, véri!ez que toutes

les pages s’a$chent correctement et que tous les liens fonctionnent.

Plus loin avec Paypal, FotomotoSi 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 di#érents services d’achat en ligne, spéci!quement 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 en!n 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.

89Le Monde de la Photo

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

Formulaire de contact!: FormToEmail

Pour chaque galerie, il faut créer une collection au sein du module Web.

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