Si vous êtes un peu photographe, vous serez peut-être tenté d’utiliser une de vos photos pour en faire la bannière de votre galerie ou de votre site ; j’ai notamment ainsi personnalisé :
- un forum (qui n’existe plus) :
- mon site Cévennes Plurielles :
Et je souhaite aujourd’hui faire de même pour ma galerie de démonstration, dont l’entête actuel me semble bien tristounet :
Pour m’accompagner dans cette démarche, il vous faut 2 choses :
- la taille approximative que vous souhaitez réserver à votre bannière : trop large, vos visiteurs avec un petit écran / une faible résolution / une fenêtre de navigateur pas très grande, n’en verront qu’une partie ; trop haute, elle prendra trop de place sur l’écran, au détriment des informations « utiles » qui viendront prendre place au-dessous.
- une photo d’un format approprié (panoramique, par exemple) ou dont la composition vous permet d’en découper une bande horizontale beaucoup plus longue que haute.
1. Définition de la taille de la bannière
Pour visualiser assez facilement la taille que vous souhaitez pour votre bannière, je vous recommande d’installer l’extension Web Developer pour Firefox qui va nous permettre de prendre des mesures précises sur la page réelle.
Ouvrez ensuite une page de votre galerie ou de votre site dans Firefox, et réglez la largeur de la fenêtre de votre navigateur de la manière qui vous semble optimale pour un visiteur ; pensez à ceux qui, pour une raison ou une autre, ne pourront pas disposer d’une largeur très importante. Pour une galerie Piwigo, je règle la largeur de ma fenêtre pour pouvoir afficher 4 ou 5 vignettes sur une même ligne, par exemple comme ceci :
Par le menu Outils -> Web Developer -> Divers -> Afficher l’outil de mesure de Firefox, activez l’outil de mesure de Web Developer qui va nous permettre de mesurer l’emplacement disponible pour la bannière :
Puis faites un cliquer-glisser avec la souris1 en diagonale, d’un angle à l’autre, pour délimiter l’emplacement de votre future bannière ; les dimensions du rectangle ainsi dessiné s’affichent juste au-dessus des onglets du navigateur :
Sur cette image, j’obtiens par exemple 970 x 184 pixels. Ce ne sont pas des dimensions « gravées dans le marbre », mais elles me donnent une idée assez précise de ce que je dois viser comme taille pour ma bannière.
2. Adaptation de la photo
Avez-vous choisi votre photo ? La mienne sera celle-ci :
qui a pour dimensions originales 4272 x 2848 pixels. Ouvrez votre photo dans Gimp, puis :
- activez l’outil Découpage qui va permettre de recadrer la photo originale
- cochez la case Fixé pour imposer certaines contraintes à l’outil
- sélectionnez l’option Proportions pour n’autoriser qu’un certain rapport entre largeur et hauteur
- puis remplacez les dimensions originales par celle déterminées à l’étape précédente, soit 970:184 pour ce qui me concerne.
Cliquez-glissez ensuite sur la photo en diagonale, pour sélectionnez le rectangle qui formera votre bannière ; vous constaterez que l’outil refusera de se déplacer dans une direction qui ne respecte pas le rapport largeur:hauteur imposé.
Une fois la sélection opérée, il vous est encore possible de la déplacer, ou de modifier ses dimensions (pour plus de détails sur l’utilisation de l’outil Découpage, voyez cette page de la documentation officielle Gimp) ; il vous suffit ensuite de cliquer dans la sélection pour réaliser un découpage conforme aux proportions voulues.
Il ne reste plus alors qu’à réduire ce découpage à sa taille définitive, et selon une compression optimisée pour le web. A cet effet, Gimp dispose d’une fonctionnalité très pratique : Fichier -> Enregistre pour le web qui règle tous les paramètres pour vous ; il vous suffira juste de demander le redimensionnement adéquat en indiquant le nombre de pixels souhaités pour la largeur, la hauteur se recalculant alors automatiquement.
Donnez à votre fichier le nom qui vous convient (sans espace, ni caractères spéciaux) ; il est prêt à être intégré comme bannière dans votre page.
NB : si Gimp refuse d’effectuer la commande Enregistre pour le web, voir cette note.2
3. Inclusion de la bannière dans l’entête
Pour inclure votre bannière toute neuve dans l’entête d’une galerie Piwigo, je vous invite à consulter le code fourni dans cet article ; il vous suffira d’adapter les attributs width et height aux dimensions de votre bannière, et d’ajuster éventuellement les paramètres de la bordure selon votre choix.
- le pointeur s’est métamorphosé en croix pour l’opération [↩]
- Il se peut que Gimp refuse d’effectuer la commande Enregistre pour le web en affichant le message « The image is too large for Save for Web » ; procédez alors à un redimensionnement de la photo, par la commande Image -> Echelle et taille de l’image pour la ramener à la taille souhaitée, puis ré-exécutez ensuite la commande Fichier -> Enregistre pour le web. [↩]
Suggestions :
1 – Augmenter le contraste et la luminosité, il faut que ça brille un peu. Une entête sera ce que le visiteur remarquera en premier.
2 – Réduire les dpi, 300 dpi ne servent à rien, 72 dpi seront bien suffisant pour un affichage à l’écran.
3 – Réduire la qualité à 80% sera généralement suffisante, retirer les exifs, la miniature pour alléger l’image au maximum.
1- Question de goût et de couleurs … Je trouverais personnellement dommage que la bannière vole la vedette au reste de la page, a fortiori si elle contient des photos. Pour la petite histoire, j’ai effectivement dans ma galerie une version retouchée de la photo que j’ai utilisée ici : http://www.marie-noelle-augendre.com/photos/picture/3017/category/241-paysages mais j’ai trouvé que l’original s’accordait mieux avec le thème par défaut de ma galerie de démo.
2- et 3- En utilisant la fonction « Enregistrer pour le web », le webmaster n’a même pas besoin de se poser ce genre de questions : Gimp gère tout ça automatiquement.