Voici un nouveau type de tutoriel Do.It.Yourself aujourd’hui sur le blog! Le DIY geek 🙂 J’ai conscience qu’il y a plein de très bons webdesigners et graphistes sur la toile et que je n’ai même pas un/dixième de leurs talents, mais cela ne m’empêche pas d’essayer de faire les choses par moi-même. Je voulais donc partager avec vous un tuto sur la création des boutons de réseaux sociaux pour vos sites ou blogs. Encore une fois on peut trouver tout un tas d’icônes de réseaux sociaux déjà faites sur le web, mais celles-ci auront le mérite d’être uniques, puisque ce seront les vôtres, avec la possibilité de les faire correspondre à votre design.
Comment créer simplement ses icônes de réseaux sociaux
Première étape, téléchargez les icônes des réseaux sociaux que vous souhaitez mettre en avant. Sur certains réseaux, vous trouverez dans les espaces dédiés aux développeurs ou à la presse (non n’ayez pas peur^^) des fichiers que vous pouvez utiliser au format png/jpg. En voici quelques uns :
Logo Facebook
Logo Twitter
Logo Pinterest
Pour la taille de votre icône, cela va dépendre de la place dont vous disposez, mais en général une icône mesurera environ 32px/32px.
Ouvrez un des logos de réseau social que vous avez récupéré dans Photoshop. Puis créez un nouveau document de 32px/32px, c’est dans ce document que vous allez réaliser votre icône.
Je suis certaine que vous devinez la suite ! Pour mon blog j’ai fait des icônes assez simples, mais avec les couleurs que je voulais mettre en avant qui n’étaient pas forcément celles correspondantes aux logos des réseaux sociaux.
J’ai donc créé un tampon pour m’assurer d’avoir le même rendu de fond sur chaque icône. Le tampon est une « pattern », autrement dit un motif. Pour créer une pattern à votre goût vous pouvez suivre un tutoriel sur le site Veerle’s blog, il est en anglais, mais avec les images et google traduction, il est vraiment possible de le réaliser. Il est à base de triangles, mais cela fonctionne avec toutes les formes. Par contre il est sous Illustrator… Sinon vous pouvez toujours via Photoshop utiliser de la couleur/du dégradé/des motifs inclus dans le logiciel ou que vous trouvez sur la toile. Soyez vigilant en choisissant votre fond car il faut que le logo reste visible.
Une fois votre pattern créée/votre fond choisit, vous pouvez l’appliquer sur l’arrière plan du nouveau document.
Ensuite il vous suffit de copier/coller et de redimensionner le logo dans votre document avec le fond et mettez-le au premier plan (le logo).
Selon le rendu vous pouvez ajuster le fond en diminuant son opacité afin que le logo reste bien visible. Et voilà il ne vous reste plus qu’à répéter cela pour tous les réseaux que vous voulez mettre en avant ! Trop facile non ?
Pas de commentaire