Comment Faire des Icônes

Toujours voulu savoir ce qu’il faut pour créer votre propre icône, mais n’a jamais su exactement par où commencer? Eh bien, avec cet article, cela va changer. Vous apprendrez ce qu’est une icône et obtiendrez des réponses aux questions et problèmes les plus courants. En cours de route, vous découvrirez que le processus n’est pas aussi difficile que vous pourriez l’avoir pensé.

Oh, et avant que j’oublie, si vous voulez étendre votre bibliothèque d’icônes, vous pouvez toujours vous diriger vers Envato Elements où vous trouverez une grande collection de packs d’icônes vectorielles qui attendent d’être ramassés.

1., WhatAre Icônes?

S’il y a une chose vraiment importante que l’école a réussi à m’enseigner, c’est que chaque fois que vous trouvez vous-même aborder un nouveau concept, vous devriez toujours mettre dans le temps et soigneusement mener la recherche, de sorte que vous pouvez avoir une compréhension complète de ce qu’il représente ultimement.

alors, étant la nature de l’habitude que je suis, je vais vous inculquer cette même méthode de résolution des problèmes, en commençant par la question la plus fondamentale: « Qu’est-ce qu’une icône?, »

Eh bien, selon toGoogle, le mot provient du Grec eikón (image) et est communément défini aujourd’hui comme:

”peinture de dévotion du Christ ou d’une autre figure Sainte,généralement exécutée sur bois et utilisée dans les Byzantins et autreséglises orientales ».

bien que ce ne soit pas exactement le type d’icône que nous, les créatifs, avons tendance à penser, cela peut être la première chose que certaines personnes visualisent lorsque vous leur dites que vous gagnez votre vie en faisant de la”conception d’icônes ».,

ne vous méprenez pas, je n’ai rien contre l’art de peindre des icônes, qui est en soi un artisanat magnifique mais difficile, mais nous parlons ici d’une toute autre utilisation des mains et de l’imagination.

d’un point de vue numérique plus moderne, une « icône” est définie comme:

« un symbole ou une représentation graphique sur un écran d’un programme, d’une option ou d’une fenêtre”.

que vous utilisiez un Mac ou un PC, un iPhone ou un appareil Android,chacun d’entre eux a une interface utilisateur basée sur des icônes de differentshapes, couleurs et tailles.

2., WhyDo Nous Utilisons Des Icônes?

historiquement, le premier ensemble d’icônes informatiques a été conceptualisé il y a près de 37 ans (plus précisément en 1981), lorsqu’un informaticien du nom de David Canfield Smith s’est associé au designerNorman Lloyd Cox tout en travaillant sur L’interface graphique(Graphical User Interface) du XeroxStar 8010. Leur tâche était de faciliter l’interaction de l’utilisateur avec la machine,qu’ils ont surmontée de manière créative en introduisant des symboles graphiques familiers destinés àflecter des objets de la vie réelle auxquels l’utilisateur pouvait se rapporter.,

étant donné que les ordinateurs de l’époque étaient principalement utilisés dans des environnements de travail, ils ont rapidement réalisé qu’ils pouvaient trouver l’inspiration en regardant les objets les plus courants trouvés dans un bureau, donnant ainsi vie à la « métaphore du bureau”.

cela a jeté les bases de la construction du tout premier langage visuel commun pour l’ère numérique, qui a façonné non seulement la façon dont les interfaces graphiques ont l’air, mais aussi leur fonctionnement.,

facilité d’interaction

avance rapide à aujourd’hui, et bien qu’ils aient certainement vu quelques changements en termes de forme, leur fonction principale est restée à peu près identique, car ils continuent à servir le même but pour lequel ils ont été conçus à l’origine, et cela facilite notre interaction avec les différents morceaux et types

Et honnêtement, doit-on encore être surpris? Imaginez avoir à utiliser un logiciel qui aune interface graphique entièrement basée sur l’utilisation de mots clés., Je viens de le faire, et croyez-moi, ça s’est rapidement transformé en un petit cauchemar.

briseurs de la barrière de la langue

Les icônes se comportent comme des symboles visuels universels qui se libèrent de la barrière de la langue, en raison du fait qu’ils parviennent à représenter des images qui peuvent être facilement comprises parles utilisateurs qui viennent de différents côtés de la planète.

