Documentation du plugin « Dégradés »

Utilité

Ce plugin permet de créer des images en dégradés de couleurs, comme celui qui constitue l’image de fond de son logo.

Il ne prétend pas faire concurrence aux logiciels de traitement graphique mais il offre quelques particularités :

• il permet de construire des dégradés définis au pixel près, donc facilement reproductibles ;
• il est capable de produire en une seule opération des dégradés sur 3 couleurs. Ainsi, le logo de ce plugin montre un dégradé de bleu à rouge en passant par le jaune.
• il peut construire un dégradé à partir d’une image (voir les exemples décrits plus loin).

Le premier usage pour lequel ce plugin a été conçu est de faciliter la conception graphique de sites web. Dans certains cas en effet, on peut souhaiter obtenir des transitions douces entre un fond de page et un bandeau : dégradé vertical pour un bandeau de haut de page ou dégradé horizontal pour un bandeau latéral de navigation.

Cela n’empêche pas bien sûr de l’utiliser à d’autres fins, la seule limite ici étant l’imagination de chacun.

Les images fabriquées par ce plugin sont en fait des « tranches » élémentaires (largeur 1 pixel) que l’on peut répéter autant de fois qu’on le souhaite dans la direction transversale afin de remplir la zone souhaitée : un dégradé vertical est une tranche verticale qui se répète horizontalement, un dégradé horizontal est une tranche horizontale qui se répète verticalement.

Exemples de dégradés à 2 ou 3 couleurs de base

Exemple 1. Dégradé vertical simple (deux couleurs de base) sur 64 pixels : chaque tranche verticale de cette image part d’un pixel bleu pâle en haut et aboutit à un pixel vert pâle en bas. La transition se fait progressivement sur les 62 pixels intermédiaires.

Exemple 2. Dégradé horizontal simple sur 64 pixels : chaque tranche horizontale de cette image part d’un pixel bleu pâle à gauche et aboutit à un pixel vert pâle à droite. La transition se fait progressivement sur les 62 pixels intermédiaires.

Exemple 3. Dégradé horizontal double (trois couleurs de base) sur 128 pixels. Chaque tranche horizontale de cette image part d’un pixel bleu pâle à gauche et aboutit à un pixel vert pâle à droite, mais ici le dégradé se fait en deux étapes : d’abord une transition progressive sur 62 pixels jusqu’à deux pixels jaunes au centre, puis une nouvelle transition progressive sur les 62 pixels restant jusqu’au pixel vert de droite.

Caractéristiques géométriques des dégradés

Les dégradés créés par ce plugin sont des images au format PNG. Ces images sont un peu différentes de celles qui illustrent cet article car en fait elles ne mesurent qu’un pixel d’épaisseur. Seule leur longueur (pour un dégradé horizontal) ou leur hauteur (pour un dégradé vertical) varie en fonction des tailles que l’on attribue à chaque zone de couleur. Si les images données en exemple sur cette page ont une certaine « épaisseur », c’est pour permettre de se rendre compte de l’effet produit.

L’image ci-contre montre les 3 zones qui composent un dégradé simple, créé à partir de deux couleurs de départ :

1. un aplat de la première couleur, ici le bleu ;
2. le dégradé proprement dit ;
3. un aplat de la deuxième couleur, ici le rouge.

La largeur de chaque zone est paramétrable indépendamment des autres, de 1 à 10 000 pixels (ce qui doit suffire pour la plupart des tailles d’écrans...). Dans cet exemple, chaque zone mesure 70 pixels mais on aurait pu choisir n’importe quelle autre combinaison, par exemple 50-126-34 au lieu de 70-70-70.

Techniquement, l’effet de dégradé est obtenu en appliquant à la première couleur un facteur de transparence qui augmente progressivement, laissant voir de plus en plus la deuxième couleur. Lorsque l’on arrive au dernier aplat, la transparence est totale : on ne voit plus que la deuxième couleur. L’application de la transparence se fait sur une échelle de 0 (opacité totale) à 127 (transparence totale), les valeurs 0 et 127 correspondant aux deux aplats de couleur :

• si la zone de dégradé mesure 126 pixels, toutes les nuances seront exploitées et chaque pixel sera différent de ceux qui l’entourent ;
• si la zone de dégradé est plus courte, le nombre de nuances sera réduit et le dégradé paraîtra plus abrupt ;
• si au contraire cette zone est plus longue que 126 pixels, toutes les nuances seront exploitées mais chaque nuance pourra se retrouver répartie sur plusieurs pixels voisins et le dégradé sera constitué d’une suite de petits aplats. Cela n’est pas gênant car les différences d’une nuance à l’autre sont quasi-imperceptibles.

Pour un dégradé double, on ajoute simplement deux zones supplémentaires après l’aplat de deuxième couleur : une deuxième zone de dégradé suivie d’un aplat de la troisième couleur.

Dégradé à partir d’une image

Une particularité de ce plugin est de pouvoir calculer un dégradé à partir d’une image : l’aplat de première couleur sera remplacé par une copie d’un bord de l’image.

Prenons l’exemple de la photo ci-contre qui représente un coucher de soleil sur la mer. Nous pouvons créer un dégradé vertical à partir de son bord droit (115 pixels), en choisissant une couleur finale adéquate.

Ce dégradé peut alors servir de base à un fond de page sur lequel l’image de départ, calée en haut à gauche, produira un assez bel effet. Le résultat est visible sur les deux images ci-dessous, l’une avec un dégradé vers le noir, l’autre avec un dégradé vers le blanc (tailles des zones : 115-126-14).

Il est possible d’affecter à la taille de la première zone (le côté de l’image qui remplace l’aplat de première couleur) une longueur (ou hauteur) différente de celle de l’image :

• si la taille imposée à cette zone ne dépasse pas celle de l’image (selon la direction choisie), la couleur du dernier pixel de cette zone sera prise comme couleur de départ et le dégradé commencera à partir de là ;
• si la première zone est plus grande que l’image, on obtiendra sous l’image un aplat de la couleur du dernier pixel, jusqu’à ce que commence la zone de dégradé.

Voici à titre d’exemple ce que donnerait le dégradé de ce coucher de soleil (vers le blanc) si l’on avait choisi pour la zone 1 des tailles de 104 pixels (au-dessus de l’horizon), 106 pixels (l’horizon) ou 130 pixels (15 pixels d’aplat sous la photo de base).

Dégradés combinés

Les possibilités de ce plugin ne se limitent pas à ce qui est décrit ci-dessus. En effet, chaque dégradé obtenu constitue une image qui peut à son tour servir de base à un nouveau dégradé, et ainsi de suite.
En partant d’une image qui serait elle-même un dégradé, on peut obtenir aisément des dégradés à couleurs multiples.

Ainsi, en deux opérations, on obtient un dégradé à 5 couleurs comme sur cet arc-en-ciel sommaire :

Utilisation du formulaire

Le plugin « Dégradés », une fois installé, fournit un formulaire directement utilisable... à condition de l’appeler dans un article. Le plus simple est de l’intégrer dans le texte d’un article grâce au code

<formulaire|creer_degrade>

Il est également possible (mais d’un moindre intérêt) de l’appeler dans un squelette :

#FORMULAIRE_CREER_DEGRADE

Si vous avez assimilé les principes expliqués ci-dessus, l’utilisation de ce formulaire ne doit pas poser de problème particulier.

La première partie du formulaire vous demande de choisir l’orientation et le sens de votre dégradé : vertical ou horizontal, de haut en bas, de gauche à droite, etc.

Ensuite, vous devez donner les caractéristiques de la zone de départ du dégradé. Vous avez pour cela le choix entre 3 options :

• un aplat de couleur (couleur 1) ;
• un fichier image localisé sur le site où est installé le plugin ;
• un fichier image situé sur votre ordinateur, à télécharger sur le site.

Dans le premier cas, il vous suffit de saisir le code de la couleur et la longueur (en pixels) de l’aplat. Le code de couleur est de la forme HTML classique #rrvvbb (3 composantes rouge vert bleu). Si vous avez installé le plugin Palette, une roue polychromatique vous permet de choisir la couleur sans vous occuper du codage.

Si vous souhaitez commencer votre dégradé par un bord d’image plutôt qu’une couleur unie, il faut distinguer selon l’emplacement où se trouve ce fichier image. S’il existe déjà sur votre site (et si vous savez dans quel répertoire), vous remplacez le code de couleur par le chemin vers cette image sur votre site. Si vous souhaitez télécharger ce fichier depuis votre ordinateur, cochez la case « Télécharger un fichier image » [1]. Le champ de couleur sera alors remplacé par un champ « fichier » vous permettant de choisir le fichier à télécharger.

Par défaut, c’est le bord gauche de l’image qui sert de base à un dégradé vertical, le bord supérieur pour un dégradé horizontal. Si vous préférez utiliser le bord droit (comme dans l’exemple ci-dessus) ou inférieur, cochez la case correspondante.

Vous devez ensuite spécifier la deuxième couleur de base du dégradé, la taille de l’aplat correspondant et celle du dégradé. Si vous ne comprenez pas à quoi cela correspond, voyez plus haut l’exemple du dégradé bleu→rouge.

Une dernière étape est nécessaire si vous voulez créer un dégradé à 3 couleurs de base : cocher la case « dégradé supplémentaire », définir la troisième couleur, sa taille et la taille du deuxième dégradé. Ces 3 derniers paramètres sont similaires à ceux de la deuxième couleur.

Une fois tous les paramètres renseignés, il vous suffit de cliquer sur le bouton Ok. Le formulaire se recharge alors et le résultat apparaît dans le cadre « Aperçu », tout en bas du formulaire. Attention, sa largeur est limitée : un dégradé horizontal trop grand n’apparaîtra pas en entier.
Tant que vous n’avez pas cliqué sur Ok, vous pouvez retrouver les paramètres initiaux en cliquant sur le bouton Réinitialiser.

Pour récupérer l’image du dégradé, faites un clic-droit sur le cadre d’aperçu et enregistrez l’image sous le nom (et l’emplacement) qu’il vous convient.

Désactivation

Ce plugin est avant tout destiné à faciliter la conception graphique d’un site web. Une fois sa tâche accomplie, il n’a pas vocation à rester activé en permanence à moins que vous ne souhaitiez le conserver en service pour créer des dégradés à usages divers.

Vous pouvez le désactiver une fois que vous avez terminé de vous en servir, et même le supprimer totalement.