[SPIP 1.9 et GD2] Après notre filtre de dispersion, voici un nouveau filtre inspiré des effets Photoshop et Gimp : un filtre d’estampage (emboss). Le but de ce filtre est de pouvoir réaliser ce genre de mise en relief :
Afin, comme d’habitude, de nous laisser un maximum de liberté en combinant différents filtres SPIP, notre nouveau filtre aura un effet très spécifique (ou limité), et c’est en utilisant plusieurs filtres successifs que nous obtiendrons le bon résultat.
Voici le code de ce nouveau filtre :
Ce qu’il effectue est un simple estampage, en fonction des différences de transparence de l’image d’origine. Ainsi, à partir de ce titre :
que l’on passe par notre nouveau filtre, on obtient :
Le code est plutôt simple : pour chaque pixel, on récupère sa valeur de transparence (alpha), ainsi que les valeurs de deux pixels situés en haut à gauche et en bas à droite ; on fait la moyenne des différences entre le point de référence et ces deux points, valeur que l’on transforme en niveau de gris.
De cette façon :
— si le point de référence et le point en haut à gauche ont la même transparence, on obtient un point gris 50% ;
— si le point en haut à gauche est transparent et le point de référence est plein, alors on obtient un point blanc ;
— si le point en bas à droite est transparent et le point de référence est plein, alors on obtient un point noir.
De cette façon, on a en niveau de gris l’estampage de notre titre.
Deux variables permettent de régler l’effet du filtre :
— la première variable ($trait) indique la distance séparant le point de référence de ses points de comparaison ;
— la deuxième ($prof) est l’importance du contraste de l’image résultante : avec $prof=1, les points foncés et clairs seront de couleurs noir et blanc ; avec $prof =0.5, les points foncés et clairs seront en niveaux de gris à 75% et 25% (les zones « neutres » étant toujours en gris 50%).
On peut également utiliser une valeur de trait négative pour créer un estampage en « profondeur » (plutôt qu’en relief) :
La difficulté va maintenant consister à utiliser cet estampage en niveau de gris pour réaliser une mise en relief du titre. C’est finalement assez simple (même si le code qui suit est très long), il suffit d’appliquer l’estampage en tant que masque sur le titre d’origine :
Ce qui revient à :
— #TITRE, je récupère le titre de l’image ;
— #TITRE|image_typo, je fabrique l’image typographique du titre ;
— #TITRE|image_typo|image_estampage_alpha, je fabrique l’estampage ;
— #TITRE|image_typo|image_estampage_alpha|extraire_attribut{src}, je récupère le nom du fichier de l’estampage.
— cela fait, je repart sur mon fichier d’image_typo, auquel j’applique le nom de fichier obtenu ci-dessus avec image_masque : les zones en gris 50% ne changent pas l’image ; les zones plus claires de l’estampage éclaircissent l’image ; les zones plus foncées assombrissent l’image.
En réalité, une étape intermédiaire permet d’améliorer le résultat : avant de réaliser l’estampage, je « floute » l’image d’origine, ce qui donnera un estampage plus doux :
Lorsqu’on applique cette version de l’estampage à notre titre d’origine, il faut désormais penser à légèrement décaler la position du masque, puisque le floutage a agrandit l’image :
Histoire de renforcer l’effet de relief, ajoutons un pseudo-reflet (l’effet est particulièrement à la mode en ce moment), en appliquant le masque suivant :
Le code devient carrément interminable :
mais le résultat est, à mon avis, très impressionnant :
De plus, une fois ce long code compris, jouer avec les paramètres pour obtenir d’autres effets n’est pas compliqué du tout :
Une note pour terminer. Remarquez que, dans le code, les deux occurences de image_typo sont rigoureusement identiques, y compris dans le choix de la couleur. En fait, la deuxième apparition du code est un strict copier-coller du premier. Or, le choix de la couleur de la typo destinée à être estampée est totalement indifférent, puisque le filtre se base uniquement sur la transparence alpha, et non sur les couleurs (d’où son nom). L’utilisation de paramètres rigoureusement identiques permet simplement de limiter les calculs, puisque le deuxième image_typo ne sera pas calculée, il servira simplement le cache généré par le premier.