Introduction

Les appareils photos numériques proposent généralement par défaut un mode d’enregistrement des images au format JPEG. Avant cet enregistrement, votre appareil photo effectue de manière automatisée un traitement sur l’image selon des paramètres pré-définis. Bien que le résultat soit acceptable il est rarement complètement satisfaisant et peut être facilement amélioré avec quelques manipulations simples à l’aide d’un logiciel de retouche d’image.

Sachez que pour ceux qui disposent d’un appareil photo qui permet d’enregistrer les photographies au format RAW (format image codé sur 16 bits n’ayant subi aucun traitement), le dématriçage à l’aide de logiciels spécifiques reste la meilleure solution pour avoir le maximum de contrôle sur le rendu de ses photographies. En effet, le format RAW correspond pour le numérique à ce qu’était le négatif pour les appareils argentiques. L’utilisation du format RAW s’adresse aux professionnels de l’image et aux amateurs avertis qui souhaitent maîtriser tout le processus de « développement » de leurs photos numériques pour un rendu optimum. Son utilisation est plus long, plus complexe et demande une période d’apprentissage des fondamentaux de la retouche photo et de manipulation des logiciels de dématriçage (logiciel permettant de « développer » les formats RAW).

L’utilisation du format RAW n’est pas le sujet de cet article. Je supposerais donc que vous enregistrez vos photos au format JPEG et que vous souhaitez améliorer le traitement des images à l’aide d’un logiciel de retouche d’image comme Gimp ou Photoshop.

Techniques

Le traitement automatisé des appareils photos donne généralement des photographies un peu ternes qui manquent de contraste et de saturation. Pour redonner du « peps » aux photos, vous avez le choix entre plusieurs techniques que je vais vous présenter ci-dessous :

Les niveaux

Une photographie numérique est composée de plusieurs milliers/millions de pixels possédant chacun une luminosité. L’outil Couleurs > Niveaux de Gimp affiche un histogramme qui représente la répartition de ces pixels en fonction de leur luminosité du plus sombre à gauche au plus clair à droite.

Un histogramme déséquilibré à gauche est le reflet d’une image possédant beaucoup de pixels sombres donc souvent d’une image sous-exposée. A l’opposé, un histogramme déséquilibré à droite est le reflet d’une image possédant beaucoup de pixels claires donc d’une image généralement sur-exposée.

Enfin, un histogramme qui ne s’étale pas sur toute la largeur de gauche à droite caractérise une image qui manque de contraste.

L’outil Niveaux, va vous permettre de corriger un manque de contraste :

Commencez par dupliquer votre calque puis opérez les manipulations sur le calque dupliqué.

- En déplaçant les curseurs des niveaux d’entrées :
En ajustant la position des curseurs du point blanc et du point noir aux deux extrémités de l’histogramme (voir copie d’écran) vous redistribuez de façon plus équitable la luminosité dans votre image à partir d’une gamme allant du blanc au noir. Vous pouvez ajuster la luminosité globale de l’image en faisant varier le curseur central qui correspond au point gris neutre ou gamma.


Si vous désirez un résultat plus précis, faite la même manipulation sur chacun des trois canaux R,V et B.

- En utilisant les pipettes :
Il est possible d’effectuer la même manipulation avec les pipettes en pointant dans l’image la zone la plus sombre avec la pipette correspondant au point noir et la zone la plus claire avec la pipette correspondant au point blanc. La luminosité moyenne peut être pointé à l’aide de la pipette correspondant au gris moyen. Cette technique est moins précise car elle fait intervenir votre perception de la zone la plus claire et la plus sombre, perception qui sur certaine photo n’est pas toujours évidente.

Attention, les pipettes agissent sur les trois canaux même si vous vous placez sur l’un d’entre eux. Vous ne pouvez donc pas affiner le résultat de la même façon qu’avec les curseurs.

- En utilisant le réglage « Auto » :
Vous pouvez également cliquer sur le bouton « Auto » pour laisser Gimp faire le travail tout seul. Le résultat est parfois bon, parfois moins bon. Testez et revenez en arrière (bouton réinitialiser) si le résultat ne vous satisfait pas.

Les courbes

L’outil Couleurs > Courbes est un outil plus perfectionné que l’outil Niveaux. Alors que l’outil Niveaux vous permet d’agir globalement sur les tons sombres et les tons clairs, l’outil Courbes, lui, vous permet d’agir sur n’importe quel intervalle tonal. Il est donc possible d’agir plus précisément en appliquant des changements sur un intervalle de ton. De plus l’outil Courbes permet d’opérer des manipulations non seulement sur les contrastes mais aussi la luminosité et les couleurs, tout ceci en lissant les transitions.

La barre dégradée horizontale représente l’échelle tonale d’entrée. Elle va de la valeur 0 (noir) à la valeur 255 (blanc), des tons sombres aux tons clairs. Donc déplacer sur la courbe/droite le point d’extrémité haute vers la gauche et le point d’extrémité basse vers la droite revient au même que déplacer le curseur blanc vers la gauche et le curseur noir vers la droite dans l’outil Niveaux.

Dupliquer le calque et sur chacun des canaux R, V et B déplacez le point haut vers la gauche et le point bas vers la droite de sorte à ce qu’ils se calent au bord de l’histogramme. Vous devriez obtenir un résultat similaire à celui effectué avec les curseurs de l’outil Niveaux. Ensuite pour augmenter le contraste il suffit d’obtenir une courbe en « S » telle que dessinée sur la copie d’écran suivante :

Lorsque « Canal » est en mode « Valeur » si vous déplacez un point vers le haut, vous augmentez sa luminosité, si vous le déplacez vers le bas vous l’assombrissez. En construisant une courbe en « S » j’augmente le contraste de l’image en fonçant un peu plus les pixels sombres et en éclaircissant les pixels claires. Plus la forme en « S » sera prononcée, plus le contraste sera fort.

On observe une dominante bleue. Pour retirer cette dominante, il suffit de se positionner sur le canal bleue et de tirer la courbe vers le bas. Cela aura pour effet de diminuer la quantité de couleur bleue.

Pour éclaircir l’image en accentuant les zones claires, je passe le calque dupliqué en mode « Ecran » et j’atténue légèrement son effet en fixant l’opacité à 75%.

Calques et modes

L’utilisation des modes de calque est moins connue, pourtant elle permet très facilement d’obtenir des résultats intéressants. Dans le cadre de ce chapitre sur les modes, je considère que je travaille toujours sur des calques dupliqués. Le calque qui change de mode est donc toujours une copie conforme du calque d’origine. L’effet obtenu peut être ensuite modulé en variant l’opacité du calque dupliqué.

Mode Superposer

Ce mode a tendance à assombrir l’image en rendant les gris moyens du claque du dessus transparent. Ainsi, les couleurs du calque du dessus intensifient les couleurs du calque du dessous. Par exemple un premier plan bleu sur un fond bleu génère une image avec un bleu plus soutenu.

En fait ce mode ajoute de la valeur (luminosité) à l’image, c’est ce qu’on appel “peindre avec la lumière”.

Pour résumer, le calque du dessus affecte le calque du dessous qui reste dominant en intensifiant les couleurs, les surbrillances et les zones d’ombres.

Pour diminuer l’effet du mode « Superposer », réduisez l’opacité du calque dupliqué. Pour l’accentuer, dupliquez le calque d’origine une seconde fois et passez le aussi en mode « Superposer ».

A titre d’exemple, voici une série d’images qui montre l’effet du mode « Superposer » :

1- image d’origine traité par l’appareil photo
2- image d’origine avec un calque dupliqué en mode « Superposer » opacité 100%
3- image d’origine avec deux calques dupliqués en mode « Superposer » opacité 100%

Remarque : si vous souhaitez accentuer le contraste des valeurs sans accentuer la saturation des teintes de votre image, désaturez le calque dupliqué (Couleurs > Désaturer) avant de le passer en mode « Superposer ».

Mode écran

Le mode « Ecran » éclaircie l’image en rendant plus transparente les zones sombres. Avec ce mode, le noir devient transparent et le blanc reste blanc. Donc plus le calque du dessus est sombre moins il affectera le calque du dessous et vice versa.

Passer un calque dupliqué en mode « Ecran » permet donc d’accentuer la luminosité des zones claires. Plus une zone de l’image sera sombre, moins elle sera éclaircie. L’utilisation de ce mode peut être intéressant pour les images légèrement sous-exposées.

A titre d’exemple, voici une série d’images qui montre l’effet du mode « Ecran » :

1- image d’origine traité par l’appareil photo
2- image d’origine avec un calque dupliqué en mode « Ecran » opacité 100%

Désaturation et mode lumière douce

Le mode « Lumière douce » a un effet assez similaire au mode « Superposer » mais de manière moins accentuée et en éclaircissant les couleurs. Si vous souhaitez accentuer le contraste des valeurs sans accentuer la saturation des teintes de votre image, désaturez le calque dupliqué (Couleurs > Désaturer) avant de le passer en mode « Lumière douce ».

Dupliquez le calque d’origine et désaturez le avec l’outil Couleurs > Désaturer. Ensuite, passez le en mode « Lumière douce ».

A titre d’exemple, voici une série d’images qui montre l’effet du mode « Lumière douce » :

1- image d’origine traité par l’appareil photo
2- image d’origine avec un calque dupliqué et désaturé en mode « Lumière douce » opacité 100%

Modèle LAB

Le mode Lab représente toutes les couleurs visibles par l’œil humain. La composante L (Luminosité) correspond à la vision humaine de la luminosité, la composante A regroupe les informations couleur suivant deux axes allant du vert au rouge, et la composante B regroupe les informations couleur suivant deux axes allant du bleu au jaune. Cette séparation entre les informations de luminance (couche L) et les informations couleur (couches A et B), permet de corriger les couleurs sans modifier la luminosité ou de modifier le contraste sans toucher à la saturation des couleurs.

Pour décomposer votre image en mode LAB, allez dans Couleurs > Composants > Décomposer …, puis sélectionnez le modèle « LAB » avec la case « Décomposer en calques » cochée.

Dupliquez les calques A et B et passez les en mode « Superposer » ‘ (Vous pourrez aussi tester d’autres modes comme « Lumière douce », « Lumière dur » …).

Fusionnez les calques dupliqués avec leurs calques d’origines (clique droit sur le calque dupliqué > « Fusionner vers le bas »)

Placez-vous sur le calque L et à l’aide de l’outil Couleurs > Courbes, augmentez le contraste avec une courbe en « S ».

