Adobe Photoshop permet de concevoir des éléments graphiques impressionnants et polyvalents pour le web, des simples cadres aux interfaces utilisateur sophistiquées. Parmi les créations les plus pratiques figurent les boutons 3D, idéaux pour personnaliser l'interface d'un blog ou d'un site web.
Dans ce tutoriel détaillé, découvrez comment créer des boutons 3D avec leurs états visuels « haut » et « bas » pour une animation fluide. (L'animation elle-même n'est pas couverte ici.)
Si les boutons 3D sont souvent utilisés sur le web, ils s'appliquent aussi aux GIF animés, maquettes produits ou jeux mobiles. Adaptez le format et les dimensions à votre projet.
Pour débuter, ouvrez Photoshop et sélectionnez Créer un nouveau > Personnalisé. Saisissez les paramètres suivants :
Ces dimensions offrent un espace généreux et une flexibilité pour redimensionner le bouton.
Votre espace de travail est prêt avec une toile blanche. Sélectionnez l'outil Rectangle arrondi (raccourci U).
Cliquez sur la toile pour ouvrir la boîte Créer un rectangle arrondi. Utilisez :
Arrondissez les coins à 10 pixels, puis cliquez sur OK.
Note : Adaptez les dimensions à vos besoins. Consultez nos raccourcis clavier Photoshop essentiels pour plus d'efficacité.
Modifiez le remplissage et le contour via les menus déroulants. Pour cet exemple, appliquez un rouge pour l'état « bas ».
Double-cliquez sur le calque du bouton pour ouvrir la boîte Style de calque (ou Calque > Style de calque).
Activez Biseau et relief avec ces paramètres :
Structure
Ombrage
Ajustez pour un effet 3D subtil et équilibré.
Activez ensuite Contour avec Cône inversé.
Ajoutez Superposition de dégradé pour un aspect glossy :
Enfin, appliquez Ombre portée :
Structure
Qualité
Avant de valider, cliquez sur Nouveau style pour sauvegarder. Dans Photoshop CC, il s'ajoute aux Bibliothèques pour un accès rapide.
Créez un nouveau bouton vert au-dessus. Double-cliquez sur le style dans les Bibliothèques pour l'appliquer instantanément.
Vos états « haut » et « bas » sont prêts en un clin d'œil.
Créez un nouveau calque et utilisez l'outil Texte. Tapez « S'abonner » avec une police web-safe comme Montserrat ou Arial.
Double-cliquez sur le calque texte et activez Ombre intérieure :
Structure
Qualité
Ajoutez Superposition de dégradé :
Enregistrez le style texte via Nouveau style. Basculer entre les calques pour prévisualiser les états.
Enregistrez via Fichier > Enregistrer sous au format adapté.
Maîtrisez ces techniques pour des boutons sur mesure. Découvrez aussi comment supprimer un arrière-plan dans Photoshop.
