TOP
tetris Programmez un Tetris en Java
360 pages PDF pour apprendre à votre rythme.
Développez des jeux vidéo en Java.
www.jdevmaker.com
Gimp 2.4
Documentation
Tutoriels
Ressources
Divers

Dernière mise à jour le 09 avr 2008
consultée 11888 fois
Apprendre  ›  Tutoriels techniques  ›  Imperfections

 

Tutoriel technique Dégradés et sélections agrandies : imperfections résultantes

L'agrandissement d'une séléction peut parfois occasionner des pertubations indésirables. C'est notamment le cas avec des surfaces de texte obtenu avec certaines fontes. Voici un tutoriel en 3 temps, comme une valse, qui expose la problématique, explique pourquoi nous obtenons ces résultats indésirables, et cherche à apporter une solution.

La nature du problème

Commencez par créer une nouvelle image RVB, <toolbox> Fichier > Nouveau ou <image> Fichier > Nouveau, de 300 x 90, avec un fond noir.

Ajoutez un calque transparent <image> Calque > Nouveau calque, que vous nommerez "agrandissement".

Puis avec l'outil texte outil texte, créez le texte "GIMP", en rouge, de taille 80, avec la fonte Snap ITC, puis centrez le grossièrement.

Faites ensuite <image> Calque > Transparence > Alpha vers sélection sur le calque de texte.

image de départ
dialogue de calque

Faites ensuite <image> Sélection > Agrandir de 6 pixels. Sélectionnez le calque "agrandissement", puis <image> Édition > Remplir avec la couleur d'AP (ici du blanc). <image> Sélection > Aucune.

Voici ce que vous devriez obtenir :

résultat

Nous pouvons constatez qu'a 4 endroits différent (entouré en vert, ci-dessous), des imperfections sont présentes :

résultat imparfait

Les mêmes opérations recommencées cette fois avec la fonte Baskerville Bold.

résultat

Nous pouvons constatez que nous n'avons aucunes imperfections !

Pourquoi Gimp est-il si cruel ?

Crénelage et anti-crénelage

Nous devons d'abord garder à l'esprit qu'un texte de fonte est le plus souvent lisser (anti-aliasing) afin d'éviter un effet d'escalier inélégant. Ce lissage consiste a dessiner des pixels avec plus ou moins d'opacité afin que l'oeil ne perçoive plus cet effet d'escalier.

Voici notre fonte avec, puis sans le lissage, la même zone que précédemment agrandi :

lissé

Les pixels plus ou moins opaque sont nettement visible sur la partie agrandie.

non lissé

L'effet d'escalier est nettement perceptible. Or donc cet effet de lissage joue sur le canal alpha afin de d'atténuer ce crénelage.

Sélection et canal alpha

Ensuite nous devons bien comprendre ce qui est sélectionné avec l'outil de sélection.

Une sélection sélectionne une surface, certes, mais aussi le canal alpha de cette même surface. Pour nous en persuader, il suffit de se livrer a un petit exercice.

J'ai créé un cercle plein auquel a été appliqué un flou gaussien.

sélection

J'ai ensuite sélectionné une petite partie de ce disque, et copier/coller la sélection. On peut voir que la partie de flou (plus ou poins d'opacité grace au canal alpha) à elle aussi été copiée, et donc en amon, sélectionnée.

la sélection copié puis collé

Lorsque nous sélectionnons notre texte comme précédemment, nous sélectionnons aussi le canal alpha, or si à ce texte a été appliqué un anti-crénelage, ce lissage a aussi été sélectionné. Lorsque nous agrandissons la sélection, nous agrandissons aussi les parties lissées (avec plus ou moins d'opacité). Celle ci aurons donc une plus grande surface visible. De plus lors d'un agrandissement, nous sommes susceptible de provoquer quelques déformations (mineurs mais peut-être perceptibles). Si vous tirez sur votre pull, il sera peut-être plus grand, mais il sera aussi déformer, les fibres ayant été étirées.

Voici notre même fonte, agrandi cette fois à 2 pixels seulement, nous voyons que la déformation est plus petite, presque imperceptible, car l'agrandissement est faible.

Solutions ?

Nous pouvons être tenté d'appliquer la fonctionnalité Enlever l'adoucissement, mais cela se revèlera inadequat, car nous enleverions le lissage, et nous nous retrouverions avec les "escaliers". Nous serions alors obligé d'utiliser un flou afin de le rendre plus joli. Mais le flou sera appliqué à l'ensemble du texte, alors que le lissage est fait seulement sur les parties qui le nécessite. L'ensemble du texte "floutté" donnera un effet qui ne sera pas plus joli au final.

Une bonne solution consiste à retoucher manuellement les parties imparfaites. Cela demande cependant une certaine expérience, et les débutant ne seront pas forcémment enchantés de cette solution.

Une autre solution est de travailler sur une image d'une taille plus importante que celle au final. Puis de réduire l'image.

Voici la même image qu'au tout début du tutoriel mais en 900 x 270, la taille de la fonte est 241, l'agrandissement de 18. J'ai zoomé car le format serait trop grand à afficher, cliquez sur le lien [voir l'image] pour voir la différence.

Pourquoi avons nous beaucoup moins d'imperfections ? Parce que nous avons moins de surface avec de l'anti-crénelage, proportionnellement à la surface total du texte. Les imperfections sont moindres :

zoom

Réduite à 300 x 90, ce qui diminue encore les imperfections, notre image est maintenant dès plus acceptable.

image grand format réduite

Vous trouverez un Ti'bout d'tuto mettant en application cela : Un logo 3D tout simple

Second cas

L'utilisation de dégradé peut parfois générer des résultats déroutant, a fortiori si vous utilisez ces dégradés avec des modes de calque ou bien des filtres. Voici un exemple typique. Il est a noter que cet exemple est directement issu du script-fu Chiseled.

Avec la surface comme ci-dessous, nous allons appliquer un dégradé Noir et Blanc suivant ces paramètres :

options des outils
source et résultat

Vous devrez cocher Verrouiller le canal alpha dialogue de calque dans le dialogue de calque avant d'appliquer le dégradé.

L'imperfection du résultat est déjà visible sur l'image obtenue. Si on désir utiliser l'image tel quelle et que l'on est pas trop exigeant, cette imperfection peut ne pas sauter aux yeux. Voici la zone où elle est pourtant très nettement visible, voyez les tries verticales et horizontales.

zone d'imperfections

Cela devient gênant dès que l'on veut exploiter ce calque, par exemple : créez un calque dans la même image, remplissez le du motif "Ice". Appliquons un effet à ce calque comme ci-dessous, pour cela faites <image> Filtres > Carte > Repoussage d'après une carte. Indiquez le calque avec le dégradé pour le paramètre Repoussage d'après une carte.

filtre
résultat

Les stries sont amplemment visible, on voit même d'autres imperfections (qui dépendent aussi des paramètres indiquées au filtre). Il n'y a rien à faire en l'état, cela ne dépend nullement du filtre, mais du dégradé.

On peut-être tenté d'appliquer un flou (gaussien ou avec l'outil goutte d'eau) pour lisser ces imperfections : peine perdue. Au mieux cela sera inéfficace, au pire cela ne fera qu'aggraver la situation.

Explication et solution

L'image est tout simplement trop petite ! Le nombre de pixels est insuffisant pour que le dégradé puisse-t-être dessiné avec précisions. Les zones trop "étroites" présentes donc au final ces défauts.

La solution est, là encore, de travailler sur une image plus importante, quitte à la réduire ensuite.

L'image ci-dessous a été travaillé à l'origine avec un format de 800 x 800, que j'ai ensuite réduis en 200 x 200, voici le résultat :

résultat

On voit bien que l'image comporte beaucoup plus de finesse ! Notons aussi que l'éclairage du filtre apparait moins grossier.

Cependant, on voit aussi que le motif n'a plus le même rendu. En effet, au augmentant la taille du calque, on augmente aussi le nombre de fois où la texture sera dessinée. Il y a un remède à cela. L'image ci-dessous montre le résultat :

résultat

L'image à d'abord été créé en 200 x 200, rempli du motif. Puis a été agrandi en 800 x 800 afin de générer le relief et d'appliquer le filtre. Puis l'image a été redimensionnée en 200 x 200.

En conclusion

Un grand nombre de pixels permet des nuances qu'un petit nombre ne saura offrir. Travailler en grand format vos images, est donc l'occasion de donner aux pixels de vos réalisations la possibilité de s'exprimer pleinement.

 

Valide XHTML 1.0 Strict
Valide CSS 2.0
Valide Accessibilité
Creative Commons License

Tous les documents et ressources sont sous un contrat Creative Commons.