Comment réaliser une vignette pour une page web

Coécrit par l'équipe de wikiHow

Sur une page web, les vignettes sont de petites images qui le plus souvent cachent un lien menant vers une autre page du site. Elles sont faciles à réaliser, car il s'agit ni plus ni moins que d'une image qui a été réduite. Pour cette opération, il faut un logiciel de dessin ou de retouche d'images.

Méthode 1

Méthode 1 sur 3:
Avec MS Paint (Windows)

1
Exécutez MS Paint. L'icône de Paint est une palette de peintre accompagnée d'un pinceau. Pour l'exécuter, opérez de la façon suivante :
- cliquez sur le menu Démarrer dans le coin inférieur gauche ;
- tapez Paint ;
- cliquez sur le premier résultat.
2
Ouvrez l'image dont vous voulez une vignette. Pour ce faire, vous allez procéder de la façon suivante :
- cliquez sur Fichier dans le coin supérieur gauche ;
- cliquez sur Ouvrir ;
- sélectionnez une image ;
- cliquez sur Ouvrir.
3
Faites une copie de votre image de départ. Vous n'avez pas besoin de transformer l'image originelle, il faut la copier en lui donnant un nom évocateur du genre image_vignette.jpg. Ainsi, si vous vous trompez, vous aurez toujours l'image de départ. La copie d'une image est très facile à réaliser :
- cliquez sur Fichier ;
- cliquez sur Enregistrer sous ;
- tapez le nom de la copie dans le champ Nom du fichier ;
- cliquez sur Enregistrer.
4
Cliquez sur Redimensionner. En haut de l'écran, à gauche, cherchez le groupe Image et dans celui-ci, l'onglet Redimensionner.
5
Cliquez sur le bouton radio Pourcentage. Cette possibilité vous est offerte sur la première ligne de la fenêtre Redimensionner et incliner.
6
Tapez le pourcentage final voulu. En général, pour une vignette, les 2 dimensions (Horizontal et Vertical) doivent être ramenées à 10 % de la taille initiale de l'image. Plus l'image est grande au départ, plus le pourcentage sera faible.
- Une autre possibilité vous est offerte en cliquant sur l'autre bouton radio Pixels, c'est vous qui fixez en pixels les deux dimensions de votre vignette.
7
Cliquez sur OK. Votre image est maintenant réduite aux dimensions désignées.
8
Enregistrez la vignette. Il ne reste donc plus qu'à enregistrer votre copie de l'image de départ selon la méthode suivante :
- cliquez sur Fichier ;
- cliquez sur Enregistrer.
Publicité

Méthode 2

Méthode 2 sur 3:
Avec Aperçu (macOS)

1
Exécutez votre image de départ dans Aperçu. Aperçu est le programme de visualisation natif sous macOS. Il suffit de doublecliquer sur l'image en question pour qu'elle s'affiche à l'écran.
2
Dupliquez l'image. Il ne faut pas modifier l'image originelle afin de la retrouver en cas d'erreur de manipulation. Pour avoir une copie de l'image, opérez comme suit :
- cliquez sur Fichier en haut et à gauche dans la barre de menus générale ;
- sélectionnez Dupliquer.
3
Cliquez sur Outils. C'est le cinquième menu de la barre des menus. Il faut absolument que l'image copiée soit au premier plan (image active).
4
Sélectionnez Ajuster la taille. C'est la quatrième option de la liste Outils.
5
Sélectionnez pour cent. Cette liste déroulante est commune aux deux dimensions (hauteur et largeur).
6
Tapez le pourcentage voulu. Remplacez le pourcentage par défaut (100 %) par la taille définitive voulue. Pour une vignette, 10 % conviennent généralement. Ne modifiez qu'une seule des 2 dimensions, l'autre est automatiquement modifiée.
- Avec la liste déroulante, il est aussi possible de régler l'image en pixels (pixels), en centimètres (cm) ou en millimètres (mm).
7
Cliquez sur OK. À l'écran s'affiche la vignette voulue.
8
Enregistrez l'image. Pour pouvoir la repérer facilement, donnez-lui un nom évocateur comprenant le nom de l'image d'origine complétée de façon non équivoque (mariage1_min.jpg ou mariage1_vig.jpg). Pour l'enregistrement, opérez ainsi :
- cliquez sur Fichier ;
- cliquez sur Enregistrer ;
- tapez le nom de la vignette dans le champ Enregistrer sous ;
- cliquez sur Enregistrer.
Publicité

Méthode 3

Méthode 3 sur 3:
Avec Photoshop et GIMP

1
Exécutez Photoshop ou GIMP. L'on ne présente plus Photoshop, le logiciel leadeur sur le marché de l'édition et de la retouche d'images. Il est disponible sur abonnement sur le site d'Adobe. Très similaire, il existe un logiciel gratuit en code ouvert, GIMP, lequel est téléchargeable sur le site de… GIMP.
2
Ouvrez l'image que vous voulez réduire. Pour les deux programmes, la procédure est la même, à savoir :
- cliquez sur Fichier dans le coin supérieur gauche ;
- cliquez sur Ouvrir ;
- sélectionnez l'image de base ;
- cliquez sur Ouvrir.
3
Faites une copie de l'image. Il ne faut pas modifier l'image originelle afin de la retrouver en cas d'erreur de manipulation. Il faut faire une copie de l'image et lui donner un nom évocateur comprenant le nom de l'image d'origine complétée de façon non équivoque (paysage1_min.jpg ou paysage1_vig.jpg). La procédure est la suivante :
- cliquez sur Fichier ;
- cliquez sur Enregistrer sous ;
- tapez le nom de la vignette dans le champ Nom du fichier ;
- cliquez sur Enregistrer.
4
Redimensionnez l'image. Dans les deux programmes existe un outil de mise à l'échelle. Il suffit de cliquer sur cet outil pour pouvoir ensuite et dans ce cas précis, réduire les dimensions de l'image. Le symbole de cet outil est deux angles droits formant un carré, agrémenté ou non d'une flèche double. Pour redimensionner, procédez comme suit :
- cliquez sur l'outil de mise à l'échelle dans la barre d'outils du programme ;
- cliquez dans un coin de la zone à garder, puis faites glisser le curseur de la souris pour sélectionner toute la zone ;
- doublecliquez sur cette partie.
5
Cliquez sur Image. C'est le troisième (Photoshop) ou le cinquième menu (GIMP) de la barre générale des menus en haut de l'écran.
6
Cliquez sur Taille de l'image (Photoshop). Avec GIMP, cliquez sur
Échelle et taille de l'image. Dans les deux cas, une fenêtre de redimensionnement apparait.
7
Sélectionnez %. Choisissez cette option dans les deux listes déroulantes se trouvant à droite de Largeur et Hauteur.
8
Tapez à gauche le pourcentage voulu. Pour une vignette, indiquez une valeur aux alentours de 10 %. Cliquez dans le champ Hauteur, tapez 10, puis faites de même avec Largeur. D'une image à l'autre, le pourcentage pourra varier.
- Dans les listes déroulantes des deux dimensions principales, nous avons choisi comme exemple le pourcentage, mais il est aussi possible de choisir les dimensions en pixels ou en centimètres.
9
Cliquez sur OK (Photoshop) ou Échelle (GIMP). Voilà ! Votre image est redimensionnée selon vos choix.
- Vous pouvez modifier la saturation de votre image. Avec GIMP, vous irez dans le menu Couleurs, puis Teinte-saturation et avec Photoshop, dans le panneau de droite Réglages, cliquez sur l'icône Teinte/Saturation.
- Il est également possible d'appliquer un filtre à votre image. Pour cela, vous irez dans le menu Filtres (GIMP et Photoshop) et là, vous choisirez une galerie, puis un filtre.
10
Enregistrez votre vignette. Pour cela, rien de plus simple, si vous savez déjà enregistrer. Pour rappel, la procédure est la suivante :
- cliquez sur Fichier ;
- cliquez sur Enregistrer sous (Photoshop) ou Exporter sous (GIMP) ;
- dans le menu déroulant Format, sélectionnez le format JPEG (Photoshop) et dans la liste Sélectionner le type de fichier, sélectionnez JPEG (GIMP) ;
- cliquez sur Enregistrer (Photoshop) ou Exporter (GIMP).
Publicité

Conseils

À titre de comparaison, les vignettes de YouTube sont au format 1280 × 720 (sous-entendu pixels).

Avertissements

Ne travaillez jamais sur l'image de départ, mais toujours sur une image dupliquée. Ainsi, en cas d'erreur de redimensionnement, vous aurez toujours l'image de départ.