32
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 ?
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 9 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
25 janvier 2008 23:57, par Orbitan
Sympa ! J’aime beaucoup
C’est épuré, classe, et dark !Bref : Super.
Répondre -
-
27 janvier 2008 21:04, par paco ou fra5913
simple mais efficace
Voir en ligne : http://fra5913.free.fr
Répondre
-
-
28 janvier 2008 12:27, par Wonka
En ce moment j’ai une facheuse tendance à oublier le PSD
Enfin bon j’ai reparé mon erreur, vous pouvez trouver le fichier PSD en haut de cette page !
Répondre -
30 janvier 2008 11:17, par Mister GO
le rendu est vraiment pas mal mais c’est pas du pixel art sinon le logo est un peu flou^^
Répondre -
8 juin 2010 22:18, par Zabonoji
Salut Salut a tous c’est super bouton mais le truc c’est que je me suis arrêter un peut avant et j’ai mis une image sauf que chez moi sa pas fait se que je voulais que sa face
Répondre
regarder sur mon site sa a fait quel que chose de très très moche quesque je doit faire ou quesque j’ai raté ?! HELP ME !!! -
26 décembre 2010 20:14, par Paposs122
Bravo je prends le temps de remercier car je sais que ça va me servir, et en plus ça me permet de débuter simplement le webdesign avec photoshop !! Un grand merci !
Répondre
