Réalisez une série de boutons pour le Web à base de la police ikoo.

Objectif du tutoriel
Réalisation d’une série de boutons pour le Web à base de la police ikoo.

Temps nécessaire
1-2 heures

Les boutons pour le Web sont primordiaux parce qu’ils poussent à l’action. On appelle cela CTA pour “Call to Action”. Tout est dit dans le nom, “Appel à l’action”. Que ce soit pour inciter les gens à vous suivre sur Twitter ou à acheter un produit dans une boutique, le bouton doit donner envie et confiance. Bien incorporé à votre design, il apportera du volume à votre site. Nous allons utiliser la police de caractères ikoo.ttf (réalisée par l’équipe de dasmuse.com), qui est gratuite et vous fera gagner du temps car elle reprend les symboles les plus courants des sites Web. À utiliser sans modération dans vos designs.

Notre expert
David Slaager est un graphiste freelance actuellement basé à Bruxelles. Fondateur du site de formation en ligne BeTheKing.org, il s’occupe également de la réalisation des tutoriels vidéo. En dehors de cela, il réalise d’autres projets artistiques plus personnels, développement de typos, création de BD, retouche et photomontage. Retrouvez ses travaux personnels sur www.davidiscreative.com.

 

01 Créer un nouveau document
Commencez par créer un nouveau document. Je démarre toujours par un document standard de 1024 x 768 pixels en 72 dpi et couleur RVB. Bien que mon bouton soit nettement plus petit que le document, j’apprécie mieux les différentes textures sur un grand format. Remplissez le fond en gris neutre #E2E2E2.

02 Texturiser le fond
Nous allons maintenant donner une texture légèrement granuleuse à notre fond en ajoutant du bruit. Allez dans Filtre> Bruit> Ajout de bruit. Choisissez une valeur assez faible, à case Monochromatique.

03 Le fond du bouton
Tracez maintenant un cercle d’environ 190 pixels de diamètre avec l’outil Forme vectorielle rond, la couleur de remplissage n’a aucune importance.

04 La profondeur du bouton
Maintenant, nous allons appliquer un dégradé linéaire à notre forme. Allez dans le menu Calque> Style de calque> Remplissage en dégradé. Pour les couleurs, choisissez un gris plus foncé en haut, #CAC7C7, et une couleur blanche en bas, #FFF. Peu importe la couleur que vous choisirez au final, faites attention à ce que la partie claire soit vers le bas, ceci renforce l’impression de bouton enfoncé.

05 Partie supérieure du bouton
Nous allons dupliquer le rond et le réduire Ctrl/Cmd+T en maintenant la touche Alt enfoncée pour réduire en partant du centre. Décochez l’effet de calque pour voir ce que vous faites. Réduisez suffisamment pour avoir un contour d’environ 25 pixels.

06 Texture du bouton
Par-dessus, nous allons dessiner un rectangle avec l’outil de Sélection. Tracez sur un nouveau calque un dégradé radial qui part d’un gris d’une valeur de #777777 et va vers un gris plus foncé #464543. Vous remarquerez que mon reflet est décentré pour donner plus de relief à ma forme. Ajoutez ensuite du bruit : Filtre> Bruit> Ajout de bruit et choisissez une valeur très légère en gardant les paramètres précédents.

07 Écrêter le calque
Dans le panneau Calques, faites un clic droit sur votre calque et choisissez l’option Convertir en masque d’écrêtage. Votre texture est à présent parfaitement positionnée sur votre cercle. Nous allons pouvoir donner de la profondeur à notre bouton.

08 Profondeur du bouton
Appliquons maintenant un effet de calque à la forme vectorielle. Vu que notre texture est en mode écrêtage, elle est sous l’effet du bouton, un avantage qui pourrait toutefois devenir un inconvénient. Par exemple, si vous appliquez une couleur de remplissage, la texture du dessus disparaîtra. Pour éviter cela, allez dans Calque> Style de calque> Ombre portée et choisissez les valeurs ci-dessus.

09 Ombre interne
Appliquez une Ombre interne pour adoucir les contours et redonner de la dimension à votre bouton. Cochez la case Ombre interne et choisissez les valeurs comme ci-dessus. Restez sobre et faites plusieurs tests avant de parvenir au résultat parfait. Attention, de la taille finale de votre bouton dépendra la justesse de vos paramétrages.

10 Texture grille 1
Nous allons maintenant faire une petite grille qui sera appliquée sur le bouton. Au-dessus du calque avec la texture grise, tracez une ligne vectorielle noire de 1 pixel à 45° (maintenez la touche Alt enfoncée pour avoir un angle parfait). Dupliquez l’élément et déplacez-le de 10 pixels vers la droite. Répétez l’opération jusqu’à ce que la forme soit complètement recouverte. Pour aller plus vite, faites Ctrl/Cmd+Alt+flèche droite. Fusionnez les calques entre eux, sélectionnez-les tous dans le panneau Calques et faites Ctrl/Cmd+E.

11 Texture grille 2
Dupliquez le calque et faites une transformation horizontale de manière à obtenir une grille qui recouvre la surface du bouton. Refaites un clic droit, créez un masque d’écrêtage. Diminuez maintenant l’Opacité du calque jusqu’à 14 %.

12 Trace de trou
Nous allons maintenant ajouter une texture de trou comme on en trouve souvent dans les boutons. Tracez un petit cercle blanc, dupliquez-le et déplacez-le de 10 pixels vers la droite. Fusionnez la première ligne et répétez l’opération en hauteur de sorte qu’une grosse partie du bouton soit recouverte.

13 Profondeur des trous
Dupliquez le calque et inversez la couleur du dessous (Ctrl/Cmd+I). Déplacez le calque de 1 pixel vers la droite et 1 vers le bas, fusionnez les deux calques et diminuez l’Opacité jusqu’à 12 %. Avec l’outil Gomme, effacez les contours et insistez sur les coins pour donner l’impression d’un bombage. Choisissez un bord doux pour la gomme et un Diamètre de 75 pixels.

14 Symboles
Nous allons maintenant utiliser la police ikoo pour ajouter le symbole sur notre forme. Elle est spécialement développée pour aider les Webdesigners. Grâce à elle, vous gagnerez un temps considérable sur vos designs. Chaque lettre représente un symbole souvent utilisé comme les flèches, la maison, etc. Nous allons utiliser ici une bulle de conversation, la police ikoo en contient plusieurs. Installez-la sur votre machine et, à l’aide de l’outil texte, tapez la lettre M en majuscule.

15 Travail d’ikoo
Nous allons ajouter différents effets de calque. Dans Calque> Style de calque, choisissez Ombre interne avec les valeurs suivantes : Opacité : 42 %, Distance : 0 px, Taille : 6 px. Cochez la case Incrustation couleur et choisissez un gris neutre #3B4343. Enfin, sélectionnez Lueur externe et faites comme sur l’illustration ci-dessus.

16 Bouton éteint
Et voilà notre premier bouton terminé. Créez un nouveau dossier et glissez l’ensemble des calques dedans, renommez-le “off ”. Dupliquez-le et déplacez-le vers la droite. Renommez ce second dossier “on”.

17 Bouton allumé
Sélectionnez maintenant le symbole ikoo et ouvrez le panneau Style de calque en double-cliquant dessus. Changez la valeur de remplissage en blanc et la Lueur externe avec les valeurs reprises ci-dessus.

18 Ajustement des tailles
Si l’on a autant de détails dans un bouton, il est difficile de les garder intacts quand on le redimensionne. Pour cela, nous n’allons pas redimensionner tous les calques. Dupliquez le dossier “on” et sélectionnez tous les calques à l’exception de la grille. Faites Ctrl/Cmd+T et réduisez la taille. Une fois qu’elle vous convient, redimensionnez la grille toute seule et moins petite que les autres éléments. Diminuez la taille de l’ombre intérieure de la lettre M de quelques pixels.

19 Autres symboles
Dupliquez ensuite “on petit” six fois. Maintenant, vous pouvez tout simplement changer la lettre par une autre lettre ikoo pour avoir un autre symbole. Ici, j’ai utilisé “N, s, O, u, v, w. t”. N’hésitez pas à changer les effets de calques.

20 Différents états
Un bouton est souvent réactif au passage de la souris, il y a l’état Simple et l’état Par-dessus. Parfois, on utilise aussi l’état Cliqué ou encore l’état Appuyé. Dupliquez l’ensemble des calques “petits” et déplacez-les vers le dessous. Sélectionnez maintenant la lettre M du grand bouton dans le dossier “off”. Faites un clic droit et choisissez l’option Copier le style de calque. Maintenant, sélectionnez la lettre M du petit calque de dessous et faites clic droit> Coller le style de calque. Répétez l’opération pour chaque lettre.

21 Autres variantes
Dupliquez l’ensemble des dossiers “petits” et déplacez-les vers le bas. Effacez maintenant les gros bords en dégradé et vous obtenez un effet encore différent. Amusez-vous à modifier également les effets de calques pour obtenir des variantes encore plus significatives.

22 Redimensionner les boutons
Vous pouvez encore redimensionner les calques en plus petit, mais cette fois-ci je vous conseille de les fusionner afin d’éviter d’adapter l’ombrage sur chaque calque. Vous remarquerez que plus ils sont petits, plus on perd dans le détail. En fait, il faut réadapter le design à chaque étape du redimensionnement.

23 Variantes de couleurs
N’hésitez pas à faire des variantes de couleurs. J’ai uniquement ajouté un dégradé de remplissage, et l’effet est complètement changé.

24 Derniers conseils
Travaillez à 100 % le plus souvent possible. Parfois, si vous avez un zoom trop important, vous ne vous rendrez pas compte de ce que donnera votre effet dans le fichier final. Ajoutez du détail comme des reflets mais restez simple et démarquez-vous.