Share
Ce que vous allez créerDans le didacticiel d'aujourd'hui, nous allons mettre notre chapeau de nutritionniste et explorer le processus de création des cinq groupes alimentaires principaux qui déterminent l'état de santé de votre corps. Comme toujours, nous allons adopter l'approche la plus simple possible en les créant à l'aide des formes géométriques et des outils les plus élémentaires proposés par Illustrator..
Oh, et n'oubliez pas que vous pouvez toujours développer le pack en vous dirigeant vers GraphicRiver où vous trouverez une grande sélection d'icônes sur le thème de l'alimentation..
Cela étant dit, prenez votre dose quotidienne de caféine et commençons!
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:
Étant donné que nous allons créer les icônes à l’aide d’un flux de travail parfait, nous voudrons créer un petit fichier sympa. la grille afin que nous puissions avoir un contrôle total sur 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 options trouvées sous Vue menu qui se transformera en Aligner sur Pixel chaque fois que vous entrez dans le 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éé, il serait judicieux de structurer notre projet en utilisant plusieurs couches, car nous pouvons ainsi maintenir un flux de travail régulier en nous concentrant sur une icône à la fois..
Cela étant dit, amenez le Couches panneau et créer un total de six 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 128 x 128 px, qui est assez grand.
Commencez par verrouiller tout le calque sauf les “grilles de référence”, puis saisissez le Outil Rectangle (M) et créer un 128 x 128 px Orange (# F15A24) carré, qui aidera à définir la taille globale de nos icônes.
Ajouter un plus petit 120 x 120 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, centrez-les ensuite en les alignant sur l'Artboard sous-jacent. Créez les grilles restantes en utilisant quatre copies (Contrôle-C> Contrôle-F) espacés horizontalement avec un 40 px espace entre chacun, verrouillant le calque actif 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'aliments..
Commencez à travailler sur la section du melon en créant un 120 x 112 px ellipse, que nous colorierons avec # 8CB75E puis ajustez en sélectionnant son point d’ancrage gauche en utilisant le bouton Outil de sélection directe (A) puis en le supprimant en appuyant sur Effacer. Centrer la forme obtenue sur la zone de dessin active sous-jacente en la plaçant à une distance de 12 px de son bord droit.
Ajoutez la paire intérieure de rayures horizontales, en utilisant un 120 x 22 px ellipse avec un 4 px épais Accident vasculaire cérébral (# 332E2E), que nous centrerons sur le bord droit de la forme précédemment créée.
Créer les rayures du milieu en utilisant une taille légèrement plus grande 120 x 54 px ellipse avec un 4 px épais Accident vasculaire cérébral (# 332E2E), que nous alignerons sur la section latérale du melon comme nous l'avons fait avec le précédent.
Ajoutez les bandes de parement extérieures en utilisant un 120 x 82 px ellipse avec un 4 px épais Accident vasculaire cérébral (# 332E2E), en veillant à sélectionner et à regrouper toutes les bandes du melon à l'aide du Contrôle-G raccourci clavier.
Puisque nous voulons que les bandes restent dans la surface de la section du melon, nous devrons les masquer à l'aide d'une copie (Control-C) de la forme verte, que nous allons coller (Contrôle-F) devant eux, puis avec la copie et les ellipses sélectionnés, clic droit> Make Clipping Mask.
Donner un contour à la section latérale 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 # 332E2E puis en retournant son Remplir avec son Accident vasculaire cérébral (Shift-X). Définir le contour résultant Poids à 8 px et son Coin à Joindre rond, 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 partie avant du fruit en créant son corps externe à l'aide d'un 72 x 112 px ellipse (# C6DBAD) avec un 8 px contour épais (# 332E2E), que nous regrouperons (Contrôle-G) puis positionnez-la sur la zone de dessin active de sorte que son centre chevauche le bord gauche de la section latérale..
Ajouter le corps intérieur du melon, en utilisant un 48 x 88 px ellipse (# EA7A5C) avec un 8 px contour épais (# 332E2E), que nous regrouperons (Contrôle-G) puis centrer sur les formes précédemment créées.
Prenez quelques instants et ajoutez les graines du fruit à l’aide de 4 x 6 px ellipses (# 332E2E), que nous allons positionner comme vous pouvez le voir dans l’image de référence. Une fois que vous avez toutes les graines en place, sélectionnez et groupez (Contrôle-G) ensemble, en faisant de même pour la section avant du melon.
Terminez le melon en ajoutant sa tige en utilisant un 10 x 10 px cercle avec un 4 px épais Accident vasculaire cérébral (# 332E2E) avec un Casquette ronde, que nous ajusterons en enlevant sa moitié supérieure. Positionnez la forme obtenue sur le bord droit de la zone de dessin active, à une distance de 58 px à partir du bas, en veillant à sélectionner et à grouper (Contrôle-G) toutes les formes composant le fruit ensuite.
Commencez à travailler sur la petite orange en créant son corps principal à l'aide d'un 32 x 32 px cercle (# EDAD66) avec un 8 px contour épais (# 332E2E), que nous regrouperons (Contrôle-G) puis positionnez-vous dans le coin inférieur gauche de la zone de dessin active.
Terminez l’orange, et avec elle l’icône elle-même, en ajoutant la petite feuille que nous allons créer avec un 20 x 20 px carré (# 8CB75E) que nous ajusterons en réglant la Rayon de ses coins en haut à gauche et en bas à droite pour 20 px de l'intérieur Transformer du panneau Propriétés du rectangle. Donner à la forme obtenue un 8 px contour épais (# 332E2E) avec un Joindre rond, groupement (Contrôle-G) et en plaçant les deux formes au-dessus de l’orange, à une distance de 16 px à partir du bord gauche de la zone de dessin active. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes les sections composant l'icône ensemble avant de passer à la suivante.
En supposant que vous ayez fini de travailler sur la première icône, verrouillez son calque puis passez à la suivante (ce serait le troisième), où nous commencerons à travailler sur le deuxième groupe alimentaire..
Commencez à travailler sur le carton de lait en créant la partie avant de la partie inférieure de son corps à l'aide d'un 44 x 80 px rectangle que nous colorierons avec # E8E1DF puis positionner à une distance de 40 px à partir du bord gauche de la zone de dessin active, et juste 4 px à partir du bas.
Ajouter la partie latérale du carton à l’aide d’un 24 x 80 px rectangle (# A08380), que nous positionnerons à droite de la forme précédemment créée.
Prenez quelques instants et dessinez le tourbillon du carton à l’aide des touches Outil stylo (P) avec le Remplir couleur définie à # 6BC2D6, passer à l'étape suivante une fois que vous avez terminé.
Donner le tourbillon un 8 px contour épais (# 332E2E) en utilisant le Accident vasculaire cérébral méthode, en sélectionnant et en regroupant les deux (Contrôle-G). Assurez-vous de créer une copie (Control-C) d'entre eux, que nous allons coller devant (Contrôle-F).
Sélectionnez et masquez chacun des deux tourbillons à l'aide d'une copie des sections sous-jacentes. Masques d'écrêtage (clic droit> Make Clipping Mask), en veillant à changer la couleur de la forme de remplissage de la section latérale en # 2E9CAF.
Donner aux deux sections un 8 px contour épais (# 332E2E) avec un Joindre rond, en sélectionnant et en regroupant individuellement chacune de leurs formes composant en utilisant le Contrôle-G raccourci clavier.
Créer la chute de la section avant en utilisant un 16 x 16 px cercle (# 332E2E), que nous centrerons sur le grand rectangle en le plaçant à une distance de 26 px de son bord inférieur.
Ajustez la forme du cercle en sélectionnant d’abord et en pinçant son point d’ancrage supérieur à l’aide des touches Outil de point d'ancrage (Maj-C) puis en le poussant vers le haut en 8 px en utilisant le Bouge toi outil (clic droit> Transformer> Déplacer> Vertical> 8 px). Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes les formes composant la section avant avant de passer à l'étape suivante.
Commencez à ajouter les barres d’informations nutritionnelles sur le côté de la boîte en créant deux 12 x 2 px des rectangles (# 332E2E), empilés verticalement 2 px les uns des autres, que nous allons positionner à une distance de 8 px à partir du bord inférieur du tourbillon.
Ajouter la plus grande forme en utilisant un 12 x 12 px carré (# 332E2E), que nous allons positionner 2 px sous la barre du bas. Sélectionner et grouper (Contrôle-G) les trois rectangles ensemble, en procédant ensuite pour les formes composant la section latérale.
Commencez à travailler sur le haut du carton en créant la forme principale de sa section latérale à l'aide d'un 24 x 20 px rectangle (# A08380), que nous allons positionner par-dessus les formes que nous venons de regrouper.
Ajustez la forme que nous venons de créer en ajoutant un nouveau point d’ancrage au centre de son bord supérieur à l’aide de la touche Ajouter un outil de point d'ancrage (+), puis en retirant ses côtés en utilisant le Supprimer l'outil de point d'ancrage (-).
Donner à la forme obtenue un 8 px contour épais (# 332E2E) avec un Joindre rond, en les sélectionnant et en les regroupant à l'aide du Contrôle-G raccourci clavier.
Ajoutez la partie avant du haut du corps à l’aide d’un 44 x 20 px rectangle (# BFA9A5), que nous positionnerons comme dans l'image de référence.
Ajustez la forme que nous venons de créer en sélectionnant ses points d’ancrage supérieurs à l’aide des touches Outil de sélection directe (A) puis en les poussant à droite par 12 px en utilisant le Bouge toi outil (clic droit> Transformer> Déplacer> Horizontal> 12 px).
Donner à la forme obtenue un 8 px contour épais (# 332E2E), sélection et regroupement (Contrôle-G) les deux ensemble avant de passer à l'étape suivante.
Créez la section supérieure pliée du carton de lait à l'aide d'un 44 x 12 px rectangle (# E8E1DF) avec un 8 px contour épais (# 332E2E), que nous regrouperons (Contrôle-G) puis se positionner comme dans l'image de référence.
Terminez le carton de lait en ajoutant un 16 x 6 px (# 332E2E) insertion rectangulaire au centre du bord supérieur de la section créée précédemment, sélection et regroupement (Contrôle-G) ensemble et ensuite pour l’ensemble du carton.
Commencez à travailler sur le petit triangle au fromage en créant sa section latérale à l'aide d'un 20 x 34 px rectangle (# EA7A5C) avec un 8 px droite Rayon de coin Et un 8 px contour épais (# 332E2E), que nous regrouperons (Contrôle-G) puis alignez-vous sur le coin inférieur gauche du carton de lait.
Ajouter la section avant en utilisant un 36 x 34 px rectangle (# EDAD66) avec un 8 px droite Rayon de coin, que nous allons positionner à une distance de 12 px à partir du bord gauche de la zone de dessin active.
Ajustez la forme en créant un 12 x 12 px cercle (surligné en rouge) que nous placerons sur le bord gauche de la section avant, à une distance de 10 px de son bas. Une fois que vous avez la forme en place, sélectionnez-la et la section la plus grande, puis utilisez Éclaireurde Mode Minus Avant pour créer la découpe.
Terminez le triangle du fromage et l’icône elle-même en donnant à la forme obtenue une 8 px contour épais (# 332E2E), suivie de deux insertions circulaires (8 x 8 px; 4 x 4 px - # 332E2E). Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes les sections composant le fromage ensemble, en procédant ensuite pour l'icône entière.
En supposant que vous ayez fini de travailler sur la deuxième icône, verrouillez son calque puis passez à la suivante (ce serait la quatrième), où nous commencerons à travailler sur le troisième groupe d'aliments..
Comme l'oignon a une forme et une taille identiques à celles du melon, nous allons rapidement déverrouiller le calque de l'icône de fruit et créer une copie (Control-C) du melon, que nous allons coller (Contrôle-F) sur le calque actif, en l'alignant sur le bord droit de la zone de dessin active.
Dissociez la copie que nous venons de créer (clic droit> Dissocier), puis prenez quelques instants pour retirer ses graines et sa tige, comme indiqué dans l'image de référence.
Ajustez les formes restantes en modifiant la couleur de la forme de remplissage de la section latérale. # BF7D47, le corps extérieur de sa section avant # E8E1DF, et son intérieur à # BFA9A5.
Ajouter une autre couche à la section avant de l'oignon à l'aide d'un 24 x 64 px ellipse (# E8E1DF) avec un 8 px contour épais (# 332E2E), que nous regrouperons (Contrôle-G) puis centrer le centre sur la plus grande section sous-jacente.
Créer un autre plus petit 8 x 24 px ellipse, que nous colorierons avec # 332E2E puis centrez le centre sur la section créée précédemment. Une fois la forme en place, sélectionnez et groupez (Contrôle-G) toutes les formes composant la section avant ensemble avant de passer à l'étape suivante.
Terminez l’oignon en puisant ses racines à l’aide de trois 8 px épais Accident vasculaire cérébral lignes (# 332E2E) avec un Casquette ronde, que nous allons positionner sur le côté droit de la section latérale, comme indiqué dans l’image de référence. Prenez votre temps, et une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes les sections de composition du légume avant de passer à l'étape suivante.
Commencez à travailler sur la petite carotte en créant son corps principal à l'aide d'un 32 x 32 px cercle (# EA7A5C), que nous allons positionner à une distance de 4 px à partir des bords gauche et inférieur de la zone de dessin active.
Ajustez la forme du cercle que nous venons de créer en sélectionnant son point d’ancrage supérieur à l’aide des touches Outil de sélection directe (A) puis en le poussant vers le haut en 24 px en utilisant le Bouge toi outil (clic droit> Transformer> Déplacer> Vertical> -24 px).
Donner à la forme obtenue un 8 px contour épais en utilisant le Accident vasculaire cérébral méthode, en veillant à définir sa couleur sur # 332E2E.
Terminez la carotte et l’icône elle-même en ajoutant les petites lignes de détail horizontales à l’aide de deux 4 px grands rectangles arrondis (# 332E2E) avec un Rayon de coin 2 px. Une fois les lignes en place, sélectionnez et groupez (Contrôle-G) ensemble, en faisant de même pour la carotte et l’icône entière ensuite.
Assurez-vous que vous avez verrouillé le calque précédent, puis passez au suivant (ce serait le cinquième) où nous allons créer le quatrième groupe alimentaire..
Commencez à travailler sur la boîte de céréales en créant sa section avant à l'aide d'un 56 x 92 px rectangle (# EDAD66) avec un 8 px contour épais (# 332E2E) avec un Joindre rond, que nous allons grouper (Contrôle-G) puis alignez-le sur le bord inférieur de la zone de dessin active, en le plaçant à une distance de 28 px de sa gauche.
Ajoutez les graines du bas du symbole de grain à l'aide de quatre 12 x 12 px carrés (# 332E2E), que nous positionnerons comme dans l'image de référence.
Ajustez la forme des rectangles du côté gauche en réglant la Rayon de leurs coins en bas à gauche et en haut à droite pour 12 px de l'intérieur Transformer du panneau Propriétés du rectangle.
Répétez la même procédure pour les carrés à droite, mais cette fois, ajustez la Rayon de leurs coins en haut à gauche et en bas à droite en utilisant le même 12 px valeur.
Ajouter la première graine en utilisant un 6 x 12 px ellipse (# 332E2E), que nous allons positionner entre les deux formes supérieures que nous venons d'ajuster, à une distance de 8 px de leurs bords inférieurs.
Ajustez la forme de l’ellipse que nous venons de créer en pinçant ses points d’ancrage supérieur et inférieur à l’aide des touches Outil de point d'ancrage (Maj-C) pour les rendre pointues. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes les graines ensemble, en faisant de même pour la section avant de la boîte.
Créez le bas du corps de la section latérale de la boîte en utilisant un 24 x 52 px rectangle (# A08380) avec un 8 px contour épais (# 332E2E), que nous regrouperons (Contrôle-G) puis positionnez-vous sur le côté droit du grand devant.
Ajoutez le haut du corps de la section latérale à l'aide d'un 24 x 40 px rectangle (# BF7D47) avec un 8 px contour épais (# 332E2E), que nous regrouperons (Contrôle-G) puis positionnez-vous sur les formes précédemment créées.
Comme nous l'avons fait avec le carton de lait, prenez quelques instants et ajoutez les petites barres de valeur nutritive à l'aide de deux 12 x 2 px des rectangles (# 332E2E) empilés verticalement 2 px au-dessus de 12 x 12 px carré (# 332E2E). Groupe (Contrôle-G) puis centrer les trois formes sur la plus grande section sous-jacente en les plaçant à une distance de 8 px de son bord inférieur. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes les formes composant la section latérale avant de passer à l'étape suivante.
Créez la section avant pliée de la boîte en utilisant un 56 x 20 px rectangle (# E8E1DF), que nous ajusterons en sélectionnant et en poussant ses points d’ancrage inférieurs à gauche par 12 px (clic droit> Transformer> Horizontal> -12 px). Donner à la forme obtenue un 8 px contour épais (# 332E2E) avec un Joindre rond, groupement (Contrôle-G) et en positionnant les deux sur la partie avant plus grande.
Créez la section supérieure pliée à l'aide d'une copie (Control-C > Contrôle-F) de celui de l'étape précédente, que nous allons d'abord refléter horizontalement (clic droit> Transformer> Refléter> Horizontal) puis positionnez-la sur le dessus de la boîte en prenant soin de changer sa couleur de remplissage en # BFA9A5. Prenez votre temps, et une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes les sections composant la boîte avant de passer à l'étape suivante.
Commencez à travailler sur le petit bol en créant son bas du corps à l’aide d’un 56 x 20 px rectangle (# EA7A5C) avec un 20 px bas Rayon de coin Et un 8 px contour épais (# 332E2E), que nous regrouperons (Contrôle-G) puis alignez-les sur le bord inférieur de la zone de dessin active en les positionnant à une distance de 8 px de sa gauche.
Ajoutez le haut du corps du bol avec un 64 x 12 px rectangle (# E8E1DF) avec un 8 px contour épais (# 332E2E), que nous regrouperons (Contrôle-G) puis positionnez-vous sur les formes précédemment créées.
Terminez le bol, et avec lui l'icône elle-même, en tirant le manche de la cuillère à l'aide d'une diagonale 8 px épais Accident vasculaire cérébral ligne (# 332E2E), que nous allons positionner à gauche de l’objet, 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 le bol ensemble, puis la même chose pour l'icône entière.
Nous en sommes maintenant au cinquième et dernier groupe alimentaire, qui est probablement le plus facile à créer. Assurez-vous donc que vous êtes sur le bon niveau (ce serait le sixième) et finissons ceci.!
Créez le jambon en utilisant une copie (Control-C) du melon de la première icône, que nous allons coller (Contrôle-F) sur le calque actif, en veillant à l'aligner sur le bord droit de la zone de dessin active vide.
Comme nous l'avons fait avec l'oignon, dissociez la copie que nous venons de créer (clic droit> Dissocier), puis prenez quelques instants pour retirer ses graines et sa tige, comme indiqué dans l'image de référence.
Ajustez les formes restantes en modifiant la couleur du corps extérieur de la section avant. # EDAD66 et son corps intérieur # EA7A5C.
Accentsconagua