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