Contactez-nous

1

Une ombre portée

28 février 2006
par ARNO*

[SPIP 1.9 et GD 2] On veut créer et placer une ombre portée derrière une image. Cette image peut être une photographie rectangulaire (JPEG et non transparente), une image détourée (idéalement, un PNG 24 transparent, car placer une image derrière un GIF transparent est toujours risqué), ou encore une image typographique (du texte transformé en image).

Une ombre portée est une duplication de l’image, entièrement noircie, floutée, semi-transparente (une ombre entièrement noire n’est pas jolie, on préfère un noir semi-transparent, l’ombre rendant ainsi plus foncés les détails situés sous elle), et placée sous l’image d’origine avec un léger décalage.

Pour notre exemple, nous utiliserons une image installée en tant que document joint. On peut ainsi l’insérer avec #EMBED_DOCUMENT, ou filtrer le nom du fichier avec #FICHIER. (Note : dans la version actuelle de SPIP, il n’est pas possible d’appliquer des filtres après #EMBED_DOCUMENT, d’où l’utilisation de #FICHIER lorsqu’on veut utiliser les filtres graphiques.)

Pour que l’effet soit le plus intéressant possible, utilisons un PNG 24 transparent (par exemple un GNU jouant du pipeau).

Commençons notre série de filtrages.

Première étape : « brûler » l’image. Toutes les parties non transparentes de l’image doivent être complètement noires. Le filtre image_gamma modifie la luminosité d’une image. Avec la valeur extrême 254, l’image est brûlée :

Deuxième étape : flouter l’ombre. Le filtre image_flou est votre ami :

On peut régler l’intensité de image_flou en lui passant un paramètre en 1 (très peu de flou) et 11 (très flou). Ainsi :

Attention : plus ce chiffre est élevé, et plus le calcul est lourd. Si, au delà d’une certaine valeur de floutage, vous dépassez le temps limite de votre hébergement (timeout), mais que des valeurs inférieures « passent », vous pouvez enchaîner plusieurs image_flou :

Revenons à notre GNU. Troisième étape : rendre l’ombre semi-transparente. C’est exactement le rôle du filtre image_alpha :

C’est terminé. Il nous suffit maintenant de placer l’image de l’ombre sous l’image d’origine, avec un léger décalage. Ce qui peut se réaliser ainsi :

  • Octobre 2006

    quel est la definition exate de l ombre porter et a quoi cela sert

  • JPC
    Février 2007

    Je souhaite utiliser ceci dans un modèle, utilisation des possibilités de spip v1.9.

    Comment et où intégrer le code dans le modèle d’origine de spip img.html, que je mettrai en temps que modèle dans mon squelette ?

    Avec quel raccourci je l’appele dans mon texte ?

    Merci de votre aide, vous avez remarqué que je n’étais pas un pro de la programmation !!! JPC

  • Guy
    Février 2007

    Bonjour, Y a-t-il un moyen pour appliquer cette technique de manière automatique et systématique à toutes les images associées aux articles dans un même site ?

  • safpb
    Juin 2007

    ca sert a quoi ?

  • Loiseau2nuit
    Décembre 2007

    Merci Arno* :)

    et bonne année 2008 bien sûr ! :D

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.