Galeries web

Galeries web
Une galerie web
Créer une galerie web
Une galerie personnalisée
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 ;-(
http://www.chez-sweety.net/Tutoriaux/Galeries/galeries_web.htm (1 sur 11)14/09/2004 11:44:14
Galeries web
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.
http://www.chez-sweety.net/Tutoriaux/Galeries/galeries_web.htm (2 sur 11)14/09/2004 11:44:14
Galeries web
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.
http://www.chez-sweety.net/Tutoriaux/Galeries/galeries_web.htm (3 sur 11)14/09/2004 11:44:14
Galeries web
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.
http://www.chez-sweety.net/Tutoriaux/Galeries/galeries_web.htm (4 sur 11)14/09/2004 11:44:14
Galeries web
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........
http://www.chez-sweety.net/Tutoriaux/Galeries/galeries_web.htm (5 sur 11)14/09/2004 11:44:14
Galeries web
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.
http://www.chez-sweety.net/Tutoriaux/Galeries/galeries_web.htm (6 sur 11)14/09/2004 11:44:14
Galeries web
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
http://www.chez-sweety.net/Tutoriaux/Galeries/galeries_web.htm (7 sur 11)14/09/2004 11:44:14
Galeries web
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.
http://www.chez-sweety.net/Tutoriaux/Galeries/galeries_web.htm (8 sur 11)14/09/2004 11:44:14
Galeries web
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é :
<p><img src="/images/nom de votre image.gif" width="240" height="200"></
p>
<p>&nbsp;</p>
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 :
http://www.chez-sweety.net/Tutoriaux/Galeries/galeries_web.htm (9 sur 11)14/09/2004 11:44:14
Galeries web
<style type="text/css">
<!-body {
background-image: url(images/nom de votre image.jpg);
}
-->
</style>
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.
http://www.chez-sweety.net/Tutoriaux/Galeries/galeries_web.htm (10 sur 11)14/09/2004 11:44:14
Galeries web
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 ;-)
Si ce tutoriel vous a plu, vous pouvez le télécharger au format PDF
Si vous avez des questions à poser ou des commentaires à faire sur ce tutoriel, vous pouvez le faire sur le forum Des masques et vous.
©Chez Sweety
http://www.chez-sweety.net/Tutoriaux/Galeries/galeries_web.htm (11 sur 11)14/09/2004 11:44:14