Je vais commencer par dire quelque chose que beaucoup savent peut-être... mais ce n'est pas grave : HTML5 + CSS3 + JS... tout simplement parfait
Un utilisateur m'a écrit un e-mail me demandant un tutoriel pour lui pour créer des icônes plates, celles qui sont plates et c'est la nouvelle mode sur le Web. Spécifiquement recherché par Inkscape o boiteux un bouton de style chat ou quelque chose qui servirait (ou ferait référence) Snapchat.
Comme je suis terrible avec Inkscape et aussi, créer du contenu à partir de zéro même avec Gimp est nul ... Je me suis souvenu qu'il y a quelque temps, j'ai vu une petite application Web (un index.html avec quelques css et js) qui nous a permis de créer facilement et rapidement des icônes plates à la mode actuelle, vous savez, des designs plats.
Générateur d'icônes plates
Il a une série d'icônes prédéfinies, par exemple l'icône Ordinateur portable, les appareils mobiles (celui que je montre dans la capture d'écran), cadeau, vélo ... uff, ils sont assez nombreux, vraiment une grande variété:
Mais il ne s'agit pas simplement de mettre l'icône et maintenant ... on peut définir la taille de l'icône ou la taille de l'image en tant que telle (icône + arrière-plan) au moyen de deux barres horizontales. Évidemment, nous voyons la taille carrée en pixels… 256… 512… etc.
L'option suivante nous permet de choisir la couleur de l'arrière-plan ainsi que la couleur de l'icône. Par défaut, l'icône est blanche et l'arrière-plan est bleu, de sorte qu'il ne se heurte pas beaucoup.
Enfin, dans cette barre à gauche des options, cela nous permet de définir si les bordures de l'icône sont carrées ou si, au contraire, nous voulons que le résultat final soit circulaire.
Je vous laisse une capture d'écran de ces options:
D'autre part, dans la partie supérieure, il nous montre les informations de l'icône qui est générée et qui change en temps réel. Autrement dit, si vous jouez avec les tailles et les couleurs, vous verrez que ces informations changent toujours en temps réel:
Comme vous pouvez le voir, nous avons également un bouton Obtenir l'icône, ce qui nous montrerait l'icône déjà générée en PNG dans un autre onglet, dans lequel nous pouvons faire un clic droit + Enregistrer et c'est tout, nous aurons l'icône plate que nous générons dans le dossier souhaité sur notre ordinateur.
Télécharger Flat Icon Generator
Si vous voulez l'essayer vous-même (ce que j'imagine tant pis haha), voici le lien:
Avec cela, j'espère me conformer à ce que l'utilisateur m'a demandé par courrier électronique, bien que ce ne soit pas un tutoriel pour créer le bouton avec Gimp ou Inkscape, eh bien, j'imagine toujours qu'il servira ce que vous voulez. En fait, vous ne pouvez pas simplement générer le bouton du lien à partir de télécharger Snapchat, mais cela pourrait même générer la grande majorité des icônes ou des boutons pour votre site, ou quoi que vous fassiez
Salutations et j'espère que vous l'avez trouvé intéressant.