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 !
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).
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.
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.
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 !
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 :-)
Dans le même style
18 commentaires
Répondre à FromSide2Side Annuler la réponse
Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.
Merci pour la police, je n’avais même pas pensé que ça pouvait exister ! :O :D
Bonne journée, bisous!
Merci pour toutes tes astuces ! C’est top !
Je ne connaissais pas cette typo ! Merci beaucoup pour ce tuto ;)
Merci pour ce tuto :) Par contre tu fais comment pour le logo d’Hellocoton ?
Je le reproduis sous Illustrator :-)
C’est un super tuto. Mais je n’arrive pas à faire le logo de Pinterest. ça bloque!
Bises
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 !
absolument génial … vraiment un truc génial … merci …
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 ;-)
Super tuto ! comme d’hab !
Merciiii !
C’est géniaaaaaaaaaaaaaaal merci ! :D Surtout pour la police en fait, c’était surtout ça dont j’avais besoin ! <3 bisous
Merci pour le tutoriel trop bien :D
Des bisous,
Amandine
http://laspheredamandine.com
moi je ne trouve jamais les icônes bloglovin’ lol
Tes tutos sont une merveille pour une nulle comme moi <3
Génial l’article ! J’ai tenté de le faire, c’est bien sympa :D
Merci pour ce tuto :)
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 !
Coucou voisine bordelaise,
Merci pour le lien vers mon site !
Au plaisir de se croiser certainement un de ces quatre :-)