Share
Ce que vous allez créerC’est une journée spéciale, puisque nous célébrons dix ans d’incroyable et comment mieux le faire que de vous donner un tutoriel spécial dans lequel vous apprendrez à créer un ensemble de dix icônes d’interface utilisateur indispensables, en utilisant la plupart formes de base et outils proposés par Illustrator.
Si vous recherchez plus d'icônes, dans différents styles, rendez-vous à GraphicRiver.
Cela étant dit, buvez une gorgée de ce café fraîchement sorti du four et mettons-nous au travail..
En supposant que vous avez déjà Illustrator en marche en arrière-plan, affichez-le et configurons un Nouveau document (Fichier> Nouveau ou Contrôle-N) en utilisant les paramètres suivants:
Et de la Avancée languette:
Puisque nous allons créer les icônes en utilisant un flux de travail au pixel près, nous voudrons mettre en place une jolie petite grille pour pouvoir contrôler entièrement nos formes..
Aller au Édition> Préférences> Guides et grille sous-menu et réglez les paramètres suivants:
Conseil rapide: vous pouvez en apprendre plus sur les grilles en lisant cet article détaillé sur le fonctionnement du système de grilles d'Illustrator.
Une fois notre grille personnalisée configurée, tout ce que nous avons à faire pour nous assurer que nos formes ont une apparence nette est de permettre la Aligner sur la grille et Aligner sur Pixel option trouvée sous Vue menu qui se transformera en Aligner sur Pixel chaque fois que vous entrez Aperçu pixel mode (si vous utilisez une ancienne version du logiciel).
Maintenant, si vous êtes novice dans l'ensemble du "flux de travail pixel-perfect", je vous recommande fortement de consulter mon tutoriel Comment créer des illustrations parfaitement pixelisées, qui vous aidera à élargir vos compétences techniques en un rien de temps.
Avec le nouveau document créé, ce serait une bonne idée de structurer notre projet en quelques couches afin de séparer les grilles de référence des icônes. Si vous connaissez mes précédents tutoriels, vous remarquerez que celui-ci adopte une approche légèrement différente, car nous basons le projet sur Artboards au lieu de calques, en raison du nombre élevé d'icônes..
Cela étant dit, amenez le Couches panneau, et créer un total de deux couches, que nous renommerons comme suit:
leles grilles de référence (ou grilles de base) sont un ensemble de surfaces de référence délimitées avec précision, qui nous permettent de construire nos icônes en nous concentrant sur la taille et la cohérence.
Habituellement, la taille des grilles détermine la taille des icônes réelles et elles doivent toujours être la première décision que vous prenez lorsque vous démarrez un nouveau projet, car vous voudrez toujours commencer à partir de la plus petite taille possible et en tirer parti..
Maintenant, dans notre cas, nous allons créer le pack d'icônes en utilisant une seule taille, plus exactement 64 x 64 px, qui est sur la partie moyenne de l'échelle.
Assurez-vous que vous êtes sur le bon calque (ce serait le premier), puis saisissez le Outil Rectangle (M) et créer un 64 x 64 px Orange (# F15A24) carré que nous centrerons sur le premier Artboard et que nous utiliserons pour définir la taille globale de nos icônes.
Ajouter un plus petit 56 x 56 px un (#FFFFFF) que nous allons positionner par-dessus la forme précédente, car elle servira de zone de dessin active, nous donnant ainsi une vue d'ensemble 4 px rembourrage pour travailler avec.
Sélectionnez et regroupez les deux carrés à l’aide des touches Contrôle-G raccourci clavier, puis créez les grilles restantes en utilisant 19 copies (Contrôle-C> Contrôle-F) que nous allons positionner sur chacun des Artboards vides. Prenez votre temps et une fois que vous avez terminé, assurez-vous de verrouiller le calque actuel avant de passer à la section suivante..
En supposant que vous ayez réussi à créer les petites grilles de référence, passez à la couche suivante (ce serait la deuxième) et démarrons le projet en créant le premier groupe d'icônes, ce qui nous aidera à mieux naviguer..
Commencez à travailler sur l’icône arrière en créant son corps principal à l’aide d’un 48 x 48 px cercle que nous colorierons avec #DCEEFF et ensuite centrer sur le premier Artboard.
Donner à la forme que nous venons de créer un contour en utilisant le Accident vasculaire cérébral méthode, en en créant une copie (Control-C), que nous allons coller devant (Contrôle-F) puis ajustez d'abord sa couleur en # 629CF9 puis en retournant son Remplir avec son Accident vasculaire cérébral (Shift-X). Définir le contour résultant Poids à 8 px, en sélectionnant et en regroupant ensuite toutes les formes composant la section en cours à l'aide de la Contrôle-G raccourci clavier.
Commencez à travailler sur la petite flèche orientée vers la gauche en créant son corps principal à l'aide d'un 24 px large 8 px épais Accident vasculaire cérébral ligne (# 629CF9) avec un Casquette ronde, que nous centrerons sur le plus grand Artboard sous-jacent.
Terminez l'icône en tirant la tête de la flèche à l'aide d'un 8 px épais Accident vasculaire cérébral (# 629CF9) avec un Casquette ronde et Joindre. Prenez votre temps, et une fois que vous avez terminé, sélectionnez et regroupez les deux (Contrôle-G), faisant de même pour toutes les formes de composition de l'icône avant de passer à la suivante.
Créez l'icône de transfert à l'aide d'une copie (Control-C) de celui sur lequel nous venons de terminer, que nous allons coller (Contrôle-F) sur le deuxième tableau d’art, puis ajustez-le en le réfléchissant verticalement (clic droit> Transformer> Reflect> Vertical).
Créez l'icône de défilement vers le haut à l'aide d'une copie (Control-C) de l’icône précédente, que nous allons coller (Contrôle-F) sur l'Artboard suivant, puis ajustez-le en le tournant -90º en utilisant le Tourner outil (clic-droit > Transformer> Rotation> -90º).
Ajoutez l’icône de défilement vers le bas en utilisant une copie (Control-C) de celui que nous venons de créer, que nous allons coller (Contrôle-F) sur le quatrième tableau d’art, puis ajustez-le en le réfléchissant horizontalement (clic droit> Transformer> Refléter> Horizontal).
Commencez à travailler sur l'icône d'actualisation en créant son corps principal à l'aide d'un 36 x 36 px cercle avec un 8 px épais Accident vasculaire cérébral (# 629CF9), que nous centrerons sur le bord inférieur de la zone de dessin active.
Ouvrez le cercle en supprimant son quart en haut à gauche, en veillant à définir le chemin résultant. Casquette à Rond de l'intérieur Accident vasculaire cérébral panneau.
Créez la tête de flèche en utilisant un 18 x 24 px rectangle que nous colorierons avec #DCEEFF, puis positionner comme dans l'image de référence.
Transformez le rectangle en flèche orientée vers la gauche en ajoutant un nouveau point d’ancrage au centre de son bord gauche à l’aide de la touche Ajouter un outil de point d'ancrage (+), puis en retirant ceux de gauche en cliquant dessus à l'aide du bouton Supprimer l'outil de point d'ancrage (-).
Terminez la flèche et l’icône elle-même en donnant à la forme obtenue une 8 px contour épais (# 629CF9) avec un Joindre rond, sélection et regroupement (Contrôle-G) les deux ensemble, et faire la même chose pour toute l'icône ensuite.
En supposant que vous ayez fini de travailler sur le premier groupe d'icônes, passez au prochain Artboard et commençons à travailler sur notre prochain groupe..
Créez la section de l’objectif de l’icône de recherche à l’aide d’un 40 x 40 px cercle (#DCEEFF) avec un 8 px contour épais (# 629CF9), que nous regrouperons (Contrôle-G) puis aligner sur le coin supérieur gauche de la zone de dessin active.
Prenez quelques instants et dessinez la section de la poignée à l’aide d’un 8 px épais Accident vasculaire cérébral (# 629CF9) avec un Casquette ronde, en utilisant l'image de référence comme guide principal.
Terminez l’icône en raccourcissant la longueur de sa poignée en sélectionnant son point d’ancrage supérieur à l’aide des touches Outil de sélection directe (A) puis en le faisant glisser vers le bas en diagonale tout en maintenant la Décalage clé pour garder une ligne droite. Prenez votre temps, et une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes ses formes composant avant de passer à l'icône suivante.
Créez l’icône de zoom avant en utilisant une copie (Control-C) de celui sur lequel nous venons de terminer, que nous allons coller (Contrôle-F) sur la planche d’art suivante, en ajoutant le signe plus au centre de la section de son objectif à l’aide de deux 16 px longue 8 px épais Accident vasculaire cérébral lignes (# 629CF9) avec un Casquette ronde. Prenez votre temps, et une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes ses formes composant avant de passer à la suivante.
Ajoutez l'icône de zoom arrière à l'aide d'une copie (Control-C) de celui que nous venons de créer, que nous allons coller (Contrôle-F) sur l'Artboard suivant, puis ajustez-le en double-cliquant sur le signe plus pour l'isoler. Puis dissocier (clic droit> Dissocier) et enlever sa verticale Accident vasculaire cérébral ligne.
Nous en sommes maintenant à notre troisième groupe d'icônes, alors assurez-vous de vous positionner sur le prochain Artboard (ce serait le neuvième) et commençons.
Créez le corps principal de l'icône de visibilité en utilisant un 48 x 32 px ellipse, que nous colorierons avec #DCEEFF puis centrez l'alignement sur l'Artboard sous-jacent.
Ajustez la forme que nous venons de créer en pinçant ses points d’ancrage gauche et droit à l’aide des touches Outil de point d'ancrage (Maj-C) afin de transformer l'ellipse dans une forme plus semblable à l'oeil.
Donner à la forme obtenue un 8 px contour épais (# 629CF9) avec un Joindre rond, en sélectionnant et en regroupant ensuite les deux à l’aide des touches Contrôle-G raccourci clavier.
Ajouter la section élève en utilisant un 16 x 16 px cercle que nous colorierons avec # 629CF9 puis centrer sur les deux formes que nous venons de regrouper.
Terminez l'icône en ajoutant un peu de réflexion à l'aide d'un 8 x 8 px cercle que nous colorierons avec #DCEEFF puis alignez-vous dans le coin supérieur droit de l’élève, en regroupant (Contrôle-G) les deux ensemble ensuite. Prenez votre temps, et une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes ses formes composant avant de passer à la suivante.
Créez l'icône de visibilité désactivée à l'aide d'une copie (Control-C) de celui sur lequel nous venons de terminer, que nous collerons sur le dixième Artboard, puis ajusterons en traçant la ligne diagonale à l’aide d’un 8 px épais Accident vasculaire cérébral (# 629CF9), sélection et regroupement (Contrôle-G) tous ensemble ensuite.
Soyons honnêtes, aucun véritable pack d’icônes d’UI n’est complet sans un ensemble d’icônes de partage de fichiers, alors assurons-nous d’ajouter notre propre ensemble..
Commencez à travailler sur l’icône de téléchargement en créant les formes principales de sa section de boîte à l’aide d’un 48 x 12 px rectangle (#DCEEFF) avec un 8 px contour épais (# 629CF9), que nous regrouperons (Contrôle-G) puis centrer le centre sur le bord inférieur de la zone de dessin active.
Ajoutez les petits segments en extension en utilisant deux 8 px grand 8 px épais Accident vasculaire cérébral lignes (# 629CF9) avec un Casquette ronde, que nous allons positionner sur les côtés des formes précédemment créées, en les sélectionnant puis en créant un groupe plus important (Contrôle-G).
Ajoutez la flèche vers le haut à l'aide d'une copie (Control-C) de celui que nous avons déjà créé pour les icônes de navigation, que nous allons coller (Contrôle-F) sur l'Artboard actuel, puis centrez-le sur le bord supérieur de la zone de dessin active. Une fois la flèche en place, sélectionnez et regroupez toutes les formes de composition de l’icône à l’aide des touches Contrôle-G raccourci clavier.
Créez l’icône de téléchargement en utilisant une copie (Control-C) de celui sur lequel nous venons de terminer, que nous collerons sur le prochain Artboard, puis nous ajusterons en reflétant horizontalement sa petite flèche (clic droit> Transformer> Refléter> Horizontal).
Si vous êtes comme moi, vous êtes probablement l'une de ces personnes qui n'aiment pas vraiment le prochain élément, car les interfaces doivent être faciles à utiliser, mais au fond, sachez que c'est parfois un mal nécessaire..
Créez le corps principal de l'icône à l'aide d'un 48 x 48 px cercle (#DCEEFF) avec un 8 px contour épais (# 629CF9), que nous regrouperons (Contrôle-G) et centrer ensuite sur le 13ème Artboard.
Créez le petit point du point d'exclamation à l'aide d'un 8 x 8 px cercle que nous colorierons avec # 629CF9 puis centrez le centre sur les formes plus grandes, en le plaçant à une distance de 4 px à partir du bord inférieur de son contour.
Terminez la marque et l’icône elle-même en ajoutant le segment de ligne à l’aide d’un 12 px grand 8 px épais Accident vasculaire cérébral (# 629CF9), que nous placerons au-dessus du point, à une distance de seulement 4 px. Sélectionner et grouper (Contrôle-G) les deux formes ensemble, en faisant la même chose pour toute l'icône, avant de passer à la suivante.
Le partage est l'une de ces choses qui font d'Internet un endroit idéal pour vivre votre existence numérique. Je vais donc partager avec vous une approche simple sur la façon de créer votre propre icône partageable..
Créez les sections principales de l'icône à l'aide de trois 16 x 16 px cercles (#DCEEFF) avec un 8 px contour épais (# 629CF9), que nous regrouperons individuellement (Contrôle-G) puis se positionner comme dans l'image de référence.
Tracez le segment reliant les trois sections en utilisant un 8 px contour épais (# 629CF9) avec un Casquette ronde et Joindre. Prenez votre temps, et une fois que vous avez terminé, envoyez le chemin résultant par-dessous clic droit> Organiser> Envoyer à l'arrière-plan, sélectionner et regrouper toutes les formes composant l'icône à l'aide de la touche Contrôle-G raccourci clavier.
Nous aimons allumer et éteindre les choses, alors pourquoi ne pas passer quelques instants à voir comment nous pouvons créer nos propres indicateurs d'état.
Commencez à travailler sur l’icône de désactivation en créant son corps principal à l’aide d’un 48 x 32 px rectangle arrondi (#DCEEFF) avec un Rayon d'angle 16 px Et un 8 px contour épais (# 629CF9), que nous regrouperons (Contrôle-G) et ensuite centrer sur le prochain Artboard.
Ajouter l'indicateur d'état à l'aide d'un 16 x 16 px cercle que nous colorierons avec # 629CF9, puis centrez le centre sur les formes plus grandes, en le plaçant à une distance de 4 px à partir du bord gauche du contour. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) les trois formes ensemble, avant de passer à l'icône suivante.
Créez la bascule en utilisant une copie (Control-C) de celui sur lequel nous venons de terminer, que nous allons coller sur le prochain Artboard (Contrôle-F), puis ajustez-le en le réfléchissant verticalement (clic droit> Transformer> Reflect> Vertical).
L'élément suivant sur notre liste est l'une de ces icônes qui sont devenues instantanément un changeur de jeu une fois qu'il a été utilisé et parfaitement compris, puisqu'il a été instantanément adopté comme symbole universel..
Commencez à travailler sur la section centrale du menu en créant un 8 x 8 px cercle que nous colorierons avec # 629CF9 puis centrez le centre sur le bord gauche de la zone de dessin active.
Ajouter le segment de barre en utilisant un 36 px large 8 px épais Accident vasculaire cérébral ligne (# 629CF9) avec un Casquette ronde, que nous centrerons sur le côté droit de la zone de dessin active. Prenez votre temps et une fois que le chemin est en place, sélectionnez-le ainsi que le cercle et regroupez-les à l'aide de la Contrôle-G raccourci clavier.
Terminez l'icône en ajoutant les sections supérieure et inférieure à l'aide de deux copies (Contrôle-C> Contrôle-F deux fois) des formes que nous venons de regrouper, que nous allons positionner à une distance de 8 px de l'original. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes les sections qui le composent avant de passer à l'icône suivante.
Qu'il s'agisse de pignons ou de curseurs, nous pouvons tous convenir que l'icône des paramètres est un élément indispensable de tout pack d'interface utilisateur, car les réglages sont l'une de ces choses que nous aimons toujours faire, si vous voyez ce que je veux dire.
Commencez par créer les segments de curseur de l'icône à l'aide de trois 48 px large 8 px épais Accident vasculaire cérébral lignes (# 629CF9) avec un Casquette ronde, que nous allons empiler verticalement à une distance de 16 px l'un après l'autre, centrez-les ensuite en les alignant sur le Artboard sous-jacent vide.
Terminez l'icône en ajoutant les boutons de réglage à l'aide de trois 12 x 12 px cercles (#DCEEFF) avec un 8 px contour épais (# 629CF9), que nous regrouperons individuellement (Contrôle-G) puis positionnez-vous sur les curseurs comme indiqué dans l’image de référence. Une fois que vous avez terminé, n’oubliez pas de sélectionner et de grouper (Contrôle-G) toutes les formes composant l'icône avant de passer à la suivante.
Nous en sommes maintenant à notre dernier groupe d'icônes, et il vaut mieux mettre fin au peloton qu'en ajoutant les petits états de coeur..
Commencez à travailler sur la partie supérieure du bouton J'aime en créant un 28 x 28 px cercle que nous colorierons avec #DCEEFF, puis position 8 px à partir du bord supérieur de la zone de dessin active et 4 px de sa gauche.
Créer un autre 28 x 28 px cercle (#DCEEFF), que nous placerons sur le côté opposé de la zone de dessin active, en veillant à conserver les mêmes espaces. Une fois que vous avez les deux formes en place, sélectionnez-les et réunissez-les en un seul objet plus grand en utilisant Éclaireurde Unir le mode forme.
Allumer Aperçu pixel mode (Alt-Shift-Y), et ajustez la forme obtenue en sélectionnant et en retirant la moitié inférieure de celle-ci, puis en ramenant le point d’ancrage supérieur Pixel Grid.
Prenez le Outil stylo (P) et dessinez le bas du corps du coeur, en veillant à lisser ses points d’ancrage latéraux à l’aide du Convertir les points d'ancrage sélectionnés en lissage. Prenez votre temps et ajustez la forme en sélectionnant et en repositionnant certaines des extrémités de ses poignées, comme dans l’image de référence, et en les désactivant. Aperçu pixel mode (Alt-Control-Y) avant de passer à l'étape suivante une fois que vous avez terminé.
Terminez l’icône en donnant à la forme obtenue une 8 px contour épais (# 629CF9) avec un Joindre rond, en veillant à sélectionner et à grouper (Contrôle-G) les deux avant de passer au suivant.
Créez la dernière icône en utilisant une copie de celle sur laquelle nous venons de travailler, que nous positionnerons sur le dernier Artboard, puis nous nous transformerons en bouton d’aversion en ajoutant la barre transversale diagonale à l’aide d’un 8 px épais Accident vasculaire cérébral (# 629CF9) avec un Casquette ronde. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes ses formes composant avant de sauvegarder le projet.
Comme toujours, j'espère que vous avez apprécié ce didacticiel pas à pas et surtout appris quelque chose de nouveau et d'utile en cours de route.!
Accentsconagua