Création de boutons pour les interfaces mobiles dans Photoshop CS6

Ces types de boutons sont très populaires, surtout lorsque nous travaillons à la fabrication de pièces pour des interfaces mobiles telles que le iPhoneEn fait, c'est cet appareil qui intégrait ces types de boutons qui ressemblent à une petite languette en plastique brillant sur laquelle frappe un petit reflet de lumière.
Afin de construire ce type de bouton, nous allons utiliser des techniques de base telles que des formes rectangulaires aux bords arrondis, l'utilisation de dégradés et l'utilisation de palettes de couleurs pour obtenir les effets recherchés.
Nous devons d'abord lancer le processus en générant la forme de base de notre bouton, pour cela nous allons suivre les étapes suivantes.
1- Commençons par créer un vecteur en forme de rectangle avec des bords arrondis et dans le menu des calques, nous allons appliquer un effet de dégradé superposé :

2- Le dégradé doit être d'une couleur foncée dans la partie supérieure et une variation de la même couleur mais plus claire dans la partie inférieure, la proportion peut être de 80% sombre et un 20% de clarté.
3- Maintenant, nous devons calque dupliqué, pour cela, nous pouvons appuyer sur la combinaison de touches CTRL + JNous faisons cela afin de pouvoir modifier le dégradé dans le calque dupliqué, donc une fois dupliqué nous allons double-cliquer sur l'effet de dégradé.
4- Nous allons éditer le dégradé en réglant son opacité sur un 50% et nous allons changer les couleurs en blanc en arrière-plan et la partie la plus claire sera transparente :
5- Maintenant, la prochaine étape que nous devons faire est de supprimer les ancres, pour cela nous allons sélectionner le outil de point, l'idée est de déplacer les références du calque dupliqué, afin qu'il ne couvre qu'environ un tiers du canevas.
6- Nous allons maintenant créer une courbure dans le bord inférieur du calque dupliqué, pour cela nous allons utiliser l'outil sélection de direction et au centre de la ligne nous générons le mouvement nécessaire.
7- Lorsque nous sommes sur le point de terminer, nous allons modifier le calque et nous allons changer l'opacité à environ 65% et le paramètre de remplissage o Remplir on le laisse à 0 cela fera tout prendre forme.
8- Enfin on peut ajouter une image ou un texte, ce faisant on doit placer une petite ombre pour qu'elle mette en évidence l'élément et on puisse l'associer à un bouton :

Comme nous pouvons le voir, nous avons généré un bouton très similaire à ceux utilisés dans les interfaces mobiles, ceux-ci nous donnent un aspect frappant et frais que nous pouvons incorporer dans nos croquis et propositions d'interfaces mobiles, ils sont utilisés plus que tout pour représenter des applications et éléments comme ça, pas pour les actions utilisateur de base, mais tout le monde peut utiliser sa créativité pour leur trouver un poste.
Avec cela, nous terminons ce tutoriel, comme nous l'avons vu, nous appliquons plusieurs techniques de base pour obtenir le résultat final, il convient de noter que plus nous pratiquons, plus nous serons rapides et nous pourrons générer ces éléments avec une plus grande sécurité.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif