Comment créer des boutons 3D à l'aide d'Adobe Photoshop

Il y a beaucoup de choses incroyables que vous pouvez créer dans Adobe Photoshop qui sont utiles en ligne, allant de simples cadres photo à des interfaces utilisateur complexes. L'une des choses les plus utiles que vous puissiez créer dans Photoshop sont les boutons 3D, qui vous seront utiles si vous exécutez un blog ou un site Web avec une interface personnalisée.

Dans cet article, nous allons vous montrer comment créer des boutons 3D à l'aide de Photoshop, ainsi que des états visuels « haut » et « bas », afin que vous puissiez les animer. (Nous ne couvrirons pas l'animation elle-même dans cet article.)

Étape 1 : préparez votre document

Bien que les boutons 3D apparaissent le plus souvent sur les sites Web, il est important de noter qu'il existe d'autres applications pour eux, telles que des GIF animés, des maquettes d'affichage de produits et des jeux mobiles. Selon la raison pour laquelle vous créez ce bouton, votre format de fichier final et ses dimensions peuvent varier.

Pour créer un bouton 3D dans Photoshop, vous devrez créer un document personnalisé pour celui-ci. Pour ce faire, ouvrez Photoshop et cliquez sur Créer nouveau > Personnalisé . Commencez à saisir vos valeurs.

Pour créer un bouton 3D, vous allez vouloir un document horizontal. Pour le nôtre, nous avons utilisé :

900 x 300 pixels de haut
300 pixels/pouce
Mode couleur RVB

Bien que ces spécifications ne soient certainement pas une règle absolue, cela garantira que vous disposez de suffisamment d'espace pour travailler et de la possibilité d'augmenter et de réduire la taille de vos boutons selon vos besoins.

Étape 2 : Configurez votre rectangle pour votre bouton 3D

Après avoir configuré les spécifications de votre fichier, vous serez amené dans votre espace de travail. Vous allez avoir une toile blanche horizontale en une seule couche, et c'est là que vous commencerez à créer votre bouton.

Pour construire votre bouton 3D, cliquez sur le Outil Rectangle Arrondi sur le côté gauche de votre écran, ici en rouge. Vous pouvez également utiliser le raccourci U pour y accéder.

Cliquez une fois sur votre calque blanc : cela fera automatiquement apparaître votre Créer un rectangle arrondi boîte. Vous utiliserez cette case pour spécifier les dimensions de votre rectangle.

Pour notre bouton, nous avons choisi :

300 pixels de large
75 pixels de haut

Nous avons également veillé à ce que les coins soient arrondis de 10 pixels. Ni trop haut, ni trop bas non plus. Puis nous avons appuyé d'accord .

Noter: Les boutons varient selon la taille et la forme, alors ne vous sentez pas obligé d'utiliser ces dimensions exactes. De plus, si vous recherchez plus d'informations sur les raccourcis, voici quelques-uns des les commandes de clavier Photoshop les plus utiles .

Lorsque vous appuyez d'accord , Photoshop créera un rectangle arrondi avec ces dimensions à l'intérieur de votre calque. Vous pouvez changer son Remplir et Accident vasculaire cérébral couleurs en utilisant les menus déroulants dans le coin supérieur gauche de votre écran.

Pour les besoins de ce didacticiel --- et pour illustrer à quoi pourraient ressembler les boutons 'haut' et 'bas' --- nous allons rendre notre bouton 'bas' rouge.

Étape 3 : Créez votre bouton en 3D

Après avoir créé votre bouton de base et choisi sa couleur, vous allez vouloir l'ajuster dans le Style de calque boite de dialogue. C'est pour lui donner un aspect plus 3D.

Pour accéder à votre Style de calque boîte de dialogue, vous pouvez aller Calque > Style de calque du menu du haut. Vous pouvez également double-cliquer sur le calque qui contient votre bouton, pour l'afficher automatiquement. Cette méthode est beaucoup plus rapide et nous la préférons personnellement.

Une fois que votre boîte de style de calque est en place, accédez à l'option Biseau et gaufrage . Allume ça.

C'est un moyen rapide et facile de donner aux bords de votre bouton un aspect « 3D » plus relevé. Pour ce tutoriel, voici les paramètres que nous avons utilisés :

Structure

Style: Biseau intérieur
Technique: Ciseau doux
Profondeur: 605
Direction: En haut
Taille: 5
Adoucir: 1

Ombres

Angle: 90
Altitude: 37
Mode de surbrillance : Dodge de couleur, 55% d'opacité
Mode d'ombre: Multiple, 25% d'opacité

L'astuce consiste à faire des réglages suffisamment élevés pour que vous puissiez voir une différence, mais pas trop fort pour que ce soit écrasant.

Après avoir terminé avec Bevel & Emboss, nous sommes allés à Contour et l'a allumé aussi. Contour renforce un peu la définition de Bevel & Emboss, et pour ce tutoriel, nous avons choisi le réglage Cône - inversé .

Ensuite, allumez Incrustation en dégradé . C'est ce qui donne à un bouton cet aspect arrondi, légèrement 'brillant'. Les paramètres sont les suivants :

Mode de fusion: Recouvrir
Opacité: 90
Style: Linéaire
Angle: 90
Escalader: 100

Enfin, nous avons allumé Ombre portée , pour que le bouton ait l'air un peu « surélevé » par rapport à l'arrière-plan blanc d'un site Web ou d'un blog. Encore une fois, voici les paramètres:

quoi mettre sur ssd vs hdd

Structure

Mode de fusion: Plusieurs
Opacité: 35
Angle: 90
Distance: 2
Diffuser: 6
Taille: 8

Qualité

Contour: Linéaire
Bruit: 0
Couche assombrissant l'ombre portée : Au

Il est maintenant temps d'enregistrer ces spécifications en tant que style de calque.

Étape 4 : Enregistrer en tant que style de calque

Une fois que vous avez terminé avec les paramètres de votre bouton, il commencera à avoir l'air 3D. Parce qu'il y a de fortes chances que vous créiez plus d'un bouton 3D, nous devons trouver un moyen rapide et facile de le faire.

Voici comment.

Avant de cliquer d'accord dans le Style de calque boîte de dialogue, cliquez sur Nouveau style . Lorsque vous le faites, Photoshop enregistre ce style de calque que vous avez créé pour votre bouton.

Si vous utilisez Photoshop CC, ce nouveau style sera enregistré dans votre Bibliothèques section, comme vous pouvez le voir ci-dessus. C'est très rapide et facile d'accès.

Étape 5 : Comment utiliser un style de calque enregistré

Maintenant que vous avez conçu votre bouton et que vous l'avez enregistré en tant que style de calque, voyons-le en action pour votre état « haut ». Pas de mensonge, cela réduira votre temps de travail de moitié.

Tout d'abord, créons un autre bouton directement au-dessus du calque de bouton rouge, comme ceci. Faisons-le vert, pour l'accent.

Suivant --- au lieu de double-cliquer sur le calque lui-même pour faire apparaître le Styles de calque boîte de dialogue --- double-cliquez sur le style de calque dans votre Bibliothèques panneau.

Lorsque vous le faites, Photoshop appliquera automatiquement votre style enregistré à votre nouveau calque de boutons, tout en conservant sa nouvelle couleur et sa nouvelle forme. Vous avez maintenant deux boutons --- un dans un état haut et un dans un état bas --- et c'est si simple à faire. J'adore ce raccourci.

Étape 6 : Ajoutez du texte à votre bouton

Ensuite, nous allons ajouter du texte au bouton.

Pour ajouter du texte, créez un nouveau calque au-dessus de vos deux calques de boutons. Clique le Outil de saisie pour commencer à taper.

Pour ce tutoriel, nous allons écrire le mot « s'abonner » car c'est quelque chose que vous voyez assez souvent sur les sites Web et les plateformes de médias sociaux.

Nous allons également utiliser une police Web sécurisée sans empattement. Le choix final de celui que vous utilisez pour votre propre bouton vous appartient. Montserrat, Proxima Nova, Arial et Verdana sont toutes des alternatives largement utilisées et sûres pour le Web.

Une fois cela fait, cependant, il y a encore quelques modifications plus subtiles que vous devez faire pour que ce texte 'apparaisse'.

Tout d'abord, double-cliquez sur le calque qui contient votre texte afin de pouvoir l'afficher dans votre Style de calque boite de dialogue.

Ensuite, cliquez sur Ombre intérieure , pour ajouter un peu de dépression (ou de creux) à votre texte. Cela donne l'impression que les lettres ont été gravées dans le bouton. Les paramètres exacts que nous avons utilisés pour ce tutoriel sont ci-dessous.

Structure

Mode de fusion: Multiplier
Opacité: 35
Angle: 90
Distance: 2
Étouffer: 4
Taille: 1

Qualité

Contour: Linéaire
Bruit: 0

Ensuite, appliquez un Incrustation en dégradé à ces lettres, pour qu'elles se fondent plus facilement dans le bouton sans paraître plates. Encore une fois, les paramètres pour le nôtre sont :

Mode de fusion: Brûlure de couleur
Opacité: 90
Style: Linéaire
Angle: 90
Escalader: 100

Étape 7 : Terminer

Après avoir créé ce style de texte --- surtout si vous souhaitez l'utiliser à nouveau --- allez à Nouveau style et enregistrez-le avant de cliquer d'accord .

Une fois cela terminé, vous pouvez rapidement basculer sur la visibilité entre vos deux calques de boutons, pour voir à quoi ressemblent les états 'haut' et 'bas'.

Plutôt cool, hein ? Pour enregistrer votre fichier, allez Fichier > Enregistrer sous , et enregistrez-le sous le format de fichier approprié pour le projet sur lequel vous travaillez.

Personnalisez votre blog avec des boutons et des widgets 3D

Maintenant que vous savez créer des boutons 3D dans Photoshop, vous pouvez faire preuve de créativité en concevant vos propres boutons 3D en fonction de vos besoins. Et avec ces compétences dans votre arsenal, vous pouvez créer un produit non seulement professionnel, mais aussi personnel.

Vous voulez savoir d'autres choses que vous pouvez faire avec ce programme ? Voici comment supprimer un arrière-plan dans Photoshop .

Partager Partager Tweeter E-mail Comment accéder au niveau à bulle intégré de Google sur Android

Si vous avez déjà eu besoin de vous assurer que quelque chose est de niveau à la rigueur, vous pouvez maintenant obtenir un niveau à bulle sur votre téléphone en quelques secondes.

Lire la suite Rubriques connexes

Créatif
Adobe Photoshop
Conseils pour l'édition d'images
Tutoriel Photoshop

A propos de l'auteur Shianne Edelmayer(136 articles publiés)

Shianne a un baccalauréat en design et une formation en podcasting. Maintenant, elle travaille comme rédactrice principale et illustratrice 2D. Elle couvre la technologie créative, le divertissement et la productivité pour MakeUseOf.

Plus de Shianne Edelmayer

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner