Formation à la communication digitale et réalisation de sites web à Bordeaux

Traiter des images pour le web avec the gimp

The GimpThe gimp est un logiciel de traitement d’images (comme le célèbre photoshop) libre, gratuit et multi-plateforme (windows, mac, linux). Il est téléchargeable en version française à l’adresse suivante : http://www.thegimp.fr/

L’interface de Gimp

L'interface de Gimp

L’interface de The Gimp est composée de 5 fenêtres. Nous les avons numérotées dans la copie d’écran ci-dessus.

  1. La Boîte à outils : Elle permet de sélectionner un outil en cliquant sur un des boutons icônes. Elle peut aussi contenir les couleurs de premier-plan et d’arrière-plan, les brosses, les dégradés et les motifs.
  2. Les options des outils : Ancrée sous la Boîte à outils, on trouve la fenêtre des options des outils, elle permet de régler les options de l’outil sélectionné.
  3. L’éditeur d’image GIMP : cet éditeur possède en en-tête le Menu des commandes principales : Fichier, Sélection, Édition, Affichage,… que vous pouvez également obtenir par un clic droit sur la fenêtre. Cette fenêtre est, au démarrage, en dessous des 4 autres fenêtres.
  4. Le groupe de fenêtres Calques, Canaux, Chemins : avec l’onglet Calques activé. Il montre la structure des calques de l’image active et permet de les manipuler de diverses manières. Il est possible de travailler sans cette fenêtre, notamment pour un simple travail d’optimisation pour le web mais cette fenêtre devient rapidement indispensable pour les montages photos ou les créations graphiques .
  5. Le groupe de fenêtres Brosses, Motifs, Dégradés :, avec l’onglet « Brosses » activé.

Recadrage des images

Il peut être intéressant de recadrer une image (notamment une photo un peu loupée). Pour cela, sélectionner l’outil recadrage (cutter) :
Gimp recadrage

Pour utiliser l’outil de recadrage cliquer sur l’image et déplacer la souris en laissant le bouton de la souris appuyé pour définir le rectangle de l’image recadrée. Lâcher le bouton de la souris lorsque vous êtes satisfait de votre sélection. Cliquer ensuite dans le rectangle pour réaliser le recadrage.

Les images pour le web

Pour traiter une image nous devons ouvrir une image avec the gimp en utilisant le menu principal de l’éditeur d’image (fenêtre 3). on choisi le menu Fichier > Ouvrir et une fenêtre apparait qui nous permet de sélectionner le fichier image.

Mode RVB
Les images à destination d’internet doivent être en mode RVB. On peut vérifier le mode et éventuellement le changer à partir du menu principal de la fenêtre 3. on choisit le menu Image> Mode :

Taille de l’image et résolution
Il importe aussi de régler la résolution de l’image à 72dpi. Pour cela, on choisi le menu Image> Echelle et taille de l’Image :
Une fenêtre apparait alors pour nous permettre de régler taille et résolution de l’image:
Echelle dans gimp

On peut régler la résolution de l’image à 72  si la résolution est supérieure. On peut aussi régler la taille (longueur et largeur). Par défaut, la longueur et la largeur sont proportionnelles.

Une fois les réglages réalisés, on clique sur le bouton « Echelle » pour appliquer les changements.

choix des formats de fichiers et optimisation

Pour choisir le format d’enregistrement, faire Fichier > Enregistrer Sous. La fenêtre suivant apparaît :
gérer les formats dans gimp

Cette fenêtre permet de renommer le fichier, choisir son emplacement dans le poste de travail.

Pour choisir le format de fichier d’enregistrement, il faut cliquer sur la petite croix en bas de la fenêtre (devant la phrase «Sélectionner le type de fichier (Selon l’extension)»).Cela fait apparaître le choix de format de fichier :
Formats dans gimp

On trouve dans la liste déroulante de nombreux types de fichiers images. Pour le web on s’intéressera principalement au format jpeg pour les photos et le format gif pour les images graphiques avec des aplats de couleur (logo,…).
Une fois le format choisi, on clique sur « enregistrer ». Si on choisit le format jpg, une fenêtre de réglage apparait :

réglage jpg avec gimp

Cocher la case « Afficher l’aperçu dans la fenêtre d’Image ».

Maintenant en faisant varier le curseur « qualité » de la fenêtre on va voir varier le poids du fichier (affiché en dessous du curseur de qualité) et la qualité de l’image dans l’éditeur d’image (fenêtre 3).

Lorsqu’on est satisfait de notre réglage on clique sur enregistrer et la manipulations est terminée.