Créer un bouton pixel art dark glossy pour son site Internet

Une technique pour créer un bouton dark glossy avec un effet de pixel art. Le but est de créer un bouton qui sera petit en taille pour imiter un peu l’effet pixel art, nous ajoutons par-dessus un peu de style web2.0 avec un reflet et une icône. Le tout pour donner un bouton pour un site Internet vraiment sexy !

A vous de voir, la méthode et en plus très simple !

Fichier source Photoshop :

Fichier Source Photoshop

Clic pour télécharger le fichier source Photoshop utilisé dans ce tutorial

Rappel : Vous pouvez utiliser ce fichier pour récupérer les styles : ouvrez le fichier + clic droit sur le calque + copier le style de calque.

ETAPE 1

Je crée un nouveau document (fichier > nouveau document), avec l’outil sélection. Je crée un rectangle que je remplis de noir (avec le pot de peinture). Ensuite j’ajoute une incrustation de dégradé puis un contour (calque > style de calque > incrustation de dégradé).

Précision : Vous pouvez aller chercher la configuration des calques dans le fichier sources Photoshop disponible en haut de cette page.

ETAPE 2

Je récupère la sélection de mon rectangle : pour cela j’appuie sur ctrl + clic sur le calque (dans la bibliothèque des calques) puis je crée un nouveau calque (calque > nouveau calque) et je remplis avec le pot de peinture la sélection en blanc. Je coupe avec l’outil sélection la moitié basse de ce nouveau rectangle blanc, puis j’ajoute un masque de fusion (calque > masque de fusion > tout faire apparaitre). J’utilise l’outil dégradé noir > blanc du bas vers le haut (et sur le masque de fusion) pour camoufler légèrement le reflet.

ETAPE 3

Je crée un nouveau calque par-dessus les autres, et je récupère à nouveau la sélection de mon premier rectangle. Avec l’outil pot de peinture je le remplis en blanc. Je modifie la sélection : Sélection > modifier > incruster > 1 pixel et j’appuie sur la touche de mon clavier Suppr. J’ajoute un masque de fusion sur ce calque (calque > masque de fusion > tout faire apparaitre) et j’utilise l’outil dégradé noir vers blanc de haut en bas pour camoufler le bas de ma bordure blanche (voir ci-dessous).

ETAPE 4

Une étape qui n’est pas du tout obligatoire mais qui donne un peu plus de cachet à la composition finale. Je crée un nouveau calque par-dessus les autres, je récupère encore la sélection de mon premier rectangle, grâce au pot de peinture je remplis la sélection avec un motif de point. J’utilise un masque de fusion pour camoufler le bas de mon motif.

ETAPE 5

J’ajoute un texte, ici j’utilise un texte de 10 pixels en utilisant la police Tahoma.

ETAPE 6

J’ajoute une icône sur la gauche de mon bouton.

ETAPE 7

Je récupère la sélection de mon icône puis je crée un nouveau calque par-dessus. Je crée une ellipse de sélection j’intervertis ma sélection (sélection > intervertir) puis je supprime. Je supprime également les parties de mon reflet en haut et à gauche pour laisser apparaitre les bordures de mon icône.

ETAPE 8

Maintenant je crée un nouveau calque en DESSOUS de tous les autres. Puis je récupére la sélection de mon icône : ctrl + clic sur le calque de mon icône puis j’ajoute la sélection de mon premier rectangle shift + ctrl + clic sur le calque de mon rectangle.

Je remplis cette sélection de blanc et j’ajoute simplement une ombre portée (discrète si possible).

Et voila c’est terminé !

Plutôt joli non ?