Au lieu d’avoirpour trouver des moyens de transmettre le même sens aux locuteurs de deux langues différentes, vous pouvez facilement trouver un symbole communément accepté qui fait le travail pour vous.,

bien sûr, il y aura parfois des représentations qui pourraient obliger les utilisateurs à passer par un processus de mémorisation d’un symbole afin de l’ajouter à leur jargon. Habituellement, cela se produira dans le cas de nouveaux concepts outechnologies avec lesquelles ils doivent se familiariser.

ThoughtTriggers plus rapides

comparés aux mots,les images ont la capacité de stimuler nos yeux beaucoup plus rapidement et pendant plus longtemps. Cela signifie à son tour que l’utilisateur déchiffrera non seulement themeaning derrière une icône plus rapidement, mais le temps d’engagement global attendu sera farsmaller.,

Imaginez avoir un logiciel complexe avec beaucoup d’outils et de fonctions. Maintenant, à quoi ressemblerait-il si tous les outils étaient illustrés à l’aide d’étiquettes, c’est-à-dire du texte au lieu de symboles? Alors que vous pourriez réussir à comprendre la position de certains d’entre eux, il deviendrait rapidement une surcharge visuelle qui finirait par vous faire détester ce morceau de logiciel.

croyez-le ou non, il y a une vraie raison pour laquelle nous nous sommes éloignés des interfaces de ligne de commande, et cela a principalement à voir avec l’esthétique et la facilité d’interaction.,

EyeCandy

Au-delà de l’idée de fonctionnalité, les icônes se comportent comme des déclencheurs visuels destinés non seulement à présenter une idée plus rapidement, mais aussi à le faire d’une manière agréable à l’œil.

Par exemple, J’aime penser à l’écran d’un appareil comme étant l’une de ces étagères que je passe habituellement lorsque je fais mes courses au mini-marché local. Si les produits sont enveloppés d’une manière colorée et accrocheuse, alors mon attention est immédiatement attirée sur eux, même si parfois je n’ai même pas besoin de ce produit-je suis simplement intéressé à voir ce qu’il contient.,

la même chose peut être dite à propos des icônes, car plus elles sont belles, plus l’Utilisateur sera contraint de les regarder et de s’engager dans une interaction, ce qui est parfois exactement ce que nous voulons qu’ils fassent.

3. Howto faire une icône

Ok, donc jusqu’à ce point, nous avons parlé de ce que sont les icônes et pourquoi nous les utilisons. Maintenant, il est tempspour avoir une idée de ce qu’il faut pour en faire un.

3.1. TheResearch Phase

chaque fois que vous commencez à travailler sur un nouveau projet basé sur des icônes, il y a quelques aspects clés que vous devez comprendre avant de passer par le processus réel de construction des icônes.,

j’appelle cela la « phase de recherche” puisque c’est fondamentalement tout ce que vous allez faire. Vous allez passer quelques minutes ou heures, selon le temps et la patience que vous avez, à chercher des réponses à quelques questions de base.

de combien de Variations de taille Avez-vous besoin?

la première questionque vous devriez toujours vous poser A à voir avec le nombre de variations de taille dont vous avez besoinpour créer une icône spécifique.

avez-vous besoin d’Unicon, deux, ou peut-être plus?,

Si, pour une raison quelconque, vous finissez par travailler sur un seul projet, cette partie devrait être assez facile d’y aller. D’un autre côté, si vous devez fournir plusieurs tailles, vous pourriez vous retrouver dans un cornichon, surtout si vous effectuez un travail client mais que vous n’avez pas de mémoire Claire indiquant les valeurs requises.

heureusement pour nous, la plupart de ces valeurs sont déjà devenues des « normes”de l’industrie,ce qui signifie que vous n’avez pas à perdre de temps à jouer avec des nombres pour configurer ce qui fonctionne et ce qui ne fonctionne pas.,

Si vous savez où les icônes seront utilisées, vous pouvez généralement trouver les valeurs de dimensionnement requises en effectuant une simple recherche sur Google.,j’>

96 x 96 px

128 x 128 px

256 x 256 px

Grandes Icônes:

• 512 x 512 px
• 1024 x 1024 px

astuce: si vous regardez de plus près à la ci-dessus les valeurs de la taille, vous remarquerez rapidement que la plupart d’entre eux sont en fait créés par le doublement du nombre précédent: 12 > 24 > 48 > 96; 16 > 32 > 64 > 128 > 256 > 512 > 1024.,

Dans certains cas, comme pour les applications mobiles, vous pouvez trouver des directives détaillées directement auprès des fabricants de systèmes d’exploitation qui sont destinées à vous aider:

• Apple Icon Guidelines
• Google Icon Guidelines

quelle sera votre taille de Base?

lorsque vous travaillez sur des projets de plusieurs tailles, je vous recommande fortement de toujours commencer à partir de la plus petite taille adressable possible.

cela deviendra votre taille de base, que vous utiliserez plus tard afin de créer toutes les autres tailles requises., La raison en est liée à la nature parfaite de vos formes, qui se décomposera si vous construisez de grandes et essayez ensuite d’obtenir les plus petites variations en les redimensionnant.

Quand il s’agit de choisir une valeur pour la taille de base, tout dépend des exigences du projet, mais la règle générale est que vous devez toujours aller le plus petit possible.,

par exemple, si j’ai besoin de créer trois variations (16 x 16 px, 32 x 32 px et64 x 64 px), je vais toujours m’assurer de commencer avec le 16 x 16 px comme taille de base, puis créer les autres en le doublant.

quelles sont les principales caractéristiques du sujet?

Une fois que nous avons compris le problème de dimensionnement, nous devons prendre quelques instants et décomposer le concept que nous allons illustrer. Pour moi personnellement, cette étape est amust car elle me permet d’identifier et d’isoler ses principaux traits.,

Vous pouvez facilement le faire en saisissant un morceau de papier ou en ouvrant un document texte, puis en écrivant progressivement de courtes observations (mots-clés) qui ont à voir avec sesforme, taille, couleurs, éléments/fonctionnalités de composition, etc.

alors que certains ont tendance à passer moins de temps sur cette partie de la recherche, l’ajout de cette minute supplémentaire peut s’avérer extrêmement utile, surtout si vous démarrez, car cela facilitera les choses lorsqu’il s’agit d’obtenir une « sensation”du sujet.

quel Style utilisez-vous?,

à ce stade, nous pouvons et devrions commencer à penser au « style”, ou en d’autres termes au look que nos citoyens finiront par embrasser.

à l’époque, les chosesétaient assez différents, puisque le style des premières icônes était dicté par la technologie d’affichage limitée. Cela a fini par façonner l’apparence de ces symboles visuels, mais a également jeté la base du tout premier style, qui utilisait des formes définies par des lignes dures et audacieuses pour les sections extérieures et des lignes plus fines pour les détails intérieurs.,

aujourd’hui, Cette barrière de pixels a longtemps été franchie, nous permettant de grandir et de créer de nouveaux styles, qui évoluent et changent constamment.

les styles Les plus populaires sont:

• pixel-art
• plat
• matériel
• l’art en ligne
• isométrique
• glyphe
• skeuomorphic
• dimensions
• dessinés à la main
• animation

Personnellement, quand elle vient à choisir un look pour mes futures icônes, j’ai l’habitude de partir toDribbble.,com, où j’ai tendance à passer quelques minutes à analyser le courant trends.As je fais défiler de haut en bas, je parviens rapidement à me faire une idée de ce que j’aimerais faire, puis j’essaie de m’en tenir à cela.

cela étant dit, je vous recommande fortement d’avoir une bonne idée de ce que vous visez depuis le début, car sinon vous risquez de perdre beaucoup de temps en faisant des allers-retours à travers différents styles.

Oh, et une autre chose, veuillez ne pas devenir ce concepteur qui voit quelque chose de bien et copie ensuite entièrement le travail d’une autre personne, le mettant là-bas comme étant le leur., Alors que certaines personnes recommandent cette approche afin d’apprendre et de grandir, c’est ce qu’elle devrait finalement être, un exercice où vous essayez de configurer comment certaines choses sont faites.

Si la copie est tout ce que vous finissez par faire, alors vous n’atteindrez peut-être jamais ce point où vous développerez un style personnel, ce qui distingue un bon concepteur d’icônes de therest.

Si vous voulez en savoir plus sur ce sujet, je vous recommande fortement de lire mon article 10 Styles qui ont changé le visage D’Icon Design, qui décomposera les principaux styles existants et leurs traits.,

Comment trouver l’Inspiration

selon la nature du projet que vous entreprenez, que ce soit un travail personnel ouclient, vous finirez par avoir besoin d’inspiration. Thisphase est assez empêtré avec la sélection d’un style, puisque c’est oùvous commencez à jeter les bases de vos futures icônes.

alors, comment allez-vous obtenir ce sentiment d’être inspiré?,

Eh bien, la meilleure façon de faire couler votre créativité est de créer ce qui est communément appelé un « moodboard” (ou tableau d’inspiration).

comme le suggère le nom, un mood board est une collection, ou plus exactement un collage d’idées basées sur l’image, allant des palettes de couleurs aux photos, illustrations, textures,typographie, etc. Il vous aide à obtenir une direction pour ce que vous aimeriez finalement que votre produit se sente.,

en tant que designer, vous êtes constamment en train de mettre en signet des choses qui attirent votre attention, mais il est parfois difficile de les suivre tous, surtout lorsque vous avez besoin de les voir tous à la fois.

c’est là que les outils tels que Pinterest et Instagram sont utiles, car ils vous permettent de créer des moodboards en un clic.

Une autre alternative, que je sais que beaucoup de gens ont tendance à utiliser, consiste à télécharger la sélection d’images que vous avez faite, puis à créer le mood board directement dans votre suite graphique.,

Si vous utilisez la configuration asingle-monitor, cela pourrait mieux fonctionner pour vous, mais si vous êtes sur teamdouble, vous pouvez envisager d’utiliser la première approche.

en ce qui concerne les images réelles elles-mêmes, je compte généralement sur l’une des ressources suivantes:

• Dribble.com
• Behance.com
• Iconfinder
• The Noun Project
• Pinterest
• Instagram
• Google Images

parfois, vous vous retrouverez dans cette situation où vous avez un sujet plus compliqué que vous pourriez avoir besoin d’aide pour comprendre le symbole utilisé pour cela., Whenthis arrive, je vais généralement au projet de nom ou Iconfinder et faire un simplesearch, qui fait toujours apparaître une grande sélection d’images qui m’aident à mieux comprendre le sujet.

à ce stade, vous auriez dû couvrir toutes les questions ci-dessus, ce qui signifie que nous sommes maintenant prêts à passer à la phase suivante.

3.2. La Phase de construction

Vous avez donc déterminé votre taille de base, décidé des variations de taille et même mis en place un tableau littlemood, ce qui nous amène à la deuxième phase du processus.,

Maintenant, quel que soit le logiciel que vous utilisez Adobe Illustrator, Adobe Photoshop,Affinity Designer, Croquis, etc.- cette partie suivante est à peu près la même, puisque vous pouvez appliquer les concepts à l’un des graphiques existantssuites.

la même chose peut êtredit sur les différents systèmes d’exploitation, car que vous soyez un utilisateur Mac ou Windows, vous serez en mesure d’obtenir le même résultat en suivant le même processus.

cela étant dit,Voyons ce qu’il faut pour commencer à construire votre icône.,

rendez-le Pixel parfait

à ce stade, la plupart des programmes sont déjà préconfigurés pour vous aider à créer vos icônes avec la perfection des pixels à l’esprit.

Si c’est la première fois que vous entendez parler de cette idée, alors je vous recommande fortement de prendre quelques instants et de parcourir mon article Comment créer des illustrations parfaites en pixels, ce qui devrait vous mettre à jour.,

maintenant, en supposant que vous ayez fini de lire l’article ci-dessus, la question Est de savoir si nous devrions ou non mettre le temps et nous adapter à ce flux de travail plus rigoureux.

Eh bien, personnellement, je l’utilise depuis plus de cinq ans maintenant, et je ne sais pas combien de temps il pourrait finir par manger, je crois toujours que tout cela vaut la peine., Si vous regardez comment les choses ont été faites à l’origine au début des années de ce métier, lorsque la résolution était un problème, vous remarquerez que les icônes ont été construites à l’aide de grilles de pixels, pas de formes de taille aléatoire.

configurer un fichier de projet approprié

la première étape pour créer votre propre icône, ou pack d’icônes, consiste à configurer un nouveau fichier de projet. Simple, non? Eh bien, pas vraiment, puisque si vous débutez, il y a un couple de choses dont vous devriez être conscient.,

TheProfile

tout d’abord, assurez-vous toujours que le profil de votre document est défini sur Web, car les icônes sont généralement utilisées sur le support numérique.

ceci est en fait important, car différents profils auront des systèmes de couleurs différents (Web utilise RVB, tandis que Print utilise CMJN), ce qui peut entraîner des représentations de couleurs indésirables lorsqu’elles sont vues par d’autres personnes.

les unités de mesure

ensuite, nous avons les unités de mesure utilisées pour décrire la largeur,la hauteur, le rayon d’angle, le poids de la course et l’espacement utilisés pour les différentes formes de composition.,

par défaut, les unités doivent toujours être définies sur Pixel tant que vous assurez que le document est destiné à être utilisé pour le web.

nous utilisons des pixels au lieu d’autre chose car c’est l’unité universellement convenue utilisée pour mesurer n’importe quel produit numérique.

nombre de plans de travail

Une fois que vous avez défini le profil et les unités de votre document, vous devez déterminer si vous utiliserez un plan de travail plus grand ou plusieurs plans de travail plus petits.

mon conseil est d’essayer toujours de prendre la deuxième route, car cela rendra les choses beaucoup plus faciles lorsqu’il s’agit d’exporter les icônes.,

Au-delà de cela, avoir plusieurs plans de travail signifie que vous pouvez plus facilement vous concentrer sur un actif à la fois, à mesure que vous construisez progressivement votre pack.

UseLayers

que vous créiez une seule icône ou un pack entier, vous devriez toujours essayer d’utiliser un groupe de calques afin de séparer vos ressources de vos grilles de référence.

ce faisant, vous pouvez facilement construire vos icônes sans avoir à vous soucier de déplacer ou de grouper les grilles de sous-exécution par erreur.,

Au-delà, cela vous aidera pendant le processus d’exportation,car vous voudrez pouvoir masquer vos grilles.

Usereference Grids

Par définition, une « grille de référence » est un outil visuel composé de lignes directrices géométriques destinées à vous aider à obtenir une cohérence de taille tout au long de vos icônes.

Il peut être aussi simpleque deux carrés empilés les uns sur les autres, ou vous pouvez utiliser quelque chose d’un peuplus complexe. Personnellement, je préfère aller avec le plus basique car il fait le travail mieux que prévu.,

normalement, je commence en créant la surface de référence principale en utilisant exactement les mêmes valeurs de largeur et de hauteur que mon plan de travail sous-jacent. Ensuite, j’ajoute un peu plus petit appelé l’active drawingarea, c’est là que je vais positionner toutes les formes de composition de mon actif.

Cela donnera un rembourrage de protection complet, que j’inclut toujours afin de m’assurer que les icônes ne sont pas coupées une fois livrées et utilisées plus tard par le client.,

lorsque vous travaillez sur plusieurs icônes, ma règle d’or est de décider si Je ne vais pas remplir à la fois la largeur et la hauteur de la zone de dessin active ou juste l’une d’entre elles, en fonction du style que je recherche. Une fois que j’ai compris cela, je vais prendre cette règle et l’appliquer à tous mes autres actifs,atteignant ainsi la cohérence que je vise.

4. Les choses à faire et à ne pas faire de créer des icônes

Une fois que vous avez terminé de configurer votre fichier de projet, vos calques et vos références, il ne reste plus qu’à commencer à travailler sur les icônes réelles., Maintenant, dependingon le style que vous allez pour, il y a un couple de choses que youshould être au courant de.

gardez ItSimple

lorsque nous commençons à apprendre quelque chose de nouveau, nous avons toujours ce désir de créer à un niveau supérieur, car nous avons tendance à regarder ce que les autres font et à penser: « Eh bien, cela ne peut pas être si difficile. »

bien que je ne doute pas de votre capacité à mettre en place quelque chose de complètement incroyable, je vous recommande en fait de commencer par faire des conceptions simples au début, afin que vous puissiez progressivement développer vos compétences d’une manière plus organique.,

Au—delà de cela, parfois simple est juste mieux car l’idée est de traiter un sujet—qu’il s’agisse d’un objet, d’une fonction ou d’une idée-d’une manière que tout utilisateur peut comprendre instantanément.

commencez par des formes de base

Si vous avez du mal à travailler sur un projet, la meilleure idée est de prendre du recul et de vous concentrer sur la définition des formes de base du sujet. Que vous utilisiez des rectangles, des cercles ou les deux, essayez de vous détendre et de voir comment vous pouvez construire votre icône en vous concentrant sur ses principales sections de composition.,

Une fois que vous avez posé vos fondations, vous pouvez ensuite commencer à ajuster les principaux blocs de construction et y ajouter progressivement des détails jusqu’à ce que vous atteigniez la forme souhaitée.

Focus sur les couleurs

La plupart du temps, je vois un travail incroyable de créateurs aléatoires qui mettent beaucoup d’attention dans leurs compositions, mais pour une raison quelconque, il s’agit de couleurs. Croyez-le ou non, une palette de couleurs peut faire ou casser yourbeau artwork, c’est pourquoi je crois qu’il est important que vous preniez le temps et appreniez tout ce que vous pouvez sur la théorie des couleurs.,

Si vous vous sentez flasque, ou n’avez tout simplement pas le temps de commencer à lire des livres sur ce sujet, il suffit de rechercher quelques icônes (certaines bonnes) et d’essayer d’analyser la façon dont leur créateur a utilisé les couleurs afin de les donner vie.

parfois, apprendre en regardant l’exemple d’un autre peut déclencher les muscles mémoriels beaucoup plus rapidement, en enseignant à votre esprit quelles couleurs fonctionnent et lesquelles ne fonctionnent pas.

évitez D’utiliser du texte dans vos icônes

celui-ci est une évidence, car l’idée derrière une icône est d’éliminer le besoin de lettres écrites, qui devraient être remplacées par des symboles.,

bien sûr, il y aura toujours ces quelques situations où vous avez réellement besoin d’utiliser des lettres afin de distinguer une icône d’une autre. Le meilleur exemple est lorsque vous devez mettre en place un pack d’icônes sur le thème du document, où vous devez illustrer un fichier PNG, un JPEG et un SVG. Étant donné que la forme de ce document doit rester identique, votre meilleure approche pour ce faire serait d’ajouter une petite étiquette au centre de chaque document afin de permettre à l’utilisateur de savoir qui est qui.,

Vous pouvez trouver une liste plus détaillée en lisant mes 10 Meilleurs Conseils pour créer des icônes impressionnantes, ce qui devrait apporter plus de lumière à ce sujet.

certains styles, tels que les icônes de ligne, nécessitent un peu plus d’attention lorsqu’il s’agit du processus de construction réel. Du chevauchement des chemins au positionnement des traits, j’ai couvert tous les différents coins et recoins dont vous devez être conscient lors de la création de ce type d’icônes.,

5. Problèmes courants

ensuite, nous allons passer rapidement en revue certains des problèmes les plus courants auxquels vous devrez faire face lorsque vous travaillerez sur une nouvelle icône.

ShapeRotation

c’est probablement le plus ennuyeux quand il s’agit de travailler sur une icône parfaite en pixels, car chaque fois que vous faites pivoter une forme, elle se détache instantanément de la grille de pixels sous-jacente., Lorsque cela se produit, les valeurs de largeur et de hauteur de la forme se transformeront en valeurs décimales, ce qui est généralement indiqué par le transformpanel du logiciel.

bien que vous pensiez que ce n’est pas un si gros problème, vous découvrirez bientôt que c’est réellement le cas, car si vous devez aligner la forme sur le bord d’une autre, vous ne pourrez tout simplement pas.,

en fonction de la complexité de la forme, la plupart du temps, vous pouvez résoudre le problème en sélectionnant individuellement ses ancres / nœuds, puis en les remettant en place pour l’intersection de la grille la plus proche.

personnellement, j’ai tendance à rester à l’écart des formes pivotées et à ne les utiliser que lorsque je le dois vraiment, en m’assurant de faire de mon mieux pour les ramener à la grille de pixels.

création de variations de taille

Vous avez donc réussi à créer la taille de base de votre icône, mais que diriez-vous d’ajouter plusieurs variations de taille en fonction de celle-ci?,

Eh bien, le processus lui-même est assez simple, car la plupart du temps, il vous suffit de doubler la taille de votre icône actuelle en utilisant un incrément de 200%.

par exemple, si vous avez une icône de 64 x 64 px, vous pouvez facilement créer la variation de taille suivante en doublant ses valeurs de largeur et de hauteur, donc 128 x 128 px.

Vous pouvez en savoir plus sur ce processus particulier en lisant mon article Comment mettre à l’échelle correctement les icônes dans Adobe Illustrator, qui présente des concepts pouvant être utilisés dans la plupart des suites graphiques.,

6. Comment exporter votre icône

Nous avons parcouru les principales étapes requises pour créer une icône, alors maintenant, prenons quelques instants et parlons de ce dont nous devons être conscients lors de l’exportation.

cette dernière partie du processus, bien qu’elle puisse sembler compliquée, est en fait très simple.

Choisissez le bon Format

La première chose que vous devez faire est de trouver ce format de fichier que vous allez utiliser pour enregistrer votre dessin final.,

normalement, lors de la création d’icônes, vous voudrez les exporter en utilisant un arrière-plan transparent, afin qu’elles puissent être utilisées sur une surface colorée. Cette fonctionnalité est prise en charge par les formats de fichiers raster suivants:

• GIF
• PNG
• BMP
• TIFF
• SVG

parmi tous, vous finirez généralement par utiliser PNG car il offre une compatibilité complète, en utilisant un très faible encombrement en ce qui concerne la taille. Cela signifie qu’il peut être utilisé n’importe où, que c’est un site, une application de bureau, une application mobile, un document Word, etc.,

SVG est en train de devenir un autre format populaire pour le web parce que c’est un format évolutif que vous pouvez ajuster à la volée et redimensionner sans perte de qualité.

enregistrez-les individuellement

en ce qui concerne le processus lui-même, cela varie d’un outil à l’autre. Certains sont livrés avec des outils d’exportation dédiés, tandis que d’autres reposent toujours sur des méthodes plus traditionnelles.

quel que soit le logiciel que vous utilisez, l’objectif principal est de toujours vous assurer d’enregistrer chaque icône dans son propre fichier individuel, en les nommant lorsque cela est possible.

développez vos compétences de construction D’icônes!,

maintenant que nous avons atteint la fin de l’article, je veux vous laisser avec quelques tutoriels triés sur le volet qui devraient vous aider à démarrer en un rien de temps!

• Graphisme
  10 Illustrator Outils de Chaque Concepteur Doit Être à l’Aide de
  Stefan Andrei
• Adobe Illustrator
  Couches vs, Plans de travail: Comparaison des Méthodes pour l’Exportation des Packs d’icônes
  Stefan Andrei
• Icône du Design
  Astuce: L’exportation d’Icônes à l’Aide de Tranches dans Adobe Illustrator
  Stefan Andrei
• Icône du Design
  en Comparant les Deux Méthodes pour la Création de Ligne d’Icônes: Offset Chemins vs,div>

  Stefan Andrei
• Adobe XD
  Comment Créer une Icône de Nuage dans Adobe XD
  Daniel Blanc
• Affinity Designer
  Comment Concevoir Plat Icônes dans Affinity Designer: Introduction
  Mélodie Nieves
• Affinity Designer
  Comment Concevoir Plat Icônes dans Affinity Designer: Remise de l’Insigne et de suspension des Icônes
  Mélodie Nieves
• Esquisse
  qu’Est-Ce que l’Esquisse et C’Est Pour Qui?,
  Adi Purdila
• Adobe XD
  Nouvelle Course: la Conception d’icônes Avec Adobe XD
  Andrew Blackman
• Animation
  Nouveau Cours: L’animation des Icônes Avec Adobe Illustrator et After Effects
  Andrew Blackman
• Esquisse
  Nouveau Cours: vers le Haut et en cours d’Exécution Avec l’Esquisse
  Andrew Blackman