Photoshop pour créer ses boutons de réseaux sociaux

tumblr_ndyvukSjNl1tubinno1_1280

Photoshop pour créer ses boutons de réseaux sociaux

J’ai remarqué que vous êtes très nombreuses (et très nombreux) à avoir apprécié mon article sur l’installation de boutons de réseaux sociaux sur les blogs. Il faut dire que les réseaux sociaux sont maintenant clairement indissociables de nos blogs respectifs. Plus qu’une simple façon de partager nos publications, ils sont aussi le lien entre notre petite personne et nos lecteurs adorés ! Et puis, il n’y a qu’à jeter un coup d’oeil à cette superbe infographie pour comprendre la mesure de leur impact !

Je suis donc vraiment toujours aussi ravie de partager avec vous mes petites astuces pour personnaliser vos blogs. Aussi, je reviens aujourd’hui avec un tutoriel super simple afin de créer soi même des boutons de réseaux sociaux avec Photoshop. Bien entendu, vous pouvez utiliser le logiciel de votre choix, la méthode restera sensiblement la même ! Allez, c’est parti les copains !

police
Pour gagner du temps, être efficace, et surtout ne pas s’embêter pour rien, je vous conseille tout d’abord de télécharger une police d’écriture qui reprend les principales icônes des réseaux sociaux. Je viens de tomber sur Social Font Face, qui m’a l’air pas mal ! Mais vous pouvez en trouver des tas d’autres :-) Ensuite, il vous reste plus qu’à installer cette police. Elle sera automatiquement ajoutée à Photoshop (en tout cas sur Mac ça fonctionne comme ça).
document
Hop, ensuite on ouvre Photoshop ! Il faut tout d’abord ouvrir un nouveau document. Pensez à indiquer « transparent » dans le contenu de l’arrière plan. Faîtes également attention aux dimensions, afin qu’elles coïncident avec les dimensions finales que vous souhaitez avoir pour vos icônes : épargnez-vous de redimensionner par la suite. Enfin, une résolution de 72 est suffisante.
1
forme
On s’attaque ensuite à la création de la forme de notre bouton. Là, j’ai opté pour une forme en ellipse, mais vous faîtes bien ce que vous voulez :-) Si une forme carrée vous enchante, allez-y ! Vous pouvez bien évidemment choisir la couleur de cette forme, en indiquant la couleur souhaitée dans la fenêtre Couleur.
2
3
icône
Il nous manque maintenant notre icône. Pour ça, rien de plus simple. Sélectionnez l’outil texte, et choisissez la police d’écriture récemment téléchargée : Social Font Face. Reportez-vous à la correspondance des caractères de la police afin de savoir où se trouvent les icônes de réseaux sociaux. Par exemple, l’icône Twitter correspond au t minuscule sur cette police. Vous n’avez plus qu’à taper cette lettre, et l’icône apparaîtra. Là aussi, vous pouvez choisir sa couleur !
4
installer
Surtout, pensez bien à conserver ce fond transparent en enregistrant votre image en .png. Étape cruciale, donc surtout ne vous trompez pas. Ça vous évitera bien des déboires si jamais votre blog n’a pas un fond blanc :-) Pour l’installation, reportez-vous à mon article sur ce sujet. Vous l’avez compris, il vous faudra répéter l’action que je viens de vous décrire pour chacun des réseaux sociaux que vous possédez. Sans forcément créer un nouveau document à chaque fois, mais en changeant l’icône et en enregistrant sous un nom différent, en .png bien sûr ! 
 
J’ESPÈRE QUE CET ARTICLE A ÉTÉ UTILE POUR VOUS ! SI VOUS AVEZ DES QUESTIONS, ON VOIT ÇA ENSEMBLE DANS LES COMMENTAIRES :-)

 

18 Comments
  • A Matter of Beauty

    31 juillet 2014 at 8:01 Répondre

    Merci pour la police, je n’avais même pas pensé que ça pouvait exister ! :O :D

    Bonne journée, bisous!

  • Nicoline Defy

    31 juillet 2014 at 1:21 Répondre

    Merci pour toutes tes astuces ! C’est top !

  • Cyan

    31 juillet 2014 at 3:53 Répondre

    Je ne connaissais pas cette typo ! Merci beaucoup pour ce tuto ;)

  • Delphine

    31 juillet 2014 at 8:21 Répondre

    Merci pour ce tuto :) Par contre tu fais comment pour le logo d’Hellocoton ?

  • Autour de Cia

    31 juillet 2014 at 8:24 Répondre

    C’est un super tuto. Mais je n’arrive pas à faire le logo de Pinterest. ça bloque!
    Bises

    • Elsa ❤

      31 juillet 2014 at 8:28 Répondre

      Pourquoi ça bloque ? Mais il me semble qu’il n’y a pas l’icône Pinterest dans la police que je propose. Sinon, bien se référer à la correspondance des caractères et des icônes !

  • FromSide2Side

    31 juillet 2014 at 11:12 Répondre

    absolument génial … vraiment un truc génial … merci …

  • Les Carnets de Sophie

    2 août 2014 at 9:25 Répondre

    Je me suis cassée la tête à faire les miens et au final c’est si simple ! Je ne savais pas qu’il y avait une police d’écriture dédiée je vais tester ça ! Merci beaucoup pour le tuto ;-)

  • Manikrak

    3 août 2014 at 9:15 Répondre

    Super tuto ! comme d’hab !

    Merciiii !

  • Lou Carnet

    8 août 2014 at 12:25 Répondre

    C’est géniaaaaaaaaaaaaaaal merci ! :D Surtout pour la police en fait, c’était surtout ça dont j’avais besoin ! <3 bisous

  • laspheredamandine.com

    10 août 2014 at 4:44 Répondre

    Merci pour le tutoriel trop bien :D
    Des bisous,
    Amandine
    http://laspheredamandine.com

  • adeline L

    15 août 2014 at 7:47 Répondre

    moi je ne trouve jamais les icônes bloglovin’ lol

  • Mademoisellevi

    19 août 2014 at 3:48 Répondre

    Tes tutos sont une merveille pour une nulle comme moi <3

  • haveyourcolour

    21 août 2014 at 12:47 Répondre

    Génial l’article ! J’ai tenté de le faire, c’est bien sympa :D

  • maquillage yeux marrons

    28 septembre 2014 at 8:42 Répondre

    Merci pour ce tuto :)

  • Ce Monde à Moi

    4 novembre 2014 at 9:00 Répondre

    J’adore j’adore j’adore!! Moi qui cherchait comment faire!! Tu me sauves! Un grand merci!! et ton blog pfiou juste waouhhhhhhhhhhhh. J’aimerais être aussi douée que toi !

  • Stéphane Torregrosa

    25 janvier 2015 at 12:07 Répondre

    Coucou voisine bordelaise,

    Merci pour le lien vers mon site !

    Au plaisir de se croiser certainement un de ces quatre :-)

Post a Comment