DES TITRES EN RELIEF
DES TITRES EN RELIEF
Techniques SPIP

Vous trouverez ici des trucs et astuces destinés aux développeurs de sites sous SPIP.

La majorité de ces trucs est consacrée aux filtres graphiques introduits dans SPIP 1.9. Il y a là en effet un vaste champ d’expérimentation pour les webmestres et les graphistes.

Chaque truc est suivi d’un forum auquel nous vous invitons à participer.

N.B. La présence de ces trucs et astuces sur notre site professionnel est destinée à faire connaître notre activité de création de sites sous SPIP. Vous pouvez librement utiliser les morceaux de code fournis ici dans vos propres squelettes. Vous pouvez reprendre ces exemples sur votre site ou dans les forums d’un autre site ; dans ce cas, nous vous demandons simplement d’avoir la courtoisie de référencer la page d’où est tiré le code repris.

XML

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

PNG - 28.2 ko
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.

Mai 2006
Des titres en relief
eric (eric.boutigny chez free.fr)

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

Mai 2006
Des titres en relief
ARNO* (arnaud chez paris-beyrouth.net)

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).

Mai 2006
Des titres en relief
eric

ok et merci ARNO

je suis ta procedure ...

Merci encore

Mai 2006
Des titres en relief
eric (eric.boutigny chez free.fr)

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 ?

Mai 2006
Des titres en relief
ARNO* (arnaud chez paris-beyrouth.net)

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 ».

Juin 2006
Warning bizarre
Franz

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

Juillet 2006
Des titres en relief
Jean-Luc GARNIER (jean-luc.garnier chez gemalto.com)

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..)

Juillet 2006
Des titres en relief
Jean-Luc GARNIER (jean-luc.garnier chez gemalto.com)

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 !

Juillet 2006
Des titres en relief
Jean-Luc GARNIER (jean-luc.garnier chez gemalto.com)

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

Septembre 2006
Des titres en relief
Matthieu Marcillaud (marcimat chez ouvaton.org)

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.

Juin 2007
Des titres en relief
Bernard (bernard.dano chez cegetel.net)

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

Juin 2007
Call to undefined function : a()
ShiLoÖ

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Ö

Juin 2007
[résolu] Call to undefined function : a()
ShiLoÖ

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

ShiLoÖ

Votre message :
Un message, un commentaire ?

(Pour créer des paragraphes, laissez simplement des lignes vides.)

Qui êtes-vous ? (optionnel)