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 :

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.