Créez une police d'icône à l'aide de l'illustrator et IComoon

Créer des polices d'icônes personnalisées: créez un système d'icône exclusif à l'aide d'Iltative et IComoon

Points de base:

• Le système d'icônes personnalisés est un élément de conception important dans les projets Web. Des outils tels que Illustrator et IComoon peuvent simplifier ce processus.
• Créez une police d'icône, concevez d'abord l'icône dans Illustrator et enregistrez-la en tant que fichier SVG. Avant de commencer à dessiner, assurez-vous de définir les propriétés de style du glyphe, telles que la taille de la course et l'échelle de maillage.
• Une fois l'icône conçue et enregistrée en tant que fichier SVG, il peut être téléchargé sur iComoon pour générer des polices d'icône. L'application IComoon permet d'importer des fichiers SVG, de les organiser et de les éditer, puis de compiler en polices.
• L'application iComoon fournit des fichiers CSS de police d'icône contenant les correctifs de compatibilité du navigateur nécessaire. Ce fichier contient des règles @font-face et de tous les sélecteurs de symboles qui peuvent être inclus dans le site Web HTML, ajoutant ainsi des polices d'icône personnalisées aux éléments de page Web.

image de: écouterorason

Les systèmes d'icônes sont généralement l'élément de conception de base dans les projets Web. Il existe de nombreux ensembles d'icônes gratuits ou commerciaux en ligne, qui sont généralement inclus dans le cadre CSS principal (Bootstrap 3 Glyphicons en est un excellent exemple).

Cependant, parfois vous pouvez avoir besoin d'un glyphe plus spécifique non inclus dans l'ensemble général. Ou vous voudrez peut-être simplement mieux coordonner la conception de l'icône avec d'autres éléments de conception de votre projet. Dans ces cas, vous devez dessiner un nouvel ensemble d'icônes à partir de zéro.

Deux façons courantes d'ajouter des ensembles d'icônes à votre projet:

Fonts Web
svg

Cet article introduira les polices Web. SVG sera couvert dans un autre article.

Traditionnellement, la création de polices a été une tâche difficile et exigeante, mais heureusement, il est devenu beaucoup plus facile de créer des ensembles de polices d'icônes grâce à l'avènement d'outils en ligne simples tels que iComoon, Fontastic ou Fontello. Chaque outil vous permet de créer des polices en «sélectionnant» des icônes pré-construites de la bibliothèque publique ou en téléchargeant et en compilant vos propres fichiers SVG préparés.

Créez votre propre icône

Pour créer vos propres polices d'icônes, la première étape consiste à concevoir les icônes - nous utiliserons Illustrator pour cette tâche - puis les enregistrer au format SVG.

Confirmer le style de conception

Avant de commencer à dessiner, vous devez définir les propriétés de style du glyphe, telles que la taille de la course, l'échelle de la grille, etc.

Tout d'abord, effectuez quelques tests de lisibilité à différentes tailles et créez un modèle pour dessiner tous les glyphes. Les icônes magnifiquement détaillées que le design ne fonctionnent pas à des résolutions plus basses sont inutiles.

Il est également utile de dessiner des croquis de police avant le dessin, et même un croquis très rugueux (illustré ci-dessous) peut vous aider à trouver des idées pour tous les symboles dont vous avez besoin.

Vous pouvez ensuite déterminer la taille du maillage du glyphe. Mon conseil n'est pas de dessiner directement à la taille cible (par exemple 16x16px) ou de très grandes tailles. Au lieu de cela, j'ai trouvé qu'une grille de 60-80px est généralement bonne pour moi. La mise à l'échelle de cette taille est généralement réussie.

Bien sûr, ce n'est pas une règle "autonome": les exigences du projet et l'expérience peuvent varier d'une situation à l'autre.

Dans cet article, j'ai choisi d'utiliser des traits de 8px pour dessiner l'icône, pas de remplir et de le régler dans une grille 64x64px.

Commencez à dessiner

