Retrouvez cet article dans : Linux Magazine HS 22

NIVEAU : DEBUTANT L'aspect et le rendu général d'un site n'est pas forcément proportionnel à la complexité des éléments graphiques utilisés. Autrement dit, il est possible de faire une page Web magnifique utilisant des boutons simples ne nécessitant pas de grande expérience de graphiste.

1. Commencez par créer une image d'une taille permettant facilement les divisions en tous genres. Généralement un exposant de 2 est un excellent choix puisque vous pouvez ainsi placer des guides à des endroits précis et faciles à calculer. Ici, j'utilise une image de base carrée de 512 pixels de coté. Bien entendu, le bouton final ne fera pas cette taille importante mais cela facilite grandement le travail des détails. La dernière opération sera la rééchantillonnage de l'image à une taille adéquate pour votre page Web. Nous allons placer deux guides sur chaque coté de l'image à respectivement à 32 et 64 pixels du bord. Pour faciliter l'opération, utilisez le script-Fu via Image/Guides/Nouveau guide. Profitez-en pour faire un tour dans les préférences de The Gimp pour activer les raccourcis dynamique et définir ensuite un raccourcis pour cette entrée du menu. 2. Notre base de travail est prette. Les guides nous serviront à faire des sélections elliptiques et rectangulaires permettant de créer la forme de base du bouton : un carré aux coins arrondis. Nous verrons par la suite qu'il existe une autre solution pour obtenir une telle forme. Cependant, travailler avec des sélections permet de rendre ce tutoriel adaptable à n'importe quelle forme.

3. Activez la fonction de masque rapide en cliquant sur l'icône représentant un rectangle rouge au bas à gauche de la fenêtre d'image. Une coloration rouge/rose teinte l'image dans son ensemble. Cette coloration représente la future sélection. Tout ce qui est rose fait partie de la sélection. Tout ce qui est blanc en est exclus. Le masque rapide permet de travailler une sélection comme un calque et d'y faire des sélections. Ainsi nous allons commencer par supprimer les deux rectangles intérieurs en utilisant l'outil de sélection rectangulaire et en supprimant les morceaux. Les guides magnétique nous facilitent la tâche. 4. Pour supprimer du masque rapide les coins arrondis nous utiliserons tout naturellement l'outil de sélection elliptique. Pour apporter une précision à l'opération, double-cliquez sur l'outil afin de faire apparaître ses options. Vous trouverez là un menu permettant de choisir une taille fixe pour la sélection. Activez cette fonctionnalité et précisez une hauteur et largeur de 64 pixels. A présent vos sélections elliptiques ne sont plus variables quelquesoit le mouvement du pointeur de la souris.

5. Supprimez du masque rapide les quatres coins. L'opération est très facile et rapide du fait de l'utilisation de la taille fixe. N'oubliez pas de replacer l'option sur "Sélection à main levée" pour une future utilisation. Mieux vaut ne pas laisser ce type de fonctionnalité active. 6. Une autre manière d'obtenir une forme rectangulaire aux coins arrondis est d'utiliser le menu Sélection/Rectangle arrondi. Cette fonctionnalité permet très exactement d'arrondir les coins d'une sélection en utilisant une valeur en pourcentage comme base. Plus limitative, cette fonctionnalité peux être utilisée ici avec une sélection simple et carré. Le pourcentage à spécifier par l'utilisateur représente le rayon de l'arrondi par rapport à la taille globale de la sélection. Ici, avec la valeur par défaut de 50%, le rayon correpond à ((512-2*32)/2)*0.5 soit 112 pixels.

7. Différentes valeurs de pourcentage permettent d'obtenir des coins plus ou moins doux. Le pourcentage correspondant à la méthode par sélections elliptiques est de 14% soit 32/((512-2*32)/2)*100. Le principal problème de cette fonctionnalité (qui est parfois un avantage) réside dans le fait que tout est proportionnel. Avec une sélection rectangulaire les coins ne possèderont pas tous le même rayon. Avec une sélection complexe nous obtiendrons une sélection réctangulaire de la hauteur et largeur maximales de la sélection originale. 8. Revenons à nos moutons en désactivant le masque rapide (vous obtenez une sélection) et en ajoutant un calque transparent. Utilisez le raccourcis clavier [CTRL]+[MAG]+[.] pour remplir la sélection de la couleur d'arrière plan (blanc par défaut). Vous pouvez également utiliser le menu Edition/Remplir avec la couleur d'AP. La sélection encore active, utilisez le menu Sélection/Enregistrer dans un canal. Nous aurons besoin de cette forme par la suite.

9. Nous allons ajouter de la couleur. Choisissez une couleur d'avant plan qui vous convienne. Ajoutez ensuite un calque par dessus le précédent en prenant soin de spécifier dans la boîte de dialogue un remplissage avec la couleur d'avant plan et non un claque transparent ou blanc. 10. Utilisez ensuite le menu Sélection réduire afin de réduire la sélection d'une dizaine de pixels. Dans la liste des calques cliquez avec le bouton droit et choisissez le menu Ajouter un masque de calque. Dans la boîte de dialogue choisissez "Sélection" afin que le masque qui sera créé corresponde à la sélection active.

