Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Apprendre à utiliser GIMP et Créer du contenu visuel 2D basique.

Par Thibault HOARAU Publié le 26/09/2017 à 12:27:51 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Qu'est-ce que GIMP, et qu'est-ce que cela peut m'apporter ?

  • Qu'est-ce que GIMP ?

GIMP est un logiciel d'édition d'image. Si cela peut vous aider à comprendre ce qu'est un logiciel d'édition d'image, Paint en est un également, bien qu'il possède moins d'outils mis à disposition de ses utilisateurs.

Le gros plus de ce logiciel est qu'il est Open Source, ce qui signifie qu'il est complètement gratuit d'une part, mais également qu'on peut modifier sa structure, et la redistribuer.

Ce dernier point a permis la création de plugins (ou greffons) permettant des ajouts de contenu à ce logiciel. (Ce contenu peut-être des outils, des formes...)

  • Pour quelles raisons devrait-on s'y intéresser ?

En utilisant GIMP, il est possible de modifier, d'ajuster des images selon nos désirs.

Les outils mis à disposition sont précis, bien qu'il soit nécessaire de s'y habituer pour pouvoir s'en servir correctement.

On peut également s'en servir pour créer ce qu'on appelle des Sprites.

Un Sprite est un élément graphique d'un jeu, il peut être un élément du décor ou un personnage, tout cela dans un univers 2D.

Bien entendu, ceci n'est qu'un exemple parmi tant d'autres de ce que vous pouvez réaliser à partir de ce logiciel.

  • Pourquoi aurais-je besoin de GIMP si je possède déjà Paint ?

Effectivement, comme je l'ai précisé précédemment, GIMP, comme Paint, est un logiciel d'édition d'image.

Cependant, GIMP est capable de gérer ce qu'on appelle la transparence. C'est à dire qu'il est possible par exemple d'obtenir une image d'arbre que l'on pourra coller sans soucis sur un fond existant, sans devoir faire face au fond blanc derrière l'arbre.

J'ai été confronté à ce petit soucis avec Paint dès lors que j'ai souhaité créé des images pour une application.

GIMP avec la gestion de calques permet donc de gérer la transparence des images sous le format .png.

  • En quoi est-ce un plus de maitriser un logiciel d'édition d'image ?

Eh bien, que ce soit dans la vie de tous les jours, pour éditer une photo de famille, ajuster des yeux rouges sur une photo, ou faire disparaître des éléments indésirables;

ou alors dans un milieu professionnel, faire de la création de contenu, que vous soyez dans le domaine informatique, commercial, libéral, il peut toujours être utile de savoir éditer des images.

De plus il arrive souvent qu'une image nécessite une légère modification, et en maitrisant un minimum ce logiciel, il vous suffira de peu de temps pour le modifier vous-même plutôt que de le renvoyer à celui qui l'a créée.

Bien entendu, Adobe Photoshop est un éditeur d'image bien plus efficace pour modifier et ajuster des images selon notre volonté, cependant c'est un logiciel payant, à l'opposé de GIMP.

  • Que va-t-on voir de ce logiciel au fil de cet article ?

Cet article va nous permettre de commencer à utiliser GIMP avec quelques manipulations basiques d'images, pour permettre à tout public de se servir de ce logiciel.

L'intérêt est également de montrer l'efficacité de GIMP dans certaines situations, et le potentiel qu'il possède en effectuant des actions simples, comme enlever des yeux rouges sur une photo, gérer la luminosité, le contraste d’une photo, et modifier la couleur de certains éléments d’une image.

Nous observerons également comment créer un GIF animé à partir d’images existantes.

Nous terminerons l'article en montrant un outil très simple de GIMP permettant la création de logo, boutons et autres rendus vraiment sympathiques pour du webdesign, ou même pour des applications de manière générale.

Quelques conseils seront également présents à la fin de l’article, concernant le fonctionnement des droits de propriétés d’une image, et l’importance de se servir d’une image dite « Open Source ».

Sommaire

  • Obtenir et Installer GIMP

  • Informations complémentaires

  • Utilisations simples de GIMP

  • Création d'un GIF animé

  • Création de Contenu (Logo/éléments Web...)

  • Une image dite "Open Source" ?

Obtenir et Installer GIMP

  • Télécharger GIMP

Pour obtenir GIMP2, il vous suffit de vous rendre sur le site http://www.gimp.org.

Une fois sur le site, il vous suffira de cliquer sur l'icône rouge " Download ", comme sur l'image ci-dessus.

Le site vous redirigera ensuite vers sa page de téléchargement.

