Contactez-nous

1

Un titre en peau de zèbre !

7 mars 2006
par ARNO*

[SPIP 1.9 et GD2] Vous avez toujours rêvé d’un site sous SPIP avé la moquette sur le volant ? Le pare-soleil Pioneer sur la plage arrière ? La sono qui crache le Mia ? Et la peau de zèbre sur les sièges en skaï ?

Pour la peau de zèbre, lisez ce qui suit...

- Il faut tout d’abord réaliser une image typographique de notre titre. Récupérons une police plutôt typée. Pour l’exemple, j’ai récupéré la police African chez 1001freefonts mais, comme souvent avec les polices en freeware, il manque les accents...

Le filtre image_typo est détaillé sur le site officiel de SPIP.

L’astuce, ici, consiste à utiliser la couleur « 808080 », c’est-à-dire le gris 50%. Cette couleur nous permettra d’appliquer la texture par la suite.

- Une recherche sur Google/Images nous livre quelques textures de peau de zèbre. Utilisons celle-ci :

Texture de peau de zèbre
Cliquez sur la vignette pour obtenir la version de taille normale.

Notre fichier se nomme zebre.jpg, nous le stockons dans le même dossier que notre squelette. Remarquez qu’il s’agit d’un fichier JPEG, et non PNG 24 comme le recommande la doc du filtre image_masque ; en effet, nous n’utiliserons pas ici les informations de transparence, donc le PNG n’est pas utile.

- Appliquons la texture à notre image typographique :

Le choix du gris 50% pour l’image typographique s’explique ici : le masque coloré (le fichier zebre.jpg de image_masque) va se « mélanger » à la couleur de l’image d’origine. Si la couleur d’origine est, comme ici, un gris à 50%, alors elle ne sera d’aucun effet dans l’image résultante. Si on trouve, en revanche, le résultat trop clair, plutôt que de retravailler le fichier zebre.jpg ou d’appliquer un filtre image_gamma, on peut tout simplement rendre l’image typographique plus foncée, c’est-à-dire en modifiant son paramètre couleur.

- Finalement, pour être certain de rendre aveugle la moitié de vos visiteurs (l’ensemble n’est pas d’une grande lisibilité...), réalisons un effet d’ombre portée, en nous inspirant de l’article présenté ici.

Ce qui nous donne le magnifique :

Comme disait Sylvie Vartan : « Ça pique les yeux » (L’amour c’est comme une cigarette, 1981).

- Sur le même principe, le manteau en peau de dalmatien :