11. Le résultat de l'opération précédente ajoute un masque qui agit comme un pochoir. Tout ce qui ne fait pas parti de la sélection est masqué et n'apparaît plus. L'intéret de cette méthode par rapport à la suppression d'une partie du calque est la possibilité de changer facilement la couleur du bouton. Il vous suffira, en effet de remplir le calque avec la couleur de votre choix sans avoir à faire de sélection. 12. Ajoutez un nouveau calque transparent. A l'aide de l'outil texte ou en copiant/collant un élément externe, ajoutez le symbole, le texte ou le logo à l'ensemble, en blanc de préférence. Nous ajoutons cela maintenant et non en fin de tutoriel car cela nous permettra d'affiner sans surprise le réglage des prochains calques.

13. Nous allons apporter du relief. Assurez-vous qu'aucune sélection n'est faite et permuttez la couleur d'avant et d'arrière plan (blanc en avant plan). Ajoutez ensuite un calque transparent au dessus de tous ceux existant puis utilisez l'outil de remplissage par dégradé. Dans la boîte de dialogue de l'outil (double-clic sur l'outil) choisissez un dégradé "PP vers transparent" (premier plan vers transparent). 14. Procédez au remplissage verticalement du haut de l'image jusqu'au bas de la forme. Annulez et répétez l'opération jusqu'à obtenir un effet similaire à celui ci-contre. Notez que le dégradé dépasse de la forme de base, nous allons corriger ce problème même si, avec un fond blanc, ce n'est pas stritement nécessaire.

15. Nous allons ajouter un masque de calque comme précédement. Pour récupérer une sélection de la forme, plusieurs solutions existent. Soit activez le calque de base (forme blanche) et utilisez le menu Alpha vers sélection suite à clic droit dans la liste des calque. Soit en activant la sélection enregistrée dans la liste des canaux et en cliquant sur le bouton représentant un rectangle rose. La sélection récupérée, ajoutez un masque au calque du dégradé de la même manière que tout à l'heure. Réglez enfin l'opacité du calque sur 80%. 16. Ajoutez un calque blanc tout en bas de la pile puis un second, transparent juste dessus. La sélection est normalement encore active. Choisissez le noir comme couleur de premier plan et remplissez la sélection. Annulez ensuite cette dernière et utilisez le menu Filtres/Flou/Flau gaussien. Dans la fenêtre, définissez un rayon de flou de 30 pixels et appliquez-le. Masquez tous les calques (en cliquant du les yeux dans la liste des calque) sauf le fond blanc et le carré noir flou, notre ombre.

17. A l'aide de l'outil de déplacement, cliquez sur le carré noir et descendez légèrement le calque de quelques pixels (le bas de la fenêtre de l'image vous indique ce décalage). Il est important que ce décalage ne soit pas trop important. En effet, le bord inférieur de l'image ne doit pas contenir de noir afin que celui-ci soit parfaitement invisible sur le fond blanc d'une page Web. Dans le cas contraire, on verai un bord du plus mauvais effet. Vous pouvez utiliser la pipette pour vérifier la couleur au bord de l'image. 18. Réaffichez tout les calques et masquez les guides avec [CTRL]+[MAJ]+[T] pour obtenir une vue de l'image finale.

19. Vous pouvez, à présent, modifier comme il vous plaira les deux éléments dynamiques de la création. Le fond de couleur en utilisant n'importe quel type de remplissage et le symbole au centre du bouton. 20. Vous pouvez également utiliser un dégradé en guise de couleur de fond de bouton ou mieux encore, une image ou une photo. il conviendra cependant d'appliquer un léger flou afin que le détail de cette dernière ne nuise pas à la lisibilité. Un fond est un fond ne l'oublions pas.

21. Pour animer un peu l'ensemble sur une page Web, vous pouvez décliner chaque bouton avec et sans l'ombre portée. Ainsi, avec le code d'exemple en annexe, un passage de la souris sur le bouton fera "se lever" se dernier. Il est bien sûr possible d'améliorer l'effet en travaillant davantage les images. L'effet peut être accentué si l'image sans ombre présente un bouton légèrement plus petit et si l'ombre est plus visible dans sa version "décollée" du fond.

>SCRIPT<
>!--
if (document.images) {
b1 = new Image();  b1.src="b1.png";
b1a = new Image(); b1a.src="b1a.png";
b2 = new Image();  b2.src="b2.png";
b2a = new Image(); b2a.src="b2a.png";
b3 = new Image();  b3.src="b3.png";
b3a = new Image(); b3a.src="b3a.png";
}

function movr(k) {
 if (document.images)
  eval('document.bouton'+k+'.src=b'+k+'a.src');
}

function mout(k) {
 if (document.images)
  eval('document.bouton'+k+'.src=b'+k+'.src');
}
--<
>/SCRIPT<

>a href="toto.html"
onmouseover="movr(1);return true;"
onmouseout="mout(1);return true;"
<>img name="bouton1" border=0 src="b1.png"
<>/a<>br<

>a href="toto.html"
onmouseover="movr(2);return true;"
onmouseout="mout(2);return true;"
<>img name="bouton2" border=0 src="b2.png"
<>/a<>br<

>a href="toto.html"
onmouseover="movr(3);return true;"
onmouseout="mout(3);return true;"
<>img name="bouton3" border=0 src="b3.png"
<>/a<