Serie Apple 1/3 - Dessiner un bouton type Apple.com

BlogBang
Fichier PSD de ce Tutoriel (Bouton en mode "Normal")
Voici le fichier PSD pour vous aider à comprendre ce tutoriel. Il est ziper, il faudra donc le déziper.
PSD Bouton Apple Normal.zip
Archives compressées en format ZIP 17.4 KB
Fichier PSD de ce Tutoriel (Bouton en mode "Survoler")
Voici le fichier PSD pour vous aider à comprendre ce tutoriel. Il est ziper, il faudra donc le déziper.
PSD Bouton Apple Appuyer.zip
Archives compressées en format ZIP 17.5 KB

Ce tutoriel se compose de deux parties :

 

 

1. Bouton en mode "Normal"

Etape 1

 

J'ouvre Photoshop, et créer un nouveau document de 48 x 125px sur fond blanc.

Je vais placer 4 guides comme ceci (ils sont chacun à 5px du bord) :

 

Etape 2

 

Avec l'outil Rectangle arrondi, régler sur une couleure noire, et un radius de 5px, je trace mon rectangle arrondi entre mes guides.

 

Etape 3

 

J'ouvre la fenêtre des styles de calques en double-cliquant sur le calque du rectangle, et séléctionne "Incrustation en dégradé". Je le regle comme cela :

 

  • Mode de fusion : Normal
  • Opacité : 100%
  • Dégradé : Gris foncé (#838383) vers gris plus claire (#C8C8C8)
  • Style : Linéaire
  • Angle : 90°

 

Puis, je séléctionne "Ombre portée" et regle ces option comme cela :

 

  • Mode de fusion : Produit
  • Couleur : Noir
  • Opacité : 20%
  • Angle : 90°
  • Distance : 1px
  • Diffusion : 0%
  • Taille: 0px

 

Puis je clique sur OK.

 

Etape 4

 

Grâce à l'outil Text Horizontal, j'ecrit mon text au millieu de mon bouton.

La police utilisée est Myriad Pro, la taille est de 16px et la couleur est un gris foncé (#2D2D2D).

 

Etape 5

 

J'ouvre la fenêtre des styles de calques de mon text et ajoute une ombre portée :

 

  • Mode de fusion : Normal
  • Couleur : Blanc
  • Opacité : 50%
  • Angle : 90°
  • Distance : 1px
  • Diffusion : 0%
  • Taille : 0px

 

Pour finir, je clique sur OK.

 

2. Bouton en mode "Survoler"

Cette partie du tutoriel est pour faire l'image du bouton qui apparait au survole de la souris, ci vous ne savez pas comment faire cet effet, regardez ici !.

 

Pour faire cette seconde partie, enregistrez le bouton precedement fait en format PSD (Photoshop), dupliquez-le et ouvrez le PSD dupliquer.

Modifier simplement les styles de calques comme ci-dessous pour que le bouton ou le text ne bouge pas au survole de la souris.

 

Etape 1

 

J'ouvre la fenêtre des styles de calques en double-cliquant sur le calque du rectangle, et séléctionne "Incrustation en dégradé". Je le regle comme cela :

 

  • Mode de fusion : Normal
  • Opacité : 100%
  • Dégradé : Gris foncé (#555555) vers gris plus claire (#909090)
  • Style : Linéaire
  • Angle : 90°

 

Puis, je séléctionne "Ombre portée" et regle ces option comme cela :

 

  • Mode de fusion : Produit
  • Couleur : Noir
  • Opacité : 20%
  • Angle : 90°
  • Distance : 1px
  • Diffusion : 0%
  • Taille: 0px

 

Puis je clique sur OK.

 

Etape 2

 

Grâce à l'outil Text Horizontal, j'ecrit mon text exactement au meme endroitque à la premiere partie.

La police utilisée est Myriad Pro, la taille est de 16px et la couleur est blanc (#FFFFFF).

 

Etape 3

 

J'ouvre la fenêtre des styles de calques de mon text et ajoute une ombre portée :

 

  • Mode de fusion : Normal
  • Couleur : Noir
  • Opacité : 50%
  • Angle : -90°
  • Distance : 1px
  • Diffusion : 0%
  • Taille : 0px

 

Pour finir, je clique sur OK.

 

Voici le résultat avec le code :

 

Bannière bouton

J'espere que ce tutoriel vous à plus, n'hesitez pas à laisser vos commentaires, vos remarques et vos critiques.

bouton d'essaibouton d'essaibouton d'essai bouton d'essai

Écrire commentaire

Commentaires : 2
  • #1

    Amateur (vendredi, 26 novembre 2010 16:50)

    Merci beaucoup pour ce superbe tutoriel !
    Clair précis et net, aucun problème pour appliquer vos conseils.

    bravo.

  • #2

    Quinté (samedi, 05 mai 2012 09:52)

    merci pour ce tuto, dommage qu'il n'y en ait pas d'autres, la mise à dispo des calques est vraiment sympa !

flux rss
Annonces
Flèche bas Flèche haut