Cliquez sur la vignette pour obtenir la version en taille réelle.
  • Sylvain
    Mars 2006

    Merci pour cet article, très intéressant ...

    une chose me questionne concernant la dernière image ... il n’est pas possible de faire le reflet avec du GD2 ? quand même pas hin :-)
    - c’est fait avec ’toshop ça non ?

  • ARNO*
    Mars 2006

    Non non, le reflet est bien réalisé avec les filtres de SPIP. Cétotomatik, donc (bon, pas là, vu que c’est une copie d’écran, mais la copie d’écran est bien celle d’une fenêtre de mon site de test).

    Je vais laisser un peu de suspens, mais je finirai par publier le truc...

  • Sylvain
    Mars 2006

    héhé, sacré Arno*

    Je sentais bien que tu ne disais pas tout, laisant flotter une douce brume de suspence.

    Mais tu as raison, attends un peut que tout le monde regardes ses RSS, ou que l’info passe sur les listes de discution ;-)

    PS : je remarque que la puce(.gif) à été changée ...
    - <- ici on la voit pas

  • Sylvain
    Mars 2006

    Encore moi,

    je teste tout ça, l’occasion de commencer à regarder SPIP 1.9 également, et j’ai un truc qui ne marche pas comme je le voudrais (/pensais) :

    mon titre de site est "g u a p h . n e t", avec un "g" et un "p" qui en minuscule on une partie du caractère qui descend en dessous de la ligne basse (je crois que l’on dis ça)
    or, je me suis dis ... eh bien c’est simple suffit de passer le titre en |majuscules et le "problème" est résolu ... seulement voiolà apparement ça passe pas en |majuscules ; extrait de ma balise : [(#NOM_SITE_SPIP|majuscules|image_typo{taille=48,couleur=808080})]

    une idée ?

  • Mars 2006

    arf, autant pour moi

    j’avais pas vu que maintenant |majuscules le faisait en CSS :
    style='text-transform: uppercase'

  • ARNO*
    Mars 2006

    Oui, c’est un peu embêtant, je ne sais pas si on ne va pas changer ça dans la version finale.

    En attendant, tu peux faire le filtre « majuscules » toi-même pour qu’il fonctionne en UFT-8. Il suffit d’utiliser mb_strtoupper :

    Ces commandes « multi-byte » sont justement destinées à UFT-8.

  • Sylvain
    Mars 2006

    re moi, allez c’est la dernière ;-)

    merci pour l’info "|mb_strtoupper" ça fonctionne

    - j’ai trouvé pour faire un reflet ;-)
    j’ai juste mis du temps à comprendre que l’image de la texture devait au moins être aussi grande que l’image devant être générée
    naïvement, je pensais qu’il la répétait en mosaïc quoi

  • ARNO*
    Mars 2006

    Bravo !

    Pour obtenir quelque chose d’encore plus neutre au niveau du reflet : fabrique ton fichier « degrade.png » non pas dans une couleur proche du fond, mais en gris 50%, et seule la transparence sera affectée.

    Et, pour limiter l’intensité du reflet (je suppose que c’est l’intention de ton utilisation d’une couleur proche du fond), commence ton dégradé de transparence déjà semi-transparent (genre 50% d’opacité en haut de l’image, et non 100% comme ça semble le cas actuellement ; et tu dégrades jusqu’à 0% comme actuellement un peu plus bas).

    De cette façon, ton reflet est « neutre ». Si tu changes la couleur de fond dans ta feuille de style, l’image reflet est toujours utilisable sans modification, c’est-à-dire sans que le reflet semble verdâtre par rapport au fond. Essaie par exemple de changer ta couleur de fond en noir, puis en rouge vif, tu verras que ton reflet actuel ne sera pas beau.


    Sinon, je n’ai pas testé, mais à priori la typo en « image de fond » (background:url...) ne sera pas affichée correctement dans MSIE, puisque le truc pour afficher le PNG24 dans MSIE ne peut s’appliquer à un tag img.

  • Mars 2006

    merci pour ces infos, effectivement c’est plus propre et sera plus simple pour faire des modifs de couleur ou autres plus tard ...


    oui pour l’image de fond, j’ai simplement appliqué le même style que pour les images PNG en plus du style (background :url...) ... mais je pensais bien que ce ne serait pas si simple :-p

    y pas un moyen tout même ? quitte à refaire le fichier : spip.php?page=win_png et en faire un spéciale pour les fonds spip.php?page=win_png_fond

    allez Arno* la prochaine SPIP 1.9 sort bientôt, faut absoluement trouver un truc là ...

  • Sylvain
    Mars 2006

    pour avoir une image (PNG 24 avec couche alpha) en fond de bloc, j’ai trouvé une solution :
    - http://blog.guaph.net/rubrique1.html

    c’est toujours un fichier « *.htc » mis en « behavior » :
    - http://www.twinhelix.com/css/iepngf...

    seul inconvenient ... l’image n’est pas répétée (mosaïque) dans le fond du bloc :-/ enfin je n’est pas encore regardé de près ... le « *.htc » doit pouvoir être amélioré

  • Juillet 2006

    Bonjour, bravo et merci pour tout ça !

    En local, j’ai réussi à avoir un reflet, mais seulement sur des lettrages, comme sylvain (et grâce à lui, d’ailleurs, merci sylvain !). Pour avoir le reflet d’une photo, faut-il le faire en trois "passes" : une pour l’originale, une avec le flip-horizontal de l’mage et une avec le dégradé, ou ai-je raté un prodigieux filtre "image-degrade" ?

    Cordialement.

    eric

  • elrik
    Juillet 2006

    Je réalise que j’ai bien mal exprimé ma question, désolé... En fait, j’ai fait mon titre avec image-typo et image-masque. Jusque-là, tout va bien. Après, j’ai voulu un reflet de ce titre : encore OK. Le problème, c’est quand j’ai voulu lui appliquer un dégradé : j’ai de nombreuses choses à apprendre encore (tant mieux). Ai-je raté quelque chose ? J’avoue ne pas comprendre... En attendant, je me suis servi d’image_alpha, pour l’atténuer, c’est pas si mal. Merci d’avance de votre réponse.

    Cordialement.

    eric

  • elrik
    Août 2006

    La clé n°1 : le filtre « extraire_attribut »...

    La clé n°2 : l’article « Des titres en relief » pour se servir de la clé n°1...

    Tout est dans le site, désolé d’avoir posté pour rien. Encore merci pour tout ce travail réalisé sur les filtres de traitement d’images.

    Cordialement.

    eric

  • troOn
    Décembre 2006

    pour mb_strtoupper ca fonctionne bien pour les majuscules, mais mes caractères accentués passent à l’as...

    je ne comprends pas trop pourquoi et ca m’attriste :)

    si quelqu’un a une idée, merci :)

  • didier
    Décembre 2006

    Et quand l’image_typographique est aussi un lien, il faut en plus genérer son état rollover, mais comment ?

  • Stéphane
    Mars 2007

    Je trouve ici la réponse à ma recherche sur les majuscules, j’en profite pour poser une question sur l’approche de la typo en GD2 : est-ce qu’il est prévu de la modifier : rêvons à |approche=-10...

  • Nicaud
    Avril 2007

    pourras t’on connaitre l’astuce du reflet ? cela m’intéresse beaucoup !!!!

  • karim belkacem
    Juillet 2007

    Salut Arnaud :)

    je cherche a avoir un effet de rotation sur les titre de rubrique, voir ici : (le titre en question est "News" dans la partie centrale de la page". J’ai chercher sur tout "Beyrout", mais rien vu sur le sujet, aurais tu une solution. Merci beaucoup...

  • karim belkacem
    Juillet 2007

    bon ben j’ai rien dit :) ca marche, j’ai rajouter "|image_rotation90" a image_typo, c’est con :) desole pour le derangement :)

    ++

  • ARNO*
    Juillet 2007

    @ Karim,

    Qu’est-ce que tu veux faire exactement ? Parce que là, ton « News » a bien tourné...

  • laurent
    Juillet 2007

    Dommage, le lien que donne sylvain n’existe plus pour faire un titre avec reflet

    Si vous connaissez l’astuce, merci d’avance !

  • Damien
    Août 2007

    Bonsoir, plus aucun trace de l’astuce des Reflets sur le web. Cela pourrait être très intéressant de publier un petit explicatif, ici ou sur spip-contrib par exemple.

  • hd
    Février 2008

    D’accord avec Damien.

  • newbie78
    Février 2008

    salut je voudrais superposer 2 images : une image en fond avec un alpha et un titre par dessus en image typographique, qqun a une idée ?

    MErci newbie

  • Hedera
    Juillet 2008

    Bonjour !

    Toutes mes félicitations, merci beaucoup pour toutes ces explications (dont j’use et j’abuse avec grand plaisir)
    Ma question porte sur l’esperluette "&" je n’ai pas trouvé le moyen de la faire afficher correctement avec les images typo de spip... Serait-ce la faute de ma police ? Suis-je une bille à ce point ?? Toujours est-il qu’à l’arrivée je n’arrive qu’à faire ressortir le code "& amp ; Vous conviendrez qu’au niveau de l’esthétique on peut faire mieux ! Je croise les doigts pour qu’il existe une solution à mon problème (il n’y a pas de problème, il n’y a que des solutions). Merci encore pour la diffusion de vos idées de génie sur les filtres spip.


    Cordialement
    Marie.

  • Adeher
    Mars 2009

    En réponse au message précédent, j’ai eu le même problème. Dans mes_fonctions.php, j’ai rajouté :

    function ampersand($strString, $blnEncode=true)
    {
            return preg_replace('/&(amp;)?/i', ($blnEncode ? '&' : '&'), $strString);
    }

    Puis dans mon squelette, j’applique à titre les 2 filtres suivants : mb_strtoupper|ampersand| dans cet ordre

  • marine
    Mars 2009

    bravo, merci pour l’esperluette je cherchais une solution depuis quelque temps et ça marche nikel.

  • Manou
    Octobre 2009

    bonjour a tous,

    est ce quelqu’un peut nous dire comment on fait l’image qui reflet s’il vous plait ???? Arnaud en Mars 2006, tu avais promis de publier le truc......3 ans après on a rien vu, fais quelques choses s’il vous plait

  • Vince
    Août 2010

    On prends l’image , on la flippe puis on y affecte un dégradé avec image_masque. Après on assemble le tout

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.