Contactez-nous

1

Des titres en relief

15 avril 2006
par ARNO*

[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 :

  1. function image_estampage_alpha($im, $trait=1, $prof=1)
  2. {
  3. $dec1 = floor($trait/2);
  4. $dec2 = ceil($trait/2);
  5.  
  6. $image = valeurs_image_trans($im, "estampage-$trait-$prof");
  7. if (!$image) return("");
  8.  
  9. $x_i = $image["largeur"];
  10. $y_i = $image["hauteur"];
  11. $im = $image["fichier"];
  12. $dest = $image["fichier_dest"];
  13. $creer = $image["creer"];
  14.  
  15. if ($creer) {
  16. $im = $image["fonction_imagecreatefrom"]($im);
  17. $im_ = imagecreatetruecolor($x_i, $y_i);
  18. @imagealphablending($im_, false);
  19. @imagesavealpha($im_,true);
  20. $color_t = ImageColorAllocateAlpha( $im_, 255, 255, 255 , 127 );
  21. imagefill ($im_, 0, 0, $color_t);
  22.  
  23. for ($x = 0; $x < $x_i; $x++) {
  24. for ($y=0; $y < $y_i; $y++) {
  25.  
  26. $rgb = ImageColorAt($im, $x, $y);
  27. $a = ($rgb >> 24) & 0xFF;
  28.  
  29. $x1 = $x+$dec1;
  30. $y1 = $y+$dec1;
  31. if ($x1 < 0 OR $x1 >= $x_i) $x1 = $x;
  32. if ($y1 < 0 OR $y1 >= $y_i) $y1 = $y;
  33. $rgb1 = ImageColorAt($im, $x1, $y1);
  34. $a1 = ($rgb1 >> 24) & 0xFF;
  35.  
  36. $x2 = $x-$dec2;
  37. $y2 = $y-$dec2;
  38. if ($x2 < 0 OR $x2 >= $x_i) $x2 = $x;
  39. if ($y2 < 0 OR $y2 >= $y_i) $y2 = $y;
  40. $rgb2 = ImageColorAt($im, $x2, $y2);
  41. $a2 = ($rgb2 >> 24) & 0xFF;
  42.  
  43. $m = round((($a-$a1)+($a2-$a))*$prof);
  44. $m = max(min($m,127),-127);
  45. $m += 127;
  46. $color = ImageColorAllocateAlpha( $im_, $m, $m, $m , 0 );
  47. imagesetpixel ($im_, $x, $y, $color);
  48. }
  49. }
  50. $image["fonction_image"]($im_, "$dest");
  51. }
  52.  
  53. $class = $image["class"];
  54. if (strlen($class) > 1) $tags=" class='$class'";
  55. $tags = "$tags alt='".$image["alt"]."'";
  56. $style = $image["style"];
  57. if (strlen($style) > 1) $tags="$tags style='$style'";
  58.  
  59. return "<img src='$dest'$tags />";
  60. }

Télécharger

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 :

L’image du masque
Cliquer sur la vignette pour obtenir le fichier d’origine.

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.

  • eric
    Mai 2006

    Bon eh bééé Suis un rien sur le C..

    C’est carrément géant !

    je suis sur votre site depuis qq heures à lire et relire ... A m’en mettre plein les yeux. Soufflé que je suis.

    J’ai qd meme un soucis ... sur un SPip 1.9, GD2 activé bien sur. Je place le code (copier/coller et nettoyé) de la fonction dans "mes_fonctions.php" lui meme situé dans mon dossier squelette, l’image du masque dans /IMG, et pan ! une page blanche ... Cache vidé , recalcul de la page rien n’y fait.

    Je dois avoir raté qq chose ?

    Merci à vous de bien vouloir me mettre sur une piste pour corriger mon ou mes erreurs.

    Encore bravo

  • ARNO*
    Mai 2006

    Plusieurs pistes :
    — placer l’image masque dans le dossier squelette ;
    — le calcul est long... si le timeout du serveur est court, il arrive que l’opération soit interrompue avant le fin du calcul. Dans ce cas, essayer de recharger la page plusieurs fois : une étape du calcul s’effectue à chaque fois et passe en cache ; au final on a le résultat complet.

    Comme il y a là une succession d’étapes, il est assez facile de voir où ça coince en reprenant le code étape par étape (en ajoutant les filtres successivement, avec test en ligne à chaque fois).

  • eric
    Mai 2006

    ok et merci ARNO

    je suis ta procedure ...

    Merci encore

  • eric
    Mai 2006

    Voila ce que cela me donne à present ...

    Fatal error : Call to undefined function : imagecreatefrom() in c :\program files\easyphp1-8\www\19b\ecrire\inc\filtres.php on line 1119

    pour info j’ai effectué une maj dans la nuit.

    Je ne vois pas pourquoi l’appel de la fonction_imagecreatefrom ne s’effectue pas ?

  • ARNO*
    Mai 2006

    Ca, habituellement, c’est parce que le fichier masque n’a pas été trouvé par le script. Il faut donc vérifier que tu as bien installé ton fichier masque dans le dossier du squelette. Dans certains cas, carrément vérifier qu’on l’a installé sur le serveur ! (Je passe mon temps à faire cette erreur : comme je développe mon squelette en local, ensuite j’upload le squelette et j’oublie le fichier "masque" qui va bien...) Vérifier également que le nom du fichier est correctement saisi ; vérifie aussi que tu bien récupéré le fichier fourni ici, et éventuellement vérifie qu’il porte bien le nom réclamé dans le filtre. Ne pas l’installer dans un sous-dossier « PNG ».

  • Franz
    Juin 2006

    Salut,

    Ça marche très bien — avec un SPIP version SVN d’hier — si je recopie le code tel quel (et en ajoutant deux |supprimer_numero).

    Par contre, dès que je modifie un seul des paramètres de |image_typo (le padding, la taille de la police ou la couleur, je me prend les warnings suivants et aucune image n’est renvoyée :

    J’ai mis la police dans le répertoire des squelettes (ça ne marchait pas en la mettant dans un répertoire polices/ à l’intérieur du répertoire des squelettes.

    Franz

  • Jean-Luc GARNIER
    Juillet 2006

    Bonjour ! Petites questions basiques : 1. pourquoi m’est-il impossible d’imprimer le moindre article sur ce site ? J’aime bien me constituer une petite doc papier lorsque j’expérimente et chaque impression içi sort invariablement tronquée ! 2. où doit-on ranger les fichiers de polices TTF pour que cet exemple fonctionne ? 3. un petit conseil pour trouver des polices de qualité ?

    Jean-Luc (qui reprend intégralement un site SPIP réalisé par un prestataire..)

  • Jean-Luc GARNIER
    Juillet 2006

    Resalut !

    Peut on utiliser ces filtres de traitement hors boucle SPIP ? J’aimerais assez pouvoir créer des titres statiques avec cette méthode..

    Merci !

  • Jean-Luc GARNIER
    Juillet 2006

    Re-salut,

    Je viens d’essayer d’appliquer le filtre mais sans succès. Boucle article, affichage : [(#TITRE image_typopolice=niteclub.ttf,couleur=8cc42a,taille=16,padding=4 image_masque [(#TITRE|image_typopolice=niteclub.ttf,couleur=8cc42a,taille=16,padding=4 image_flou2 image_estampage_alpha1,1.5 extraire_attributsrc)],top=-1,left=-1 image_masque#CHEMINimages/masque-grad.png)]

    Résultat : pas de warning, pas d’erreur, mais pas de titre non plus ! Que dalle à l’écran ! Questions : où dois-je ranger le fichier font ? Quelle est la syntaxe exacte pour appliquer le filtre image_estampage_alpha, notamment la variable $im ?

    Merci d’avance, je suis un peu largué..

    Jean-Luc

  • Matthieu Marcillaud
    Septembre 2006

    Bonjour et merci tout plein pour ces turoriaux géniaux !

    J’ai passé un temps fou à trouver une toute petite erreur sur celui-ci qui empêchait de faire fonctionner tout cela correctement chez moi (spip 1.9.2 alpha) :

    Ligne 4 du script de la fonction, ce n’est pas (ou plus) valeurs_image_trans (qui me retourne un Array totalement vide) mais image_valeurs_trans :
    $image = image_valeurs_trans($im, "estampage-$trait-$prof");

    Encore merci !
    MM.

  • Bernard
    Juin 2007

    Bonjour,

    ces filtres marchent très bien avec FireFox, mais avec Internet Explorer, il reste un fond gris (la transparence serait-elle mal gérée ?)

    Quelqu’un a une idée pour supprimer ce fond ?

    merci

  • ShiLoÖ
    Juin 2007

    Bonjour et merci pour cet splendide script . Je ne désespère pas d’arriver à le faire fonctionner (!)
    Quand j’utilise première fonction (|image_estampage_alpha⟨1,1⟩), j’obtiens l’avertissement suivant :
    Call to undefined function : a() in[...]mes_fonctions.php

    C’est la ligne 16 qui semble être visée :
    $im = $image["fonction_imagecreatefrom"]($im) ;

    Sinon, il y a peut-être un soucis avec la variable a de la ligne 27 :
    $a = ($rgb >> 24) & 0xFF ;

    Je sèche ! Quelqu’un a-t-il une solution, ou au moins une explication, une piste ?
    D’avance, merci, merci, merci !
    ShiLoÖ

  • ShiLoÖ
    Juin 2007

    Après mise à jour de Spip 1.9.1 à 1.9.2, ces scripts fonctionnent à merveille !
    Félicitations à paris-beyrouth.net !

    ShiLoÖ

  • MacGeol
    Mai 2010

    Bonjour,

    Superbe script ! Et d’ailleurs tous les conseil sur l’ensemble de ce site, bravo et merci !

    Par contre depuis une mise à jours à la version 2.1 de SPIP ce script-ci ne marche plus. En cause il me semble l’absence de la fonction "valeus_image_trans" dans le fichier "inc/filtres.php". Je cherche donc une adaptation possible avec les filtres images de SPIP 2.1, et je ne suis pas contre un petit coup de pouce !

    Un grand merci d’avance !

  • MacGeol
    Mai 2010

    Ca y est j’ai trouvé !

    En fait c’est simple, c’est juste que la fonction "Valeurs_image_trans" a été changé de fichier. Donc comme indiqué dans les mises à jour de SPIP : http://www.spip.net/fr_article4728.html il faut ajouter "include_spip("inc/filtres_images") ;" au début du fichier "mes_fonctions.php" pour que tout rentre dans l’ordre.

    Encore merci A bientôt

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.