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 de votre site, ou quoi que vous fassiez 😀
Salutations et j'espère que vous l'avez trouvé intéressant.
Je n'ai pas compris comment l'utiliser pueden Pouvez-vous faire uniquement les options d'icônes qu'il donne?
C'est très bien, j'écris le lien.
J'utilise habituellement l'application IcoMoon (https://icomoon.io/app/#/select) qui est également assez intéressant et très complet; même si je ne sais pas si c'est exactement la même chose que ce à quoi le message fait référence.
Salutations.
J'ai aimé l'idée de personnaliser les icônes, j'ai aimé les liens (le vôtre et l'utilisateur Percaff_TI99). Je vais les sauvegarder dans mes favoris 😀
Propositions intéressantes, même si je préfère déjà utiliser Inkscape en raison de la facilité de création d'icônes plates (en fait, c'est plus pratique qu'un autre éditeur vectoriel que j'ai utilisé, même si je ne me suis pas encore habitué à créer des graphiques vectoriels plus avancés avec cette application).
Très pratique et facile à utiliser. Vous pouvez également couvrir ces besoins en utilisant Font Awesome: http://fortawesome.github.io/Font-Awesome/
Merci d'avoir partagé! que 🙂
Allez aussi intéressant que cela servira à de nombreux projets. Je me demandais à quoi ressemble une application Web, peut-elle être portée pour Firefox OS? Créer une application Web, un raccourci direct ou similaire pour l'utiliser? Désolé, je ne sais pas pourquoi je demande.
Maintenant que nous sommes à Noël, de nombreux parents donneront à leurs enfants un téléphone intelligent pour les rois. Quelle est l'une des premières choses que vous ferez avec ces appareils? Sans aucun doute, l'un d'entre eux, sinon le premier, sera de télécharger Snapchat et un autre sera la description de WhatsApp. Comme il s'agit d'applications gratuites, la plupart des adolescents les ont sur leur téléphone.
Je pense que l'une des causes du succès des applications de type snapchat est en premier lieu qu'elles sont gratuites, par contre la mode a été créée pour envoyer des images de presque tout ce qui se fait tout au long de la journée et enfin car il s'agit d'une application très simple d'utilisation
Excellent! Ce site Web m'a beaucoup aidé dans le processus de création du logo de mon nouveau site sur Snapchat, coïncidant avec l'utilisateur qui a fait la requête. Je vous envoie un câlin du Paraguay, le site est très bon 😉 Salutations.