Créer un bouton avec Photoshop

L’utilisation du logiciel Photoshop ne s’arrête pas au traitement professionnel des images, Photoshop est utilisé beaucoup plus en programmation de logiciel car il permet aux développeur et designeurs de créer des maquettes pour leurs sites et leurs logiciels.

Parmi les multiples créations qu’on peut réaliser avec Photoshop, les boutons, les boutons sont des images qu’on intègre par la suite sur n’importe quelle création que ce soit un logiciel, un document word, PDF etc …

Dans ce tutoriel vous allez apprendre à créer de différents boutons avec Photoshop, les résultats ne sont pas bons à voir car c’est un tutoriel rapide qui vous donnera une idée sur comment créer un bouton, c’est à vous de passer plus de temps afin de réaliser de beaux boutons.

Créer un bouton avec Photoshop

Avant de commencer, vous devez savoir que cette manipulation (création de bouton) peut se faire avec des différents logiciels, la différence est que avec Photoshop vous pourrez aller plus loin en créant des boutons plus beau et plus professionnels.

Créer un bouton arrondi :

Choisissez l’outil couleur puis la couleur de votre choix, dans la barre d’outil, choisissez l’outil ellipse de sélection
Ellipse de sélection Photoshop
Créer un cercle (utilisez le bouton “MAJ” du clavier).

Pour donner un effet dégradé au bouton utilisez l’outil dégrader.

Enlevez la sélection sur le bouton arrondi

Créez un autre cercle à l’intérieur du premier cercle, remplissez-le avec une couleur bleu (utilisez l’outil couleur et le pot de peinture)

Utiliser l’outil dégradé pour créer un dégradé

Enlevez la sélection puis créez un autre cercle et remplissez-le avec une couleur rouge

Créez à nouveau un dégradé avec l’outil dégradé

Enlevez la sélection puis tapez votre texte en utilisant l’outil texte sur le bouton arrondi crée.
Résultat :

Créer un bouton carré :

Sur Photoshop, créez un nouveau document avec les dimensions 100px*100px. Choisissez l’outil rectangle de sélection

Créez votre carré puis en utilisant l’outil couleur, choisissez la couleur que vous souhaitez utiliser

Cliquez sur l’outil dégradé puis appliquez l’effet dégradé sur votre carré de bas droite vers le haut gauche

Enlevez la sélection de carré, cliquez sur (1) puis sur (2) ensuite sur (3)

Choisissez l’outil rectangle< puis créez un nouveau carré à l’intérieur du premier carré et choisissez sa couleur avec l’outil couleur

choisissez une autre fois l’outil dégradé puis faites dégrader le deuxième carré du haut gauche vers le bas droite

Enlevez la sélection puis choisissez l’outil texte et tapez votre texte.
Résultat :

Créer un bouton gris simple :

Ouvrez photoshop puis créer un nouveau document

Choisissez l’outil couleur puis la couleur gris « #cccccc ». Choisissez l’outil rectangle puis créez un rectangle

Sur la fenêtre des calques cliquez sur « F » pour les styles puis sur « contour ».

Sur la fenêtre qui s’ouvre cochez « biseautage et estampage » puis cliquez sur « Ok »

Vous allez avoir le bouton ci dessous

Choisissez l’outil texte puis tapez votre texte.
Résultat :

Créer un bouton plastique

Créer un nouveau document

Choisissez l’outil couleur puis la couleur « #1078c2 », choisissez l’outil rectangle arrondi puis créez un rectangle

Cliquez sur « Filtre » puis pointez sur « Artistiques » et cliquez sur « Barbouillage »

Sur la fenêtre qui s’ouvre choisissez « Emballage plastique » puis tapez 15 sur Intensité, 10 sur détail et 7 sur lissage

Vous allez avoir le résultat suivant

Tapez votre texte avec l’outil texte.
Résultat final :

Créer un bouton Nébuleuse

Créez un nouveau document

Choisissez l’outil couleur puis une couleur gris « #cccccc », cliquez sur l’outil rectangle arrondi puis créez un rectangle

Sur la fenêtre des calques cliquez sur « F » pour les style puis sur « Contour »

Sur la fenêtre qui s’ouvre cliquez sur « Style » puis sur l’icône « Nébuleuse », puis cliquez sur ok

Vous allez avoir le résultat suivant

Tapez votre texte avec l’outil texte.
Résultat final

Créer un bouton verre bleu

Créer un nouveau document

Choisissez l’outil couleur puis la couleur « 1078c2 », choisissez l’outil rectangle arrondi et créez un rectangle

Sur la fenêtre des calques cliquez sur « Contour ».

Sur la fenêtre qui s’ouvre cliquez sur style puis sur l’icône « Ciel en biseau (texte) »

Vous allez voire le résultat suivant

Tapez votre texte sur le bouton avec l’outil Texte
Résultat :

Créer un bouton orange simplifié

Créez un nouveau document

Choisissez l’outil couleur puis une couleur « #1078c2 », choisissez l’outil rectangle arrondi puis créez un rectangle

Sur la fenêtre des calques cliquez sur « Contour ».

Sur la fenêtre qui s’ouvre cliquez sur “Style” puis sur l’icône « Verre bleu (bouton) »

Vous allez avoir le résultat suivant

Voici le résultat final :

Créer un bouton 3D

Ouvrez photoshop puis ouvrez un nouveau document, choisissez l’outil couleur puis la couleur bleu « #2895ff ».
Cliquez sur l’outil rectangle arrondi puis dessinez un rectangle arrondi

Cliquez sur F « ajoute style au calque » puis cliquez sur « Ombre portée »

Sur la fenêtre des calques cliquez sur « Ajoute un masque de fusion »

Cliquez sur l’outil dégradé puis dégradez le calque

Cliquez sur la touche « Maj » du clavier puis sur (1) et (2) pour sélectionner les deux calque

Cliquez sur les calques pour les sélectionner, avec le bouton droit de la souris cliquez sur les calques sélectionnés puis sur cliquez sur « Fusionner les calques »

Cliquez sur « filtre » puis pointez sur « Rendu » puis cliquez sur « Halo. »

Sur la fenêtre ” Halo ” qui s’ouvre cochez « Focale fixe film » et choisissez la position de la croix

Cliquez sur « ok » puis tapez votre texte avec l’outil texte
Résultat final :

Créer un bouton vert arrondi

Ouvrez photoshop puis créez un nouveau document

Choisissez l’outil couleur puis la couleur vert « #82eb65 », choisissez l’outil rectangle arrondi puis créez un rectangle

Sur la fenêtre des calques cliquez sur « F » pour les styles puis sur « contour. »

Sur la fenêtre qui s’ouvre cochez « Ombre portée », « Lueur externe » et « Lueur interne »

Vous allez avoir le résultat suivant

Tapez votre texte avec l’outil texte
Résultat :

Créer un bouton Jaune pour forum

Créez un nouveau document

Choisissez l’outil couleur puis une couleur jaune « #fcff3a », choisissez l’outil rectangle arrondi et créez un rectangle

Sur la fenêtre des calques cliquez sur « F » pour les styles puis sur « Contour »

Sur la fenêtre qui s’ouvre cochez « Ombre portée » et « Lueur externe »

Cliquez sur « Ok » et vous allez voir le résultat suivant

Cliquez sur « Filtre » puis pointez sur « Rendu » puis cliquez sur « Halo »

Sur la fenêtre qui s’ouvre choisissez l’emplacement de la lumière et tapez 119 sur « Luminosité » et cochez sur « Focale fixe Film »

Cliquez sur « OK »

Tapez votre texte avec l’outil texte
Résultat

Créer un bouton avec motif

Ouvrez photoshop puis ouvrez un nouveau document

Choisissez l’outil couleur puis une couleur blanche « #ffffff », choisissez sur l’outil rectangle arrondi puis créez un rectangle

Sur la fenêtre des calques cliquez sur « F » pour les styles puis sur « Contour »

Sur la fenêtre qui s’ouvre cliquez sur (1) « Incrustation de motif » puis sur (2) « motif » puis sur (3) puis cliquez sur l’espace (4)

Tapez 50 sur « Opacité » et 127 sur « Echelle » puis cochez « Ombre portée » et « Lueur externe »

Cliquez sur « Ok » pour avoir le résultat suivant

Choisissez l’outil texte et tapez votre texte
Résultat

Créer un bouton Orange arrondi

Commencez par créer un nouveau document

Choisissez l’outil couleur puis une couleur orange « f8a00c », cliquez sur l’outil rectangle arrondi et créez un rectangle

Sur la fenêtre des calques cliquez sur « F » pour les styles puis sur « Contour »

Sur la fenêtre qui s’ouvre cochez « Ombre portée » et « Lueur externe » puis « Lueur interne »

Cliquez sur « Ok » et vous aurez le bouton suivant

Tapez votre texte avec l’outil texte
Résultat final

Créer un bouton avec un effet neige

Créez un nouveau document

Choisissez l’outil couleur puis une couleur gris « #cccccc », choisissez l’outil rectangle arrondi puis créer un rectangle

Sur la fenêtre des calques cliquez sur « F » pour les styles puis sur contour

Sur la fenêtre des styles qui s’ouvre cliquez sur styles puis sur l’icone (1) puis sur « Ok »

Vous allez avoir le bouton suivant:

Résultat :

Créer un bouton satin

Créez un nouveau document

Choisissez l’outil couleur puis la couleur violet « df71f6 » (vous pouvez choisir la couleur que vous souhaitez).
Cliquez sur l’outil rectangle arrondi puis dessinez un rectangle comme suit

Sur la fenêtre des calques cliquez sur « F » puis sur « Contour »

Sur la fenêtre « style de calque » qui s’ouvre cochez sur « Lueur interne » et sur « Satin » puis cliquez sur « OK »

Choisissez l’outil texte puis tapez votre texte (vous pouvez modifier votre texte en affichant la fenêtre caractères, cliquez sur Fenêtre puis sur Caractères)

Résultat :