Tutoriel Inkscape - sommaire

Les filtres avec Inkscape - suite

Inkscape : ombrage des formes avec un filtre

Nous allons utiliser le sous menu "Ombres et lueurs".

Le sous menu "Ombres et lueurs"

Dans l'image ci-dessus nous avons appliqué à chaque rectangle vert citron un filtre appartenant à la catégorie "ombres et lueurs".

De haut en bas et de gauche à droite :
• aucun filtre - découpe et flou
• dedans et dehors - émergence
• incrustation - ombre et lumière
• ombre portée - ombre portée

L'option "ombre portée" est la plus intéressante ! C'est avec cet item que l'on peut produire véritablement un ombrage d'objet.

Mais il faut renseigner une boîte de dialogue ...
Pour le rectangle de gauche les décalages H et V sont positifs alors qu'ils sont négatifs dans le rectangle de droite.
Sinon les valeurs absolues sont identiques : 10px tant pour le rayon du flou, le décalage horizontal et vertical.

Ici les ombres portées sont de couleur noire à demi transparente (code RVBA : 0,0,0,122) et sont extérieures
Il est possible de paramétrer la couleur de l'ombrage et sa transparence donc le code RVBA du floutage.

Ombres portées

Il est important de bien savoir paramétrer la boîte de dialogue relative à l'option "ombre portées" puisque c'est sans doute le filtre dont vous vous servirez le plus.

Pour l'instant nous n'avons utilisé que l'onglet "options" de cette boîte de dialogue.
Mais il y a un deuxième onglet "couleur du flou".

Ci-dessous un document Inkscape avec 4 rectangles rouges (code RGB : 255,0,255 ou #FF0000)

• premier rectangle : aucun filtre
• trois autres rectangles : dans l'onglet "couleur de flou" j'ai coché "utilisez la couleur de l'objet". Donc l'ombre est de couleur rouge à demi transparente (code RVBA : 255,0,255,120).

Attention pour le dernier rectangle dans l'onglet "options" j'ai remplacé la proposition par défaut (extérieur) dans la liste "type d'ombre" par "ombre seulement".

Inkscape : éditeur de filtres

Vous pouvez créer vos propres filtres grâce à la commande Filtres/Editeur de filtre.
Mais attention c'est un peu plus compliqué ...

Les filtres de couleur : primitive feColorMatrix

Commentaire

Ci-dessus six images SVG reposant sur l'incorporation d'une photo ; son clonage puis la duplication cinq fois du modèle.

Pour bien comprendre la notion de filtre de couleurs, je vous conseille de visiter mon tutoriel "dessiner avec SVG" et plus précisément la page relative aux filtres de couleur.

Donc la primitive feColorMatrix peut avoir différents types (matrix, saturate, hueRote et LuminanceToAlpha).

Les différents filtres appliquées ci-dessus :
• première image : aucun filtre
• deuxième image : type "hueRote" (traduit par "décalage de teinte" dans Inskcape) avec une valeur de 90 degrés
• troisième image : type "hueRote" avec une valeur de 180 degrés
• quatrième image : type "hueRote" avec une valeur de 270 degrés
• cinquième image : type "saturate" (traduit par "saturation" dans Inkscape) avec une valeur de 0 ; donc nuances de gris
• sixième image : type "luminanceToAlpha" (traduit par "luminance vers opacité" dans Inkscape) donc production d'un "négatif"

Utilisation de l'éditeur de filtres

Je vous communique ci-dessous et à titre d'exemple la procédure pour appliquer à une image un filtre basé sur la primitive feColorMatrix de type hueRote (rotation) avec une valeur de 90 (degrés) :
• sélectionnez l'image puis produisez la commande Filtres/Editeur de filtre ...
• cliquez sur "nouveau" ; un nouveau filtre appelé "filtre1" est créé
• sélectionnez "Matrice de couleurs" dans la liste déroulante (vous avez sélectionné la primitive feColorMatrix)
• cliquez sur "ajouter un effet"
• dans la liste déroulante légendée "type" des paramètres de l'effet sélectionnez "décalage de teinte"
• via le curseur produisez la valeur "90" puis cochez "filtre1" ; l'image est verdie.

Extraits du code du document

J'ai extrait du code :
• une des 5 définitions de filtre de couleur de (ici de type huerotate)
• un des 5 clonage de l'image originale

image5761 identifie l'image matricielle incorporée dans le document SVG.

Atelier sur les filtres

À vous de bosser un peu !

Les filtres prédéfinis

Ci-dessous un document Inkscape.
La photo originale a été clonée 5 fois (incorporation de l'image matricielle puis génération cinq fois de la commande use).
A chaque copie il a été appliqué un filtre prédéfini appartenant au sous menu "Dessin et peinture d'image".

Essayez de reconstituer ce document !

Atelier sur l'éditeur de filtres

Il s'agit de filtres de couleurs :
• deuxième image : filtre de couleurs de type "saturation" avec valeur 4
• troisième, quatrième et cinquième image : filtres de couleurs de type "décalage de teinte"
• sixième image : filtre de couleur de type "luminance vers opacité" (pour créer un négatif).

Essayez de reconstituer ce document !

Pour le filtre de couleurs de type "saturate" la valeur de saturation est de 4.
Or dans le cadre de boîte de dialogue (de l'éditeur de filtres et pour les filtres de couleurs de type saturation) on arrive à sélectionner 0 ou 1 mais des entiers supérieurs à 1 ...
Aussi ai-je ouvert avec notePad le fichier SVG et j'ai modifié le code SVG relatif au filtre appliqué à la deuxième image : remplacer 0 par 4 pour l'attribut values.

Extrait du code

Ci-dessous le code SVG relatif au premier clone (deuxième image) de l'original :
• la définition du filtre de couleurs de type saturate
• le clonage de l'original