Comment créer des icônes en flat design inspirés de la nature dans Adobe Illustrator

En été, tout est en pleine floraison et les gens profitent des journées chaudes, ensoleillées et célèbre la plus longue et plus puissante journée de l’année : le Solstice d’été, qui est également connu sous le nom de Litha dans les traditions Wiccan.

Dans ce tutoriel, nous allons créer un ensemble d’icônes en flat design, dédié aux éléments, liés à la nature et les célébrations du solstice d’été. Nous allons utiliser des formes de base et les diverses fonctions d’Adobe Illustrator pour rendre le processus complet et amusant.

Litha peut être célébré de plusieurs façons différentes, et il se consacre principalement à la nature. Certaines personnes construisent des autels, décorées avec des éléments de la saison : fleurs d’été, panneau solaire, bougies et récoltes, glorifiant la lumière et l'énergie du soleil. Les icônes dans notre tutoriel vont représenter ces symboles dédiés à l’été, la nature et Litha !

A la fin de ce tutoriel, vous serez en mesure d’appliquer ces techniques et de créer d'autres types d'illustrations et icônes en flat design, tels que des icônes de nourriture ou d’accessoires. Parcourez l'Envato Market pour trouver un sujet que vous aimez et soyez prêt à faire une nouvelle réalisation après avoir terminé celle-ci.

Commençons !

1. Créer une icône de baie

Étape 1

Notre premier élément va être un bouquet de baies mûres sur une tige. Prenez l’outil Ellipse (L) et commencez à dessiner notre baie en faisant un cercle rouge de 15 x 15 px.

Choisissez un rose clair et faites un nouveau cercle, cette fois de 5 x 5 px en haut de la baie pour créer un effet de lumière. Ajoutez un cercle plus petit un peu plus bas pour rendre notre baie brillante.

Enfin, sélectionnez tous les éléments et groupez les (Ctrl-G).

Étape 2

Nous allons ajouter une tige ou une branche. Prenez l’outil Trait (Majuscule+T), maintenez Maj enfoncée et tracez une ligne verticale de 35 px de hauteur. Vous pouvez ajuster la taille de votre ligne dans le panneau prévu à cette effet. Définissez la couleur du trait comme étant brun foncé dans le panneau Couleur.

Rendez vous dans le panneau Contour et définissez la Graisse du trait à 2 pt, et mettez l'Aspect et l'Angle sur la seconde option pour rendre le bout de la ligne arrondi.

Étape 3

Maintenant, prenez l’outil Arc et ajoutez un petit germe sur la gauche de la tige. Réglez la Graisse du trait à 1,5 pt et, comme précédemment, mettez l'Aspect et l'Angle sur la seconde option.

Ajoutez un autre germe et couvrez les deux avec des copies de notre baie rouge, en variant légèrement les tailles.

Étape 4

Maintenant nous allons dessiner quelques feuilles. Utilisez l’outil Ellipse (L) pour faire un ovale vert de 9 x 20 px. Prenez l’outil Sélection directe (A), sélectionnez les points d’ancrage en haut et en bas et utilisez la fonction Convertir les points d'ancrage sélectionnés en angles pour faire les pointes de la feuille. Vous trouverez cette fonction dans le panneau de commande en haute.

Étape 5

Nous allons ajouter une nervure centrale à notre feuille. Utilisez l'outil Trait (Majuscule+T) pour tracer un trait vertical et changez la couleur du trait en vert foncé. Dans le panneau Contour, définissez la Graisse à 1 pt et changez le Profil pour le Profil de largeur 1, ce qui rend les bouts de la ligne mince et pointu.

Étape 6

Groupez (Ctrl-G) les éléments de la feuille, tournez les un peu et placez les sur la tige.

Étape 7

Nous allons faire la base de notre icône ! Basculez sur l’outil Polygone et définissez le nombre de côtés à 8. Faites un octogone de 80 x 80 px de couleur beige.

Maintenant nous allons aligner les objets. Sélectionnez les baies et l’octogone, puis cliquez sur l’octogone, une fois de plus pour en faire un Objet Clé (vous pourrez voir une sélection plus épaisse autour de la forme). Dirigez-vous vers le panneau Alignement, puis cliquez sur Alignement horizontal au centre pour aligner parfaitement les deux éléments.

Étape 8

Nous allons finir notre icône en ajoutant une ombre longue. Utilisez l’outil Rectangle (M) pour faire un rectangle de 60 x 70 px de couleur beige clair. Définissez son Mode de fusion comme Produit, dans le panneau Transparence.

