Comment imager son site et ses documents avec des icônes disponibles en ligne ?

Comment imager son site et ses documents avec des icônes disponibles en ligne ?

Les icônes, originellement utiliser dans les applications pour imager et réduire le texte à afficher (voire aussi parfois pour éviter de traduire dans une autre langue :-), sont devenues tellement sympas et qualitatives, que nous avons pris l’habitude de les exploiter comme illustrations, aussi bien sur les sites internet, que dans nos présentations (Google Slides, Dropbox Paper et autres…)
Nous allons donc voir comment faire pour imager un site et un document, à l’instar de ce que nous avons fait sur pay.neediz.com

Comprendre notre approche

Ce qu’il faut comprendre (et accepter) c’est que nous évoluons dans l’univers Google - Android, et que par conséquent nos choix d’icônes y sont liés. 
Tout ce tutoriel s’appuie donc sur les icônes proposées par Google Material Design. Vous pouvez néanmoins reproduire ce qui suit avec tout site d’icônes qui permet l’astuce suivante.

Comprendre l’astuce

L’idée de base est que la sélection de l’icône, sa caractérisation complète (taille, couleur, fond, opacité), sa génération au format imageet sa récupération sous forme de fichier icône unique, doivent se faire entièrement en ligne, en un minimum de clics, et surtout sans nécessité l’usage à posteriori, d’un éditeur tiers pour retoucher l’image obtenue. 
Ainsi il est possible d’utiliser une autre astuce : le fait que Google Chrome présente les fichiers téléchargés en bas de page, ce qui permet de les générer dans un onglet, et de les utiliser dans un autre :-)

Pourquoi ne pas utiliser le site de Google ?

Google propose via son site dédié à Material Design, une bibliothèque, toujours grandissante, des icônes produites par ses designers : material.io/icons 
Nous vous recommandons de ne pas l’utiliser car elle fait perdre du temps au quotidien :

  • tout d’abord, les icones sont soit en noir, soit en blanc ; pas d’autres couleurs possibles sans travail supplémentaire (on se croirait revenu à l’époque de la Ford T)
  • ensuite les tailles sont limitées à 4 formats : 18, 24, 36 et 48dp
  • enfin, le téléchargement produit un zip qu’il faut décompresser avant de pouvoir utiliser l’image
Google Material Icons

Or pour rappel, notre besoin est d’avoir :

  • une icône colorée selon nos goûts
  • à la taille qui convient à notre usage détourné
  • produite au sein d’un unique fichier image
  • et cela en 1 clic si possible

Obtenir une liste d’icônes facilement exploitable

Nous utilisons le génial site Material Design Icon qui propose plus de 4000 icônes dans l’esprit du Material Design. Vous y trouverez les icônes désignées par Google, plus l’inspiration de grands designers de la communauté.

Material Design Icons Community
  • CTRL+L pour activer la barre de navigation de Google Chrome
  • saisir l’url materialdesignicons.com
  • cliquer dans la zone Search pour activer la recherche
  • saisir les premiers caractères du mot correspondant à votre recherche : par exemple acc pour account 
    En effet, la recherche sur ce site se fait via des termes anglophones.
  • les résultats s’affichent automatiquement en dessous, au fur et à mesure de votre saisie.
Recherche icons

Pour rappel, les icônes entourées d’un cadre orange ne proviennent pas des designers Google, mais de la communauté.

Il est aussi possible d’utiliser la liste de tags prédéfinis située à droite de la barre de recherche, afin de trouver l’icône de vos rêves.

Liste des tags prédéfinis

Petit bémol : le site est génial mais le système de recherche/filtre est un peu capricieux :

  • le nombre de mots clé est limité
  • les filtres ont tendance à s’ajouter, sans vouloir s’effacer

Obtenir rapidement une icone colorée à la taille

  • à partir de la liste d’icônes issue de la recherche, il suffit de cliquer sur l’icône de votre choix : une fenêtre de détail apparaît
Vue basique de l'export
  • cliquer sur le bouton Advanced Export afin de tirer partie de toutes les fonctionnalités dont nous avons besoin
Vue avancée de l'export

Vous pouvez alors paramétrer :

  • la taille de votre illustration
  • la forme de votre vignette si vous comptez ajouter un fond non transparent
  • la couleur de votre icône, et potentiellement celui de votre fond
  • la transparence ce votre icône, et du fond
  • et enfin, le nom de votre fichier de sortie
  • une fois l’icône définie comme vous le voulez, cliquer sur le bouton Icon ; le fichier image sera alors téléchargé automatiquement au format png.
Icône de bug

Ce qui est intéressant de noter, c’est que le site s’excuse de ne proposer que le téléchargement unitaire, alors que c’est exactement ce qu’il nous faut pour être efficace dans notre cas, puisque l’icône ainsi générée et automatiquement téléchargée, est directement utilisable :-)

Imager un document dans Google

Afin de mettre à l’honneur un outil de la suite Google très pratique mais méconnu, Google Drawing, nous allons nous mettre en situation d’imager un petit processus :

  • sous Google Drive, cliquer sur le bouton NOUVEAU
  • Plus > Google Drawings
  • l’application s’ouvre sur une nouvelle zone de dessin
  • aller sur le site Material Design Icon
  • faire la recherche de l’icône comme vu précédemment
  • la sélectionner
  • ouvrir les fonctionnalités avancées via le bouton Advanced Export
  • finaliser la génération de l’icône jusqu’à son téléchargement
  • sélectionner l’onglet Google Draw
  • glisser-déposer sur la zone de dessin l’image ainsi téléchargée, que Google Chrome nous a gentiment mis en bas de page
Imager des documents Google DrawingLa même astuce peut être utilisée dans le contenu d’un e-mail sous Gmail, un document ou une présentation Google, ou encore un Paper Dropbox.

Quelques sites d’icônes rapidement utilisables

N’hésitez pas à nous faire part des sites Icônes que vous utilisez et des usages concrets de ces illustrations.

Aucun commentaire

Ecrire un commentaire

Les commentaires sont modérés