Comment créer une icône étape par étape.
On trouve des icônes et des symboles absolument partout autour de nous : sur le web, dans la rue, sur le tableau de bord des véhicules, sur les emballages des produits, et plus encore.
Pour réussir une icône, il faut à la fois que le design respecte certaines règles et que la signification du pictogramme soit claire. Suivez les conseils d’experts en création d’icônes et délivrez vos messages avec créativité.
Sommaire :
- Symboles, icônes, pictogrammes : de quoi s’agit-il ?
- Histoire des symboles et icônes
- Pourquoi créer une icône ? Quelle est son utilité ?
- Comment créer une icône étape par étape
- Comment choisir les couleurs d’un symbole ou d’une icône ?
- Idées et astuces pour créer des icônes
- Création de symboles et icônes : questions fréquentes
Symboles, icônes, pictogrammes : de quoi s’agit-il ?
Des cartes géographiques aux émoticônes en passant par les panneaux de signalisation et les notes de musique : nous nous appuyons tous et depuis toujours sur les dessins de symboles pour donner un sens au monde qui nous entoure.
Les symboles, icônes ou pictogrammes sont des substituts visuels pour un mot, une idée ou un concept, entre autres. Ils s’intègrent à la communication des marques, des entreprises et des organisations. Elles s’en servent pour être reconnaissables et exprimer certaines caractéristiques ou valeurs.
Bien que ces termes soient utilisés indifféremment et qu’ils désignent tous de petites créations visuelles, il existe une nuance entre le symbole et l’icône qu’il est bon de connaître :
- Les icônes : elles ressemblent exactement à ce qu’elles représentent.
- Les symboles : ils représentent une idée, un lieu, une action, un concept, des croyances, un processus, un son, des mots, etc. Ils peuvent être variables selon les pays et cultures et le sens derrière celui-ci doit être connu pour être compris.
À titre d’exemple :
- La petite image représentant un panier sur les sites web correspond au panier d’achat. Il s’agit d’une icône.
- Un point avec des lignes incurvées au-dessus représente le réseau wifi. Il s’agit d’un symbole. Tout comme le dessin du symbole de la paix.
Et les pictogrammes dans tout ça alors ?
Définition du pictogramme.
Un pictogramme est un graphique utilisé pour communiquer un concept, une action ou encore une expression. Il doit être facilement interprété et compris.
Les silhouettes homme/femme à l’entrée des toilettes ressemblent peu à la réalité physique. Pour autant, l’utilisation systématique de ces figures de par le monde a permis de comprendre ce qu’ils signifient. Un autre exemple serait celui des pictogrammes utilisés dans la signalisation routière.
C’est ainsi que le pictogramme est à mi-chemin entre l’icône et le symbole, et qu’une icône ou un symbole peut entrer dans la catégorie des pictogrammes. Pas très clair, on vous l’accorde, et d’ailleurs, vous ne tarderez pas à remarquer la confusion qui règne autour de ces termes en lançant une rapide recherche sur le web.
Quoiqu’il en soit, quand il s’agit de communication, le contexte est essentiel. Que vous utilisiez le mot symbole, pictogramme ou icône, l’idée est la même, il s’agit d’un petit graphisme qui doit rapidement faire comprendre ce à quoi on fait référence. Afin de fluidifier votre lecture, nous utiliserons ces termes indifféremment dans le présent guide.
Histoire des symboles et icônes.
Les dessins de symboles et les icônes sont utilisés depuis le début de l’histoire et ils ont été présents à chaque étape de l’évolution de la communication. Des signes picturaux de la Grotte de Lascaux aux émoticônes d’aujourd’hui en passant par les hiéroglyphes Égyptiens, l’histoire des symboles et icônes est fascinante.
Les symboles dans la préhistoire.
Il est difficile de dater les symboles les plus anciens. Ils dateraient d’environ 20 000 ans avant J.-C. On pense notamment aux figurations pariétales que l’on retrouve sur les murs de la grotte de Lascaux, en France, mais aussi sur les murs des grottes de Pech-Merle et de Font-de-Gaume, ainsi qu’en Espagne, dans la grotte Altamira.
Les symboles chez les Égyptiens et les Mayas.
Les symboles et icônes perdurent siècles après siècles et se retrouvent également en Égypte, avec les hiéroglyphes, en Amérique du Sud, avec les glyphes Mayas, et en Mésopotamie avec l’écriture cunéiforme. Ce n’est que plus tard que chercheurs et historiens découvrent que ces symboles et icônes constituent en fait un système linguistique à part entière.
Les icônes au moyen-âge.
Au moyen-âge, c’est sur les tentures et les armures des chevaliers que l’on retrouve les symboles et icônes, alors appelées « blasons » ou « armoiries ».
Mentionnons également l’emblématique fleur de lys, un symbole utilisé par la royauté française de l’époque, mais aussi dans la décoration de nos jours.
L’utilisation des symboles sur les siècles derniers.
C’est notamment avec la construction de réseaux routiers, d’aéroports et d’événements internationaux comme les JO que les symboles et icônes tels que nous les connaissons aujourd’hui sont vraiment apparus. Un système de communication compris par tous malgré l’obstacle de la langue doit être mis en place, et ne dit-on pas qu’une image vaut mieux que mille mots ?
Symboles et icônes d’aujourd’hui.
Sur le web et nos appareils numériques, les symboles et icônes sont absolument partout. Du bouton on/off à la poubelle de votre ordinateur en passant par les émoticônes et les icônes d’applications sur votre smartphone.
Pourquoi créer une icône ? Quelle est son utilité ?
En plus d’être facilement mémorisables, les symboles permettent de rapidement faire passer un message ou de donner une indication. Ils ont l’avantage d’être facilement et rapidement compris.
L’un des autres avantages à utiliser des icônes et symboles, c’est qu’ils constituent en quelque sorte un langage universel qui peut être compris par tous, et ce, peu importe la langue parlée.
Enfin, les icônes et symboles ont l’avantage d’attirer l’attention et permettent d’ajouter du rythme et de la couleur à un contenu. Les icônes sont un excellent moyen de dynamiser le texte pour le rendre plus lisible et de guider l’utilisateur vers des actions précises.
Comment créer une icône étape par étape.
Bien que les dessins de symboles soient intuitifs et simples visuellement, il est plus difficile de concevoir de nouveaux symboles qu’il n’y paraît. Avant de vous armer de votre crayon ou tablette pour créer une icône, une phase de réflexion est en effet nécessaire.
Une fois les idées à plat, place au design en tant que tel. Que vous souhaitez dessiner une icône à la main ou de manière numérique, suivez ce guide et découvrez comment créer une icône étape par étape.
1. Étudier la signification du pictogramme.
Avant toute chose, il convient de poser clairement par écrit le message que devra faire passer votre pictogramme. Que doit-il illustrer ? Un concept, une action, une direction ?
Si vous voulez créer une icône, cette phase préparatoire ne devrait pas être trop chronophage, puisqu’il s’agit de dessiner une icône représentant un objet ou une figure réelle.
Si vous voulez créer un symbole, la tâche peut s’avérer légèrement plus compliquée, car il faudra faire passer le message métaphoriquement. Ici, un brainstorming à l’aide d’une mind-map pourra s’avérer utile.
Notez qu’à ce stade, il peut être bon de vous demander où sera utilisé l’icône (sur un site web, une carte de visite, un magazine, etc.). La future destination ainsi que son utilisation pourraient soulever des contraintes (taille, niveau de détails, etc.).
2. S’inspirer d’icônes existantes.
Si vous souhaitez créer une icône, c’est que vous avez un message que vous devez tenter de traduire au mieux via une image. Un message qui devra être compris rapidement, et ce, par tous. Il s’agit donc de faire appel à la mémoire collective. En ce sens, être trop original dans votre dessin d’icône pourrait se faire aux dépens de la clarté de votre message.
Jetez un œil à ce qui a déjà été fait en termes d’icône pour des idées et messages similaires à ceux que vous désirez faire passer. Évitez de réinventer ce qui est déjà ancré dans l’esprit humain, optez plutôt pour la simplicité pour votre icône ou symbole.
3. Choisir le bon style pour créer une icône.
Troisième étape et pas des moindres : l’heure est venue de vous poser la question du style que devra avoir votre icône.
Allez-vous dessiner l’icône à la main ou à l’aide d’outils digitaux ? L’icône sera-t-elle en couleur ou monochrome ? Une icône au design minimaliste et plat (flat design) ou plutôt détaillé et avec des zones d’ombre ?
Ici, il est possible que vous ayez une charte graphique à respecter, ce qui pourra notamment vous limiter dans le choix du style et des couleurs. Précisons aussi que le choix des couleurs devra prendre en compte la symbolique de celle-ci, point sur lequel nous nous attarderons plus bas sur cette page.
4. Place au dessin de l’icône.
Il est temps de passer à la création de l’icône ou du symbole. Ici, plusieurs choix s’offrent à vous : faire le dessin à la main ou à l’aide d’outils numériques de dessins. Vous pouvez aussi esquisser votre icône à la main et vectoriser la version dont vous êtes le plus satisfait.
Dessiner une icône à la main.
Voici le matériel dont vous aurez besoin :
- Crayon à papier
- Gomme
- Feutres, crayons de couleurs, etc.
- Compas, règle, rapporteur (facultatifs)
Afin de gérer au mieux les espacements et que les proportions de l’icône soient agréables à l’œil, pourquoi ne pas utiliser le nombre d’or et la spirale d’or ?
Dessiner une icône à l’aide d’outils numériques.
Vous devez créer une icône pour le web ? Vous devez avoir à votre disposition :
- Un ordinateur
- Un logiciel d’illustration vectorielle comme Adobe Illustrator
- Une tablette (facultative)
Ensuite, vous pouvez, au choix :
- Utiliser la fonctionnalité de Vectorisation de l’image dans Illustrator. Elle permet de transformer votre dessin d’icône fait à la main en illustration vectorielle.
- Créer l’icône web dans Adobe Illustrator directement.
Enregistrer l’icône pour une utilisation web.
- Enregistrez d’abord au format Adobe Illustrator afin de toujours disposer d’une version modifiable. Rendez-vous dans Fichier > Enregistrer et attribuez un nom unique à votre projet.
- Ensuite, allez dans Fichier > Exporter > Exporter pour les écrans. Choisissez l’emplacement, puis le format PNG 8.
- Dans le menu déroulant Lissage (accessible en cliquant sur l’icône engrenage) choisissez Illustration optimisée (suréchantillonnage).
- Cliquez sur Enregistrer les paramètres, puis sur Exporter le plan de travail.
Comment choisir les couleurs d’un symbole ou d’une icône ?
Les couleurs jouent un rôle fondamental quand il s’agit de créer un symbole ou une icône. Les couleurs véhiculent et génèrent différentes émotions et certaines sont plus parlantes pour certains domaines. Les couleurs peuvent même communiquer une action (on pense par exemple au rouge pour signaler un danger ou un stop, et le vert pour valider un choix.)
Voici qui devrait certainement vous aider à choisir la palette de couleur pour donner vie à votre icône :
- Rouge : urgence, puissance, appel à l’action, amour, passion
- Jaune : bonheur, joie, chaleur, prudence
- Bleu : confiance, paix, sérénité, loyauté, tristesse, nouvelles technologies
- Vert : environnement, nature, santé
- Orange : impulsion, confiance, convivialité, sécurité
- Violet : luxe, richesse, romance
Idées et 5 astuces pour créer des icônes.
En manque d’inspiration ? Voici quelques idées de dessins d’icônes et de symboles, le tout agrémenté par les conseils d’experts.
- Appuyez-vous sur la symbolique des formes et des couleurs pour faire passer clairement votre message.
« Un message qui constituerait habituellement cinq mots devient un symbole interprété automatiquement. Prenez un panneau stop et sa forme octogonale rouge. Vous n’avez même pas besoin de l’inscription stop pour comprendre, la forme et la couleur suffisent. »
Jacob Obermiller
« La sobriété est la clef, on doit comprendre immédiatement la signification du symbole. »
Jacob Obermiller
« Regardez les icônes de votre téléphone, elles sont minuscules. Si vous essayez d’intégrer beaucoup de détails dans une icône, cela peut vite paraître désordonné, on ne pourra pas vraiment voir ces détails complexes.”
Alyssa Newman
« Un symbole efficace s’en tiendra à l’essentiel et ne dépeint que l’essentiel. C’est plus agréable à l’œil et ça permet au lecteur de respirer un peu. »
Alyssa Newman
« Lors de la conception initiale, utilisez des formes géométriques très basiques pour votre icône. Puis, assurez-vous qu’il soit unique. »
Alyssa Newman
- Veillez à ce que votre palette de couleurs reste cohérente.
- Jouez avec les formes et voyez comment pouvez illustrer le même concept, mais de différentes manières.
« Un exercice sympa est de penser à une icône ou symbole commun, comme une icône de handicap et d’essayer de concevoir un nouveau symbole autour de ce thème. »
Jacob Obermiller
- Donnez du relief à vos icônes en y ajoutant des effets d’ombres.
- Si vous êtes chargé de créer un symbole ou un ensemble d’icônes pour une entreprise, utilisez leur charte graphique à votre avantage.
« Il est important de s’en tenir à la charte graphique de la marque pour que les icônes aient un aspect unique et soient visuellement associées à la marque. »
Alyssa Newman
Pour plus d’idées, rendez-vous sur Adobe Stock où vous pourrez vous inspirer de sets d’icônes complets autour de thématiques spécifiques.
Création de symboles et icônes : questions fréquentes.
Quelles dimensions pour une icône ?
Tout dépendra de la destination et de l’usage de l’icône. Une icône pour un site web n’aura pas forcément les mêmes dimensions qu’une icône pour une application. Quoi qu’il en soit, les tailles les plus couramment utilisées sont 16x16, 24x24, 32x32, 48x48 et 64x64.
Comment créer une icône à partir d’une image ?
Si votre image n’est pas au format numérique (dans le cas d’un dessin ou d’un croquis par exemple) scannez votre image et enregistrez le fichier au format JPG ou PNG. Importez ensuite cette image dans un logiciel à même de vectoriser une image, une illustration, une photo ou un croquis, en illustration vectorielle, comme Adobe Illustrator. Vous pourrez essayer différents tracés et couleurs avant de vectoriser l’image pour en faire une icône.
Comment créer une icône d’application ?
Commencez par jeter un œil aux applications concurrentes pour voir ce qui existe déjà. Renseignez-vous sur les contraintes de taille et de format pour les différentes plateformes (Android et iOS). Procédez ensuite comme expliqué dans ce guide, sans oublier de prendre en compte l’éventuelle charte graphique.
Contributeurs.
- Alyssa Newman, aussi connue sous le nom d’Ella, est designer et Brand Stratégiste et passionnée d‘UX design. Jetez un œil à son compte Instagram.
- Jacob Obermiller est un graphiste trouvant son inspiration dans la typographie et la nature. Découvrez ses créations sur son compte Instagram.
Ces contenus pourraient également vous intéresser…
La prise de vue photographique pour les débutants
Apprenez à maîtriser le plan général pour réveiller vos couvertures de podcast, imaginer des arrière-plans vidéo de qualité, ou simplement pour donner un peu de contexte à vos pages web ou à vos albums photo.
Qu’est-ce qu’un fichier vectoriel ?
Découvrez la polyvalence de ce format de fichier et comment l’utiliser dans un travail créatif.
Explorez la subtilité et la puissance du dessin à l'encre grâce à ces conseils et techniques.
Pour la plupart des artistes, le croquis au crayon est une première étape essentielle. Découvrez comment cette compétence peut améliorer votre démarche artistique.
Téléchargez Adobe Illustrator.
Réalisez de superbes dessins vectoriels et illustrations.
Gratuit 7 jours, puis 23,99 € par mois.
Adoptez Illustrator.
Adobe Illustrator
23,99 €/mois
Accédez à Illustrator sur ordinateur et iPad dans le cadre d’un abonnement à Creative Cloud. En savoir plus
Tout Creative Cloud
62,47 €/mois
Bénéficiez de plus de 20 applications de création, dont Illustrator.
Voir ce qui est inclus dans l’abonnement | En savoir plus
Étudiants et enseignants
19,50 €/mois
Profitez de -65 % sur plus de 20 applications Creative Cloud, dont Illustrator. En savoir plus
Entreprises
31,49 €/mois par licence HT
Bénéficiez d’Illustrator et de toutes les applications Creative Cloud, ainsi que de fonctionnalités exclusives. En savoir plus