Maintenez Maj et utilisez l’outil Sélection (V) pour faire pivoter le rectangle de 45 degrés. Placez-le entre les baies et la base de l’icône soit en appuyant sur Ctrl-[plusieurs fois ou en le faisant glisser manuellement dans le panneau Calques.

Positionnez l'ombre pour l'adapter à notre plante. Utilisez l’outil Ajout de point d'ancrage (=) et l'outil de Sélection directe (A) pour déplacer les points autour et les cacher derrière la plante.

Étape 9

Pour finir, il faut se débarrasser de l’ombre à l’extérieur de la base de l’icône. Nous allons copier l’icône de la base et le coller devant (Ctrl-C > Ctrl-F). Appuyez sur Maj-Ctrl-] pour l’amener vers l’avant. Sélectionnez la copie et l’ombre, cliquez sur le bouton droit de la souris et faites un masque d’écrêtage. Et c’est tout ! Nous pouvons encore modifier et ajuster l’ombre, si nécessaire, à l’intérieur du masque d’écrêtage en le sélectionnant dans le panneau Calques ou en utilisant l’outil de sélection directe (A).

Passons à notre prochaine icône !

2. Faire une icône de champignon

Étape 1

Nous allons commencer par le chapeau du champignon. Utilisez l’outil Ellipse (L) pour faire un ovale rouge de 40 x 10 px. Prenez l’outil Sélection directe (A) et sélectionnez le point d’ancrage. Raccourcissez ses poignées d’ancrage en les plaçant au plus près du centre, pour rendre le haut de la forme plus pointu.

Tout en gardant le point sélectionné, appuyez sur Entrée pour ouvrir la fenêtre Déplacement. Définissez la valeur horizontale à 0 px et verticale à -10 px. Cliquez sur OK pour remonter le point 10 px, pour former un capuchon.

Étape 2

Nous allons ajouter un "pied" à notre champignon. Faites une forme beige de 10 x 25 px à l’aide de l’outil Ellipse (L). Sélectionnez les deux éléments et aligner les horizontalement au centre, en utilisant le chapeau comme Objet Clé.

Étape 3

Nous allons modifier la forme du pied. Sélectionnez-le et allez dans Effet > Déformation > Arc. Définissez la valeur de l' inflexion horizontale à -10%, ce qui rendra la forme plus large en bas. Cliquez sur OK pour appliquer l’effet et nous allons en ajouter un autre.

Allez à Effet > Déformation > Poisson. Cliquez sur Appliquer le nouvel effet dans la boîte de dialogue et nous allons définir la valeur de l'inflexion verticale à -25%, ce qui rendra la forme légèrement bombé.

Étape 4

Allez à Objet > Décomposer l'aspect pour appliquer l’effet. Mettez le pied en arrière-plan, en le plaçant juste sous le chapeau en appuyant sur Shift-Ctrl-[.

Étape 5

Décorons notre champignon avec quelques boutons pour le rendre plus détaillée. Faites un cercle beige claire de 5 x 5 px et placez le au bord de la forme rouge. Créez un autre cercle à l’opposé qui sera partiellement masqué par le chapeau.

Mouchetez quelques boutons de plus, en variant leurs tailles.

Étape 6

Maintenant nous allons ajouter une ombre douce au bas du pied. Dupliquez la bande deux fois (Ctrl+C > Ctrl-F > Ctrl-F) et remonter un peu la copie supérieure en appuyant sur la touche flèche du haut de votre clavier plusieurs fois.

Sélectionnez les deux copies du pied et utilisez la fonction Soustraction du Pathfinder pour couper les formes. Assombrissez la couleur de la forme pour créer une ombre.

Étape 7

Finissons notre icône de champignon en ajoutant une base octogonale verte et une ombre longue.

Génial ! Passons à autre chose.

3. Créer une icône de bougie

Étape 1

Choisissez un brun foncé et faîtes le haut de la bougie avec une ellipse de 30 x 5 px. Choisissez un brun plus léger et dessinez le corps de notre bougie avec un rectangle de 30 x 30 px, à l’aide de l’outil Rectangle (M). Combinez le corps de la bougie avec son sommet, en alignant les objets les uns par rapport aux autres.

Maintenant, sélectionnez le haut elliptique de la bougie, maintenez Alt-Maj et faites glisser la forme vers le bas pour en faire une copie. Utilisez l’outil Pipette (I) pour sélectionner la couleur du corps de la bougie et l’appliquer à l’ellipse inférieure, pour former le bas de la bougie.

Étape 2

Utilisez l’outil Rectangle (M) pour faire une forme étroite de 5 x 23 px et l’aligner sur le bord gauche du corps de la bougie. Gardez la forme sélectionnée, appuyez sur Entrée pour ouvrir la fenêtre Déplacement. Définissez la valeur horizontale à 5 px et la valeur verticale à 0 px.

Appuyez sur Copier pour ajouter une seconde bande. Maintenant appuyez sur Ctrl-D plusieurs fois pour faire cinq copies de plus, afin que nous ayons sept copies au total. Sélectionnez toutes les bandes et écrasez-les un peu pour faire en sorte qu'elles rentrent parfaitement dans le corps de la bougie.

Étape 3

Commencez à varier la taille de chaque forme, en alternant la hauteur des rectangles. Ensuite, sélectionnez tous les rectangles et utilisez la fonction Réunion du Pathfinder pour les fusionner et n'avoir plus qu'une seule forme.

Maintenant, nous pouvons prendre l’outil Sélection directe (A) et sélectionnez tous les points en bas de la forme fusionnée. Nous allons voir les petits marqueurs de la fonctionnalité Angles dynamiques apparaître, ils vont nous permettre de rendre les coins des formes sélectionnés entièrement arrondies en tirant ces cercles au plus près du centre.

Étape 4

Ajoutons une flamme à notre bougie. Utilisez l’outil Ellipse (L) pour faire un ovale orange de 5 x 15 px. Sélectionnez son point d’ancrage avec l’outil Sélection directe (A) et utilisez la fonction Convertir les points d'ancrage sélectionnés en angles dans le panneau supérieur pour rendre le haut de l'ellipse pointu.

Faîtes en sorte que la flamme soit un peu plus large, dupliquez-la en plus petit, mettez-la en premier plan et remplissez-la en jaune clair ce qui rend la flamme stylisée encore plus fidèle à la réalité.

Étape 5

Finissez notre icône de bougie en faisant une icône de base bleu clair avec une ombre portée.

Nous avons encore trois icônes à faire ! Faisons-le !

4. Créer une icône de plume

Étape 1

Armez-vous de l’outil Ellipse (L) et commencez à façonner notre plume avec un ovale de couleur marron clair de 15 x 40 px. Allez dans Effet > Déformation > Arc et réglez la valeur de l'inflexion horizontale à -6 %, ce qui rendra le fond de la forme un peu plus large que son sommet.

Étape 2

Maintenant nous allons ajouter quelques encoches à notre plume. Utilisez l’outil plume (P) pour faire une petite polyligne en forme de triangle (en rouge dans la capture d’écran ci-dessous). Sélectionnez la ligne et la plume et utilisez la fonction Soustraction du Pathfinder pour découper un morceau de la plume. Ajouter plusieurs encoches, en utilisant la même technique.

Étape 3

Nous allons faire la tige de la plume. Utilisez l’outil Trait (Majuscule+T) et maintenez Maj pour dessiner une ligne verticale à travers la plume. Choisissez une couleur brune plus foncée pour le trait et définissez la graisse à 2 pt. Définissez le profil à Largeur profil 1, ce qui rendra la tige pointu.

Étape 4

Nous allons ajouter quelques détails mineurs à notre plume. Prenez l’outil Rectangle (M) et faîtes une forme en brun clair de 15 x 5 px. Double-cliquez sur l'outil Rotation (R) et définissez la valeur de l’angle à 30 degrés.

Maintenez Alt-Maj enfoncée et faites glisser la forme vers le bas, pour en faire une copie. Modifiez la taille et la couleur de la copie avec un brun plus foncé.

Étape 5

Placez les bandes au-dessus de la plume, tout en cachant leurs points d’ancrage gauche sous la tige. En ce qui concerne les parties inutiles sur la droite, nous allons voir comment nous pouvons nous en débarrasser.

Sélectionnez la plume et les rayures. Prenez l’outil Concepteur de forme (Maj+M), maintenez la touche Alt et cliquez sur les parties inutiles pour les supprimer. Voilà ! Notre plume est prête.

Finissez l’icône en ajoutant une icône de base bleue avec une ombre subtile. Et rendons nous à l’icône suivante !

5. Faire une icône de minéral

Étape 1

Nous allons maintenant créer une icône de minéraux, ressemblant à un cristal brillant.

Utilisez l’outil Rectangle (M) pour créer une forme bleu de 10 x 40 px. Appuyez sur Entrée pour ouvrir la fenêtre de Déplacement. Définissez la valeur horizontale à 10 px et la valeur verticale à 0 px. Cliquez sur Copier pour créer un second rectangle, attaché au premier.

Appuyez sur Ctrl-D pour créer la troisième forme et variez la luminosité de la couleur de remplissage, afin de faire une sorte de dégradé.

Étape 2

Écrasez un peu les rectangles de gauche et droite pour les rendre plus fin que la forme centrale. Sélectionnez les trois formes et dupliquez-les (Ctrl+C > Ctrl-F). Faites glisser les copies vers le haut, en les attachant à la partie supérieure du groupe initial du rectangle. Rétrécissez les copies, pour les rendre beaucoup plus courte.

Maintenant nous allons façonner le haut de notre cristal. Prenez l’outil Sélection directe (A) et sélectionnez tous les points d’ancrage marqués dans le screenshot ci-dessous. Dirigez-vous vers le panneau Alignement, sélectionnez Aligner sur une sélection et cliquez sur Alignement horizontal au centre pour rassembler tous les points d’ancrage sélectionnés en un seul point et forme un triangle.

Étape 3

Maintenant nous allons déformer un peu notre cristal pour le rendre moins symétrique. Prenez l’outil Lasso (Q), sélectionnez les points centraux du bas de notre cristal et appuyez sur la touche flèche du bas de votre clavier plusieurs fois, pour les déplacer vers le bas. Modifiez le haut du cristal également, à l’aide de l’outil Lasso (Q) et de décaler les points.

Étape 4

Modifiez aussi les côtés du cristal, en déplaçant ses points d’ancrage latéraux dans des directions opposées, pour rendre la partie supérieure de la forme un peu plus large.

Étape 5

Nous allons ajouter un point lumineux à notre cristal pour le rendre brillant. Utilisez l’outil Rectangle (M) pour faire un groupe de rayures bleu clair. Faîtes les tourner et placez-les au premier plan. Sélectionnez les rayures et le rectangle central de notre cristal et passez à l’outil Concepteur de forme (Maj+M). Maintenez la touche Alt et cliquez sur les morceaux que vous souhaitez supprimer.

Formidable ! Maintenant, il ressemble à une surface de verre.

Étape 6

Finissez notre icône de cristal en ajoutant une icône verte de base avec une ombre portée.

Il n’y a plus qu’une seule icône à faire ! Allons-y.

6. Faire une icône de fleur d'été

Étape 1

Notre icône final va être une simple et belle fleur. Utilisez l’outil Polygone et définissez le nombre de côtés à 8 pour faire un octogone (le même que nous avons fait pour notre base d’icône). Faites une forme rouge de 50 x 50 px.

Allez dans Effet > Distorsion & Transformation > Contraction & Dilatation. Déplacez le curseur du côté Dilatation jusqu'à 50 %. Ça ressemble déjà à une fleur !

Étape 2

Allez dans Effet > Décomposer l'aspect pour appliquer l’effet. Prenez l’outil Ellipse (L) et faites un cercle orange de 15 x 15 px pour le centre de notre fleur.

Étape 3

Copiez la tige avec les feuilles de notre toute première icône (celui avec les baies) et changer la couleur de la tige en vert.

Fixer la tige à la fleur et l’envoyez en arrière-plan (Shift-Control-[).

Étape 4

Finissez notre icône de fleur en le plaçant sur une base beige avec une ombre longue.

Félicitations ! Notre ensemble d'icônes en flat design Wiccan est prêt !

Bon travail ! Vous avez appris à créer cet ensemble d'icônes inspirés de l'été et de la nature à l'aide de formes et de fonctions de bases d’Adobe Illustrator. J’espère que vous avez découvert quelques conseils et astuces pratiques qui vous seront utile pour vos futurs projets et vous aideront à créer n’importe quel genre de d'icônes ou illustrations en flat design.

N’hésitez pas à partager votre résultat dans les commentaires ci-dessous !

Si vous aimez créer des icônes comme moi, n’hésitez pas à consulter les tutoriels suivants :

• Comment créer des icônes de Pâques en flat design dans Adobe Illustrator
• Comment créer des avatars de professions dans Adobe Illustrator
• Comment créer un ensemble d'icônes Sushi dans Adobe Illustrator

Amusez-vous !