Contactez-nous

1

Un site dûment timbré

15 mars 2006
par ARNO*

[SPIP 1.9 et GD2] L’astuce qui suit n’a rien de bien compliqué, il s’agit d’une nouvelle variation dans l’utilisation du nouveau filtre image_masque. Nous allons, tout bonnement, placer nos vignettes dans des timbres.

Commençons par réaliser notre « masque » :

L’image du masque
Cliquez sur la vignette pour obtenir le véritable fichier.

Ce fichier (timbre-horizontal.png), que nous installons dans notre dossier de squelettes, est un fichier PNG 24, où la zone grise (gris 50%) au centre laissera l’image d’origine intacte, la zone blanche devra devenir parfaitement blanche, et le bord transparent (sur la vignette de prévisualisation, agrandie et colorée en rose) marque la dentelure du timbre.

Il n’y a alors rien de plus facile que d’appliquer notre masque à des fichiers de portfolio (images jointes à un article), ou à des logos.

Ce qui nous donne :

L’image est, comme nous l’avons déjà expliqué, redimensionnée (pour peu que les images que l’on fait passer par ce filtre soient toujours plus grandes que le masque) et recadrée pour adopter les proportions du masque.

Mais le résultat n’est pas encore satisfaisant : les zones « masquées » par le blanc (la bordure blanche du timbre) ne sont pas complètement blanches. En effet, le filtre image_masque ne remplace pas complètement les couleurs, il les « décale ». De ce fait, les couleurs « masquées » par un pixel blanc du masque ne deviennent pas blanches : elles sont « décalées » vers le blanc.

Le décalage se faisant par rapport au gris 50%, la valeur maximale du décalage (obtenue avec un pixel de masque blanc ou noir) est 50% de la gamme de couleur.

Il suffit donc d’appliquer une seconde fois le masque pour que le blanc remplace complètement les couleurs d’origine :

On obtient désormais le résultat souhaité :

Afin de dynamiser notre interface, nous allons faire tourner légèrement cette image, de façon à ce que le timbre ne soit pas parfaitement aligné, mais comme collé « de travers ». Très simple avec image_rotation :

Et là : c’est tout moche !

Le filtre image_rotation provoque, comme toute rotation d’une image constituée de pixels, une dégradation de l’image.

La solution consiste alors à réduire les dimensions de l’image, le redimensionnement gommant les effets d’escalier. Ici, nous décidons de réduire l’image de moitié (elle fait, avant le filtre, 280 pixels de large), en forçant le filtre reduire_image à une largeur maximale de 140 pixels :

Et voilà :

C’est la raison pour laquelle nous avons, dès le début, travaillé avec un masque de grande taille : nous savions que, par la suite, nous réduirions les dimensions pour gommer les effets d’une rotation.

Une petite ombre portée là-dessous, et nous obtenons l’image voulue :

Un coup de tampon là-dessus, et notre site est oblitéré :

  • Philippe
    Septembre 2006

    bien sur la question c’est : comment tu rajoute le tampon :) car j’aimerais vraiment bien creer des filigrane sur mes images ! ;)

  • Javier
    Septembre 2006

    Moi aussi j’aimairais faire des filigranes sur les images. ¿Est ce que le filtre image_masque est la solution ?

  • Octobre 2006

    il faut faire un masque plus grand que l’image, avec le tampon dedans et le reste gris et l’appliquer sur l’image à la fin.

  • Novembre 2006

    Bonjour et merci pour cette contrib.

    Après avoir effectué des recherches sur le sujet je n’ai pas trouvé la réponse à ma question, donc la voici :

    Est-il possible de définir l’angle de rotation des images au hasard dans une certaine plage (par exemple entre +5 et -5 degrés) ?

    Faut-il pour cela aller modifier la fonction dans filtres_images.php ou y-a-il une autre solution ?

    Merci d’avance pour votre réponse.

  • davduf
    Janvier 2007

    Hello Arno*,

    Bravo pour l’article et les astuces...

    Hélas, j’ai les images là encore bouffées. Seuls le haut et la gauche sont "timbrées"... ; et non le bas ni la droite...

    une idée ?

    Merci encore !

    PS : je suis sous Safari/Mac.

  • Madrilene
    Février 2007

    Bonjour peut-on dans une optique d’automatisation du traitement des images, appelé le masque par une variable passée dans l’URL du type :

    [(#FICHIER|image_masque(#ENV=logo_article)|image_masque(#ENV=logo_article))] ?

    Merci

  • jp
    Octobre 2007

    Bonjour,

    bravo pour cette astuce, ça egaye la présentation des sites :)

    Par contre, j’ai suivi le tuto, mais je me retrouve avec des bords tout moches qui pixellisent. Pourtant j’ai bien pris soin de faire un masque plus grand et d’appliquer une reduction. J’ai un simple cadre blanc avec un contour et un ombrage leger, le tout en PNG.

    Autre soucis : si mes images ne sont pas de la meme proportion que le masque, je me retrouve avec seulement un bout du masque (par exemple, mon masque a un rapport 4:3, et il m’arrive d’avoir des images plus "carrées", et du coup je n’ai pas de bord bas et drote...). Y a t il moyen de corriger ça ?

  • Un timbré de plus
    Février 2008

    Je savais que bien des informaticiens étaient timbrés sur les bords, mais là j’en ai la confirmation. Oblitération à l’appui !

  • captain_torche
    Octobre 2009

    A chaque fois que je tombe sur ce sujet, je me dis "mais quelle est la couleur d’un gris 50% ?", et comme aucun des commentaires ne le dit ... Donc, un gris 50%, c’est :
    - 127,127,127 en RVB
    - 7F7F7F en Hexa
    - 0, 0, 50% (tiens ?) en TSL (ou HSV, ou HSB)

    Au moins, la prochaine fois que je me poserai la question, je saurai où trouver la réponse ;)

  • tetue
    Décembre 2009

    Merci pour ce tuto qui reste une (trop rare) référence sur les filtres image de SPIP.

  • philooo
    Juin 2012

    ca serait bien si on pouvait utiliser ce filtre pour creer des filigrane / watermark

    ou meme un nouveau filtre qui permettrait d’ajouter un text typographique par dessus une image.

    c’est un besoin basic pour les sites internet je suis surpris que ca soit pas dispo sur spip :(

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.