Serie Apple n°2 - Dessiner une icone style iPhone

BlogBang
Fichier PSD de ce Tutoriel
Voici le fichier PSD pour vous aider à comprendre ce tutoriel. Il est ziper, il faudra donc le déziper.
PSD Icone type iPhone.zip
Archives compressées en format ZIP 40.6 KB

Etape 1

 

J'ouvre Photoshop et je créer un nouveau document de 128 x 128px sur fond blanc.

Je place 4 guides tout autour de mon document, à 5px.

 

Etape 2

 

Je séléctionne l'outil rectangle arrondi avec un radius de 20px, et trace un rectangle entre mes 4 guides.

Je peut à present enlever mes guides, ils ne nous serront plus utils.

 

Etape 3

 

Je pixelise mon calque en faisant clique droit > pixeliser le calque (ou : Menu > Calque > Pixellisation > Calque). Puis, j'ouvre la fenêtre des calques (double clique sur le calque) et j'ajoute une incrustation en dégradé régler comme cela :

 

  • Mode de fusion : Normal
  • Opacitée : 100%
  • Dégradé : Bleu foncé (#14376D) vers bleu clair (#2D70CB) (ces couleurs dependent de l'icone que vous faites, ici, une icone Photoshop)
  • Style Linéaire
  • Angle : 120°

Etape 4

 

Avec l'outil Text, j'écrit au centre de mon rectangle, la police est Myriad Pro et la taille 72px, ici, j'écrit "Ps" car c'est une icone Photoshop, vous pouvez bien sur, ecrire ce que bon vous semble.

 

Etape 5

 

J'applique à mon texte, une lueure externe comme ceci :

 

  • Mode de fusion : Superposition
  • Opacitée : 75%
  • Bruit : 0%
  • Couleur  : Blanc

Etape 6

 

J'ouvre la fenêtre des calques du calque "Forme 1" (celui du rectangle) et ajoute une ombre portée comme cela :

 

  • Mode de fusion : Produit
  • Couleur : Noir
  • Opacitée : 75%
  • Angle : 90°
  • Distance : 2px
  • Grossi : 0%
  • Taille : 4px

Etape 7

 

Je créer un  nouveau calque au dessus de touts les autres, puis je récupère la séléction du calque "Forme 1" en faisant Ctrl+Clique sur le calque.

Je fait Menu > Séléction > Modifier > Contracter et entre 2 comme valeur.

Grace à l'outil Pot de peinture, je remplis de blanc la séléction ainsi obtenu.

 

Etape 8

 

Tout en laissant la séléction active, je (re)fait Menu > Séléction > Modifier > Contracter mais cette fois, je rentre 1 comme valeur.

J'appuie sur Suppr.

 

Etape 9

 

J'ajoute un Masque de fusion à mon calque en faisant Menu > Calque > Masque de fusion > Tout faire apparaitre.

Et avec l'outil dégradé noir vers blanc, je camoufle le bas du cadre blanc.

 

Etape 10

 

Je dessine un reflet dans la partie superieur de mon icone, si vous ne savait pas comment faire, regardez ici.

Je baisse l'opacitée à 10%.

 

Etape 11

 

Pour finir, je supprime l'arriere plan, pour faire ceci, je me place sur le calque "arriere plan" et clique sur la petite poubelle en bas à droite.

 

J'enregistre mon icone en .png, si vous voulez la mettre en tant qu'icone sur votre bureau, télécharger ceci pour pouvoir convertir les .png en .ico .

 

Variantes

Voici quelques variantes que vous pouvez réaliser, il suffi just de changer le text el la couleur du dégradé.

 

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 : 5
  • #1

    kyliandu45 (mardi, 28 juillet 2009 19:39)

    bien joué

  • #2

    mon-toonblog (dimanche, 09 août 2009 18:16)

    Bonjour,

    C'est un bon tuto ! Il explique bien comment faire les icônes. Merci

  • #3

    ??? (lundi, 12 octobre 2009 18:27)

    Merci beaucoup, j'ai seulement un requête (un peu pour moi bien sûr :) ) pourriez-vous faire un tutoriel qui explique comment faire un effet néon sur un texte s'il vous plaît ?

  • #4

    samratsaha (lundi, 23 novembre 2009 12:41)

    Lovely

  • #5

    SERILLON (lundi, 30 novembre 2009 16:04)

    Merci de ton excellent tutoriel. Je le trouve complet et très enrichissant.
    Etant relativement novice en Photoshop, je l'ai réalisé en 1heure (avec le reflet blanc dans la partie supérieure).
    Encore merci . génial!

flux rss
Annonces
Flèche bas Flèche haut