Comment Faire Des Boutons 3D

Table des matières:

Comment Faire Des Boutons 3D
Comment Faire Des Boutons 3D

Vidéo: Comment Faire Des Boutons 3D

Vidéo: Comment Faire Des Boutons 3D
Vidéo: Créer un bouton en 3 dimensions (3D) animé (Facile - HTML et CSS) 2024, Novembre
Anonim

Dans la conception des sites, des éléments de navigation tridimensionnels sont souvent utilisés. De tels boutons peuvent être créés dans l'éditeur graphique Photoshop, simulant le volume à l'aide d'ombres et de dégradés.

Comment faire des boutons 3D
Comment faire des boutons 3D

Nécessaire

Programme Photoshop

Instructions

Étape 1

Créez un nouveau document dans un éditeur graphique à l'aide de l'option Nouveau du menu Fichier. Sélectionnez la taille du nouveau document pour s'adapter au bouton et rendez l'arrière-plan transparent.

Étape 2

Activez l'outil Rectangle arrondi. Si vous voulez un bouton légèrement arrondi, dans la barre d'options d'outils, définissez le rayon sur un millimètre. Dessinez un rectangle arrondi à l'aide de l'outil sélectionné. La forme résultante sera la base du bouton.

Étape 3

Cliquez avec le bouton droit sur le calque et sélectionnez l'option Rasteriser le calque. Chargez la sélection avec l'option Charger la sélection du menu Sélection.

Étape 4

Utilisez l'outil Dégradé pour remplir le bouton d'un dégradé bicolore, en choisissant une combinaison de couleurs appropriée parmi les préréglages de la palette de dégradés. Le style de dégradé doit être linéaire, sélectionnez-le en cliquant sur le bouton Dégradé linéaire sous le menu principal. La partie supérieure du bouton après remplissage doit être plus claire que la partie inférieure.

Étape 5

Appliquez un style au calque. Pour ce faire, utilisez l'option Options de fusion du menu contextuel. Sélectionnez l'onglet Ombre portée et entrez une valeur de cent vingt degrés pour le paramètre Angle. Définissez le paramètre Taille sur trois pixels.

Étape 6

Dans l'onglet Ombre intérieure, définissez la même valeur pour le paramètre Angle et pour la Taille, définissez la valeur sur cinq pixels. Appliquez le style en appuyant sur la touche Entrée.

Étape 7

Faites une ombre pour le bouton. Pour ce faire, cliquez sur le bouton Créer un nouveau calque et remplissez la zone sélectionnée du nouveau calque de noir. Sélectionnez l'outil Pot de peinture pour cela. Désélectionnez avec Ctrl + D.

Étape 8

Appliquez un filtre Flou gaussien du groupe Flou du menu Filtre au rectangle noir. Réglez le rayon sur quatre pixels. Faites glisser le calque d'ombre sous le calque de bouton et augmentez l'ombre de trois à quatre pixels. Pour ce faire, activez l'outil Déplacer et déplacez l'ombre avec les boutons du curseur. Réduisez l'opacité de ce calque à soixante pour cent.

Étape 9

Créez le calque actif avec le bouton et chargez une sélection à partir de celui-ci. Réduisez la sélection de deux pixels à l'aide de l'option Contracter du groupe Modifier du menu Sélection.

Étape 10

Créez un nouveau calque et remplissez la sélection résultante avec un dégradé linéaire du blanc au transparent de sorte que la partie blanche se trouve au bas du bouton. Désélectionnez la sélection. En utilisant l'option Transformation libre du menu Edition, réduisez la zone couverte par le dégradé verticalement. Appliquez la transformation avec la touche Entrée.

Étape 11

Changez le mode de fusion du calque de dégradé en superposition. Cela peut être fait en sélectionnant un mode dans la liste déroulante sur le côté gauche de la palette Styles. Réduisez l'opacité du calque à soixante pour cent.

Étape 12

À l'aide de l'outil Texte horizontal, écrivez le texte qui devrait figurer sur le bouton.

Étape 13

Rassemblez tous les calques dans un dossier à l'aide de l'option Grouper les calques du menu Calque, en les sélectionnant tout en maintenant la touche Ctrl enfoncée. Enregistrez le bouton dans un fichier psd à l'aide de l'option Enregistrer du menu Fichier.

Conseillé: