Une galerie web

Créer une galerie web

Une galerie personnalisée

Style simple

Une galerie web est une page HTML ou HTM composée de versions miniatures de vos images, appelées vignettes. Lorsque vous cliquerez sur l'une de ces vignettes, l'image en taille réelle, apparaîtra.

Dans un 1er temps, nous apprendrons à créer une galerie suivant un de ces modèles, appelés styles par Photoshop.

Photoshop contient plusieurs styles de galeries web, mais il se peut qu'aucun ne vous convienne vraiment ;-(

Nous verrons donc comment nous pouvons, à partir d'un style, créer notre propre galerie qui soit à notre goût ;-)

Il est évident que si Photoshop vous livre cet outil, c'est pour vous éviter l'utilisation de la saisie de code HTML.

Toutefois, si vous désirez personnaliser votre galerie, il vous faudra en passer par là. Mais, rassurez-vous, cela n'est pas très compliqué.

En suivant ce tuto, vous y parviendrez très facilement.

Créer une galerie web

Fichier/Automatisation/Galerie web photo....... une fenêtre s'ouvre dans laquelle vous pouvez choisir votre modèle de galerie et régler vos paramètres.

Styles : Cliquez sur la petite flèche noire pour dérouler le menu qui renferme une douzaine de modèles. En cliquant sur chaque nom, vous ferez apparaître une vignette pour visualiser le modèle de galerie. Faites votre choix.

Adresse électronique : remplissez ce champs si vous voulez que votre adresse e-mail apparaisse sur votre galerie. Si vous avez choisi les modèles 'Cadre centré 1 - Retour' ou 'Cadre centré 2 - Retour', les internautes pourront, en cliquant sur votre adresse, vous envoyer un mail pour faire un commentaire....... ou vous féliciter de vos belles images ;-). Je tiens à préciser que ces 2 modèles n'existaient pas dans les versions antérieures à Photoshop CS.

Utiliser : Vous avez le choix pour sélectionner soit les images que vous avez choisies dans l'Explorateur de fichiers avant d'ouvrir cette fenêtre, soit de parcourir votre disque dur à la recherche d'un dossier qui contiendra déjà toutes vos images.

Pensez à sélectionner "Inclure tous les sous-dossiers" si votre dossier en contient et que vous désirez que les images qu'il(s) contien(nen)t soient dans votre galerie.

Options : C'est dans ce cadre que vous allez définir les divers paramétrages de votre galerie.

En cliquant sur la petite flèche noire, un menu se déroulera. En cliquant sur chaque rubrique ( Général, Bannière, etc...) de nouveaux champs s'incriront en-dessous. Vous pourrez alors les remplir à votre convenance. Les options disponibles dans chaque rubrique dépendent du style de galerie que vous aurez choisi.

Sachez que vous n'êtes tenus de remplir que les champs que vous souhaitez nécessaires. Aucun n'est obligatoire.

Général :

Extension : Vous avez le choix entre les deux extensions HTML ou HTM.

Utiliser le codage UTF 8 pour l'url : Excusez-moi, mais je ne sais pas ce que cela veut dire :-0. Je laisse donc cette case toujours décochée. Je suppose que ceux qui savent ce que cela veut dire, décidereront peut-être de la cocher.

Conserver toutes les métadonnées : Cochez cette case si vous désirez conserver, pour votre galerie, toutes ces informations.

Si vous ne savez pas, ou ne vous rappelez pas, ce que sont des métadonnées, vous pouvez vous rapporter au paragraphe sur les métadonnées de mon tutorial concernant l'Explorateur de fichiers.

Bannière :

Nom du site : Incrivez le nom de votre site ou votre nom ou le nom de votre société, de votre association, etc......

Photographe : Votre nom ou le nom de votre société, de votre club, etc.......

Coordonnées du contact : inscrivez toutes les coordonnées que vous jugez utiles de communiquer pour que les internautes puissent vous contacter.

Date : La date de création de la galerie ou la date de prise de vue des photos.

Police : Vous avez le choix entre quelques polices.

Corps : Déterminez la grandeur de la police.

Grandes images :

Ajouter des liens numériques : Laissez cette case cochée par défaut.

Redimensionner les images : Photoshop vous laisse le choix entre différents formats d'affichage de vos images. Petite (250 pixels), moyenne (350 pixels), grande (450 pixels) ou personnalisée. Dans ce dernier cas, rentrez la dimension que vous souhaitez dans la case pixels.

Conserver : Permet de garder ou pas le ratio entre la largeur et la hauteur de votre image.

Qualité JPEG et Taille du fichier : Plus la qualité du format est élevée, plus vous fichier sera lourd. Cela entraînera un temps plus ou moins long à l'ouverture de vos images. C'est à vous de faire un compromis entre le temps d'affichage et la qualité de votre image et de favoriser l'un plutôt qua l'autre.

Taille du cadre : Si vous désirez que vos images apparaissent dans un cadre, déterminez le nombre des pixels de celui-ci dans cette case.

Titres avec : Vous pouvez choisir d'afficher ou non différents renseignements : nom de fichier, description, etc........

Pour cela, il vous aura fallu, au préalable, renseigner les champs de chaque image avec la fonction Fichier/Informations. Pour plus de précisions, vous pouvez vous référer au tutoriel sur l'Explorateur de fichiers, dans le paragraphe sur les métadonnées .

Police et Corps : Choisissez votre police et sa taille.

Vignettes :

Taille : Là encore, vous avez le choix entre petite(50 pixels), moyenne (75 pixels), grande (100 pixels) ou de définir votre taille personnalisée.

Colonnes et rangées : Renseignez ces 2 champs pour définir le nombre de vignettes que vous souhaitez afficher par rangée et par colonne.

Taille du cadre, Titres avec, Police et corps : Comme pour les images, renseignez ces différents champs si vous le souhaitez.

Couleurs personnalisées :

Cette rubrique permet de choisir différentes couleurs de votre galerie.

Protection :

Cette rubrique permet d'ajouter un texte personnalisé ou des champs issus de la commande Informations que nous avons vu un plus haut dans ce tuto.

Une fois que vous avez fini de paramétrer cette boîte de dialogue, cliquez sur OK.

Photoshop se met alors au travail : il redimensionne vos images et crée les vignettes en respectant vos choix de configuration.

La rapidité d'exécution de votre galerie dépendra de la puissance de votre ordinateur et du nombre de photos que vous désirez inclure dans votre galerie.

Quand Photoshop a terminé sontravail, il ouvre la galerie dans votre navigateur habituel.

Il ne vous reste plus qu'à placer votre dosier, à l'aide de votre logiciel FTP, chez votre hébergeur pour le mettre en ligne. Si vous ne savez pas comment faire, renseignez-vous auprès de votre FAI qui vous donnera la marche à suivre.

Une galerie personnalisée :

Les fichiers qui composent les différents style de galeries se trouvent dans le dossier Adobe/Photoshop CS/Paramètres prédéfinis/Galerie Web Photo.

Commençons par créer un nouveau dossier que nous appellerons, par exemple, 'Perso', mais vous pouvez lui donner un autre nom.

Dans l'explorateur de Windows, ouvrez le dossier du style qui vous convient le mieux.

Sélectionnez tous les fichiers et le dossier 'images' (Le style 'Simple' ne contient pas de dossier 'images') et copiez les dans le dossier 'Perso' que vous venez de créer.

Modification des images :

Maintenant, ouvrez Photoshop, si ce n'est déjà fait, et dans son Explorateur de fichiers, recherchez le sous-dossier 'images' de votre dossier 'Perso'.

Sélectionnez toutes les images qu'il contient, à l'exception du fichier 'spacer.gif' et ouvrez-les.

Ils sont en mode 'Couleurs indéxées'. Image/Mode/Couleurs RVB.

Vous pouvez, à présent, les modifier à volonté : couleurs, symboles, etc........

Lorsque vous avez terminé de travailler sur les images, enregistrez-les : Fichier/Enregistrement pour le Web... et enregistrez-les au même format que vous les avez trouvés, c'est à dire au format .gif (excepté 1 ou 2 fichiers que vous pourrez trouver au format .jpg - les fichiers background, par exemple).

Voici la galerie que j'ai réalisée, basée sur le style "cadre centré 1 - base".

Personnalisation plus précise :

Si vous désirez aller plus loin dans la personnalisation de votre galerie, il vous faut "plonger" dans le code des fichiers HTML ou HTM :-0

Sur votre disque dur, cherchez Adobe/Photoshop CS/Paramètres prédéfinis/Galerie Web Photo.

Créez un nouveau sous-dossier que vous appellerez "Perso2".

Comme tout à l'heure, copiez-collez dans ce sous-dossier tous les fichiers, ainsi que le sous-dossier 'images' de votre dossier "Perso".

Caption.htm : Paramètre la légende sous chaque vignette de la page d'accueil.

FrameSet.htm : Configure la page de cadres.

IndexPage.htm : Paramètre la page d'accueil.

SubPage.htm : Paramètre les pages qui affichent les images à la grandeur réelle.

Thumbnail.htm : Paramètre la présentation des vignettes sur la page d'accueil.

galleryStyle.css ,dans le dossier 'images) : La feuille de style qui permet de paramétrer la présentation visuelle des pages web.

Nous allons donc modifier certains codes dans certains fichiers.

Occupons-nous d'abord de cette couleur grise dans le cadre, que je trouve bien tristounette.

Si vous ne savez pas ouvrir une page htm ou html, reportez-vous à ma page de liens concernant la création des sites web. Vous y trouverez sûrement votre bonheur pour vous guider dans vos premiers pas.

Pour cela ouvrez les fichiers FrameSet.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm et galleryStyle.css avec votre éditeur de textes préféré et changez tous les codes des couleurs que vous désirez.

Vous pouvez ainsi effectuer une multitude de modifications.

Voici où en est à ce point des changements ma galerie.

Pour en faire encore plus :

Vous désirez mettre un logo sur la page d'accueil de votre galerie??

Pour cela, ouvrez le fichier FrameSet.htm et rajouter le code suivant, à l'emplacement désiré :

Pensez à placer votre image dans votre dossier 'images' et à mettre le nom de votre image.

Vous désirez mettre une image de fond??

Ouvrez les fichiers FrameSet.htm, SubPage.htm et IndexPage.htm et rajouter avant la ligne </HEAD>, le code suivant :

Pensez à placer votre image dans votre dossier 'images' et à mettre le nom de votre image.

Si vous utilisez un style de galerie comme celle que j'ai choisi et qui utilise des cadres, vous ajouterez ce code uniquement dans le dossier FrameSet.htm.

Vous désirez une barre de navigation colorée??

@charset "iso-8859-1";
BODY {
scrollbar-darkshadow-color: #FFCC99;
scrollbar-3dLight-color: #FFCC99;
scrollbar-arrow-color: #FFFF99;
scrollbar-base-color: #FF7200;
scrollbar-face-color: #DD780C;
scrollbar-highlight-color: #FFCC99;
scrollbar-shadow-color: #FFCC99;
scrollbar-track-color: #F9A03F
}

Il s'agit là des codes de ma barre de navigation : pensez à les changer pour les adapter à votre galerie.

Une fois que vous avez modifié vos fichiers, dans Photoshop : Fichier/Automatisation/Galerie web photo....... Renseignez les différents champs et laissez Photoshop travailer pour vous.

Voici le résultat : ma galerie.

Vous avez, à présent, votre propre style de galeries......... et en quelques clics de souris, vous pourrez dorénavant, mettre très rapidement vos galeries en ligne et les présenter à tout le web ;-)

Avec le style 'simple'

Si ce style de galerie vous convient, mais que vous désirez la personnaliser davantage, il vous faut commencer par créer un dossier, que nous appellerons "simple-perso" dans le dossier Adobe/Photoshop CS/Paramètres prédéfinis/Galerie Web Photo. Puis, à l'intérieur de ce dossier "simple-perso", créez un sous-dossier "images".

Vous avez sûrement remarqué qu'il n'y a pas de fichier FrameSet.htm dans la style 'simple', ce qui est tout à fait normal puisque la galerie n'a pas de cadre : les vignettes cliquables ouvriront une nouvelle page dans laquelle appraîtra votre grande image.

Les boutons de navigation :

Lorsque Photoshop créera votre galerie, il générera des boutons de navigation. Vous pouvez dès à présent, faire les votres et les placer dans le dossier 'images'.

Ces fichiers se nomment : home.gif, previous.gif et next.gif. Ils représentent, dans l'ordre, la flèche qui ramène à la page des vignettes, la flèche qui appelle l'image précédente et la flèche qui appelle l'image suivante.

Attention! Nommez-les exactement avec leurs noms d'origine.

Leur dimension sont, par défaut, 30 X 30 pixels. Si vous les faites plus grands ou plus petits, Photoshop les redimensionnera à ses dimensions. Je vous conseille donc de les créer à ces dimensions. Si toutefois, vous désirez malgré tout modifier les dimensions, il vous faudra éditer les fichiers IndexPage.htm et SubPage.htm.

--------------------------------------------------------------------------

NB : Je vous rappelle qu'éditer un fichier veut simplement dire l'ouvrir avec un éditeur de texte. Le bloc-notes ou WordPad, livré avec Windows sont largement suffisants pour effectuer les modifications qui vont suivre.

---------------------------------------------------------------------------

Dans le fichier IndexPage.htm, recherchez le code suivant :

Et remplacez "30" par vos dimensions, sachant que 'height' est la hauteur et 'width' la largeur.

Dans le fichier SubPage.htm, recherchez le code :

Procédez de la même façon qu'avec le fichier IndexPage.htm.

Vous voulez un cadre autour de vos boutons?? Pourquoi pas!

A la place du 0 de border, mettez le nombre de pixels que vous désirez.

Vous le voulez d'une couleur particulière??

Rajoutez : bordercolor="#000000", #000000 représentant la couleur noire, mais vous pouvez tout à fait décider d'une autre couleur.

Cela vous donnera, par exemple :

Mais pensez, vous, à changer sur toutes les lignes que je vous ai données!

L'image de fond

Plutôt que d'avoir un fond de pages de couleur unie, vous préféreriez avoir une image de fond??

Tout d'abord, créez-la ;-) Il est préférable d'avoir une petite image qui se répètera sur toute votre page. Ainsi vos pages seront plus rapidement téléchargées.

N'oubliez que cette image va se répèter tout le long et la hauteur de vos pages, aussi je ne vous recommande que trop d'utiliser une texture sans raccords. Si malgré tout, vous désirez des motifs, mais que vous ne savez trop comment vous y prendre, reportez-vous à mon tuto sur les motifs. Vous y trouverez un paragraphe pour apprendre à créer des motifs sans raccords.

Votre image est prête?? Enregistrez-la au format .jpg ou .gif dans le sous-dossier 'images' de votre dossier "simple-perso" où se trouvent déjà les boutons de navigation.

Pour que Photoshop la prenne en compte, il va falloir à nouveau éditer les 4 fichiers de votre dossier "simple-perso".

Dans Caption.htm et Thumbnail.htm, sur la 1ère ligne, rajoutez le code :

Dans IndexPage.htm et SubPage.htm, après le code :

</HEAD>

Rajoutez le code :

Ainsi, votre image de fond sera prise en compte par Photoshop.

La couleur du texte

Si vous désirez aller encore plus vite car plusieurs galeries à faire dans le même style, vous pouvez dès à présent, indiquer la couleur du texte et des liens. Vous n'aurez plus ainsi à les reconfigurer à chaque fois dans la rubrique 'couleurs personnalisées' de votre menu Options.

Editez les 4 dossiers Caption.htm, Thumbnail.htm, IndexPage.htm et SubPage.htm et après le code que vous venez d'écrire, soit :

Rajoutez le code suivant :

text=#000000 link=#000000 vlink=#000000 alink=#000000

Ce qui vous donnera :

link, vlink et alink se rapportant aux liens, liens survolés et liens visités. A vous d'indiquer les codes des couleurs que vous souhaitez ;-)

Si ce tutoriel vous a plu, vous pouvez le télécharger au format PDF ou cette page.