Introduction

Sodipodi est bien adapté à la création d’icônes et de boutons de navigation pour le web. Dans ce didacticiel, vous verrez comment dessiner un bouton de navigation web de style Aqua (comme ci-dessus)

En effet, ce type de bouton, populaire depuis quelques années, peut former un ensemble très agréable à l’oeil. En outre, nous verrons que sa réalisation en mode vectoriel est nettement plus simple qu’en mode bitmap : inutile d’utiliser filtres, masques, balance des couleurs ou saturation, etc. En effet, les techniques de dessin vectoriel, bien utilisées, peuvent produire des effets très efficaces.

Première étape

Tout d’abord, dans la barre d’outils, sélectionnez l’icône d’édition des formes rectangulaires ( ou touche F4) et dessinez, par cliquer-glisser, votre rectangle. Ce sera la forme de départ de votre bouton. Ensuite, en gardant votre rectangle sélectionné, sélectionnez l’icône d’édition des points de contrôle ( ou touche F2). Vous devriez voir apparaître un point de contrôle en forme de losange en haut à gauche de votre rectangle, comme ceci :

Cliquez sur ce losange, maintenez votre curseur enfonçé et descendez votre souris vers le bas. Vous pouvez constater alors que les 4 angles de votre rectangle s’arrondissent : plus vous descendez votre curseur, plus l’arrondi s’étend. Descendez-le au maximum jusqu’à ce que les angles de chaque extrémité se rejoignent et n’en forment plus qu’un seul. Vous avez obtenu la forme de base de votre bouton Aqua :

Deuxième étape

Maintenant, éditons un premier dégradé de style "Aqua". Assurez-vous que votre forme est sélectionnez et cliquez dans la barre d’outil sur le réglages des remplissages (). Dans l’onglet de remplissage choisissez l’icône des dégradés linéaires , cliquez sur Ajouter puis sur Édition . La palette d’édition de votre dégradé s’ouvre (voir ci-dessous)

Par défaut, Sodipodi vous propose un dégradé du noir au blanc. Remplacez-le noir par un bleu sombre et le blanc par un bleu clair. Vous accédez aux différentes couleurs du dégradé par le menu déroulant en haut de votre palette d’édition.

Revenez dans la palette de gestion des couleurs. Votre dégradé se dispose normalement par défaut de gauche à droite. Disposez-le de haut en bas comme ceci :

Vous pouvez déplacer les deux points d’extrémité de votre dégradé à la souris. Vous pouvez ajouter un contour à votre forme. Il suffit de vous rendre sur l’onglet et cliquez sur .

Ensuite, pour rajouter un premier effet de relief, rajoutons une ombre. Dupliquez votre bouton ( ou Ctrl-D), descendez-le d’un plan (icône ou PgDown) et déplacez-le légèrement vers le bas et à droite.

Puis donnez-lui une couleur uniforme noire (palette de remplissage icône , puis onglet de remplissage icône uni icône , Rouge = 0, Vert = 0, Bleu = 0) et une transparence de 50 % (curseur Alpha sur 0,5).

Et admirez le résultat :

Troisième étape

Passons maintenant au dessin du fameux relief blanc qui donnera au bouton Aqua son aspect de verre si caractéristique.

Dupliquez (Ctrl-D) votre bouton. À première vue, rien n’a changé. C’est normal : le double de votre bouton est placé en premier plan et c’est maintenant lui qui est sélectionné.

Rétrécissez-le légèrement, soit via la palette des transformations (clic droit de la souris - Dialogues-Transformations vous obtiendrez la fenêtre suivante et cliquez sur l’onglet Échelle)

ou soit à la souris : cliquez sur l’une des 8 flèches entourant le double de votre bouton. Appuyez et maintenez enfonçées les touches Ctrl-Maj (pour garder les proportions) et déplacez votre souris vers le double de votre bouton (vérifiez juste que vos 8 flèches pointent vers votre bouton. Si elles sont de forme courbe, cela signifie que vous êtes en mode rotation. Pour passer en mode changement de taille, recliquez sur votre bouton)

Rééditez un nouveau dégradé linéaire de la même façon que dans l’étape 2, mais cette fois avec une couleur de départ et d’arrivée blanche (Rouge = 1, Vert = 1, Bleu = 1), mais indiquez une transparence totale pour votre couleur d’arrivée (curseur Alpha sur 0). Puis appliquez votre dégradé par cliquer-glisser de haut en bas, comme indiqué ci-dessous :

Résultat :

Quatrième étape

Rajoutons maintenant un texte à notre bouton. Dans la barre d’outils, sélectionnez l’icône d’édition de texte ( ou F7) puis cliquez au choix dans votre fenêtre de travail : un curseur apparaît.

Tapez alors le texte de votre choix au clavier puis ouvez la palette d’édition de texte (Clic droit - Dialogues - Texte and Police ou dans les outils sur l’icône .

Assignez alors à votre texte la police et la taille de votre choix. Ensuite placez-le sur votre bouton.

Donnez ensuite à votre texte la couleur de votre choix. Dans l’exemple ci-dessous, je lui ai assigné une couleur blanche et une transparence de 10% (curseur Alpha de la palette de gestion des couleurs sur 0,9) de façon à donner l’impression que le texte se trouve dans le corps du bouton.

Conclusion

En conclusion, vous pouvez voir qu’on peut obtenir des effets très graphiques avec des techniques de dessin assez simples. Ce type de bouton a été créé uniquement par manipulation d’effets de dégradés de couleurs et de tranparence, sans application d’aucuns filtres ou effets spéciaux. Maintenant, à vous d’utiliser et de faire connaître les solutions libres de graphisme vectoriel.

Le fichier original :

Fichier SVG du bouton

Ceci est le fichier du bouton au format SVG