Enfin recomposez l’image de cette façon : Couleurs > Composants > Composer, choisissez le modèle LAB et validez.

1- image d’origine traité par l’appareil photo
2- image traitée en mode LAB

Conclusion

Il existe plusieurs outils et plusieurs techniques sous Gimp pour redonner du « peps » à vos images à partir des images JPEG issus du traitement automatisé de votre appareil photo numérique. Les résultats diffèrent d’une technique à l’autre et selon les réglages choisis. A vous de sélectionner celle qui s’adapte le mieux aux caractéristiques de votre photo et au rendu que vous souhaitez obtenir.

Rien ne vous empêche non plus de combiner plusieurs techniques. Par exemple corriger les contrastes avec l’outil Niveaux puis appliquer un mode de fusion sur un calque dupliqué. Cependant méfiez vous d’une surcharge de traitement qui risquerait de dénaturer le rendu de votre image.

Pour retoucher ses photos plus finement et avec moins de dégradations, il faudra passer au traitement du format RAW et utiliser des logiciels de dématriçage comme Bible, RawTherapee …

Sources

• - Ouvrage « Gimp 2 efficace » – Cédric Gémy – Eyrolles
• - Développer ses fichiers RAW – Volker Gilbert – Eyrolles
• - Documentation francophone de Gimp

Introduction

Pour donner de l’impact au design d’un site web, certains designer choisissent d’exploiter l’espace disponible dans l’en-tête et même parfois la périphérie du site. Ce procédé graphique utilise une image de fond affichée grâce à la propriété CSS « backgound ».

Si cette solution élargie l’espace de liberté du graphiste pour s’exprimer, elle a l’inconvénient d’augmenter significativement le poids de la page..

Utiliser une large image de fond n’est donc pas un choix anodin. Cela est judicieux si votre objectif est de mettre l’ambiance graphique du site en avant. Je pense par exemple aux sites de marque et de publicité, aux sites ou vous souhaitez mettre en avant votre créativité ou encore aux sites qui ont besoin de dévoiler un univers dans lequel une population cible sera censée se reconnaitre et s’identifier.

Par contre, si la vitesse de chargement des pages est une préoccupation stratégique ou si la valeur ajoutée de votre site se situe essentiellement dans son contenu texte, mieux vaut éviter cette technique. En effet une image lourde ralentira le chargement de vos pages et un design très présent fera inévitablement de l’ombre au contenu texte. C’est le cas pour les sites magazines ou les sites qui proposent un service (vente en ligne, moteur de recherche, annuaire, portail …).

Process

Conception

Besoins et objectifs

Le besoin du client est de promouvoir via un site web la parution d’un roman d’aventure. Le client souhaite que le design du site soit fidèle à l’atmosphère du livre.

Le roman raconte l’aventure d’un cadre supérieur, lessivé par les exigences de son milieu professionnel, qui décide de tout quitter (job, maison, amis …) pour partir réfléchir au sens de sa vie lors d’une retraite d’un an au milieu des paysages de l’ouest Américain.

Définir le sujet, l’ambiance, le style

Étant donné que le cadre de l’histoire se passe essentiellement dans la nature, je vais plonger l’utilisateur (et potentiel lecteur) au coeur de cet univers en utilisant une grande image de header qui représentera un paysage sauvage ouest Américain.

Le livre raconte une fiction, qui fera fortement appel à l’imagination du lecteur. Je choisis donc de représenter le paysage de façon abstraite en lui donnant un style peint. Ainsi, le paysage laissera plus de place à l’interprétation et à l’imaginaire.

Comme l’histoire du livre raconte une expérience de réflexion intérieure en solitaire à travers la nature, je choisis de situer la scène au crépuscule, la tombée de la nuit étant dans l’inconscient collectif un moment apaisant (ou angoissant pour certains) propice à cette reflexion intérieure. Cette atmosphère crépusculaire renforcera aussi l’impression de solitude.

La composition

Pour plonger le lecteur au coeur du paysage, je vais centrer le site sur le point focal du paysage. Pour obtenir quelque chose d’équilibré je choisirai un paysage dont les lignes de fuites convergent vers le centre de l’image sur la ligne d’horizon.

S’inspirer de quelques références

Pour réaliser ce paysage je vais m’inspirer de deux réalisations qui répondent bien au concept que je souhaite mettre en place. Ces deux design ont fait l’objet d’un tutoriel et les techniques que j’utiliserai ici sont largement inspirées de celles utilisées dans ces tutoriels.

Il s’agit du design du blog de l’agence web Viget Inspire : www.viget.com

… et d’une copie d’écran issu d’un tutoriel du site http://designreviver.com

Réalisation

Choisir ses outils

Pour réaliser ce design, j’utiliserai le logiciel de retouche d’image Gimp, quelques brosses, des textures, des photos et quelques uns des modes de fusion disponibles dans Gimp.

Se lancer et expérimenter

Pour commencer, je choisis dans une banque d’image des photos de paysage qui répondent à mes besoins. La scène se passant dans l’ouest Américain, mon paysage doit être cohérent avec les caractéristiques géologiques et floristiques de cette région.

J’ai choisis ces trois photographies :

Image 1 : sur cette image, je garderai les montagnes

Image 2 : sur cette image, je garderai les arbres

Image 3 : sur cette image, je garderai l’homme et le ponton

La composition finale devrait ressembler à cela :

Pour la partie terrestre, je détoure mes paysages pour ne garder que les rochers et la végétation. Pour cela j’utilise une technique de détourage que j’ai expliqué dans un article intitulé « Gimp : détourage complexe. Ces images détourées vont me servir d’une part pour créer les silhouettes du paysage terrestre mais aussi pour donner un peu de profondeur aux silhouettes en utilisant l’image comme d’une texture.

Les images détourées donneront ceci :

Pour le ciel crépusculaire, je fais plusieurs dégradés (bleu foncé – bleu moyen, rouge – orangé) sur des calques distinct et je dose le rendu en réglant l’opacité.

Pour donner un aspect peint à la composition, j’utilise chaque élément détouré comme une silhouette dans laquelle je peins avec différentes brush.

J’utilise parfois l’image détourée pour renforcer la texture en la plaçant sur un calque en mode « Multiplier », « Superposer » ou « Lumière douce ». En jouant sur le pourcentage d’opacité du calque je dose l’effet obtenu. Pour ne pas déborder dans les zones transparentes lorsque je peins les silhouettes, je coche la case « Verrouillé » dans la fenêtre des calques

Par soucis de cohérence, j’ai reflété le ciel et les montagnes dans le lac. J’ai dû effacer les nuages du lac de la photo d’origine car ils ne correspondaient pas à ceux présents dans mon ciel dessiné. J’ai donc refait la texture d’une partie du lac avec une brush et l’outil pinceau.

Pour retoucher mes couleurs, j’utilise fréquemment dans le menu : Couleurs > Teinte – Saturation, où je peux faire varier la saturation, la luminosité et les teintes. Pour redonner un peu de « peps » aux couleurs du ciel, je duplique le calque du ciel et je passe le calque dupliqué en mode « Superposer ».

Enfin pour détourer le personnage sur le ponton, j’ai utilisé ma tablette graphique car j’avais besoin de plus de précision. Une fois détouré, le personnage a été placé sur un calque en mode « Multiplier ».

Après quelques retouches minimes et le placement des ombres du ponton voici le résultat de ce qui sera le header du futur site :

A partir de ce header, je compose le design la page d’accueil (voir l’image en grand)

Conclusion

Chacun à sa façon de travailler mais je pense qu’il est important, avant de foncer tête baissée sur son logiciel d’infographie, de passer un peu de temps à imaginer ce que l’on souhaite réaliser. C’est l’étape initiale de conception. Cette phase de conception donne une cohérence à votre création et des jalons pour orienter votre démarche vers un objectif. Je le répète souvent mais le webdesign n’appartient pas au domaine de l’art plastique dans lequel on exprime un ressenti personnel mais appartient au domaine de l’art appliqué ou la création est censée remplir des objectifs définis au préalable pour répondre à un besoin précis.

Même si vous pensez et planifiez votre création, il est rare que le résultat final (rendu visuel) soit la réplique exacte de ce que vous aviez imaginé au départ. Ce n’est pas très grave, le principal étant que le concept initial soit respecté et qu’il réponde aux objectifs que vous vous étiez fixés. En effet, l’acte créatif comporte toujours une part de hasard que l’on ne contrôle pas et qui nait des différentes expérimentations effectuées lors du process créatif.

Lorsque vous créez un design avec une forte connotation graphique, fixez vous un cap mais laissez votre imagination expérimenter des choses et le hasard vous offrir parfois d’heureuses surprises.

Introduction

J’ai participé, il y a quelque temps, aux ateliers web organisés à l’occasion de « Paris Web 2008″. J’ai particulièrement apprécié le sujet concernant la performance de chargement des pages web proposé par Nicole Sullivane (Ingénieur Expert en Performance) et Eric Dapset (Ingénieur Front-end) de chez Yahoo.

Pour connaitre les bonnes pratiques qui permettent d’optimiser vos pages web, vous pouvez d’ores et déjà vous rendre sur le site « Yahoo, developper network » et lire l’article qui s’intitule « Best Practices for Speeding Up Your Web Site« .

En tant que designer, je ne parlerai dans cet article que des performances qui passent par une optimisation des images et de leur utilisation.

Choisir le bon format d’image

Il n’y a pas de bon ou mauvais format. Chaque format a ses caractéristiques et le choix du format dépendra de la nature de l’image et de l’utilisation que vous voudrez en faire.

Pour faire le bon choix, il est important de connaitre les caractéristiques de chacun des formats.

Le GIF (Graphics Interchange Format)

Caractéristiques

Le format gif utilise un algorithme de compression sans perte. Vous pouvez donc enregistrer plusieurs fois votre fichier sans pertes de données. Si vous utilisez ce format, les pixels seront codés sur 8 bits, ce qui représente un maximum de 256 couleurs.

Vous pouvez réunir dans un seul fichier (GIF89a), plusieurs fichiers gif (GIF87a) pour réaliser des animations.

Le format gif, sous brevet jusqu’en 2006 est dorénavant dans le domaine public, il est ainsi possible de l’utiliser librement.

Utilisations

La limitation à 256 couleurs n’est pas gênante pour les images comportant un nombre plutôt limité de couleur et sans dégradés, avec de préférences des grandes zones de couleur unies. Nous pouvons donc l’utiliser par exemple pour les logos, les graphiques et la plupart des images synthétiques, ainsi que les photographies en noir et blanc.

Vous pouvez également utiliser ce format pour des petites animations.

En revanche pour une photographie couleur de qualité ou des dégradés subtiles, il est préférable d’utiliser un autre format.

Le format gif gère la transparence mais un pixel d’une image gif est soit complètement transparent soit complètement opaque.

Le JPEG (Joint Photographic Experts Group)

Caractéristiques

Le format jpeg dont l’extension informatique est « jpg » est un format de compression à pertes qui élimine des informations. Cela signifie que si vous enregistrez une ou plusieurs fois une image au format jpg, vous perdez des informations à chaque enregistrement.

Ce format permet d’obtenir des images comportant plusieurs millions de couleurs.

Le point fort de ce format est qu’il permet une compression réglable. Vous pouvez choisir à l’enregistrement, le taux de compression que vous appliquerez à votre image. Plus vous compressez, plus vous éliminez des informations dans l’image.

Les standards de fichiers d’images JPEG utilisent le référentiel de métadonnées de l’IPTC, dénommé IPTC Core. Il est donc possible de stocker dans une image jpg un certain nombre d’informations, une vignette et même un fichier audio. Attention, l’enregistrement de ces métadonnées dans l’image jpg alourdit son poids.

Utilisations

Le format jpg est adapté à la compression des photographies couleurs, aux images qui comportent des dégradés, aux images qui comportent des bords flous et aux images qui possèdent beaucoup de détails. Le rendement de la compression est intéressant mais vous devez trouver le bon réglage pour ne pas trop dégrader vos images.

Le format jpg ne gère pas la transparence.

Le PNG (Portable Network Graphics)

Nous parlerons de deux types de fichiers png: le png8 et le png24. Les pixels d’une image en png8 sont codés sur 8 bits (256 couleurs) alors que les pixels d’une image en png24 le sont sur 24 bits (plusieurs millions de couleurs). Dans les deux cas, la compression est non-destructive.

Caractéristiques

Le format png8

Le format png8 comme le format gif a des pixels codés sur 8 bits soit un maximum de 256 couleurs. Ce format a été développé pour trouver une alternative libre au format gif qui jusqu’en 2006 était sous brevet. Par rapport au gif, le png8 a une meilleure compression que le format gif sauf peut être pour les images de très petites tailles.

Le png8 gère la semi-transparence. Attention, dans Internet Explorer 6.0 et inférieur, la semi-transparence des png8 n’est pas supportée. Les pixels semi-transparents deviennent complètement transparents.

Par contre, vous ne pourrez pas faire d’images animées avec ce format.

Attention, tous les logiciels de traitement d’images ne compressent pas les images en png8 avec la même efficacité. Par exemple, Fireworks a longtemps surpassé Photoshop dans cet exercice. Je ne sais pas si c’est toujours le cas, n’utilisant plus les produits Adobe depuis longtemps. Dans le monde libre, vous trouverez un certain nombre de scripts qui gèrent très bien la compression png (pngnq, pngcrush, optipng, imagemagick …)

Le format png24

Le format png24 donne des images dont les pixels sont codés sur 32 bits (24 bits couleur, 8 bits alpha). Vous disposez donc d’une palette de couleurs aussi étendu que pour les images jpg et une gamme de transparence très large (semi-transparence). Ce format compresse les images sans destruction.

Utilisations

Le format png8

Le png8 est un concurrent du format gif. Dans beaucoup de cas, il donne des fichiers moins lourds. C’est donc le format de fichier idéal pour les images destinés aux sites web qui ne comportent pas de nombreux détails, dégradés et couleurs.

Vous pouvez par exemple l’utiliser pour:

- Les captures d’écran.
- Les illustrations au trait (logos, symboles, histogrammes, schémas, icônes …)
- Les images contenant principalement du texte.
- Les images aux bords bien nets et/ou aux surfaces unies.
- Les images 2 couleurs (noir et blanc).
- Les images contenant un nombre réduit de couleurs.

Le format png24

Le png24 est utile pour les images qui possèdent beaucoup de couleurs et de détails ou des dégradés. Par contre, comme c’est un format non destructif, le poids des images est plus important que les images compressées en jpg. Ce format sera utile si vous voulez utiliser des images semi-transparentes. Attention, le navigateur Internet Explorer 6.0 transforme les pixels semi-transparents en gris.

Vous utiliserez le png24 pour son rendu des couleurs et des dégradés, pour le rendu des détails et pour conserver des images sans destructions.

C’est aussi le format idéal pour les images qui comportent des bordures fines (1 px) arrondies en semi-transparences. En png8, vous risquez d’obtenir des bordures crènelées. Il convient de tester les deux formats pour voir si le rendu en png8 est acceptable ou pas.

Si vous n’utilisez pas la transparence, que votre image est relativement riche en couleurs et détails et que vous destinez votre image au web, le format jpg sera plus approprié. En effet, le jpg vous donnera une image plus légère. A vous de trouver le bon taux de compression pour optimiser le rapport poids/qualité.

Internet explorer 6.0 et la transparence

Si vous cherchez des informations sur la façons de gérer la transparence des png dans le navigateur Internet Explorer 6.0, je vous renvoie au très bon article rédigé par Bruno Bichet IE6 – Gérer la transparence du format PNG 24 bits

Le SVG (Scalable Vector Graphics)

Caractéristiques

Le format svg basé sur XML est un peu à part par rapport aux trois formats précédents car c’est un format d’image vectorielle et non bitmap. C’est un format libre régit par le W3C (World Wide Web Consortium).

Le rendu SVG est supporté nativement par les navigateurs Web ou par ajout d’un plugin s’occupant de la gestion du rendu à l’intérieur d’une balise html de nom object.

Utilisations

Ce format est encore peu utilisé sur le web mais je pense que cela devrait changer dans les années à venir notamment avec le support du module SVG de CSS3.

Il est aussi possible avec svg/smile de concevoir des animations.

Le svg est très utilisé dans le monde de la cartographie et du téléphone portable.

Optimiser le poids des images

Lorsque le designer termine ses maquettes et transmet à l’intégrateur les images d’un projet, il se soucis normalement de lui fournir des images optimisées. Mais qu’est-ce qu’une image optimisée ? C’est une image offrant une qualité maximum pour un poids minimum.

La première chose à faire est de choisir le format d’enregistrement le plus adapté à la nature de l’image. C’est une étape primordiale. Pour cela, je vous renvois au paragraphe précédent.

Une fois que vous avez choisis le bon format d’enregistrement, il faut utiliser des outils qui vont vous permettent d’appliquer la bonne compression sans trop dégrader l’image.

Les logiciels de traitement d’images

Dans les logiciels de traitement d’image comme Photoshop ou Gimp, vous avez la fonctionnalité « enregistrer pour le web ». Cette fonctionnalité est très pratique car elle vous permet de tester plusieurs formats d’enregistrement et de régler le taux de compression tout en contrôlant le résultat en prévisualisation.

Voici une copie d’écran de cette fonctionnalité sous Gimp:

Les scripts

Il existe de nombreux scripts de compression Open Source qui optimisent le poids des images. Ils s’utilisent souvent en lignes de commandes, mais pour les allergiques au clavier il doit exister aussi quelques interfaces graphiques.

Parmi ces scripts, nous pouvons par exemple citer optipng, pngcrush, pngrewrite, pngout, pngnq … pour l’optimisation des images enregistrées en png.

Pour les images enregistrées en jpg, vous pouvez utiliser le script jpegtran.

Pour les détails d’utilisation de ces scripts, je vous invite à vous rendre sur les pages web dédiées. Je ne m’étends pas sur la description des lignes de commandes de chacun de ces outils car l’application qui suit va nous faciliter grandement le travail.

Néanmoins, si vous voulez quelques exemples de manipulation de ces scripts, Stoyan Stefanov a rédigé un article sur le sujet.

Smush.it!

La société Yahoo à mis à disposition des internautes un outil très pratique pour tester les images d’une page web et vous en proposer des versions optimisées sans dégradation. Il s’agit de l’application smush.it!

Smush.it! est un projet Open Source mis en place par Stoyan Stefanov et Nicole Sullivan qui appartiennent tous les deux à l’équipe « Exceptional Performance team » de Yahoo!. Cette équipe est aussi à l’origine de l’application « YSlow » et des bonnes pratiques pour optimiser le chargement de vos pages web.

Vous pouvez utiliser cette application en ligne ou dans Firefox sous la forme d’une extension.

Smush.it! teste sur vos images plusieurs algorithmes et ne retient que celui qui donne le meilleur résultat. Les images gif sont convertis en png, car Smush.it! considère le format png plus performant. Les scripts utilisées actuellement par Smush.it! sont:

- ImageMagick pour identifier l’image et convertir les images gif en png.
- pngcrush pour retirer les données inutiles du png. L’équipe de Smush.it! expérimente les scripts pngout, optipng, pngrewrite qui permettrons peut être une meilleure optimisation.
- jpegtran pour retirer les metadata (actuellement désactivé) et essayer un format jpeg progessif.
- gifsicle pour optimiser les animations gif en retirant les pixels qui se répètent dans les différentes frames.

Voici une copie d’écran du rapport affiché par Smush.it! sur la page d’accueil de www.pixenjoy.com (utilisation de l’extension Firefox)

Je peux encore gagner 7,48 ko sur le poids des images de ma page d’accueil !

Les avantages de Smush.it! sont nombreux:

- Smush.it! utilise les meilleurs scripts de compression pour chasser les derniers octets que nos logiciels de traitement d’images n’ont pas réussi à éliminer, et tout cela sans dégradations de la qualité de l’image.

- Vous n’avez aucune ligne de commande à taper, tout est automatisé.

- Vous pouvez faire l’optimisation de plusieurs images à la fois, c’est donc un gain de temps appréciable.

- Vous avez plusieurs façons de soumettre vos images. Par upload des fichiers, en indiquant les URLs des images où en demandant à Smush.it! de prendre en compte toutes les images d’une page web.

- Smush.it! vous permet de visualiser un rapport des images compressées avec le poids avant et après compression ainsi que le gain obtenu en kilo octets.

- Smush.it! vous génère un zip avec toutes les images optimisées. Vous n’avez plus qu’à dézipper le contenu dans le répertoire image de votre serveur web.

Conclusion

Apprenez à bien connaitre les caractéristiques des différents formats de fichiers utilisés pour le web (gif, jpg, png8, png24, svg) afin de choisir celui qui sera le plus approprié aux profil de votre image.

Utilisez la fonctionnalité « Enregistrez pour le web » de votre logiciel de traitement d’images.

Aidez-vous de Smush.it! pour chasser les derniers kilo octets qui pourraient encore se cacher dans vos images.

Sources:

- Wikipédia avec les mots clés gif, png, jpeg, svg.
- Smush.it!
- Yahoo Developer Network
- L’article de Stoyan Stefanov intitulé « Optimization Part 1: The Importance of Images »
- Images et graphiques pour le web
- La page francophone du format PNG

Présentation

Les modes de fusion des calques permettent de combiner les pixels d’un calque avec les pixels du calque situé immédiatement en dessous. Il est possible d’appliquer les modes de deux façons : soit directement à partir des calques soit avec les outils de peintures qui possèdent deux modes supplémentaires par rapport aux calques.

Chaque mode de fusion est basé sur un algorithme mathématique précis dont le rendu n’est pas toujours facile à comprendre au premier abord. De plus, l’effet obtenu dépend aussi des caractéristiques de l’image contenu dans le calque du dessus (à partir duquel on choisit le mode) et du le calque du dessous (avec lequel le calque du dessus se combine).

Les exemples d’application des modes de fusion utilisés dans cet article sont basés sur la version Gimp 2.4.5 sous Linux Ubuntu 8.04 – Hardy Heron

Description des différents modes de fusion

Nous allons passer en revue l’ensemble des modes de fusion appliqués directement via les calques.

Les modes de fusion s’appliquent dans la palette calque au niveau du menu déroulant « Mode ».

Pour les exemples, nous utiliserons une image « A » pour le calque du dessus et une image « B » pour le calque du dessous. Nous supposerons dans nos exemples que les deux calques gardent une opacité de 100% (sauf pour le mode « Dissoudre »).

Image A (calque du dessus)

Image B (calque du dessous)

Le mode « Normal »

Le mode de fusion appliqué par défaut sur un nouveau calque est le mode « Normal ». En mode « Normal », le calque de dessus couvre le calque du dessous. Seule une diminution de l’opacité du calque du dessus permet de voir en transparence le calque du dessous. Je ne m’attarde pas sur ce mode de fusion …

Le mode « Dissoudre »

Équivalent Photoshop = Fondu / En anglais = Dissolve

Si le calque du dessus reste à 100% d’opacité, l’effet du mode « Dissoudre » n’est pas visible. Dans notre exemple, le calque du dessus est à 50% d’opacité.

Ce mode dissout le calque du dessus dans celui du dessous par dispersion aléatoire des pixels. Le mode Dissoudre produit des pixels entièrement opaques et entièrement transparents. La quantité de pixels opaques et transparents suit la valeur de l’opacité choisi. 50% d’opacité signifie que dans ce mode, il y a la moitié de pixels opaques et la moitié de pixels transparents.

Le mode « Multiplier »

Équivalent Photoshop = Produit / En anglais = Multiply

Le résultat est généralement une image sombre car ce mode accroit les ombres ou les zones sombres de l’image. Il peut être utile pour améliorer des photos sur-exposées.

Si l’un des calques est blanc, l’image résultante est semblable à l’autre calque. En effet, les zones blanches sont transparentes dans ce mode. Si vous avez un personnage détouré sur fond blanc qui recouvre un calque de paysage, en passant le calque du personnage en mode « Multiplier », vous intègrerez votre personnage dans le paysage avec disparition du blanc qui entourait le personnage.

Par contre si l’un des calques est noir, alors l’image résultante est complètement noire.

Le mode « Diviser »

Équivalent Photoshop = Exclusion ? / En anglais = Divide

Ce mode, contrairement au précédent, éclaircit l’image, voire même la « brule ». Il peut être utile pour déboucher les ombres d’une photo sous-exposée. Voir la procédure dans l’article suivant : (Chapitre 9. Améliorer vos photographies avec GIMP)

Le mode « Ecran »

Équivalent Photoshop = Superposition / En anglais = Screen

Ce mode éclaircie également l’image, voir la « délave » en rendant plus transparentes les zones sombres. Il peut être utilisé pour créer des surbrillances dans l’image.

Avec ce mode, le noir devient transparent et le blanc reste blanc. Donc plus le calque du dessus est sombre moins il affectera le calque du dessous et vice versa.

Le mode « Superposer »

Équivalent Photoshop = Incrustation / En anglais = Overlay

Ce mode assombrit l’image mais moins que le mode « Multiplier » car se sont les gris moyens qui deviennent transparents (et non les blancs comme dans « Multiplier »).

Les couleurs du calque du dessus intensifient ou modifient les couleurs du calque du dessous. Par exemple un premier plan vert sur un fond vert génère une image avec un vert plus soutenu, tandis qu’un premier plan rouge rend la couleur verte légèrement moins verte (en effet un mélange de deux couleurs complémentaires tend vers le gris).

En fait ce mode ajoute de la valeur (luminosité) à l’image, c’est ce qu’on appel « peindre avec la lumière ».

Pour résumer, le calque du dessus affecte le calque du dessous qui reste dominant en intensifiant les couleurs, les surbrillances et les zones d’ombres.

Le mode « Eclaircir »

Équivalent Photoshop = Eclaircir / En anglais = Dodge

L’image résultante apparaît éclaircie, mais certaines couleurs peuvent être inversées.

En photographie argentique, cette technique est utilisée en chambre noire pour accroître l’exposition de certaines parties de la photo, ce qui fait apparaître de nouveaux détails dans les zones d’ombre. Cette technique fonctionne mieux sur les images en niveaux de gris, et en utilisant un pinceau, plutôt que comme mode de

Le mode « Assombrir »

Équivalent Photoshop = – / En anglais = Burn

Ce mode tend à assombrir les parties claires, un peu comme le mode « Multiplier ».

En photographie argentique, cette technique est utilisée en chambre noire pour diminuer l’exposition de certaines parties de la photo, ce qui fait apparaître de nouveaux détails dans les zones claires. Cette technique fonctionne mieux sur les images en niveaux de gris, utilisée avec un pinceau, plutôt que comme mode de calque.

Le mode « Lumière dure »

Équivalent Photoshop = Lumière crue / En anglais = Hard light

Ce mode est une combinaison des modes « Écran » et « Multiplier ». Il peut être utilisé pour obtenir des contours nets et des couleurs vives en combinant deux photographies.

Le mode « Lumière douce »

Équivalent Photoshop = Lumière tamisée / En anglais = Soft light

Proche du mode « Superposer », ce mode adoucit les contours tranchants d’une image et éclaircit les couleurs.

Le mode « Extraction de grain »

Équivalent Photoshop = – / En anglais = Grain extract

Extrait le « grain film » d’un calque et le reverse dans un nouveau calque qui est 100% grain, mais il est aussi utilisé pour donner une impression de gravure en relief à certaines images.

Le mode « Fusion de grain »

Équivalent Photoshop = – / En anglais = Grain merge

Ce mode donne du grain au calque actif, en fusionnant le grain du calque sous-jacent (généré par exemple par le mode « Extraction de grain ») dans le calque courant, abandonnant la version granuleuse du calque originel. Il est l’opposé du mode « Extraction de grain ».

Le mode « Différence »

Équivalent Photoshop = Différence / En anglais = Difference

Ce mode peut donner des résultats surprenants. Il rend plus claires les régions sombres et plus sombres les régions claires, avec des changements de couleur étranges. Il peut être utile pour inverser des éléments d’une image.

Les pixels noirs soit du calque du dessus soit du calque du dessous sont transparents. La couleur devient plus lumineuse. Le blanc crée la plus forte différence de couleur (un pixel blanc inverse toujours le pixel correspondant).

Pour les pixels de tons gris dans un des claques, il est facile de prévoir le résultat. Si le pixel du calque du dessus est plus lumineux que celui du calque du dessous, le pixel du dessous est inversé. Si il est plus sombre, il garde sa couleur.

Un voile de gris est toutefois ajouté à l’image. Plus les pixels de tons gris vont vers le blanc ou le noir, plus faible sera ce voile de gris. Si les pixels sont colorés ou si il y a des tons gris dans les deux calques, le résultat est plus dur à prédire, mais il fonctionne de la même façon.

Ce mode peut être intéressant quand par exemple vous voulez comparer la taille, forme et position relative d’un masque grisâtre dans différents calques. Quand le résultat est noir, les calques sont identiques, et chaque petite différence va apparaitre très distinctement dans ce mode.

Le mode « Addition »

Équivalent Photoshop = – / En anglais = Addition

Ce mode rends les couleurs plus claires et plus vives. Il ressemble à l’eefet du mode « Ecran ».

Il est basé sur le principe simple d’ajouter les valeurs RGB du calque du dessus aux pixels du calque du dessous. Le résultat est toujours plus clair et aboutit souvent à des zones blanches et des contours grossiers.

Le mode « Soustrait »

Équivalent Photoshop = – / En anglais = Subtract

Le mode « Soustrait » est l’opposé du mode « Addition », et quelquefois produit un résultat similaire au mode « Difference ».

Ce mode soustrait les couleurs du calque du dessus aux couleurs des pixels du calque du dessous.

Si votre fond est blanc (255,255,255), et vous soustrayez le rouge (255,0,0), le résultat est (0,255,255) qui est cyan. Une forme blanche dans le le calque du dessus sur un fond blanc va, pour la même raison, produire une image noire. Jusqu’ici le résultat est le même que pour le mode « Difference », mais dès qu’une valeur du calque du dessus excède la valeur du calque du dessous, le résultat commence à diverge.

Le mode « Assombrir seulement »

Équivalent Photoshop = – / En anglais = Darken only

Ce mode ressemble au mode « Multiplier » car il assombrie l’image notamment au niveau de la couleur. Mais le mode « Assombrir seulement » compare les pixels du calque du dessus et du calque du dessous puis choisit la valeur RGB la plus sombre (donc la plus faible) dans chaque canal R,V et B.

Par exemple si le calque du dessus est de couleur verte (60,196,54) et le calque du dessous rouge (234,42,22), le mode « Assombrir seulement » donnera une couleur marron (60,42,22). Le mode « Multiplier » aurait donné un marron (55,32,5) un peu plus sombre.

A noter que les calques complètement blancs n’ont pas d’effet sur l’image. Les calques complètement noirs donnent une image noire.

Le mode « Éclaircir seulement »

Équivalent Photoshop = – / En anglais = Lighten only

Ce mode fonctionne à l’opposé du mode « Assombrir seulement » en comparant les pixels du calque du dessus et du calque du dessous pour ne retenir que la valeur RGB la plus claire (donc la plus forte) dans chaque canal R,V et B.

Par exemple si le calque du dessus est de couleur verte (60,196,54) et le calque du dessous rouge (234,42,22), le mode « Éclaircir seulement » donnera une couleur caramel, orangée (234,196,54). Le mode « Ecran » aurait donné un caramel plus clair (239,206,71) et le mode « Addition » une couleur encore plus clair, un jaune (255,238,76).

Les calques entièrement noirs n’ont aucun effet sur l’image finale et ceux complètement blancs donnent une image entièrement blanche.

Le mode « Teinte »

Équivalent Photoshop = Teinte / En anglais = Hue

Ce mode permet de changer la couleur d’un objet sans changer sa luminosité ni sa saturation. En effet ce mode agit uniquement sur la couleur (teinte).

Plus exactement, ce mode utilise la teinte du calque du dessus mais prend la saturation et la Valeur (Luminosité) du calque du dessous pour former l’image. Néanmoins, si la saturation du calque du dessus est égale à zéro, la teinte est elle aussi prise dans le calque du dessous.

Les pixels blancs, noirs ou de tons gris du calque du dessous ne sont pas affectées par ce mode et ne peuvent pas être teintées.

Le mode « Saturation »

Équivalent Photoshop = Saturation / En anglais = Saturation

Ce mode utilise la saturation du calque du dessus et prend la teinte et la valeur du calque du dessous pour former l’image.

Vous pouvez utiliser la couleur que vous désirez dans le calque du dessus, la couleur du calque du dessous ne changera pas, seulement sa saturation, laquelle prendra la même saturation que la couleur du calque du dessus.

Le mode « Valeur »

Équivalent Photoshop = Luminosité / En anglais = Color

Ce mode utilise la valeur du calque du dessus et prend la saturation et la teinte du calque du dessous pour former l’image. Vous pouvez l’utiliser pour révéler des détails dans les zones sombres et les zones claires d’une image, sans modifier la saturation.

Le mode « Valeur » peut être utilisé pour corriger des couleurs trop vives ou foncées. Il peut également être utilisé pour transférer des motifs ou des textures dans une image, sans changer la couleur de l’image.

Le mode « Couleur »

Équivalent Photoshop = Couleur / En anglais = Value

Ce mode utilise la teinte et la saturation du calque du dessus et la valeur du calque du dessous pour former l’image.

Les pixels noirs et blancs du calque du dessous ne sont pas affectés, mais toutes les autres couleurs, tons de gris ou non vont prendre la teinte et la saturation de la couleur du calque du dessus.

Le mode « Couleur » n’affecte pas la valeur (luminosité) du calque du dessous. Les informations de valeur sont gardées intactes, seul la teinte et la saturation sont modifiés.

Conclusion

Les possibilités des modes de fusion sont nombreuses mais difficiles à appréhender au début. Il n’est pas toujours évident de choisir un mode de fusion en sachant à l’avance le rendu exact que l’on obtiendra. Je vous conseille donc de les aborder par l’expérimentation. N’hésitez pas à essayer plusieurs modes pour un même calque et regardez simplement ce que cela donne. Parfois vous aurez de bonnes surprises. Rappelez-vous que vous pouvez moduler l’effet des modes en jouant sur l’opacité du calque.

A force de les manipuler, les rendus des modes vous deviendront de plus en plus familier et vous finirez par les choisir avec plus d’intuition lors de votre processus créatif. Vous découvrirez alors tout le potentiel qui se cache derrière cette fonctionnalité.

Un autre article similaire traite du même sujet sur le site www.unixgargen.com

Sources :

• Documentation officielle de Gimp en Français : Modes de calque
• Traduction du Gimp User Manuel (1 er version) de Karin Kylander & Olof S Kylander chapitre 16 « Modes de fusion des calques »
• FAQ du wiki Gimp-attitude : CorrespondanceFaq1
• Documentation Gimp 2.2, Chapitre 9. Améliorer vos photographies avec GIMP

Voici un tutoriel qui va vous expliquer comment réaliser un fond composé de barres colorées. Ce tutoriel est une adaptation pour Gimp de l’article « Quickly Build an Abstract Background of Colored Bars » provenant de l’excellent site PSDTuts.

Cet exemple est réalisé avec la version Gimp 2.4 sous Ubuntu Gutsy Gibbon. La valeur des paramètres utilisés sont proposés à titre indicatif, vous pouvez les modifier à titre expérimental.

Application

Réalisation des barres

Ouvrez un nouveau document avec la palette de couleur par défaut (blanc/noir)

Appliquez le filtre Rendu > Nuage > Nuage par différence avec les paramètres suivant :
X=5 / Y=5 / Détail=6
Vous obtenez un fond nuageux en valeur de gris.
Essayez d’obtenir quelque chose d’homogène avec une répartition à peu près égale des zones sombres et des zones claires.

Appliquez le filtre Distorsion > Déplacer
Cochez le bouton radio « horizontalement » et fixez la quantité à 100.

Ensuite rendez-vous au menu Couleurs > Seuil
Faites varier les deux curseurs pour obtenir quelque chose qui ressemble à ça :

Essayez d’équilibrer la quantité de noir et de blanc sur l’image.
Les masses noires pleines ne doivent pas être trop larges mais lacérées par des hachures blanches.

Ensuite appliquez un flou cinétique : Filtres > Flou cinétique
Choisissez un type de flou linéaire et fixez la Longueur à 200 et l’Angle à 90.
Répétez l’application de ce filtre plusieurs fois (Crtl+F) jusqu’à obtenir quelque chose qui ressemble à cela :

Vous pouvez atténuer les différences de contraste entre les valeurs de gris des barres à l’aide de l’outil courbe.

Colorisation des barres

Ajouter un nouveau claque que j’ai appelé « dégradé de couleurs » au dessus votre calque initial.

Sélectionnez l’outil dégradé et appliquer un dégradé horizontalement. Ici j’ai choisis le dégradé « Full saturation spectrum CCW » mais rien ne vous empêche d’en choisir un autre où d’en fabriquer un qui correspond à une palette de couleurs personnalisée. Puis passez le calque « dégradé de couleurs » en mode « Multiplié » (vous pouvez tester d’autres modes comme Superposé, Assombrir …).

Avec l’outil Courbes : Couleurs > Courbes, vous pouvez faire varier le contraste ou la luminosité de l’image selon vos gouts.

Vignétage

Aplatissez les calques : Image > Aplatir l’image.
Dupliquez le calque obtenu et nommez le “vignetage”.
Sélectionnez le calque “vignetage”, faites un clique droit dessus et sélectionnez “Ajouter un masque de calque …”.
Choisissez “blanc (opacité complète)”.

Activez les couleurs par défaut (noir PP / blanc AP).
Activez le masque (pas le calque !) en cliquant sur le carré de droite dans la barre symbolisant votre calque.
Sélectionnez l’outil “dégradé” et choisissez les options “Dégradé : PP vers AP” et “Forme : radial”.
Tracez votre dégradé en partant du centre vers un des quatre coins de la photographie.

Maintenant, activez le calque “vignetage” (de ce fait vous désactivez le masque) en cliquant sur le carré de gauche dans la barre symbolisant votre calque.

Rendez-vous dans le menu Couleurs > Niveaux et déplacez vers la droite le curseur du milieu jusqu’à obtenir l’effet qui vous convient. Plus vous déplacez le curseur vers la droite plus les coins s’assombrissent.
Aplatissez l’image : Image > Aplatir l’image.

Lueur centrale

Effectuez la même manipulation que précédemment mais en inversant la palette de couleur (blanc en PP et noir en AP) et en déplaçant le curseur du milieu vers la gauche pour éclaircir le centre de l’image.
Aplatissez l’image : Image > Aplatir l’image.

Le fond est terminé. Vous pouvez maintenant rajouter du texte, un logo où ce que vous voulez pour habiller ce fond :

Définition

On distingue deux grands types de canaux :

• - les canaux chromatiques (ceux qui portent l’information sur les couleurs)
• - les canaux alpha (qui ont un lien étroit avec les masques de sélection)

Les canaux chromatiques

Ils représentent la variation des trois couleurs primaires qui mélangées constituent l’image en couleur. Ces canaux sont calculés sur 8 bits et sont les constituants visuels de l’image. Selon le mode colorimétrique (RVB, niveaux de gris, couleurs indexés), le nombre de canaux varie. En mode RVB, l’image est constituée des trois canaux Rouge, Vert et Bleu. Les modes indexés et niveaux de gris ne sont représentés que par un seul canal. Le mode CMJN utilisé pour les travaux d’imprimerie n’existe pas encore dans Gimp mais le sera dans un futur proche.

Les canaux chromatiques sont toujours affichés en premier dans la fenêtre de dialogue des canaux et dans l’ordre R, V, B. Ils ne peuvent pas être effacés. Si vous cliquez sur un canal dans la liste vous (dés)activez le canal correspondant. Un canal activé apparait surligné en bleu. L’affichage de l’image change selon qu’un ou plusieurs canaux soient activés ou pas. Ainsi une image blanche prendra la teinte de la complémentaire de la teinte du canal désactivé. Si je désactive le canal bleu, l’image blanche devient jaune; si je désactive le canal rouge, l’image blanche devient cyan et si je désactive le canal vert, l’image blanche devient magenta. Je rappel que nous sommes dans le model additif.

Désactiver un canal chromatique rouge, vert ou bleu n’est pas sans conséquence. Par exemple si vous désactivez le canal bleu tous les pixels qui seront ultérieurement ajoutés n’auront pas de composante bleue, c’est à dire qu’un pixel blanc prendra la couleur complémentaire jaune.

Pour bien comprendre le principe de ce système, il faut avoir des notions sur les couleurs, leurs propriétés et leurs classifications. Si vous n’êtes pas au point sur ce sujet, je vous invite à consulter l’article intitulé « L’harmonie des couleurs » que j’ai rédigé dans la rubrique « Graphisme » de ce blog.

Le canal alpha

Il n’a pas d’impact visuel sur l’image. Il encode l’information sur le degré de transparence de chaque pixel qui constitue l’image. Le blanc représente une opacité complète, le noir une transparence complète et les tons de gris les transparences partielles. On les utilise souvent pour mémoriser des masques ou des sélections.

Les canaux peuvent être utilisé pour recevoir et conserver une sélection. C’est une façon de l’enregistrer pour la conserver dans le temps et ainsi avoir la possibilité de s’en resservir ultérieurement. On parle alors de masque de sélection. On peut créer autant de masques de sélection qu’on le désire. En les chainant, nous appliquons les modifications à l’ensemble des masques.

Voici en d’autres mots une définition issue de la documentation française de gimp :

« Les canaux peuvent être utilisés pour sauvegarder, restituer et modifier vos sélections. Les Masques de sélection, ou masques de canaux, créés dans la partie basse de la Fenêtre des canaux, sont une représentation d’une sélection en niveaux de gris, où les pixels blancs sont sélectionnés et les pixels noirs ne le sont pas. »

Les masques de sélection apparaissent en-dessous des canaux chromatiques sous la forme d’une liste dans la fenêtre de dialogue. Comme c’est le cas pour les canaux chromatiques, un canal alpha peut être (des)activé. Un canal alpha activé apparait surligné en bleu.

Le canal alpha est optionnel. Si vous créez votre image sans transparence alors le canal Alpha ne sera pas présent. Cependant vous pouvez décider de créer un nouveau canal. Ce nouveau canal sera un masque de canal (un masque de sélection) appliqué sur l’image.

Applications

Maintenant que nous avons défini les canaux sur le plan technique, nous pouvons légitimement nous demander à quoi ça sert ? Je ne vais pas décrire ici tous les cas d’utilisations possibles, d’une part parce que se serait trop long, d’autre part parce que je ne les connais pas tous.

Utilisation des canaux chromatiques

Dans mon article « Détourage complexe » de la rubrique « Infographie » vous pourrez trouver un premier exemple d’utilisation des canaux chromatiques. Je vous laisse consulter l’article pour plus de détails.

Nous allons voir ici comment modifier, à l’aide des canaux, les couleurs d’une image.

Exemple 1

Il arrive fréquemment lors de prise de vue photographique, que nos images présentent une dominante de couleur liée aux caractéristiques particulières de l’environnement. Il est possible, grâce à un post-traitement sous Gimp de corriger une dominante colorée en travaillant sur les canaux de couleurs à partir de l’outil courbes. Il existe d’autres techniques et d’autres outils pour manipuler les couleurs mais l’outil courbes a l’avantage d’être l’un des plus précis pour ce genre de manipulation et de pouvoir effectuer les traitements séparément sur les trois couches R, V et B.

Prenons une photographie sous-marine représentant un portrait de tortue marine. Cette photo à une dominante bleue comme c’est généralement le cas dans ce type d’environnement. Pour diminuer cette dominante bleue, nous allons nous rendre sur le canal bleu et réduire le nombre de pixels bleus à l’aide de l’outil courbes.

Pour cela activez l’outil courbes : menu Couleurs > Courbes, sélectionnez le canal bleu dans la liste déroulante en haut à gauche puis abaissez la courbe dans sa zone médiane.

Il vaux toujours mieux retirer une information que d’en rajouter une qui n’existe pas. Donc la solution par exemple d’augmenter les pixels rouges pour compenser la dominante bleue n’aurait pas été une bonne solution ici. Si vous voulez réchauffer une photo, abaissez la quantité de pixels bleus et si vous voulez la refroidir, abaissez la quantité de pixels rouges.

Exemple 2

L’observation des canaux R,V,B peut également vous donner des indications pour corriger une image. Prenons cet exemple provenant de l’ouvrage « Gimp efficace » de Cédric Gemy, 1er édition chez Eyrolles (vous pouvez retrouver les explications originales aux pages 200 et 201 de l’ouvrage) :

Etudions les vignettes des canaux R,V et B de l’image (j’ai également affiché les histogrammes de chaque canal pour appuyer nos observations) :

Canal rouge, on voit un contraste important entre les feuilles et les fleures avec peu de pixels dans les tons moyens. Cela est confirmé par l’histogramme qui montre beaucoup de pixels dans les tons foncés (partie gauche de l’histogramme), une quantité moyenne de pixels dans les tons claires (partie droite de l’histogramme) et très peu de pixels dans les tons moyens (partie médiane de l’histogramme).

Canal vert, Il ressemble au canal rouge mais en moins prononcé. Il est relativement contrasté avec une majorité de pixels dans les valeurs sombres.

Canal bleu, nous remarquons un manque de contraste dans les valeurs de cette teinte. Cela est confirmé par la forme de la courbe de l’histogramme. La plupart des pixels du canal bleu se trouvent dans les tons moyens (partie médiane de l’histogramme).

Il s’agit d’un végétal donc a priori les feuilles devraient être vertes et la dominante bleue parait peu réaliste. Pour corriger ces défauts nous allons utiliser le « mixeur de canaux » qui permet de modifier un canal en lui appliquant les caractéristiques des autres canaux. La manipulation du mixeur de canaux n’est pas très évidente au début mais son efficacité vaut la peine qu’on s’y intéresse. Dans le menu allez dans Couleurs > Composants > Mixeur de canaux.

Notre objectif est de rendre les feuilles plus vertes, de diminuer la quantité de bleu dans les tons moyens et augmenter les tons moyens dans le canal rouge qui en manque cruellement.

La liste déroulante intitulée « Canal de sortie » désigne le canal qui sera modifié. Les trois curseurs déterminent la contribution du canal rouge, vert ou bleu au résultat.

Il est conseillé de cocher la case « Préserver la luminosité ». Cela permet de réduire un excès de luminosité tout en conservant le rapport visuel des luminosités. Vous pouvez ainsi modifier le poids des couleurs sans changer la luminosité globale.

Commençons par modifier le canal bleu. Nous allons appliquer les caractéristiques du canal rouge sur le canal bleu. Nous avons vue que la canal bleu manque de contraste parce qu’il possède peu de pixels dans les tons claires et sombres. Comme le canal rouge a de nombreux pixels dans les tons sombres et une quantité moyenne de pixels dans les tons claires, les caractéristiques du canal rouge appliquées au canal bleu va compenser en partie les manques du canal bleu.

Choisissez le canal bleu comme canal de sortie. Déplacer le curseur du canal rouge vers la droite (environ 130).

Maintenant modifions le canal rouge de façons à lui rajouter des pixels dans les tons moyens en lui appliquant les caractéristiques du canal bleu qui possède, lui, beaucoup de pixels dans les tons moyens.

Choisissez le canal rouge comme canal de sortie. Déplacer le curseur du canal bleu vers la droite (environ 150).

Le canal vert n’a pas trop besoin de correction. Nous pouvons lui appliquer avec parcimonie le canal bleu pour enrichir ses tons moyens.

Choisissez le canal vert comme canal de sortie. Déplacer le curseur du canal bleu vers la droite (environ 150) et le curseur du canal rouge vers la droite (environ 12).

Voici le résultat obtenu avant et après le mixage des canaux :

Les feuilles sont bien vertes, la dominante bleue a disparue mais les fleurs ne sont plus jaunes mais blanches-violettes. Je ne sais pas si cette couleur des fleurs est réaliste car ce n’est pas moi qui ai pris la photographie. Lorsque vous réalisez vos manipulations, veillez à vérifier que vous ne vous éloignez pas trop de la réalité sauf si votre but est plus d’obtenir une image créative que réaliste.

Utilisation du canal Alpha

Comme exercice d’application, nous allons créer des sélections puis les enregistrer dans des masques de sélection.

Imaginons que je souhaite dessiner un personnage dans un environnement quelconque. Je commence par dessiner la silhouette de mon personnage au pinceau puis son environnement. Pour pouvoir retravailler les détails de mon personnage plus tard, je décide qu’il serait judicieux de sélectionner sa silhouette et de l’enregistrer dans un canal afin de la réutiliser plus tard.

Pour cela je vais utiliser dans un premier temps les masques rapides. J’ouvre un nouveau document, j’active le masque rapide (icône carré pointillé en bas à gauche), mon canevas devient rosé. Je prend l’outil pinceau et dessine la silhouette de mon personnage. Dessiner sur le masque avec la peinture noire supprime des plages sélectionnées, la peinture blanche en ajoute. Comme je part d’un nouveau document, il n’y a pas encore de sélection. Je dessine donc en blanc pour générer ma sélection. Attention, ayez bien conscience que vous ne dessinez pas ici le personnage avec des pixels de couleurs (ici blanc) mais que vous dessinez le remplissage de la sélection du personnage. Il n’y aura donc à la fin qu’une sélection et rien ne sera dessiné sur votre calque d’origine.

Une fois terminé, je reclique sur l’icône « masque rapide » pour transformer ma silhouette en sélection. Attention je rappel qu’il faut dessiner en noir pour masquer des pixels (générer de la transparence), en blanc pour démasquer les pixels et en valeurs de gris pour des nuances de transparences. Si vous dessinez avec une couleur c’est la valeur lumineuse de cette couleur qui sera prise en compte.

Pour enregistrer cette sélection dans un canal et ainsi me créer un masque de sélection (ou masque de canal) de ma silhouette, je me rend dans le menu Sélection > Enregistrer dans un canal. Je peux ensuite modifier les paramètres de ce masque de sélection grâce au clic droit ou aux icônes situées en bas de la fenêtre de dialogue des canaux.

Lorsque vous créez un nouveau canal, vous pouvez choisir l’opacité de remplissage. Une opacité de remplissage de 100% fait apparaitre l’image noire, une opacité de remplissage de 0% fait apparaitre l’image blanche, à 50% apparait une image grise. Lorsque vous retournez sur le calque de votre image, il faut cacher (icône œil) le masque de sélection au préalable si vous ne voulez pas voir son opacité de remplissage.

Maintenant que votre masque de sélection est enregistré, vous pouvez à tous moment retrouver votre sélection en retournant dans la fenêtre des dialogues des canaux, en activant le masque de sélection (surlignage en bleu) et en cliquant sur l’icône carré pointillé rouge en bas de la fenêtre de dialogue. Vous pouvez également modifier cette sélection à l’aide d’un outil de dessin ou d’un outil de sélection et l’enregistrer à nouveau dans le même masque de sélection ou dans un nouveau canal.

Pour ensuite dessiner sur votre calque avec des pixels de couleurs dans votre sélection, il faut penser à désactiver le masque de sélection dans la fenêtre des canaux (le surlignage bleu disparait) pour indiquer à Gimp que vous ne dessinez plus dans un canal une sélection mais sur un calque avec un dépôt de pixels colorés.

Sources :

• Gimp 2 efficace de Cédric Gémy, édition Eyrolles
• Documentation française de Gimp

Pour appliquer les Path Effects (« Effet de chemins »), ouvrez la boite de dialogue correspondante : Chemins > Effets de chemin … (Ctrl+Shift+7). De cette boite de dialogue, vous pourrez contrôler les paramètres des effets et/ou annuler ces effets.

Voici une description de ces quatre « Effets de chemin » :

Courber un chemin

Cet effet permet de courber un chemin le long d’un autre chemin. Lorsque l’effet « Courber un chemin » est appliqué à un chemin A, ce chemin peut être courbé le long d’un autre chemin B (que l’on appellera « chemin courbé »). Avec l’éditeur de nœuds, le chemin A et le chemin courbé B peuvent être modifié sur le canevas et le résultat se met à jour instantanément.

Dans la fenêtre de dialogue des « Effets de chemin » (Ctrl+Shift+7), après avoir cliqué sur le bouton « Appliquer », vous trouverez à côté du libellé « Chemin de courbure » trois boutons. Un bouton vous permettant d’éditer sur le canevas le chemin courbé (Editer sur la zone de travail), un bouton vous permettant de coller un nouveau chemin courbé enregistré dans le presse papier et un bouton vous permettant de le coller.

Cas pratique :

1- Tracer votre chemin B qui servira de modèle et le long duquel viendra se déformer le chemin A.

2- Sélectionnez et copier dans le presse-papier le chemin B.

3- Sélectionnez le chemin A que vous voulez déformer. Il doit bien s’agir d’un chemin et non d’un groupe de forme ou d’une forme. Transformez vos formes en un chemin unique pour pouvoir appliquer les « effets de chemins ». Pour cela, si vous travaillez sur une seule forme, sélectionnez la puis : Chemin > Objet en chemin. Si vous avez un groupement de formes, dégroupez les (Objet > Dégrouper), sélectionnez-les tous puis unifiez-les : Chemin > Union.

4- Ouvrez la boite de dialogue des effets de chemin : (Maj+Ctrl+7) ou Chemin > Effets de chemin

5- Appliquer l’effet « Courber un chemin »

6- Collez le chemin courbé en cliquant sur le bouton (représenté par une icône) « Coller le chemin » qui se trouve à côté du libellé « Chemin de courbure »

7- Pour éditer les chemins, cliquez sur le bouton (représenté par une icône) « Editer sur la zone de travail »

Motif suivant un chemin

Cet effet permet de courber un chemin le long d’un autre chemin. Quand cet effet est appliqué à un chemin A (appelé squelette) un autre chemin B (appelé motif) peut être passé en paramètre. Le résultat est que le chemin B est courbé le long du chemin A. Avec l’outil d’édition des nœuds, le chemin peut être modifié sur l’espace de travail et le résultat est mis à jour en temps réel.

Vous pouvez choisir le motif pour le squelette sélectionné en le collant dans l’espace de travail à partir du presse-papier (c’est-à-dire que vous sélectionnez et vous copiez dans le presse-papier le motif, ensuite vous sélectionnez le squelette, vous appliquez l’effet « Motif suivant un chemin », et vous collez le motif). Dans la fenêtre de dialogue des « Effets de chemin » (Ctrl+Shift+7), le paramètre « Largeur » vous permet de changer la largeur du motif appliqué au chemin.

Cas pratique :

1- Choisissez un motif (chemin B) qui viendra se positionner sur un squelette (chemin A). N’oubliez pas de le transformer en un chemin unique si ce n’est pas déjà le cas.

2- Sélectionnez et copiez le motif, chemin B, dans le presse-papier.

3- Dessinez le squelette, chemin A, sur lequel le motif viendra se positionner et sélectionnez le.

4- Ouvrez la boite de dialogue des effets de chemin : (Maj+Ctrl+7) ou Chemin > Effets de chemin

5- Appliquer l’effet « Motif suivant un chemin »

6- Vous pouvez choisir de répéter ou pas le motif en sélectionnant une des options proposée dans le menu déroulant « Copies du motif »

7- Collez le motif en cliquant sur le bouton (représenté par une icône) « Coller le chemin » qui se trouve à côté du libellé « Chemin de courbure »

8- Vous pouvez éditer le motif pour modifier sa forme, cliquez sur le bouton (représenté par une icône) « Editer sur la zone de travail »

Relier les sous-chemins

L’effet « Relier les sous-chemins » relie les points de deux sous-chemins d’un chemin avec des lignes droites ou des segments courbés. Le résultat obtenu ressemble à du « String Art » dont vous pouvez voir quelques exemples sur la page Line Designs for the Computer

La forme des chemins connectés peut être contrôlé par le paramètre « Editer sur la zone de travail ». Ce procédé peut être utilisé pour dessiner une chevelure en reliant les chemins au niveau de la pointe. D’autres contrôles concernent le nombre de chemins, la variation de l’espace entre les chemins connectés (faisceau) et aussi si le début et la fin des pointes de la maille doit être exactement sur la sous-courbe d’origine ou peut dévier aléatoirement autour d’elle. Enfin la largeur des traits peut être modifié.

Notez que cet effet ne peut être appliqué uniquement que sur un chemin composé de deux sous-chemins. Utilisez Chemin > Combiner (Ctrl + K) pour créer un tel chemin à partir de deux chemins séparés.

Cas pratique :

1- Tracer deux chemins A et B.

2- Combinez les deux chemins pour ne former qu’un seul chemin : sélectionnez A et B et cliquez sur Ctrl+K.

3- Sélectionnez la combinaison obtenu.

4- Ouvrez la boite de dialogue des effets de chemin : (Maj+Ctrl+7) ou Chemin > Effets de chemin

5- Appliquez l’effet « Relier les sous-chemins »

6- Dans la partie « Effet courant », vous disposez d’un contrôle sur plusieurs paramètres pour transformer votre maillage : nombre de chemins …

7- En cliquant sur l’icône « Editer sur la zone de travail », vous éditez un chemin sur la zone de travail qui vous permet de modifier l’orientation du maillage.

Engrenages

L’effet « Engrenages » est un effet ludique. Il génère un enchainement d’effets interconnectés à partir du chemin auquel l’effet s’est appliqué. Les nœuds du chemin définissent les centres des effets.

Les trois premiers nœuds sont spéciaux; le premier défini l’angle de départ de l’enchainement, le second nœud défini le centre du premier effet et le troisième nœud définie le rayon du premier effet. C’est-à-dire que, pour créer un enchainement de deux effets, vous aurez besoin d’un chemin avec quatre nœuds; pour trois effets, cinq nœuds, et ainsi de suite.

Cas pratique :

1- Tracez un chemin comportant minimum quatre nœuds.

2- Sélectionnez ce chemin.

3- Ouvrez la boite de dialogue des effets de chemin : (Maj+Ctrl+7) ou Chemin > Effets de chemin

4- Appliquer l’effet « Engrenages »

6- Dans la partie « Effet courant », vous disposez d’un contrôle sur plusieurs paramètres comme par exemple le nombre de dents sur l’engrenage.

Sources :

• - Documentation officielle des nouveautés de Inkscape 0.46

Principe

Le détourage d’éléments aussi complexe qu’une chevelure ne peut être correctement effectué avec des outils comme le lasso, la plume ou la baguette magique. Surtout si cette chevelure comporte de nombreux cheveux longs et fins qui se baladent au grès du vent. Il est tout à fait possible de grossir l’image à 800%, d’utiliser un masque rapide, et de dessiner chaque cheveux au pinceau avec une brosse douce. Mais ce soir minuit, vous y serez encore !

La technique que je vous propose ici va utiliser les couches RVB et les masques de calques. Le principe consiste à décomposer votre image en couches RVB, de détecter celle qui offre le meilleur contraste entre l’élément à détourer et le fond, puis d’accentuer ce contraste à l’aide des niveaux et des courbes.

Une fois ce résultat obtenu, vous allez utiliser l’image contrastée comme masque de calque que vous appliquerez sur votre image d’origine. Pour mieux comprendre, passons à la pratique.

Ce tutoriel est réalisé à partir de la version 2.4 de Gimp sous Linux Ubuntu Gutsy Gibbon.

Technique

Voici l’image d’une fleur que nous allons détourer pour la placer ensuite sur un fond noir.

Décomposons cette image en couches RVB : Couleurs > Composants > Décomposer, choisissez RVB.

Vous obtenez une nouvelle image en niveau de gris décomposée en trois couches Rouge, Vert et Bleu. Choisissez le calque qui offre le meilleur contraste entre le fond et l’élément à détourer. Pour cela, masquez les calques pour ne garder que le rouge, le vert ou le bleu. Ici, la calque qui offre le plus de contraste est le rouge.

Nous allons maintenant accentuer le contraste de ce calque à l’aide des niveaux et des courbes.

Sélectionner le calque rouge, et rendez vous sur l’outil niveaux : Couleurs > Niveaux

A l’aide des pipettes, refaite le point noir et le point blanc. Nous obtenons une image plus contrastée.

Vous pouvez accentuer encore les contrastes avec l’outil courbes : Couleurs > Courbes.

Il suffit de tordre la courbe en « S » comme illustré sur la copie d’écran ci-après.

Maintenant nous allons sélectionner puis copier l’image obtenu (Ctrl+A puis Ctrl+C), elle nous servira pour créer un masque de calque.

Retournez à l’image d’origine et rajoutez lui un canal alpha : click droit sur le calque > Ajoutez un canal alpha.

Ajoutez à ce calque un masque de calque : click droit sur le calque > Ajouter un masque de calque > Blanc (Opacité complète).

Enfin, avec le masque activé, collez le contenu de votre presse papiers : Ctrl+V puis ancrez le calque flottant dans votre calque (icône en forme d’ancre de marine en bas de la barre d’outil des calques).

Attention ! si la partie de l’image que vous souhaitez garder est la partie la plus sombre dans l’image monochrome que vous venez d’obtenir, inversez la luminosité pour obtenir le négatif : Menu Couleurs > Inverser. En effet avec le masque de calque > Blanc (Opacité complète), se sont les parties sombres qui seront effacées.

Vous obtenez votre sélection sur fond transparent (les zones transparentes sont matérialisées en blanc sur cette image).

Pour obtenir votre fleure sur fond noir, rajoutez un nouveau calque que vous remplissez de noir puis placez le sous votre calque de fleur.

Pour obtenir un résultat plus naturel, vous pouvez démasquer les pixels se trouvant à l’intérieur de la fleur en dessinant au pinceau dans votre masque de calque avec la couleur blanche.

Vous obtenez le résultat suivant :

Voila, ce mode de détourrage et une technique parmi d’autres. Les choses peuvent se compliquer si en valeur de gris, le fond se confond avec l’élément à détourer. Si vous connaissez une technique plus rapide ou plus efficace, n’hésitez pas à m’en faire part dans les commentaires.

Principe

Lorsqu’il s’agit d’extraire un élément d’une image, plusieurs techniques s’offrent à l’utilisateur. Si l’objet a des contours nets qui contrastent bien avec un fond uniforme, les outils de sélection classique comme le lasso, les ciseaux ou la baguette magique suffisent. Lorsque l’objet est placé sur un fond complexe et riche de détails, l’outil plume est plus approprié.
Si les contours de votre objet ne sont pas nets mais progressifs ou que vous voulez éviter l’utilisation des chemins via l’outil plume, l’utilisation du masque rapide peut être la technique la plus précise. Pour les sélections très complexes comme une longue chevelure au vent, d’autres techniques sont nécessaires qui utilisent par exemple les couches de couleurs.

Alors que les masques de calque sont liés au canal Alpha des calques, les masques rapides ne sont liés à aucun calque et représente une sélection. Dans un travail de sélection simple, nous utilisons généralement des outils pour détourer l’élément à isoler. Avec les masques rapides, vous ne tracez pas le contour de l’objet, vous peignez la sélection que vous voulez garder.

En effet, un masque rapide est en réalité un canal en niveaux de gris de la taille de l’image. Un pixel non sélectionné a une valeur 0 alors qu’un pixel sélectionné a une valeur 255. Un pixel partiellement sélectionné aura une valeur entre 0 et 255. Les pointillés mobiles qui matérialisent une sélection à l’écran sont tracés à mi-chemin entre les pixels non sélectionnés et les pixels sélectionnés.

Les masques rapides sont étroitement liés aux masques de sélection aussi appelés masques de canaux. Un masque rapide est un masque de sélection destiné à être utilisé temporairement pour réaliser graphiquement une sélection. On entend par temporairement qu’il ne sera pas conservé dans la liste des canaux après avoir été transformé en sélection contrairement à un masque de sélection conventionnel.

Fonctionnement

L’activation d’un masque rapide est simple, il suffit de cliquer sur le petit carré pointillé en bas à gauche de la fenêtre, cette icône devient alors rose et à bord continue. Par défaut cette activation provoque l’apparition d’un voile transparent rouge sur votre image. Plus un pixel est sélectionné plus il est transparent, moins un pixel est sélectionné plus il apparait rouge sur le masque rapide. Si une sélection est présente, le masque est initialisé avec le contenu de la sélection.

Pour travailler sur une sélection, il suffit de choisir un outil de dessin comme le pinceau, de le paramétrer selon ses besoins et de dessiner sur la zone à conserver. L’application sur l’image de pixels blancs au pinceau ajoute des zones de sélections. L’application de pixels noirs en enlève. Vous pouvez utiliser des niveaux de gris pour créer des aires partiellement sélectionnées.

Une fois que votre zone a été dessinée au pinceau, la désactivation du masque rapide (icône en bas à gauche de la fenêtre) laisse apparaître une sélection en pointillé à l’endroit où vous avez peint.

Attention, à partir du moment où vous désactivez le masque rapide, le canal temporaire est définitivement perdu et seul un retour immédiat au mode masque permet de la récupérer. Si vous avez besoin, il est possible d’enregistrer la sélection dans un canal pour la récupérer plus tard. On parle alors de masque de sélection. Pour enregistrer une sélection dans un canal, assurez-vous qu’une sélection existe et que le masque rapide n’est pas actif dans la fenêtre d’image puis sélectionnez dans le menu d’image Sélection > Enregister dans un canal. Un nouveau canal de sélection apparait dans la fenêtre de dialogue des canaux.

A noter que lorsque le masque rapide est actif, le Copier-Coller agit sur la sélection au lieu de l’image entière. Ce peut-être un moyen pratique de transférer une sélection d’une image dans une autre.

Application

Nous allons voir sur un exemple, l’application du masque rapide. Prenons une photo de voiture et utilisons les masques rapides et l’outil pinceau pour l’extraire de son décors.

Activez le masque rapide puis choisissez la plume avec une opacité à 100. Sélectionnez rapidement l’intérieur de la silhouette de la voiture.

Sur les bords de la silhouette, aux endroits où la frontière avec l’arrière plan est imprécise, utilisez une brosse avec des contours progressifs ou diminuez l’opacité de la brosse. Pour se travail de précision, n’hésitez pas à zoomer au maximum. Plus la résolution de votre image sera importante plus votre travail sera précis.

Ensuite désactivez le masque rapide, la sélection de la voiture apparait en pointillé.

Vous pouvez maintenant faire un copié-collé pour l’extraire et mettre votre voiture dans un autre environnement.

Conclusion

Le masque rapide sert donc à dessiner une sélection, y compris les transitions, avec les outils de dessin de Gimp sans enregistrer cette sélection dans un canal. C’est l’outil idéale pour des sélections propres aux bordures progressives.
Comme pour le masque de calque, vos actions sur le masque rapide n’agissent par directement sur l’image mais ici sur le canal de sélection.

Sources :

Certains passages de cet article sont issus de la documentation officielle de Gimp

Principe

Le masque de calque est un outil avancé de photomontage que l’on utilise pour fusionner plusieurs images en ne gardant d’elles que les parties qui nous intéresse. Par exemple utiliser le ciel nuageux d’une photo et l’incruster à la place d’un ciel sans intérêt d’une autre photographie.

L’amateur utilise généralement la gomme pour effacer les parties de la photo qui ne lui plait pas. L’inconvénient de cette technique, c’est qu’elle détruit votre image en effaçant ses pixels. Si vous voulez revenir en arrière où modifier vos actions, la seule solution est d’annuler les manipulations que vous avez effectuées et repartir de zéro. Vous n’avez donc pas intérêt à prendre ce genre de décision à la fin de votre processus créatif.

Avec les masques de calque, vous ne travaillez pas sur la photo elle même mais sur un masque séparé qui laisse intègre la photo d’origine. Cela augmente les possibilités de manipulation que vous pourrez faire sur votre image.

Attention, il ne faut pas confondre les masques de calque avec les masques de sélection/masques rapides. Le masque de calque représente le canal Alpha du calque auquel il est joint, tandis que le masque de sélection représente une sélection et existe indépendamment de n’importe quel calque particulier.

Je vous rappel qu’un canal Alpha encode l’information sur le degré de transparence de chaque pixel du calque. Il est visible dans le « Dialogue des Canaux ». Le blanc représente une opacité complète, le noir une transparence complète et les tons de gris les transparences partielles.

Fonctionnement

Un masque de calque est forcément lié à un calque. D’ailleurs, le masque d’un calque se visualise non pas au dessus ou en dessous du calque mais à côté de celui-ci dans la fenêtre de dialogue.

Pour ajouter un masque à un calque, il suffit de sélectionner le calque qui vous intéresse puis de faire un clique droit sur le calque et choisir « Ajouter un masque de calque ». Vous trouverez plus de détail sur les options sur la documentation officielle de Gimp.

Comme nous l’avons dit plus haut, un masque de calque représente un canal Alpha, qui, alternativement, contrôle la transparence d’un calque. Dans ce contexte le blanc représente 100% d’opacité, le noir 100% de transparence, et le gris un niveau intermédiaire d’opacité/transparence.

Donc lorsque vous activez le masque (en cliquant dessus dans la fenêtre de dialogue) et que vous dessinez avec un outil comme le pinceau, palette de couleur sur noir, c’est comme si vous effaciez des pixels sur votre image. Si vous peignez avec du blanc, dans les parties précédemment effacées, c’est comme si vous rajoutiez les pixels disparues. En fait avec les masques de calque les détails effacés ne sont que… masqués car c’est sur le masque que vous agissez pas sur l’image.

Application

Pour illustrer ces explications nous allons effectuer deux exercices avec les masques de calque.

Le but du premier exercice sera d’appliquer sur la peau d’un personnage (en l’occurrence moi) un tatouage obtenu à partir d’une image d’ornementations.

Nous allons placer un calque « ornementation » par dessus un calque « portrait ». Ensuite le travail consistera à ajouter une masque de calque au calque « ornementation » pour masquer tous les pixels qui ne constituent pas l’ornementation. Cette manipulation aura pour effet de faire apparaitre le portrait par transparence sauf aux endroits où l’ornementation existe.
Ensuite pour faire apparaître le grain de la peau, il suffira de baisser l’opacité du calque « ornementation ».

Voici l’image portrait et le tatou que nous allons incruster sur la peau.

Le portrait se situe sur un calque et le tatou sur un autre calque distinct placé au dessus. Nous ajoutons un masque de calque au calque « tatou », nous l’activons puis nous effaçons au pinceau avec la couleur noir les contours du tatou (en rose). Ensuite nous activons le calque « tatou » et diminuons son opacité. Nous n’avons plus qu’ à placer le tatou à l’endroit qui nous convient.

Dans le second exercice, nous allons simuler une profondeur de champs réduite. Le premier plan d’une photo sera net et l’arrière plan flou avec un dégradé de l’intensité du flou.

Voici une photo de port de pêche. Nous allons simuler une profondeur de champ qui met l’accent sur les barques de pêcheur du premier plan en dissimulant l’arrière plan dans le flou pour ne pas distraire le regard. Le passage du net au flou se fera de façon progressive grâce à l’outil dégradé.

Dans un premier temps nous allons dupliquer le calque qui contient notre photographie. Puis nous allons ajouter un masque de calque à ce second calque que j’ai nommé « Copie + masque ». J’applique sur ce calque un flou Gaussien de 10 (Filtres > Flou > Flou Gaussien). Ensuite avec la palette de couleur noir/blanc, je trace un dégradé de haut en bas sur le masque de calque.

Cela à pour effet de flouter le haut de l’image et de laisser net le bas avec une transition du flou progressive.

Conclusion

Tout l’intérêt du masque de calque est de masquer des zones d’une image sans la dégrader. En effet, les manipulations s’effectuent sur le canal Alpha du calque via les masques avec le noir qui efface (100% de transparence) et le blanc qui rétablie les pixels masqués (100% d’opacité).

Avec cette technique, vous pourrez effectuer des photomontages, fusionner et combiner plusieurs images sans avoir besoin d’annuler vos manipulations si vous n’êtes pas satisfait des résultats.

Sources et autres liens :

Documentation française de Gimp

A lire en complément, un autre article qui traite du même sujet sur le site Calcyum