Les boutons sont des éléments d’interface que l’on retrouve fréquemment sur les sites internet. Nous allons voir dans cet article comment les concevoir.

Introduction

Pour réaliser les exemples de bouton de cet article, j’ai utilisé Gimp dans sa version 2.6.6 sous Linux Ubuntu 9.04.

Pour réaliser un bouton, les outils « Crayon » et « Dégradé » peuvent suffire. Cependant afin d’automatiser un peu la procédure, il est possible d’utiliser des scripts tels que « Layer Effects » qui correspondent aux effets de calque sous Photoshop. Je vous conseille d’installer la version en Python qui donne accès à une fenêtre d’aperçu avant exécution du script.

Caractéristiques d’un bouton

On pourrait se contenter de lire un tutoriel, de cocher quelques options et générer un bouton en moins de temps qu’il ne faut pour le dire. Le problème est qu’à force d’appliquer des formules magiques sans comprendre exactement ce que l’on fait, on devient incapable d’apporter de la variété à ses créations.

Pour savoir comment dessiner un bouton, il faut donc commencer par l’observer et comprendre ses caractéristiques.

Définition

Un bouton selon mon Larousse 2003 est « une saillie mobile d’un objet servant à actionner manuellement un mécanisme. En informatique, un bouton correspond à un élément d’interface graphique sur lequel l’utilisateur peut cliquer pour déclencher une action. »

Selon cette définition et notre propre expérience, nous savons à quoi ressemble un bouton. Il s’agit le plus souvent d’un objet en volume sur lequel on interagit pour déclencher un événement.

Affordance

Je rappel que l’affordance est la capacité d’un objet à suggérer son utilité.

Donc pour qu’un bouton soit affordant, il faut qu’il apparaisse comme un objet saillant, généralement de forme ronde, ovale ou rectangulaire.

La forme triangle ou hexagonale pourrait être utilisée mais sa reconnaissance en tant que bouton serait moins évidente car moins commun dans la vie courante (sauf pour les joueurs de Play Station). Un bouton hexagonale est donc moins affordant qu’un bouton rectangle aux bords arrondis.

Dessiner le volume

Dans la plupart des cas, pour qu’un bouton soit reconnu comme tel avec le moins d’effort possible par l’utilisateur, il sera judicieux de le dessiner avec un effet de volume.

En webdesign tout comme en dessin, nous travaillons dans un environnement en deux dimensions. Pour donner plus de réalité aux objets que nous dessinons, nous devons simuler un monde en trois dimensions. Pour cela, nous utilisons des techniques comme la perspective et le modelé (représentation des ombres et des lumières). Dans notre cas, c’est surtout la technique du modelé qui sera utilisée.

Répartition des ombres

Pour donner du modelé à un objet dessiné, il suffit de jouer avec les dégradés et les valeurs pour simuler les lumières, les ombres propres et les ombres portées. Le plus difficile est de savoir où placer ces ombres et ces lumières et de choisir les bonnes couleurs.

Pour placer les ombres et les lumières, il faut prendre conscience de la forme de l’objet dans l’espace et connaître d’où vient la source de lumière qui éclaire notre objet. Plus une surface de l’objet est frontale et proche de la source lumineuse, plus elle sera éclairée. Inversement, plus une surface de l’objet est oblique et éloignée de la lumière, plus elle sera dans l’ombre.

Illustrons par des schémas :

Considérons que nous voulions représenter un bouton plat mais avec une petite épaisseur, rectangulaire et aux bords arrondis. Observons comment la lumière frappe l’objet en fonction de sa forme dans l’espace et comment dessiner les valeurs pour représenter cette observation.

Lorsque la source lumineuse provient de haut à gauche, le coin supérieur gauche du bouton est plus éclairé que le coin inférieur droit.

Lorsque la source lumineuse provient du haut et légèrement en retrait, le bord supérieur du bouton est plus éclairé que le bord inférieur.

Couleurs des ombres

Pour ce qui est des couleurs, j’applique personnellement les règles suivantes :

Pour obtenir la couleur de l’ombre propre d’un objet, je prends la couleur de base de cet objet et je diminue sa valeur.

Pour obtenir la couleur de l’ombre portée d’un objet, je prends la couleur du support sur lequel se projette l’ombre de l’objet et je diminue sa saturation et sa valeur.

Concevoir un bouton

Je vais vous expliquer, à travers cinq exemples, quelques techniques pour concevoir un bouton d’interface web. Dans les 5 exemples, je considère que la lumière provient de la partie supérieure et surplombe à la verticale le bouton.

Exemple 1

Etape 1 :Je commence par choisir ma palette de couleurs. Dans l’exemple 1, j’ai choisis un vert ni trop sombre ni trop clair comme couleur de base puis j’ai assombris cette teinte en diminuant sa valeur afin de représenter l’ombre propre du bouton.

Etape 2 : Je trace un rectangle, j’arrondis les coins et j’applique un dégradé pour donner l’effet de volume.

Etape 3 : Pour accentuer la forme du bouton, j’ajoute une bordure de 1 px avec la couleur de base. Dans la partie inférieure, la bordure contraste bien avec la partie ombrée et le fond sombre soulignant le contour de la partie basse du bouton.

Exemple 2

Etape 1 : La palette de couleurs est ici un peu plus riche. J’ai choisis un rouge moyen comme couleur de base. Je décline deux autres couleurs du même rouge mais plus sombre en diminuant la valeur du rouge de base. Enfin, je choisis un rouge plus clair et moins saturé en augmentant la valeur de la couleur de base et en diminuant sa saturation.

Etape 2 : Je trace un rectangle, j’arrondis les coins et j’applique un dégradé pour donner l’effet de volume.

Etape 3 : Pour accentuer la forme du bouton, j’ajoute cette fois ci deux bordures. Une bordure sombre externe et une bordure claire interne. Pour que la bordure claire n’apparaisse que dans la partie la plus éclairée du bouton et disparaisse dans la partie ombrée, j’utilise un masque de calque sur le calque de la bordure interne et j’applique un dégradé blanc/noir de la partie supérieure vers la partie inférieure du bouton.

Exemple 3

J’ai dessiné dans l’exemple 3, un bouton pixelisé. Pour cela, j’ai gardé les coins carrés et j’ai travaillé à l’aide du crayon et d’une brosse ronde de 1 pixel.

Etape 1 : La palette de couleur est composée d’une teinte de base qui correspond ici à la même couleur que celle de l’arrière plan. A partir de cette teinte j’ai décliné une version sombre, une version très sombre et une version claire. La version claire sera utilisée pour la partie du bouton qui sera la plus éclairée et pour l’une des bordures. La couleur de base sera utilisée pour représenter l’ombre propre du bouton dans la partie inférieure du dégradé. La version sombre sera utilisée pour la deuxième bordure et la version très sombre pour le texte et la flèche.

Etape 2 : Je trace un rectangle et j’applique un dégradé pour donner l’effet de volume.

Etape 3 : Pour accentuer la forme du bouton, j’ajoute deux bordures. La technique est la même que pour les deux exemples précédents. La différence se situe au niveau du placement des bordures. Ici les deux bordures se chevauchent et sont tantôt à l’extérieur tantôt à l’intérieur.

Exemple 4

Etape 1 : J’utilise dans l’exemple 4, trois paires de couleurs. Une pour le dégradé du bouton et une pour chacune des deux bordures. Le gris me servira pour mettre en place une ombre portée.

Etape 2 : Je trace un rectangle, j’arrondis les coins et j’applique un dégradé pour donner l’effet de volume.

Etape 3 :Pour sophistiquer un peu le rendu, j’applique également un dégradé aux deux bordures. C’est la raison pour laquelle j’ai choisi une paire de couleurs pour chacune d’entre elles. La partie inférieure du dégradé des bordures est moins saturée et plus sombre que la partie supérieure.

Etape 4 :J’utilise la teinte grise pour appliquer une ombre portée sur le bouton et ainsi accentuer l’effet de volume.

Vous remarquerez que nous avons ici un bouton sur fond clair. La mise en place d’une bordure sombre à l’extérieur permet par contraste de faire ressortir la bordure claire interne soulignant ainsi d’autant mieux le contour du bouton. L’absence de bordure sombre externe sur ce fond clair ferai disparaître par manque de contraste, la bordure claire. Elle ne jouerait alors plus son rôle d’accentuation du contour.

Exemple 5

Le dernier exemple est le plus élaboré des cinq. J’utilise les mêmes techniques de construction que pour l’exemple 4 mais j’ai ajouté en plus un effet glacis et une lueur subtile centrée au niveau du texte.

Pour dessiner la lueur, j’utilise une brosse ronde, blanche, large et très diffuse que j’applique sur un calque en mode superposer. Je fais varier l’opacité du calque jusqu’à ce que j’obtienne un résultat qui me satisfasse. Cette lueur a été appliquée une première fois par dessus le calque du bouton et une seconde fois par dessus le calque du dégradé de la bordure interne. J’ai utilisé les sélections que j’ai inversé pour effacer les débordements de la lueur.

Pour l’effet glacis, j’ai tracé une ellipse avec l’outil sélection et j’ai tracé un dégradé avec la quatrième paire de couleurs de la palette. Le dégradé est inverse de celui appliqué sur le bouton. En effet la partie sombre se trouve au niveau de la zone supérieure de la sélection et la partie claire dans la zone inférieure. Pour effacer la partie basse du dégradé du glacis, j’ai utilisé un masque de calque avec l’outil dégradé (noir/blanc).

Variation sur le thème du bouton

Vous savez désormais dessiner un bouton. Cependant, avec un peu d’imagination, il existe une variation infinie de possibilités.

En voici quelques exemples :

Applat de couleur ou dégradé

Concave ou convexe

Mat ou brillant

Dégradé circulaire ou linéaire

Sans pictogramme ou avec

Pixelisé

Arrondi, rectangle, flèche …

Ajout d’effets divers

Sélection de 25 boutons pour vous inspirer

Conclusion

Comme nous venons de le voir, dessiner un bouton d’interface n’est pas très compliqué. Il faut juste se familiariser avec les techniques du modelé et faire preuve d’un peu d’imagination.

Pour réaliser vos boutons avec votre logiciel de traitement d’image, vous pouvez, comme moi, utiliser simplement quelques outils (dégradé, sélection, crayon) ou utiliser des scripts qui automatisent un peu plus les procédures (Layer effects pour Gimp ou les effets de calques sous Photoshop). Ces scripts peuvent améliorer la productivité de votre travail mais vous aurez moins le contrôle de ce que vous faite.

Si la plupart du temps les boutons sont représentés de formes rectangulaires et en volumes, rien ne vous empêche de les dessiner d’une autre forme et avec un aplat de couleur. Mais attention, la reconnaissance de l’objet en tant que bouton risque d’être moins évidente.

Pour renforcer l’affordance d’un bouton, vous pouvez, en plus du volume, prévoir un état survolé et enfoncé qui s’affiche au passage et au clique de la souris. Cet effet peut facilement être réalisé avec la technique des sprites et un peu de CSS.