yesweblog-mockup
Outils Web, Ressources, Tutoriel

Créer Facilement des Icônes de Réseaux sociaux via Picmonkey

Quand on se dote d’un design pour son Blog, qu’il s’agisse d’un template Blogger ou d’un thème WordPress, souhaiter le personnaliser est sans aucun doute, une des premières volontés. En fait, c’est même la plupart du temps, la première chose à laquelle on pense et qu’on a envie de faire :) Et si très souvent des icônes de réseaux sociaux toutes faites sont fournies avec un design, vouloir avoir ses propres icônes est là aussi, quelque chose de courant.

On s’imagine souvent, que pour créer ce genre de ressources visuelles, il faut des outils payants comme PhotoShop, que cela demande des connaissances, que cela prend du temps, beaucoup de temps. S’agissant de la création de la plupart des ressources visuelles, c’est vrai, on ne va pas se mentir. Faire une belle bannière, imaginer et créer un Logo propre et de qualité, ce n’est pas le job de professionnels pour rien. Cependant, s’agissant de ressources visuelles comme des icônes, il est également possible d’en créer par ses propres soins, ou quoi qu’il en soit, de s’essayer à l’exercice !

sakura-flowers-blossom-ribbon

Créer Une Icône avec PicMonkey

Picmonkey est un outil en ligne en grande partie gratuit. Certaines Polices sont payantes comme certaines autres fonctionnalités. Pourtant, le pan gratuit du système permet d’aller relativement loin sans procéder pour autant à la souscription d’un abonnement.

Alors s’agissant de la création d’une icône, pour le coup, pas besoin de passer par le mode premium du biniou :)

Pour illustrer ce tutoriel, voici une petite vidéo démontrant comment en quelques clics, on peut créer des icônes avec une image en second plan qui servira de fond à l’icône.

S’agissant du tutoriel textuel, allons-y !

Trouver des Icônes

D’abord, équipez-vous d’icônes que vous pouvez trouver gratuitement sur la toile. Comme par exemple sur Freepik, un exemple parmi beaucoup d’autres disponibles sur le net. Vous pourrez alors aller télécharger sur un site comme celui cité, une série d’icône qui répondra à vos goûts et envies. Attention, certaines séries ou certaines icônes comme d’autres ressources nécessitent de citer leurs auteurs et répondent à différentes licences. Pour pouvoir utiliser les icônes avec Picmonkey, téléchargez-les au format .PNG.

Trouver un fond pour ses icônes : Textures ou patterns

Là pareil, vous pouvez trouver des textures gratuites en ligne sans prise de tête, toujours avec des sites comme Freepik juste ici ou d’autres sources toutes aussi bien fournies. Là toujours, ‘tention aux éventuels droits d’utilisation.

Une fois que vous aurez des icônes au format png et votre texture de fond, rendez-vous sur Picmonkey. Là, cliquer sur l’icône Design tout en haut de manière à pouvoir personnaliser la taille de votre future icône.

picmonkey

Cela vous ouvre votre espace de travail, avec une image carrée avec fond blanc. Descendez en bas à gauche sur le menu Resize, pour changer la taille de votre espace de travail.

Concernant la taille de votre future icône, à vous de voir ce qui conviendra le mieux par rapport au design de votre blog. Allez-vous les mettre dans votre sidebar ? Combien de pixels votre sidebar fait-elle en largeur ? Combien d’icônes utiliserez vous ? Il est à noter qu’il convient d’utiliser des icônes suffisamment grandes pour que lors d’une navigation tactile via smartphone ou tablette, l’internaute puisse facilement appuyer dessus sans avoir à zoomer :) Donc même si vous souhaitez que votre icône soit belle et déchire, n’omettez pas l’aspect pratique et ergonomique qui est aussi important que l’aspect esthétique ^^ !

Pour vous donner une idée, voici deux icônes Hellocoton à dimensions réelles, la première faisant 72×72 pixels et la seconde faisant du 40 sur 40 :

hellocoton-icon-72x72 hellocoton-icon-40x40

Bref ! C’est donc via le menu Resize que vous pourrez définir la taille de votre icône :) So let’s go saisir les dimensions que vous souhaitez ! Comme suit pour l’exemple :

resize-pic-carre

Vous aurez donc là un carré blanc, mais beaucoup plus petit que celui ouvert par défaut par l’outil. Soit, rendez-vous maintenant sur le menu Textures à gauche au dessus de la pomme :

pic-texture-icon

Cela va vous ouvrir un nouveau panel d’options. Choisissez le premier choix tout en haut : YOUR OWN. Enfin, cliquez sur ADD YOUR OWN de manière à pouvoir envoyer/uploader votre texture. Cela affichera automatiquement la texture sur le petit carré blanc sur votre espace de travail à droite. Libre à vous de la redimensionner ou de la bouger et de jouer avec les effets proposés gratos par Picmonkey :)

Une fois la texture en place, rendez-vous à droite sur l’icône Framesframes-picmonkey

Si l’outil vous demande d’appliquer la modif d’ajout de texture, validez via Apply. Et là, rendez-vous tout en haut de la série de choix proposés par la rubrique Frames. C’est le moment de sélectionner la forme de votre choix. 8 sont proposées gratuitement. Le cercle, le carré etc… Ici, je sélectionne le cercle afin d’obtenir une icône ronde basique. Cela va automatiquement vous positionner le cercle sur votre espace de travail.

Important : Cochez bien le choix Transparent Background si ce n’est pas le cas par défaut. Cela vous mettra en place un fond transparent :)

shape-cutouts

Voici ce que cela donne pour l’exemple sur l’espace de travail :

picmonkey-round-shape

Vous voilà à la moitié des étapes ! Woohoo :) Now, arrive le moment de télécharger votre icône préalablement choisie et au format PNG. So, rendez-vous sur le menu Overlays de Picmonkey :

picmonkey-overlay-icon

Une fois que vous aurez cliqué sur le papillon à gauche, cela vous ouvrira tous les choix du Overlays de Picmonkey. Là il conviendra d’aller télécharger votre icône pour la positionner sur votre cercle. Cliquez sur ADD YOUR OWN afin de pouvoir envoyer/uploader votre icône. Cela vous fera quelque chose comme ce qui suit où j’ai téléchargé une icône en forme de coeur qui était noire avant le changement de couleur :

overlay-color

Il se trouve que grâce au format PNG de l’icône, une petite fenêtre s’ouvre dès l’upload de celle-ci sur l’espace de travail. Reste alors à choisir la couleur de son choix. Pour ma part et pour l’exemple, je l’ai passée du noir au blanc.

Vous pouvez découvrir ici que l’icône n’est pas adaptée à la taille du cercle bleu qui est en second plan. N’hésitez donc pas à calibrer grâce à votre curseur de souris, la taille qui vous plaît et à recentrer et diminuer ou agrandir les dimensions de votre icône. L’idée étant qu’elle reste clairement visible et lisible tout en restant nette et compréhensible. Aussi, ce que cela donne avec la lettre P de Pinterest, une fois l’icône recentrée :

mon-icone-pinterest

Une fois que vous aurez trouvé l’équilibre qui vous semble le plus adapté pour votre future icône, cliquez sur Save tout en haut à gauche de votre écran de manière à aller sauvegarder votre icône :) Comme suit juste ici et attention à bien enregistrer votre icône au format PNG et non pas au format JPG pour converser la transparence autour de la forme ronde de votre icône si vous avez opté pour cette forme :

save-picmonkey

Si toutefois les dimensions ne vous conviennent plus, vous pouvez ici les réduire :) Et passer why not à du 50×50 au lieu de 60×60 et ainsi de suite. L’idée étant de conserver la qualité d’affichage, il faudra alors éviter de passer à du plus grand.

Une fois votre icône sauvegardée sur votre mac ou PC, ne fermez surtout pas Picmonkey ni votre fenêtre en cours.

Là vous vous direz sans doute : OK, j’ai une icône ! Et franchement, la première fois, c’est un peu long et chiant cette gymnastique Picmonkey ! Même si l’icône obtenue est chouette ! 

Je vous avoue que la première fois, j’ai trouvé ça bien pour créer une icône. Mais répéter toute l’opération autant de fois que je souhaitais d’icônes, ça m’a un peu fatiguée à l’avance :p

C’est la qu’il ne faut justement par fermer Picmonkey une fois sa première icône sauvegardée ^^ Quand vous aurez sauvegardé votre icône, revenez sur la page de travail en cliquant tout en haut à droite sur la croix. Vous retomberez sur vos pieds en vous retrouvant avec votre icône comme dans l’exemple qui suit :

overlay-pic

En positionnant votre curseur sur votre Icône, faîtes un clic droit, ce qui vous fera apparaître une petite fenêtre pleine de sympathiques options que perso j’adoOOOore. Là, cliquez sur celle qui s’appelle : Replace Image.

En cliquant sur cette option, une fenêtre va popper, et elle vous proposera tout simplement de remplacer votre actuelle icône par une autre. Donc si par exemple vous aviez l’icône facebook en place, remplacez la par une icône Twitter. Une fois votre nouvelle icône choisie, valider l’envoi. Et là le panard, c’est que celle-ci sera logiquement automatiquement mise en place à la même taille que la précédente et à la même couleur que la précédente sur votre espace de travail. Reste à alors à enregistrer :)

Et ainsi de suite pour toutes les icônes que vous souhaiterez obtenir pour ensuite les afficher sur votre blog. 

Voilà ! C’est tout !


Bien entendu, le tutoriel peut être adapté à divers autres éléments graphiques autre que des icônes. Sachant qu’avec Picmonkey, vous pourrez décider de mettre une simple couleur unie à la place d’une texture ou encore même de remplacer une icône de réseau social par d’autres symboles comme une icône arobase pour indiquer où vous joindre par email… :) En fait, tout est possible ou presque, avec un peu d’imagination et quelques minutes devant soi ^^ !

Je vous dis à bientôt pour d’autres tutoriels de ce type :) Avec l’option tuto court en vidéo, ou tuto texte :D !

Article Précédent Article Suivant

Pourrait également vous intéresser

5 Commentaires

  • Répondre Sophie WowMum 24 août 2016 at 09:43

    un billet hyper utile et clair !!! Merci beaucoup!!! bisouss

  • Répondre Eric Touret 29 août 2016 at 08:47

    Merci pour ce partage, c’est très sympa, parce que dès fois on a tendance à penser que c’est un travail de spécialiste. De plus, nombreux internautes souhaitent avoir leur particularité en termes de présentation des interfaces pour se démarquer.

  • Répondre Wolfneo 14 août 2017 at 17:38

    Bonjour,
    avoir des images, est-ce si bon pour le site? Ne faut-il pas mieux utilisé Font Awesome ?
    Merci

    • Répondre GG 14 août 2017 at 18:56

      Les deux sont bien. Si les images sont light en taille et qu’elle sont correctement nommées, ce n’est pas moins bien que des icônes (Font awesome ou d’autres)

    Laisser un Commentaire

    %d blogueurs aiment cette page :