Travailler avec Gimp

Gimp est un logiciel d'infographie, au même titre que Photoshop. Il offre un peu moins de fonctionnalités, c'est vrai, mais comme il est gratuit, on peut bien lui pardonner.

Malgré ses petites lacunes, Gimp est un logiciel puissant qui vous permettra de créer de superbes maquettes et d'effectuer toutes les retouches désirées sur vos photos.

Fait intéressant : Gimp est capable d'ouvrir et d'éditer les fichiers au format .PSD (Photoshop). Vous aurez donc accès à une quantité impressionnante de matériel mis à votre disposition sur différents sites Web par des communautés de graphistes.

▼Publicité

The GimpInstallation de Gimp

  • Rendez-vous sur le site officiel de Gimp : http://www.gimp.org/
  • Téléchargez la dernière version stable.
  • Suivez les instructions d'installation.

Interface

Contrairement à d'autres logiciels connus, Gimp se compose de plusieurs fenêtres. C'est un peu comme si vous travailliez dans Photoshop sans avoir de fenêtre principale. Chaque fenêtre ouverte serait alors flottante sur le bureau.

Voici les principales fenêtres que vous retrouverez.

  • Il y a d'abord la fenêtre la plus grande, sur laquelle on retrouvera l'image à modifier. Par défaut, il s'agit de la fenêtre de droite.
  • Il y a également la fenêtre « Boîte à outils », située à gauche. Si vous refermez cette fenêtre, toutes les autres fenêtres de Gimp seront refermées.
  • Si vous ouvrez plus d'une image, chacune sera placée dans sa propre fenêtre.
  • Il est également possible d'ouvrir des fenêtres supplémentaires grâce au menu Fenêtres. Une des fenêtres que vous souhaiterez certainement afficher est la fenêtre Calques.

Onglet

Afin d'éviter d'avoir une multitude de fenêtres ouvertes, il est possible d'en regrouper quelques-unes avec des onglets.

  • Si ce n'est pas déjà fait, ouvrez la fenêtre Calques : Fenêtres / Fenêtres ancrables / Calques.
  • Cliquez sur la flèche « Configurer cet onglet ».

    Créer des onglets

  • Choisissez Ajouter un onglet, puis sélectionnez la fenêtre de votre choix.

    Gimp - menu ajouter un onglet

  • Une fois que vous avez ajouté les onglets désirés, placez la Boîte à outils à gauche, vos images au centre et vos fenêtres ancrables à droites. Il s'agit d'une excellente configuration pour faciliter votre travail.

    Interface Gimp configurée

Travailler avec une seule fenêtre

Si vous préférez travailler avec une seule fenêtre, vous pouvez activer l'option de menu Fenêtres / Mode fenêtre unique.

Gimp - interface en une seule fenêtre

Enregistrer sous différents formats de fichiers

Lorsque vous enregistrez votre fichier Gimp, vous ne pouvez pas sélectionner le type de document à créer (document Gimp, .png, .jpg, .gif, etc.). C'est l'extension que vous donnerez à votre fichier qui déterminera le type de document que Gimp créera.

Document au format Gimp (.xcf)

Lorsque vous choisissez l'option de menu Fichier / Enregistrer sous, le fichier sera enregistré au format Gimp et portera l'extension .xcf. Il s'agit du seul format permettant de conserver les différents calques et sélection que vous avez créés. Tous les autres formats ne conserveront que le résultat final obtenu en combinant les calques.

Prenez l'habitude de toujours conserver une copie de votre travail au format .xcf. Au besoin, vous créerez un second fichier au format désiré, tel que .jpg par exemple.

Lors de la création de pages Web, il est d'usage de conserver les fichiers au format Gimp de même que les fichiers originaux (non retouchés) dans un dossier nommé « dev ».

Si vous désirez enregistrer votre image sous un autre format, vous devrez utiliser l'option Fichier / Export As.

Format .png (Portable Network Graphic)

Ce format, qui a fait son apparition sur le Web tardivement, est le nouveau standard pour les images sur le Web.

Il combine les avantages du .jpg et du .gif : fichiers de taille relativement petite et possibilité de transparence. De plus, il permet de définir l'image en 16 millions de couleurs donc offre un excellent rendu des dégradés.

Format .jpg (Joint Photographic Expert Group)

Ce format, qui était autrefois roi et maître, est tout de même encore très utilisé sur le Web puisque les fichiers .jpg sont généralement plus petits que dans les autres formats.

Les images au formt .jpg ne peuvent pas comprendre de zones transparentes. De plus, comme avec la majorité des formats d'images, elles sont compressées. Leur algorithme de compression est très performant, ce qui permet d'obtenir des images avec un poids moins élevé qu'avec les autres formats. 

Format .gif (Graphics Interchange Format)

Les fichiers au format .gif sont de taille un peu plus grosse que les .jpg et les .png. Ils étaient autrefois le seul format qui permettait la transparence. Ils sont désormais délaissés au profit du format .png.

Voici, à titre d'exemple, la taille d'une même image convertie aux différents format, avec ou sans transparence. Prenez note que les performances des différents format peuvent varier selon le niveau de détails présents dans l'image originale : plus l'image contient des détails, moins elle peut être compressée. 

Taille d'une image en format PNG, JPG ou GIF

Sélection

Lorsqu'on apporte des retouches à une image, il est essentiel de savoir sélectionner une partie de l'image. La sélection permettra principalement de :

  • copier ou déplacer une partie de l'image;
  • assurer qu'une modification ne touche que la partie sélectionnée (protègera le reste de l'image);
  • dessiner des formes.

Inutile de vous donner un cours sur la sélection rectangulaire et elliptique. Vous les utiliserez intuitivement sans problème. On s'attardera plutôt à des outils de sélection plus sophistiqués mais tout aussi utiles.

Mode de sélection

D'abord, peu importe l'outil de sélection utilisé, il faut savoir qu'il existe quatre modes de sélection. Vous pouvez choisir le mode de sélection au bas de la boîte à outils, lorsqu'un outil de sélection est activé : Gimp - modes de sélection

  • Le mode normal : dans ce mode, à chaque fois que vous effectuez une sélection, la nouvelle sélection remplace la sélection précédente.
  • Le mode addition : ceci vous permet de faire plusieurs sélections qui s'additionnent les unes aux autres. Vous serez automatiquement en mode addition si vous appuyez sur la touche Maj (Shift) en faisant une sélection.
  • Le mode soustraction : la nouvelle sélection sera retirée de ce qui était sélectionné auparavant. Vous serez automatiquement en mode soustraction si vous appuyez sur la touche Ctrl en faisant une sélection.
  • Le mode intersection : la sélection finale consistera à ce qui est commun entre ce qui était déjà sélectionné et ce qui vient d'être sélectionné.

Outil baguette magique

L'outil baguette magique (Gimp - outil baguette magique) permet de sélectionner les couleurs qui se ressemblent. Afin d'obtenir les résultats voulus, vous pouvez modifier le seuil de tolérance au bas de la boîte à outils. Plus le seuil est élevé, plus le nombre de nuances de couleurs sélectionnées sera important. 

En jouant avec les différents modes et les différents seuils de tolérance, et avec un peu de pratique, il devient relativement facile de sélectionner une fleur comme dans cet exemple :

Gimp - exemple de sélection d'une fleur

Outil lasso

L'outil lasso (Gimp - outil lasso), aussi appelé outil sélection à main levée, permet de sélectionner une partie de l'image en la traçant à l'aide de la souris.

Il est possible de maintenir la souris enfoncée pour faire un tracé continu ou encore de cliquer à différents endroits pour tracer un polygone.

Gimp - outil lasso

Combinaison d'outils

Pour réussir une sélection précise, vous utiliserez la plupart du temps différentes combinaisons. En jouant avec les quatre outils, avec les modes additif et soustractif et avec le seuil de tolérance pour l'outil baguette magique, vous parviendrez à sélectionner exactement ce que vous désirez.

Contour progressif (adoucir la sélection)

Dans la vraie vie, le contour d'une partie d'image n'est jamais tracé de façon aussi nette que lorsqu'on fait une sélection. Pour que le tour de la sélection soit plus naturel, il est possible de lui donner un contour progressif.

  • Effectuez la sélection.
  • Allez dans le menu Sélection / Adoucir.
  • Entrez le nombre de pixels à utiliser pour l'adoucissement.
  • Rien ne semble s'être passé mais si vous changez les couleurs de la sélection ou si vous faites un copier-coller de cette sélection, le résultat sera légèrement estompé.

Dessiner des formes

Le dessin de formes se fait à l'aide d'un des outils de sélection. Les exemples suivants tracent des rectangles mais vous pouvez faire la même chose avec des cercles, des polygones de votre choix (obtenus en cliquant à différents endroits à l'aide de l'outil lasso) ou encore des formes dessinées à main levée.

Dessiner un rectangle plein

  • Utilisez l'outil de sélection rectangulaire pour dessiner un rectangle de la taille de votre choix. Notez que si vous appuyez sur la touche Maj (Shift), vous obtiendrez un carré plutôt qu'un rectangle.
  • Sélectionnez la couleur de votre choix en cliquant sur le rectangle de couleur situé au milieu de la boîte à outils. Dans l'image suivante, il s'agit d'un rectangle noir (couleur d'avant-plan) surplombant un rectangle blanc  (couleur d'arrière-plan). Choisissez ensuite la couleur désirée dans la boîte de dialogue qui apparaît.

    Gimp - choix d'une couleur

  • Cliquez sur l'outil Remplissage (Gimp - outil remplissage) puis cliquez dans la sélection. La couleur choisie remplira le rectangle.

    Gimp - rectangle plein

Tracer le contour d'un rectangle

  • Tracez un rectangle à l'aide de l'outil de sélection rectangle.
  • Sélectionnez la couleur d'avant-plan de votre choix.
  • Dans le menu Édition, choisir Tracer la sélection. Vous pouvez tester les différentes options offertes.

Travailler avec les calques

Un calque est un peu comme une feuille transparente ne contenant qu'une partie de l'image. En superposant les différents calques, on obtient l'image complète.

Il est très avantageux de travailler avec les calques puisque les opérations sur différentes parties de l'image seront facilitées.

Création d'un nouveau calque

Lors de l'ouverture d'une image .jpg, il n'y a qu'un seul calque nommé « arrière-plan ». Pour créer un nouveau calque, cliquez sur l'icône en bas à gauche dans la palette des calques.

Gimp - créer un nouveau calque

Une fois le nouveau calque créé, vous pouvez y ajouter des formes, coller des bouts d'images, etc. Les ajouts feront partie du nouveau calque.

Notez que si vous ajoutez du texte, il sera automatiquement ajouté dans son propre calque.

Attention : quand une image est composée de plusieurs calques, il faut toujours sélectionner le calque sur lequel on désire travailler. La sélection se fait en cliquant sur le calque dans la palette des calques.

Changer l'ordre des calques

Si deux bouts d'image se superposent, il est possible de changer leur ordre simplement en faisant glisser un calque dans la palette des calques. Les calques situés en haut de la liste apparaissent par-dessus les autres.

Gimp - changer l'ordre des calques

Cacher un calque

Il est possible de cacher un calque sans devoir l'effacer. Il suffit de cliquer sur l'oeil situé à gauche du calque dans la palette des calques.

Redimensionner un calque

Si un calque fait toute la dimension de l'image mais que sa majeure partie demeure transparente, il peut être avantageux de réduire la taille du calque à la taille du dessin ou de la partie d'image qu'il contient. Notez que la taille du dessin ou de la partie d'image qu'il contient ne sera pas modifiée. Ceci sera utile, entre autre, lors du découpage d'une maquette Web.

  • Cliquez sur le calque dans la palette des calques.
  • S’il s’agit d’une forme ou d’une image :
    • Sélectionnez le contenu du calque à l'aide d'un outil de sélection.
    • Menu Calque / Rogner selon la sélection.
  • S’il s’agit de texte :
    • Choisissez Calque / Taille des bords du calque / Redimensionner.

Changer l'échelle d'un calque

Cette fois, il s'agit de changer la taille du dessin ou de la partie d'image contenue dans le calque.

  • Cliquez sur le calque dans la palette des calques.
  • Choisissez l'outil Mise à l'échelle (Gimp - outil mise à l'échelle).

  • Faites glisser les bords du calque à la taille désirée puis cliquez sur Échelle.

Déplacer un calque

Lorsque la taille du calque est inférieure à la taille de l'image complète, il est possible de le déplacer.

  • Cliquez sur le calque dans la palette des calques.
  • Choisissez l'outil Déplacement (Gimp - outil déplacement).
  • Faites glisser le calque sur l'image.

Copier une partie d'image dans une autre image

  • Dans la palette de calques, sélectionnez le calque contenant la partie à découper.
  • Sélectionnez la partie à découper. Au besoin, adoucissez les bords de la sélection afin d'obtenir un résultat plus naturel.
  • Ctrl+C
  • Ouvrez l'image où la sélection doit être copiée.
  • Créez un nouveau calque.
  • Ctrl+V
  • Une fois la sélection copiée, vous devez ancrer le calque en cliquant sur l'icône Ancre (Gimp - outil ancre) au bas de la palette des calques.
  • Si vous souhaitez que le calque prenne exactement la dimension de l'image copiée, faites Calque / Découpage automatique du calque.

Découper une image

Lorsqu'on désire créer un site Web à partir d'une maquette, il faut créer un nouveau fichier pour différentes parties de l'image originale. Cette étape s'appelle « découper la maquette ».

Pour créer une image à partir d'une partie de l'image complète : 

  • Si la zone à découper est dans son propre calque :
    • Sélectionner le calque dans la palette des calques.
    • Ctrl+C
    • Édition / Coller comme / Nouvelle image.
  • Si la zone à découper n'est pas dans son propre calque ou si elle est composée de plusieurs calques (ex : image avec ombrage) :
    • Technique 1 :
      • À l'aide de l'icône d'oeil dans la palette des calques, cacher tous les calques qui ne doivent pas faire partir de l'image finale. Ne pas oublier de cacher le fond d'écran si on désire que l'image ait de la transparence.
      • Optionnel : utiliser un des outils de sélection (Gimp - outils de sélection) pour sélectionner ce qui devra faire partie de la nouvelle image.
      • Fichier / Exporter
      • Donner à l'image un nom se terminant par .PNG ou par .JPG 
      • Si vous n'aviez rien sélectionné, l'image créée aura les mêmes dimensions que la maquette. Si vous désirez que l'image soit moins grande, vous pouvez l'ouvrir à nouveau dans Gimp et la découper à l'aide de l'outil de découpage (Gimp - outil découpage).
    • Technique 2 :
      • Assurez-vous que l'image à découper apparaît en entier.
      • Si elle doit avoir un fond transparent, cachez les calques dont le contenu est sous l'image à découper.
      • Assurez-vous que rien n'est sélectionné (Sélection / Aucune).
      • Édition / Copier visible
      • Édition / Coller comme / Nouvelle image.

Déplacer une zone de texte

Le déplacement de texte sera difficile si vous ne prenez pas les précautions suivantes :

  • Si on clique au mauvais endroit, c'est le fond qui sera déplacé.
  • Il faut cliquer exactement SUR une lettre du texte et non à côté.
  • Vérifier l'icône du poiteur de la souris.
    • Si c'est une croix blanche, il indique que le texte sera déplacé.
    • Si c'est une main avec une croix noire, c'est le fond qui bougera.

Rogner une image (recadrer)

Pour enlever une partie des bords de l'image de façon à mieux centrer le contenu :

  • Choisissez l'outil Découpage (Gimp - outil découpage).
  • Encadrez la partie de l'image que vous désirez conserver.

    Gimp - rogner une image

  • Cliquez à l'intérieur du cadre que vous venez de dessiner.

Correction des couleurs

Pour changer les couleurs d'une partie de l'image en respectant les dégradés de l'image originale :

  • Sélectionnez la partie d'image à modifier.
  • Menu Couleurs / Coloriser (et non Colorier).
  • Pour choisir la nouvelle couleur à utiliser, cliquez sur le rectangle Couleur personnalisée puis :
    • Si la nouvelle couleur à utiliser fait partie de l'image :
      • Choisissez l'outil Pipette (Gimp - outil pipette).
      • Cliquez sur l'icône à droite de la zone Notation HTML.

        Gimp - coloriser

      • Cliquez ensuite sur un pixel de l'image contenant la couleur désirée.
      • Cliquez sur Valider dans la boîte de dialogue Coloriser, couleur personnalisée. Gimp montre un aperçu du résultat.

        Gimp - coloriser - aperçu

      • Cliquez finalement sur Valider dans la boîte de dialogue Coloriser. Le changement de couleur est maintenant effectif.
    • Si la nouvelle couleur à utiliser ne fait pas partie de l'image, entrez son code HTML ou sélectionnez la couleur à l'aide du sélecteur de couleur. Cliquez ensuite sur Valider puis à nouveau sur Valider.

Colorisation sépia

Pour obtenir une image de style vieillot, on peut lui donner une colorisation sépia. Il s'agit d'une image noir et blanc à la quelle on a ajouté un peu de jaune.

  • Ouvrez l'image de votre choix dans Gimp.
  • Si vous souhaitez que l'image entière soit sépia, assurez-vous qu'aucune partie de l'image n'est sélectionnée (Sélection / Aucune).
  • Menu Couleur / Désaturer puis choisir Moyenne. L'image est maintenant en noir et blanc.
  • Menu Couleur / Balance des couleurs puis diminuer les taux de cyan et de jaune jusqu'à l'obtention du résultat désiré.

    Gimp - coloration sépia

Ajouter de la transparence

Toutes les images sont rectangulaires. Chacun des pixels est composé d'une combinaison de trois canaux de couleurs : Rouge, Vert et Bleu. Problème : aucune combinaison de ces trois couleurs ne peut créer de la transparence.

Pour créer de la transparence, un canal supplémentaire est donc nécessaire : le canal Alpha.

  • Dans la palette des calques, si le nom du calque d'arrière-plan apparaît en gras, c'est qu'il ne possède pas de canal Alpha.
  • Clic droit sur le calque, Ajouter un canal Alpha.
  • Sélectionnez la zone à rendre transparente.
  • À l'aide de l'outil Gomme (Gimp - outil gomme), effacez la zone sélectionnée.
  • Au besoin, recadrez l'image.

    Gimp - image avec transparence

  • Enregistrez l'image sous un format qui supporte la transparence (.gif ou .png). N'oubliez pas de conserver une copie de l'image au format Gimp.

Pour plus d'information

« Learn GIMP: From Greenhorn to Guru in 19 Lessons ». Sitepoint. http://www.sitepoint.com/learn-gimp

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories