Rendre transparent le fond d'une image dans Gimp

303

J'ai quelques images au format jpg et il me faut pour chacune d’elles un fond transparent.

J'ai GIMP comme outil graphique.

J'ai besoin de les mettre dans une page Web et de ne voir que l'élément principal et d'avoir un arrière-plan transparent.

Alto
la source
Vous venez de comprendre que si vous êtes sur un Macbook, vous devez appuyer sur fn-deleteaprès avoir sélectionné la baguette magique;) la suppression ne fonctionne pas d'elle-même.
Ben

Réponses:

307

Pour développer la réponse de utopicam , votre image peut parfois contenir des zones, telles que des ombres, que vous voudriez que soient semi-transparentes. Par exemple, supposons que vous ayez une photo prise dans une lightbox, comme cette jolie photo sous licence libre d'un cheval-jouet en bois suédois, gracieuseté de Creative Tools :

Une photo d'un cheval jouet Dalekarlian dans une lightbox, sous licence CC-By 2.0 par Creative Tools

En général, la première étape consiste à ajuster les niveaux de l'image jusqu'à ce que l'arrière-plan devienne vraiment blanc, à l'exception des ombres et des reflets que nous souhaitons conserver. (Vous pouvez également utiliser cette technique avec un arrière-plan gris ou coloré, mais il est un peu plus difficile d'obtenir de bons résultats de cette façon.) Dans ce cas, l'image est déjà bien ajustée, nous n'avons donc rien à faire à ce sujet.

L'étape suivante consiste à sélectionner l'arrière-plan. C’était assez facile à faire avec l’ outil Baguette magique , bien que j’ai dû corriger certaines zones où les bandes blanches de l’objet se confondent avec l’arrière-plan avec l’ outil Lasso . De plus, une fois le fond bien sélectionné, j’ai élargi la sélection de quelques pixels (en pleine résolution) pour éviter de laisser un halo blanchâtre autour de l’objet, du fait d’un aliasing. (Vous ne pouvez pas le voir dans cette capture d'écran réduite, mais j'ai vraiment réussi à faire un très bon travail avec la sélection, si je puis me permettre de le dire moi-même.)

Même image avec l'arrière-plan sélectionné

Maintenant, voici le truc : au lieu de simplement couper le fond, j'ai utilisé CouleursCouleur en Alpha pour changer la couleur de fond (blanc) en transparent. (Vous pouvez également utiliser le remplissage de seau avec le mode d'effacement de couleur, comme le suggère utopicam.) Si vous appliquez à l'ensemble de l'image, l'objet paraîtra également semi-transparent, mais comme seul l'arrière-plan est sélectionné, les ombres deviennent translucides tant que l'objet lui-même reste opaque:

Image après avoir appliqué Color to Alpha

Et voici la même image sur un fond bleu pâle, pour mieux montrer les ombres et les reflets semi-transparents:

Même image sur fond bleu pâle

Une astuce supplémentaire que je n’ai pas montrée est qu’il est souvent plus pratique de faire deux copies du calque d’image, de convertir la sélection en masque de calque sur le calque supérieur et d’appliquer Couleur à Alpha au niveau inférieur. Cela vous permet d'affiner les contours de l'objet en modifiant le masque tout en visualisant en direct l'aspect du résultat. (Astuce: créez quelques calques d'arrière-plan de couleurs différentes pour pouvoir facilement vérifier l'aspect de l'image sur différents arrière-plans.) En particulier, il est parfois plus simple de mettre en surbrillance les zones claires autour des bords de l'objet. plus naturel, car il imite le fond reflétant sur l'objet.

Ilmari Karonen
la source
1
the first step would be to adjust the levels of the image until the background really is solid white- Comment faire exactement cela devrait être inclus pour nous, les nuls? Ou devrais-je poser une question distincte sur la façon de procéder?
hippietrail
1
@hippietrail: l' outil Niveaux fait généralement très bien son travail: il suffit de déplacer le curseur d'entrée le plus à droite jusqu'à ce qu'il soit beau ou d'utiliser le compte-gouttes blanc. Si la limite semble trop nette, vous pouvez passer à "Modifier ces paramètres sous forme de courbes" et l’affiner. (Fondamentalement, ce que vous voulez habituellement, c'est une courbe essentiellement linéaire, mais qui se plie un peu près du bord supérieur pour la rencontrer progressivement plutôt que dans un angle pointu.)
Ilmari Karonen
J'aime l' outil courbes pour déplacer un fond "blanc" en blanc. Cela donne également un bel histogramme sur le reste de l'image.
M. Violet
75

Utilisation d'un remplissage de seau rapide au lieu d'une sélection de contour

Remarque: ce tutoriel est également disponible en PDF.

La trahison des images de son compatriote René Magritte;  partiellement vandalisé aux fins de ce tutoriel.

Ajouter un canal alpha

Certains types d'images n'ont pas de canal de transparence; JPG par exemple. Si tel est le cas, ajoutez un canal de transparence alpha. Ceci est fait en sélectionnant Layer → Tranparency → Add Alpha Channel.

Seau remplir avec la couleur [facultatif]

L'étape suivante est optionnelle et consiste à remplir d'abord la zone qui devrait devenir transparente avec une couleur unie. Sélectionnez l'outil de remplissage du godet ou appuyez sur Shift+ B. Dans les Bucket Filloptions de la boîte à outils, sélectionnez Fill transparent areasuniquement lorsque cela est nécessaire. Choisissez BG colour fillet Sample mergedlancez quelques essais tout en ajustant Thresholdpour obtenir les meilleurs résultats. Entre les deux, appuyez sur Ctrl+ Zpour annuler.

Un mélange de couleurs sera inévitable et même souhaité. (À cet égard, Adobe Photoshop n’est pas différent.) Par conséquent, choisissez une couleur compatible avec l’arrière-plan sur lequel l’image obtenue sera éventuellement utilisée. Cliquez sur le rectangle de couleur d'arrière-plan dans la moitié supérieure de la Tool Optionsfenêtre de la boîte à outils pour modifier la couleur d'arrière-plan. Ici, j'ai utilisé f3f3e9comme couleur de fond pour le remplissage de couleur unie. Cependant, vous pouvez également utiliser l'outil Pipette pour sélectionner une couleur de n'importe où sur le bureau.

<code> Remplissage du seau </ code>: sélectionnez <code> Remplir les zones transparentes </ code> uniquement lorsque cela est nécessaire.  Sélectionnez <code> Remplissage de couleur BG </ code> et <code> Exemple de fusion </ code> et effectuez quelques essais tout en ajustant <code> Seuil </ code> pour obtenir les meilleurs résultats.  Dans l'intervalle, appuyez sur <kbd> Ctrl </ kbd> + <kbd> Z </ kbd> pour annuler.

<code> Bucket Fill </ code> appliqué.  Choisissez une couleur de remplissage compatible avec l'arrière-plan sur lequel l'image résultante sera éventuellement utilisée.  En effet, un certain mélange de couleurs est inévitable et même souhaité.  Ici, j’ai utilisé <code> f3f3e9 </ code> pour le remplissage couleur unie.

Sélection par couleur

La bonne chose à faire maintenant est Select → By Colour. Cela pourrait être tentant Colour to Transparency, mais cela changerait également les zones semi-transparentes dans la zone d'image souhaitée. Cette fois, sélectionnez Fill transparent areasaussi bien que Sample merged. Pour cet exemple particulier, j'ai choisi de ne pas appliquer Antialiasingni Feather edges. Néanmoins, testez ces paramètres et choisissez ce qui vous convient le mieux. Encore une fois, exécutez quelques essais tout en ajustant Thresholdpour obtenir de meilleurs résultats. Entre les deux, appuyez sur Ctrl+ Zpour annuler.

<code> Sélection par couleur </ code>: Cette fois-ci, sélectionnez <code> Remplir les zones transparentes </ code> ainsi que <code> Exemple de fusion </ code>.  De nouveau, effectuez quelques essais tout en ajustant <code> Threshold </ code> et expérimentez avec <code> Antialiasing </ code> et <code> Arêtes atténuées </ code> pour obtenir de meilleurs résultats.  Dans l'intervalle, appuyez sur \ <kbd> Ctrl </ kbd> + <kbd> Z </ kbd> pour annuler.

<code> Sélectionner → Par couleur </ code> appliqué

Soustraire de la sélection

Parfois, il est difficile d’obtenir la sélection de couleur exacte. Une partie de la zone d'image souhaitée peut également être sélectionnée car sa couleur est identique. Dans ce cas, et à peine visibles, neuf pixels souhaités au milieu du tuyau ont également été sélectionnés pour suppression. Lorsque cela se produit, utilisez Ctrl+ Dragavec un Selectoutil de votre choix pour sélectionner une zone de sélection soustractive.

Utilisez <kbd> Ctrl </ kbd> + <code> Faites glisser </ code> avec un outil <code> Sélectionner </ code> de votre choix pour sélectionner une zone de sélection soustractive.

La zone de transparence souhaitée est maintenant sélectionnée.

Augmenter la sélection [facultatif]

Au bord de l'image souhaitée, certaines nuances d'arrière-plan ne sont toujours pas sélectionnées. Si tel est le cas, agrandissez la sélection avec un pixel à l'aide de Select → Grow… → 1px.

Effacer

Une fois la zone de transparence souhaitée sélectionnée, appuyez simplement sur Delete.

Une fois la zone de transparence souhaitée sélectionnée, appuyez simplement sur <kbd> Supprimer </ kbd>.

Résultat final

Enfin, exportez l’image transparente File → Export As...dans un format de fichier prenant en charge la transparence. Ce serait de préférence en PNG, mais le format GIF fonctionnerait également.

Le résultat final

Serge Stroobandt
la source
4
Vous pouvez augmenter la sélection de 1 pixel pour supprimer les bords blancs (Sélection> Croissance> 1> OK)
MonoThreaded
4
Je ne suis pas du tout habitué au graphisme. Chaque fois que je dois supprimer un arrière-plan, il semble que je revienne à cette réponse. Je vous remercie!
slayernoah
1
J'ai également constaté que l'utilisation de l' Featheroption de sélection est également utile pour les images dont les contours sont flous par rapport aux espaces.
Jocull
1
Merci: ayant déjà un jpg avec un fond blanc pur, c'était aussi simple que cela: ajouter un calque de transparence, sélectionner, supprimer.
djvg
21

On dirait que vous devez rogner certaines parties du jpgs (la figure principale, par exemple) et supprimer le "fond". Vous pouvez le faire en utilisant l'outil Lasso.

Le site Web de gimp contient de nombreux tutoriels et explications. Vérifiez cette http://docs.gimp.org/en/gimp-painting.html#gimp-concepts-selection et ceci: http://docs.gimp.org/en/gimp-tool-free-select.html

La sélection polygonale crée un point d'ancrage chaque fois que vous cliquez. Déplacez ensuite le pointeur de la souris pour tracer une ligne avec un nouveau point d'ancrage que vous pouvez déplacer tant que vous ne cliquez pas à nouveau.

Vous pouvez accéder à l’outil Lasso de différentes manières:

  • Dans la barre de menus de l’image, sélectionnez Outils → Outils de sélection → Sélection libre.

  • en cliquant sur l'icône de l'outil dans la boîte à outils,

  • en utilisant le raccourci clavier F.

Pour rendre l'arrière-plan solide d'une image transparent , ajoutez un canal Alpha et utilisez la baguette magique pour sélectionner l'arrière-plan. Utilisez ensuite l'outil Sélecteur de couleurs pour sélectionner la couleur d'arrière-plan, qui devient la couleur de premier plan dans la Boîte à outils. Utilisez l'outil Remplissage avec la couleur sélectionnée. Réglez le mode Remplissage du seau sur «Effacement de la couleur», ce qui efface les pixels avec la couleur sélectionnée. les autres pixels sont partiellement effacés et leur couleur est modifiée.

Yisela
la source