Sur cette page, vérifiez bien que la version proposée correspond bien à votre OS (sur cette image, l'OS est Windows).

Si oui, il vous suffira ensuite de cliquer sur l'icône orange pour télécharger directement GIMP.

Autrement, il vous faudra cliquer sur le nom de l'OS que vous utilisez juste au-dessus de ces icônes.

  • Installer GIMP

Suite à votre téléchargement, vous possédez désormais l'exécutable d'installation de GIMP.

Il vous suffit tout simplement de double cliquer sur celui-ci, de sélectionner votre Langue, et de cliquer sur "Installer".

Vous possédez désormais la dernière version de GIMP, et il est prêt à l'utilisation !

Informations complémentaires

Comme je l'ai mentionné auparavant, cet article ne mentionne pas la totalité des fonctionnalités de GIMP, mais uniquement une infime partie de son potentiel.

C'est pourquoi je vous invite à vous renseigner par vous-même si vous souhaitez observer ce potentiel et aller plus loin avec le logiciel.

Il existe également d'autres articles Supinfo concernant GIMP, c'est pourquoi si l'un d'eux vous intéresse, en voici les liens :

- Une présentation globale des outils, par Alexandre Martin : https://www.supinfo.com/articles/single/1148-gimp .

- Un tutoriel pour créer des images interactives en HTML, par Clément Boyer : https://www.supinfo.com/articles/single/2823-creer-une-image-interactive-html-avec-gimp .

- Un tutoriel pour effacer un élément d'une photo, par Ludovic Ceccarelli : https://www.supinfo.com/articles/single/825-effacer-element-une-photo-avec-gimp .

Utilisations simples de GIMP

Correction des yeux rouges sur une Photo

La modification de photo la plus courante est bien entendu la correction des yeux rouges, causée par le flash de l’appareil dans un lieu sombre. Sur GIMP, il existe un outil totalement adapté à la correction des yeux rouges.

Prenons comme point de départ la photo suivante :

Nous allons donc ouvrir cette photo avec GIMP pour l’éditer.

Ensuite, en cliquant sur l’outil de Sélection (Visible sur l’image ci-dessous), vous allez entourer la zone rouge que vous souhaitez traiter.

Si vous ne voyez pas la barre d’outils comme sur l’image précédente, il vous suffit d’aller dans « Outils », puis cliquer sur « Boîte à outils », ou alors tout simplement d’utiliser le raccourci ‘Ctrl + B’.

Après avoir sélectionnée l’œil rouge, il vous suffit de cliquer sur « Filtres », sur « Améliorations », et enfin sur « Suppression des yeux rouges… »

Suite à cela, vous verrez apparaître l’outil de Suppression des yeux rouges, dans lequel vous pourrez avoir un aperçu de la modification, selon le seuil choisit. Plus le seuil est élevé, plus le rouge est effacé.

Il vous suffira donc à partir d’ici, de trouver le seuil qui vous paraît parfait.

Après avoir choisi le seuil voulu, il suffit de cliquer « Valider ».

Réitérer ensuite l’opération pour l’autre œil, et le tour est joué !

Edition du Contraste / Luminosité

Pour éditer le contraste et la luminosité d’une photo, chercher dans la barre d’outils en haut de l’écran, cliquez sur « Couleurs », puis sur « Luminosité-Contraste ».

Vous pouvez désormais glisser le curseur pour ajuster à vos soins ces paramètres.

Colorier une image / Changer certaines couleurs d'une image

GIMP possède un outil pour colorier une image d’une teinte, il suffit de chercher une nouvelle fois sous « Couleur » et cliquer sur « Colorier… ».

Grâce à celui-ci, nous pourrons choisir une teinte de couleur, sa saturation ainsi que sa luminosité.

Cet outil fonctionne exactement comme l’outil « Luminosité-Contraste », son utilisation ne devrait donc pas vous poser de soucis.

Cependant, si nous souhaitons modifier la couleur sur une image, cette outil seul ne suffira pas.

En prenant pour exemple une image d’une fleur, qui est d’un jaune éclatant, nous allons essayer de la faire passer à un rose léger :

Voici le résultat lorsque nous n’utilisons que « Colorier » pour atteindre notre résultat :

On constate que l’image entière a été colorée de la couleur rose, qui donne un aspect très sympathique à notre photo, et qui pourrait tout aussi bien nous servir de fond d’écran.

Cependant, il vous arrivera souvent de vouloir que le reste de l’image garde sa propre couleur, et que l’intégralité de votre photo ne soit pas sous l’emprise d’un filtre unicolore.

Pour réaliser cette modification de manière efficace, nous allons utiliser l’outil de sélection par couleur, qui est disponible dans la boîte à outils (Si vous ne l’avez plus, il est expliqué au début de l’article comment la récupérer).

Après l’avoir sélectionné, il vous suffit d’effectuer un clic droit sur la couleur que vous souhaitez remplacer, et glisser votre souris vers le bas en maintenant le clic appuyé. Cette action permettra de gérer le seuil de sélection de la couleur, c’est-à-dire jusqu’à quel ton d’un « jaune » dans notre cas, GIMP va prendre en paramètres.

Une fois cette sélection effectuée, sans cliquer ailleurs au risque de la perdre, il vous suffit d’aller dans la barre de tâches en haut de votre écran, et de cliquer une nouvelle fois sur « Couleurs » puis sur « Colorier… », et à vous de jouer !

Une petite image pour vous montrer l’un des résultats possibles :

Création d'un GIF animé

Avant de vouloir créer un GIF animé, il est essentiel d’avoir des images qui se succèdent et qui nous permettront, à leur succession, d’avoir une impression de mouvement.

Les images utilisées dans la création du GIF proviennent du Sprite de cette page : https://ansimuz.itch.io/hell-hound-sprite-animation .

Facile à dire, mais comment en trouver autrement ? Eh bien, ce point sera traité dans la dernière partie de l’article, donc pour le moment concentrons-nous sur les images suivantes, et non sur leur provenance :

Lorsque vous obtiendrez un Sprite, il arrivera très souvent que toutes ses images soient simplifiées en une seule. Ici, par exemple, le Sprite est composé de 5 images d’animations.

Pour le découper, il vous suffira d’aller sur GIMP, d’utiliser notre « outil de découpage » qui vous permettra de rogner les images individuellement, et de les sauvegarder une par une.

Comment savoir où rogner ? C’est très simple, une animation est faite d’image de même taille, il suffit donc de regarder la taille en pixels du Sprite (Ici 335 en largeur) et de le diviser par le nombre d’images présentes (Soit 335 / 5, ce qui nous donne 67pixels par image).

Bien entendu, le calcul se fait de la même façon si l’image se situe sur plusieurs lignes et colonnes. Une fois que vous avez séparés chacune des images du Sprite comme ci-dessous :

Ouvrez GIMP, et en allant cliquer sur « Fichier », puis « Ouvrir en tant que calques », vous allez ouvrir une par une chacune des 5 images de l’animation, en prenant soin de le faire dans l’ordre de cette animation.

Une fois cette opération finie, vous pouvez avoir une prévisualisation du GIF animé que vous allez obtenir, cliquez sur « Filtres », « Animation » puis sur « Rejouer l’animation… ».

Vous arriverez donc sur la fenêtre suivante :

Ici, vous pourrez cliquer sur « Lire », afin de voir l’animation se jouer, et les images se succéder. « Pas » vous permettra d’avancer image par image, et « Rembobiner » vous ramènera à la première image de l’animation.

En dessous de l’image, la liste déroulante contenant le « 1x » permet de gérer la vitesse à laquelle se déroule l’animation, et celle de « 10fps » permet de choisir la fréquence à laquelle apparaît chaque image.

Après avoir confirmé que tout fonctionne, revenez à la page GIMP contenant les filtres que vous avez ajouté. Avant de sauvegarder cette animation, vous allez cliquer sur « Filtres », « Animation », et cette fois-ci sur « Optimiser (pour GIF) ». Cela permettra de réduire l’espace que prendra le GIF.

Pour sauvegarder l’animation, dans la nouvelle fenêtre qui s’est ouverte à l’optimisation, cliquez sur « Fichier », puis « Exporter sous… ».

Choisissez ensuite le format « GIF », choisissez l’endroit où vous souhaitez sauvegarder votre fichier, et cliquez sur « Exporter ».

La fenêtre suivante va alors s’ouvrir :

Vous pouvez ici gérer si vous le souhaitez le délai entre chaque image, si vous souhaitez le faire, n’oubliez pas de cocher « Utiliser le délai saisi ci-dessous pour toutes les images ».

Cliquez ensuite sur Exporter, et voilà, vous avez obtenu votre propre GIF !

Création de Contenu (Logo / éléments Web…)

Dans cette partie, nous allons nous intéresser à l’ensemble des outils de GIMP qui se situe sous « Fichier », puis sous « Créer ».

Regardons ce que nous pouvons créer, en procédant dans l’ordre de proposition :

La création de Boutons.

  • Le bouton arrondi

  • Le simple bouton biseauté

- Le bouton arrondi

Le bouton arrondi, dont on peut choisir les caractéristiques, et qui donnera 3 images à sa validation. On constate que l’on choisit son texte, sa police, puis ses couleurs, et ses couleurs actives. Comment interpréter ce que sont les « couleurs actives » ?

Eh bien, cet outil permet de créer des boutons pour des pages internet, l’intérêt est donc d’avoir des boutons qui réagissent lorsqu’ils sont survolés par le curseur de notre souris, ou lorsqu’on clique sur eux. Ainsi, ils ont trois états : normal, survolé par le curseur, et cliqué.

Ci-dessus un aperçu du rendu après validation d’un bouton arrondi.

- Le simple bouton biseauté

Le terme biseauté désigne un aspect comme celui d’une pierre taillée, avec une allure qui se réduit sur la distance horizontale, ici cela décrira un bouton avec un dégradé de couleur de sa bordure gauche à sa bordure droite, avec une légère impression d’épaisseur du bouton.

Ci-dessus un aperçu du rendu après validation d’un simple bouton biseauté.

La création de Logos.

En ce qui concerne la création de logo avec GIMP, nous n’allons pas détailler la totalité des possibilités de créations, car la liste est longue. Je vous ai donc fait un petit aperçu des dix premiers effets existants dans leur ordre respectif sur la liste.

Je vous invite à tester chacun des effets existant si vous souhaitez créer un logo, la prise en main est très simple, et ne prend que très peu de paramètres, ce qui permet à quiconque le souhaite de créer son logo unique.

« New Brush from Text… »

Ce qui signifie, nouvelle brosse à partir d’un texte. En effet, cet outil vous permet de transformer une suite de caractère en une brosse que vous pourrez utiliser sur GIMP afin de disposer les lettres comme vous le souhaiter. Laissez-moi illustrer mes propos :

Commençons par cliquer sur l’outil, on crée ensuite notre brosse, en choisissant la police et le texte :

Ensuite, sélectionnez l’outil « Crayon », et allez dans l’options des outils, et choisissez votre nouvelle brosse, correspondant à la première lettre de votre phrase.

En gardant l’outil « Crayon », vous pouvez maintenant écrire vos lettres avec la forme que vous souhaitez, un outil qui peut paraître anodin, mais qui peut toujours être utile !

Création de Motifs

Vous avez également dû le constater, GIMP permet de créer des motifs.

Voici la liste des motifs que vous pouvez créer :

Un aperçu de tous les motifs que ces algorithmes vont vous permettre de créer :

Les plus intéressants de ces motifs restent pour ma part, « Rendre un terrain » et « Terre » qui génère totalement aléatoirement une image qui ressemble à une carte, et qui pourrait servir à quelqu’un qui veut développer un jeu…

Création propre aux Thèmes de page Web

La création de petites images utiles aux pages Web est également possible, et cela avec deux caractéristiques différentes, soit une « Lueur extérieure », soit un « Motif biseauté ».

Un aperçu du contenu des images avec l’effet « Lueur extérieur » :

Un aperçu du contenu des images avec l’effet « Motif biseauté » :

Une image dite « Open Source » ?

Qu'est ce qu'une image « Open Source » ?

Par définition, ce qu’on appelle image « Open Source » signifie qu’un programme est distribué avec une licence permettant à qui le souhaite de le lire, le modifier, et le redistribuer comme il le souhaite. C’est exactement le cas de GIMP lui-même.

Quel est l’intérêt de ce statut ? Eh bien, il signifie que l’image en question peut vous servir à des fins commerciales et personnelles par exemple !

Imaginons que vous souhaitez vendre un jeu, mais que dans celui-ci vous utilisez le personnage créé par une autre personne, et cela, sans son accord. Cependant, cette personne possède des droits sur sa création, et s’il le souhaite peut vous poursuivre pour demander dommage et intérêts, car vous profitez de son œuvre pour faire du bénéfice.

Non seulement cela peut vous coûter cher, mais sachez que si vous êtes en tort, vous paierez également le prix que cela a coûté à l’auteur de rendre justice, c’est-à-dire les frais d’avocats et autres dépenses.

Comment éviter ce genre de risques ?

Il suffit tout simplement d’utiliser des images dont vous êtes sûr de la source, ou vous servir d’images présentes sur des sites qui distribuent uniquement du contenu Open Source.

Par exemple:

  • Si vous cherchez des images, je vous propose de consulter le site : https://pixabay.com/fr/

  • Si vous êtes à la recherche d’assets pour la création de votre jeu, vous pouvez consulter le site suivant, auquel vous trouverez même des assets gratuits : https://itch.io/game-assets/free

Cependant, peu importe l’endroit où vous chercher, garder en tête le fait que vous devez vérifier la source, et que le copyright correspond bien à ce que vous recherchez. N’hésitez pas également à vous renseigner sur les droits d’auteur et leur fonctionnement particulier.

Que peut-on en conclure ?

Certains auteurs peuvent mettre à disposition une image gratuitement, cependant refuser son utilisation dans une activité commerciale, et vous ne devez pas aller à l’encontre de leur volonté.

Il est maintenant libre à vous de créer, modifier, et sculpter votre contenu, amusez-vous !

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels