Il existe de nombreuses choses étonnantes que vous pouvez créer dans Adobe Photoshop et qui sont utiles en ligne, allant de simples cadres d'image à des interfaces utilisateur complexes. L'une des choses les plus utiles que vous puissiez créer dans Photoshop sont les boutons 3D, qui seront utiles si vous gérez 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.)
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, le format de votre fichier final et ses dimensions peuvent varier.
Pour créer un bouton 3D dans Photoshop, vous devez créer un document personnalisé pour celui-ci. Pour ce faire, ouvrez Photoshop et cliquez sur Créer un 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é :
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 que vous avez la possibilité d'augmenter ou de réduire la taille de votre bouton selon vos besoins.
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 créer votre bouton 3D, cliquez sur l'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 opté pour :
Nous nous sommes également assurés que les coins étaient arrondis de 10 pixels. Ni trop haut, ni trop bas non plus. Ensuite, nous avons appuyé sur OK .
Remarque : 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-unes des commandes clavier Photoshop les plus utiles.
Lorsque vous appuyez sur OK , Photoshop créera un rectangle arrondi avec ces dimensions à l'intérieur de votre calque. Vous pouvez modifier son remplissage et AVC couleurs en utilisant les menus déroulants en haut à gauche de votre écran.
Pour les besoins de ce didacticiel --- et pour illustrer à quoi pourraient ressembler un bouton "haut" et "bas" --- nous allons rendre notre bouton "bas" rouge.
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 le rendre plus 3D.
Pour accéder à votre style de calque boîte de dialogue, vous pouvez aller Calque > Style de calque dans le menu du haut. Vous pouvez également double-cliquer sur le calque qui contient votre bouton, pour le faire apparaître 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 Bevel &Emboss . Allumez-le.
Il s'agit d'un moyen simple et rapide de donner aux bords de votre bouton un aspect "3D" plus surélevé. Pour ce tutoriel, voici les paramètres que nous avons utilisés :
Structure
Ombrage
L'astuce consiste à régler les paramètres suffisamment haut pour que vous puissiez voir une certaine différence, mais pas trop forte pour que ce soit écrasant.
Après avoir terminé avec Bevel &Emboss, nous sommes passés à Contour et l'a allumé aussi. Contour rend la définition de Bevel &Emboss un peu plus forte, et pour ce didacticiel, nous avons choisi le paramètre Cone - Inverted .
Ensuite, activez la superposition de dégradés . C'est ce qui donne à un bouton cet aspect arrondi, légèrement "glossy". Les paramètres sont les suivants :
Enfin, nous avons activé Ombre portée , pour que le bouton ait l'air un peu "en relief" par rapport à l'arrière-plan blanc d'un site Web ou d'un blog. Encore une fois, voici les paramètres :
Structure
Qualité
Il est maintenant temps d'enregistrer ces spécifications en tant que style de calque.
Une fois que vous avez terminé avec les paramètres de votre bouton, il commencera à ressembler à de la 3D. Comme il y a de fortes chances que vous créiez plus d'un bouton 3D, nous devons trouver un moyen simple et rapide de le faire.
Voici comment.
Avant de cliquer sur OK 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 vos bibliothèques section, comme vous pouvez le voir ci-dessus. C'est très rapide et facile d'accès.
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 "up". Pas un mot 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. Rendons-le vert, pour l'accent.
Ensuite --- au lieu de double-cliquer sur le calque lui-même pour afficher Styles de calque boîte de dialogue --- double-cliquez sur le style de calque dans vos bibliothèques panneau.
Lorsque vous le faites, Photoshop applique automatiquement votre style enregistré à votre nouveau calque de bouton, 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.
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. Cliquez sur l' outil Texte pour commencer à taper.
Pour ce didacticiel, 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 sans danger pour le Web.
Une fois cela fait, cependant, il vous reste encore quelques modifications subtiles à apporter pour que ce texte "apparaisse".
Tout d'abord, double-cliquez sur le calque contenant votre texte afin de pouvoir l'afficher dans votre Style de calque boîte de dialogue.
Ensuite, cliquez sur Inner Shadow , pour ajouter un peu de dépression (ou de zone en 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
Qualité
Ensuite, appliquez une superposition de 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 les nôtres sont :
Après avoir créé ce style de texte, en particulier si vous souhaitez le réutiliser, accédez à Nouveau style et enregistrez-le avant de cliquer sur OK .
Une fois cela terminé, vous pouvez rapidement basculer entre les deux couches de boutons pour voir à quoi ressemblent les états "haut" et "bas".
Plutôt cool, hein ? Pour enregistrer votre fichier, accédez Fichier > Enregistrer sous , et enregistrez-le au format de fichier approprié pour le projet sur lequel vous travaillez.
Maintenant que vous savez comment 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 en savoir plus sur les autres choses que vous pouvez faire avec ce programme ? Voici comment supprimer un arrière-plan dans Photoshop.