Illustrator Artboards fonctionne très utile: vous pouvez dessiner chaque glyphe dans différents planches artistiques et enregistrer chaque glyphe dans un seul fichier. L'art peut être réorganisé, renommé et exporté en tant que fichier SVG autonome (c'est exactement ce dont nous avons besoin pour IComoon).

Chaque tableau artistique peut également avoir des coordonnées indépendantes de l'axe, ce qui est très précieux pour l'alignement des objets, que nous verrons plus tard.

Maintenant, nous pouvons commencer à créer un nouveau document illustrator 64x64px:

Notez que vous pouvez commencer à créer tous les planches artistiques que vous souhaitez avec l'option "Nombre de tableaux artistiques": je préfère ajouter des planches artistiques selon les besoins, mais il n'y a aucune raison pour que vous ne puissiez pas créer tous les planches artistiques.

Maintenant, nous pouvons configurer la grille. Nous voulons qu'il commence avec chaque origine artistique (coin supérieur gauche) et divisez le tableau artistique en grilles à damier 8x8. Avant cela, examinons rapidement le fonctionnement du système de coordonnées illustrateur.

Illustrator Workspace

Illustrator Workspace se compose d'une toile contenant un ou plusieurs planches artistiques.

L'art est placé sur la toile, en commençant par un point appelé l'origine de la règle mondiale. De plus, chaque artboard a également sa propre ORIGINATION ET RUMER ORIGINAL .

Lorsque vous utilisez l'outil Artboard pour localiser un nouveau Artboard, vous utiliserez toujours une règle mondiale. Dans presque tous les autres cas, vous utiliserez la règle Artboard selon la vue → Règle → Changer les options de règle Artboard (ou globale).

Si vous utilisez une règle globale, chaque objet dessiné sur n'importe quel tableau artistique est dessiné par rapport à cette origine unique (c'est-à-dire

Origine de la règle globale ). Sinon, les coordonnées se réfèrent à l'origine du tableau art contenant.

En bref, utilisez le système de règle Artboard:

L'art est placé dans la toile en fonction de l'origine de la règle mondiale
Les objets que nous dessinons sont placés dans le tableau artistique selon l'origine
• artboard origin (dans l'image ci-dessous, vous pouvez voir que deux carrés ont les mêmes valeurs de coordonnées, même si elles sont placées dans deux différentes Artboards).

Pour ce travail, nous utiliserons la règle Artboard car elle convient plus à l'alignement des glyphes.

Définissez la grille

La grille de l'illustrator est placée sur l'espace de travail à partir de l'origine de la règle mondiale. Vous pouvez sélectionner les préférences → Guides et grilles pour définir ses propriétés. Étant donné que nous voulons diviser notre toile 64x64px en 8 parties, une de chaque côté, nous définirons une ligne de grille principale tous les 16 pixes (cela entraînera notre art-borde divisé en 4x4 parties) et effectuerait deux subdivisions:

Maintenant, nous devons nous assurer que notre grille correspond exactement à notre artboard. Par défaut, le premier art est placé sur l'origine du souverain global, cependant, car le tableau artistique peut être déplacé et réinitialisé: pour ce faire, double-cliquez sur l'origine de la règle à l'aide de l'outil Artboard.

Notre grille devrait désormais être parfaitement alignée avec notre artboard:

Premier glyphe

Commençons par notre premier glyphe, un simple Vérifier la marque à l'intérieur du cercle:

Pour dessiner un cercle, nous devons sélectionner l'outil d'ellipse, cliquez sur un point dans l'art et entrez la largeur et la hauteur de l'ellipse:

Ensuite, nous devons retirer tout remplissage et régler les traits noirs de taille 8px. À ce stade, nous pouvons aligner le cercle avec l'artboard (assurez-vous que l'option "Aligner sur Artboard" est sélectionnée):

Mais le résultat n'est pas ce à quoi nous nous attendions: Illustrator aligne le chemin sans calculer la largeur de course. Heureusement, cela peut être facilement résolu en définissant l'option Utiliser les limites de prévisualisation dans le panneau Préférences. Illustrator calcule désormais la largeur de course à l'intérieur du tableau artistique indépendamment de l'alignement et de la taille, ce qui rend le dessin plus rapide et plus précis.

Dessin de glyphe complet

Maintenant, nous devons dessiner chaque glyphe, en ajoutant un nouveau tableau artistique à la fois. Vous pouvez utiliser les outils et options Artboard / Alt pour faire glisser un artboard existant ou cliquer sur la nouvelle icône Artboard dans le panneau Artboard pour ajouter un artboard.

Vous pouvez ensuite réorganiser facilement les cartes artistiques en sélectionnant l'objet → Artboard → réorganiser (ou la commande Artboard réorganisée dans le menu du panneau Artboard) et dans l'ordre dans le panneau Artboard.

Notez que les glyphes sont toujours téléchargés alphabétiques, donc si vous voulez que l'ordre Artboard dans Illustrator correspond aux glyphes dans les polices, gardez cela à l'esprit.

Nom de chaque artboard (sans espaces): cela deviendra le nom du glyphe et le nom de classe du CSS généré, il est donc très important d'utiliser des mots significatifs.

Bien que nous utilisons souvent des traits pour dessiner des symboles, il existe des besoins spéciaux pour la création de polices. Nous devons nous rappeler:

• Chaque trait doit être converti pour remplir
• Le remplissage doit être combiné pour créer des chemins composites (si nécessaire) (pas de formes qui se chevauchent)
• Toute couleur sera ignorée: le glyphe sera toujours interprété comme noir. Vous ne pouvez pas utiliser White comme arrière-plan: vous ne pouvez utiliser que des antécédents transparents
• Toutes les images embarquées dans SVG seront ignorées

Vous pouvez utiliser la commande Extende pour convertir des chemins pour remplir les formes et utiliser le panneau de recherche de chemin pour combiner rapidement les formes de chevauchement en éléments uniques.

Lorsque le glyphe est prêt, nous pouvons enregistrer chaque glyphe en tant que fichier SVG séparé dans la boîte de dialogue Enregistrer en utilisant l'option Utiliser Artboard.

Illustrator enregistre les fichiers SVG en préfixant le nom du document .ai (icons_). Étant donné que IComoon utilise les noms de fichiers comme glyphes, je préfère supprimer ce préfixe (il existe de nombreuses petites applications qui peuvent facilement renommer tous les fichiers) pour réduire toute confusion.

Téléchargez le fichier sur iComoon

Le site Web IComoon fournit une application en ligne pour créer des polices d'icônes. L'application commence par des éléments sans nom et offre un accès à une bibliothèque d'icônes gratuite à partir de laquelle vous pouvez sélectionner des symboles.

Puisque nous téléchargerons nos propres glyphes, nous pouvons supprimer toutes les bibliothèques préchargées en utilisant le petit menu à droite de chaque bibliothèque (notez que ce n'est pas obligatoire, car seuls les symboles sélectionnés seront ajoutés à votre police du milieu). Cela permet de garder votre projet simple.

Vous pouvez ensuite cliquer sur l'icône Gérer le projet à droite de la barre de menu d'application pour enregistrer votre projet. Notez qu'avec le compte gratuit IComoon, votre projet sera stocké dans votre navigateur, donc avant de télécharger des données de projet (fichiers JSON) ou de passer à un compte premium (vous permettant de stocker des projets dans le cloud), vous ne pouvez pas être accessible ailleurs .

Vous pouvez désormais télécharger votre fichier SVG à l'aide du bouton Import ICON: Votre glyphe apparaîtra dans l'application en tant que collection. Chaque glyphe peut être facilement réorganisé, supprimé ou modifié à l'aide des outils fournis par l'application à ce stade. Vous pouvez également modifier les métadonnées de la collection (le nom de la collection et certaines informations sur l'auteur) ou effectuer d'autres tâches à l'aide du petit menu sur le côté droit de la collection.

Les icônes

peuvent être modifiées dans l'application à l'aide de l'outil d'édition. Vous ne pouvez pas modifier les données vectorielles de cette façon, mais vous pouvez redimensionner ou déplacer le glyphe, télécharger le fichier SVG ou les remplacer.

Pour créer une police, vous devez d'abord utiliser l'outil de sélection pour sélectionner toutes les icônes requises (le cas échéant, vous pouvez également utiliser la commande "Sélectionner ALL / NON SELECT ALL" dans la collection Menu ). Vous pouvez identifier des glyphes sélectionnés à travers leurs bordures jaunes. Vous devez ensuite cliquer sur le bouton de police en bas de la page.

L'application chargera une fenêtre d'assistance avec tous les symboles sélectionnés, montrant chaque symbole le glyphe, le nom et les points Unicode qui lui sont attribués par iComoon dans la gamme PUA. L'utilisation de plages PUA est considérée comme la zone Unicode la plus sûre pour héberger des icônes dans les plages PUA, bien que Icomoon vous permette d'utiliser la plage latine de base standard en cliquant sur le bouton "Code" en haut si vous préférez.

Vous pouvez également attribuer un code de plage différent à chaque caractère en insérant manuellement un nouveau code ou caractère:

Avant de télécharger la police, ajoutez le nom de la police (cela sera utilisé pour la règle @font-face), ainsi que le préfixe et / ou le suffixe de classe (cela sera utilisé comme sélecteur dans le CSS généré).

Vous pouvez définir de nombreux autres paramètres: des informations de métadonnées aux valeurs métriques, je recommande de lire attentivement la documentation courte et bien expliquée pour définir correctement tous les paramètres.

Votre ensemble d'icônes est terminé! Téléchargez votre police (ou, si vous avez un compte premium, lien vers CSS) et ajoutez-le à votre projet.

Le fichier .zip téléchargé contient des polices dans divers formats, des fichiers de démonstration que vous pouvez utiliser comme référence, des fichiers .json qui peuvent être téléchargés pour récupérer le projet (par exemple, afficher sur un autre ordinateur) et de Bien sûr, il y a aussi l'icône de codage de fichiers .css.

CSS (vous pouvez voir un exemple ci-dessous) contient des règles @font-face et de tous les sélecteurs de symboles.

<code class="language-css">@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-88cxph');
    src:url('fonts/icomoon.eot?#iefix-88cxph') format('embedded-opentype'),
        url('fonts/icomoon.woff?-88cxph') format('woff'),
        url('fonts/icomoon.ttf?-88cxph') format('truetype'),
        url('fonts/icomoon.svg?-88cxph#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="myicon-"], [class*=" myicon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.myicon-alert:before {
    content: "\e600";
}
.myicon-arrow-down:before {
    content: "";
}

/* etc */</code>

pour essayer!

J'ai trouvé que c'était un moyen très rapide de construire des polices d'icônes, mais il faut certainement du temps pour trouver le flux de travail parfait et tester toutes les options que l'illustratrice et IComoon peuvent offrir.

Je vous souhaite un bon moment!

(Ce qui suit est la partie FAQ, qui a été réécrite et intégrée en fonction du texte d'origine et a été ajustée au format)

FAQ (FAQ) sur la création de polices d'icônes avec illustrator et iComoon

Q: Quels sont les avantages de la création de polices d'icônes avec IComoon?

A: IComoon est un outil puissant qui vous permet de créer et de gérer votre propre ensemble d'icônes. Il offre une grande variété d'icônes au choix, et vous pouvez également importer votre propre SVG pour créer des polices d'icônes personnalisées. L'avantage de l'utilisation d'Icomoon est qu'il simplifie le processus de création de polices d'icônes, qui peuvent être facilement utilisées par même des débutants. Il vous permet également de contrôler la taille de l'icône, la couleur et d'autres propriétés CSS, offrant une plus grande flexibilité dans la conception.

Q: Comment importer mon propre SVG dans iComoon?

A: Pour importer votre propre SVG dans IComoon, assurez-vous d'abord que votre SVG est optimisé correctement. Ensuite, accédez à l'application IComoon et cliquez sur le bouton "Importer l'icône". Là, vous pouvez sélectionner et télécharger votre fichier SVG. Une fois téléchargé, votre icône apparaîtra dans la section "Vos icônes personnalisées", prête à être ajoutée à votre ensemble d'icônes.

Q: Puis-je créer des SVG pour iComoon en utilisant Adobe Illustrator?

A: Oui, vous pouvez créer des SVG pour iComoon à l'aide d'Adobe Illustrator. Illustrator est un puissant éditeur graphique vectoriel qui vous permet de créer et de modifier des fichiers SVG. Après avoir créé une icône dans Illustrator, vous pouvez l'exporter en tant que fichier SVG, puis l'importer dans iComoon pour créer une police d'icône.

Q: Comment contrôler la taille et la couleur d'une icône dans IComoon?

A: Dans iComoon, vous pouvez utiliser CSS pour contrôler la taille et la couleur de l'icône. Lors de la génération de polices d'icônes, IComoon fournit un fichier CSS contenant les classes pour chaque icône. Vous pouvez modifier ce fichier CSS pour modifier la taille, la couleur et d'autres propriétés de l'icône.

Q: Quelles sont les meilleures pratiques pour créer des polices d'icônes à IComoon?

A: Lors de la création de polices d'icônes à IComoon, assurez-vous de garder à l'esprit certaines meilleures pratiques. Tout d'abord, assurez-vous que le SVG est optimisé correctement avant de l'importer dans IComoon. Deuxièmement, essayez de rendre l'icône aussi petite que possible pour réduire le temps de chargement du site Web. Enfin, n'oubliez pas de tester vos polices d'icône dans différents navigateurs pour vous assurer qu'ils apparaissent correctement.

Q: Puis-je créer des polices d'icônes pour les projets commerciaux à l'aide de IComoon?

A: Oui, vous pouvez utiliser IComoon pour créer des polices d'icônes pour les projets commerciaux. Cependant, vous devez savoir que certaines des icônes fournies par IComoon sont soumises à des restrictions de licence. Vérifiez toujours la licence de l'icône avant de l'utiliser dans un projet commercial.

Q: Comment ajouter ma police d'icône à mon site Web?

A: Après avoir créé une police d'icône à IComoon, vous pouvez l'ajouter à votre site Web en incluant le fichier CSS fourni par IComoon dans le HTML du site Web. Vous pouvez ensuite ajouter l'icône à votre site Web à l'aide de la classe définie dans le fichier CSS.

Q: Après avoir créé l'icône définie dans iComoon, puis-je le modifier?

A: Oui, après avoir créé l'icône définie dans iComoon, vous pouvez la modifier. Pour ce faire, accédez à la section Gérer les projets dans l'application iComoon. Là, vous pouvez sélectionner votre projet et apporter les modifications nécessaires à l'ensemble d'icônes.

Q: Comment vous assurez-vous que mes polices d'icônes sont affichées correctement dans tous les navigateurs?

A: Pour vous assurer que vos polices d'icônes sont affichées correctement dans tous les navigateurs, assurez-vous de les tester dans différents navigateurs pendant le développement. De plus, IComoon fournira un fichier CSS de police d'icône avec les correctifs de compatibilité du navigateur nécessaire.

Q: Que dois-je faire si je rencontre des problèmes de création de polices d'icônes dans iComoon?

A: Si vous avez des problèmes de création de polices d'icônes dans IComoon, vous pouvez vous référer à la documentation IComoon ou contacter l'équipe d'assistance IComoon pour obtenir de l'aide. De plus, il existe de nombreuses communautés et forums en ligne où vous pouvez demander de l'aide et des conseils.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!