Pour un fansite par exemple, il est important d’avoir quelques boutons de partenariat disponibles afin que les partenaires lient le site au leur. Je vous propose donc aujourd’hui un petit tutoriel pour créer des boutons de partenariat simples, avec Photoshop. Plusieurs méthodes doivent exister et je vais vous expliquer la mienne.

Photoshop est un logiciel compliqué que je ne maîtrise pas à 100% bien sûr mais ce tutoriel peut facilement être suivi par des personnes débutantes car demande peu de manipulations. J’ai de plus fait un tutoriel très détaillé et très fourni en photos (il a l’air long comme ça mais c’est rapide de réaliser un bouton quand on a la technique).

Les pré-requis

  • Des templates pour faire les boutons.
  • Des polices d’écriture « pixels ».

Les templates

Le template est en fait la base pour faire votre bouton. C’est le fichier dans lequel vous allez introduire votre image. Vous trouverez juste après quelques templates que j’avais trouvé sur internet il y a plusieurs années (je serais incapable de vous dire où par contre).

Les polices

Pour faire des boutons, je conseille vivement d’utiliser des écritures qui soient faites pour être petites sans être floues. Pour celà, vous pouvez piocher sur le site Dafont, dans la catégorie « Pixel / bitmap« . Personnellement, j’ai l’habitude d’utiliser la police 04b03 mais vous prendrez celle qui vous plaira, le choix est assez vaste ^^

Le tutoriel

Une fois que vous avez votre template et installé une police adaptée, nous pouvons commencer. Dans Photoshop, ouvrez le template ainsi que la photo dont vous souhaitez en faire un bouton. Pour ma part, j’ai fait un imprim-écran du site de mon amie Faith (Obsession) vu que je compte lui faire des petits boutons pour sa nouvelle version ^^

Bouton de partenariat avec Photoshop

Il faut ensuite vérifier que le template est bien en mode « Couleurs RVB ». En effet, il m’est arrivé dans le passé d’avoir des templates qui soient en « Couleurs indexées » et forcément, ça n’allait pas (Image Mode Couleurs RVB).

Bouton de partenariat avec Photoshop

Nous allons maintenant pouvoir attaquer la création du bouton. Avec l’outil « Rectangle de sélection », vous allez sélectionner une zone large que vous allez ensuite copier (Ctrl+C pour aller plus vite).

Bouton de partenariat avec Photoshop

Avec l’outil « Baguette magique », vous allez maintenant sélectionner la zone vide du bouton.

Bouton de partenariat avec Photoshop

Et vous allez coller votre sélection dans la zone vide du bouton (Edition Coller dedans).

Bouton de partenariat avec Photoshop

Il faut maintenant redimensionner l’image qui a été collée dans le bouton. Pour cela, vous allez dans Edition Transformation Homothétie. Et vous diminuez les valeurs des cases H et L qui vont apparaître à droite. En même temps, vous pouvez également déplacer votre image pour la centrer dans le bouton.

Les valeurs à mettre seront en fonction de la taille de votre image de base, de la taille de votre sélection. Donc vous arrêtez de diminuer quand le résultat vous plait. Pour sortir du redimensionnement, soit vous cliquez sur le bouton Valider à droite, soit vous cliquez sur un outil.

Attention à bien mettre des valeurs identiques pour avoir un redimensionnement proportionnel.

Bouton de partenariat avec Photoshop

L’étape suivante est d’écrire le nom du site sur le bouton. Pour cela, vous allez utiliser la police que vous avez installé précédemment. Personnellement, j’utilise la police 04b03 en mode « sans » (d’ailleurs c’est le mode à privilégier avec ce genre de polices). Vous choisissez également la couleur qu’il vous plaît.

Bouton de partenariat avec Photoshop

Selon l’image que vous avez choisie, vous pouvez vous arrêter ici. Pour mon bouton, je vais ajouter un rectangle blanc sous le texte, histoire que celui-ci ressorte bien.

Pour cela, cliquez sur le calque de votre photo afin que la rectangle blanc s’insère juste après, en dessous du texte. J’ai ensuite pris l’outil « Rectangle », en couleur blanche et je trace un rectangle qui fasse la taille du texte (n’hésitez pas à zoomer). Enfin, faites clique droit sur le calque de votre rectangle Pixelliser le calque.

Si vous le souhaitez, vous pouvez donner davantage de netteté au bouton : Filtre Renforcement Accentuation ou Plus net.

Rendu final

Et voila comment rendent les trois boutons faits à partir de la même image. Quand on connait la technique, faire ce genre de boutons prend à peine 2 minutes.


Share on Facebook0Tweet about this on Twitter0Share on Google+0Pin on Pinterest0Print this pageEmail this to someone

Laisser un commentaire


En rentrant votre adresse mail, vous recevrez une notification lorsque je répondrai à votre commentaire.



Welcome !
Bienvenue sur Coding Pulse, votre site d'astuces, tutoriels et ressources pour vos sites et blogs. Je ne suis pas professionnelle en graphisme ou développement web mais j'espère que mes articles vous seront utiles. A part ça, je suis Anna, jeune Lorraine de 28 ans, codant depuis maintenant 9 ans.
anna[at]codingpulse.fr
Restons connecté(e)s

55

319

241
Profil twitter
Page facebook
Elite / top affiliates
Mentions légales