Share
Ce que vous allez créerDans le tutoriel d'aujourd'hui, nous allons mettre nos chapeaux de jardinier et créer un ensemble de quatre petites icônes de cactus en n'utilisant que les formes et outils de base d'Adobe Illustrator avec lesquels vous travaillez probablement déjà quotidiennement..
En outre, n'oubliez pas que vous pouvez toujours développer votre projet en vous rendant sur GraphicRiver où vous trouverez une grande sélection d'icônes de jardin..
Cela étant dit, sautons directement dessus!
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 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éez un total de cinq 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 trois copies (Contrôle-C> Contrôle-F trois fois) à une distance horizontale de 40 px à partir de l'original, verrouiller le calque actif avant de passer à la section suivante.
En supposant que vous ayez fini de créer les grilles de référence, passez au niveau suivant (ce serait le deuxième) et démarrons le projet en créant notre première icône..
Commencez par créer le pot en céramique de la plante à l'aide d'un 68 x 32 px rectangle arrondi avec un Rayon de coin 8 px, que nous colorierons avec # E5E5E5 puis centrer le centre sur la zone de dessin active sous-jacente, en le positionnant à une distance de 4 px de son bord inférieur.
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 # 3A2E2A. Retournez la copie Remplir avec son Accident vasculaire cérébral (Maj-X), en veillant à régler sa Poids à 8 px.
Ajoutez la petite ligne de détail horizontale en utilisant un 68 px large 4 px épais Accident vasculaire cérébral (# 3A2E2A), que nous centrerons sur le corps plus grand du pot, en le positionnant 4 px de son bord supérieur. Une fois que vous avez terminé, sélectionnez et regroupez les trois formes à l’aide des touches Contrôle-G raccourci clavier.
Créer le corps principal de la bonne plante en utilisant un 28 x 80 px rectangle (# 88AF66), que nous allons positionner sur le pot, à une distance de 38 px à partir du bord droit de la zone de dessin active.
Ajustez la forme que nous venons de créer en la sélectionnant d’abord, puis en réglant la Rayon de ses coins supérieurs à 14 px du Transformer du panneau Propriétés du rectangle.
Ensuite, prenez quelques instants et tracez les deux lignes de texture en diagonale à l’aide de la Outil stylo (P). Utiliser un 4 px Stroke (# 6D894E) pour le premier, suivi d'un plus épais 8 px un (# 6D894E) pour le dernier, fixant leurs deux Profils de largeur à l'un des paramètres par défaut inclus dans Illustrateur (Profil de largeur 5).
Groupe (Contrôle-G) les deux traits ensemble, puis les masquer à l'aide d'une copie (Control-C) de la forme sous-jacente que nous allons coller devant (Contrôle-F) et ensuite utiliser comme Masque d'écrêtage. Une fois la copie en place, sélectionnez-la simplement, ainsi que les traits, puis clic droit> Make Clipping Mask.
Donner un cactus 8 px contour épais en utilisant le Accident vasculaire cérébral méthode, en veillant à définir sa couleur sur # 3A2E2A.
Ajoutez la ligne de détail verticale à l'aide d'un 66 px grand 4 px épais Accident vasculaire cérébral (# 3A2E2A) avec un Casquette ronde, que nous centrerons aligner sur le bord inférieur de la plante. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes ses formes ensemble avant de passer à l'étape suivante.
Commencez à travailler sur la plante gauche de l'icône en créant son corps principal à l'aide d'un 28 x 52 px rectangle (# A9D884), que nous ajusterons en réglant la Rayon de ses coins supérieurs à 14 px de l'intérieur Transformer du panneau Propriétés du rectangle. Placez la forme obtenue sur le pot, à une distance de 38 px à partir du bord gauche de la zone de dessin active.
Ajoutez les deux lignes de texture en diagonale, en suivant le même processus que pour la bonne plante, en retournant le haut. Accident vasculaire cérébralla largeur pour lui donner de la variété.
Donner à la plante un 8 px contour épais (# 3A2E2A), suivi d'un 38 px grand 4 px épais Accident vasculaire cérébral ligne (# 3A2E2A) au centre de son bord inférieur. Une fois que vous avez terminé, sélectionnez et regroupez toutes ses formes en utilisant la touche Contrôle-G raccourci clavier.
Ajouter le plus petit rocher en utilisant un 14 x 12 px ellipse (# BAB6B3) avec un 8 px contour épais (# 3A2E2A), que nous regrouperons (Contrôle-G) puis positionnez-la sur le bord droit du pot en vous assurant de l'envoyer ensuite sous ses formes les plus grandes (clic droit> Organiser> Renvoyer).
Prenez quelques instants et dessinez la plus grande section de roche à l’aide du Outil stylo (P), en utilisant # 9B928E comme votre Remplir Couleur. Donner à la forme obtenue un 8 px contour épais (# 3A2E2A) avec un Joindre rond, groupement (Contrôle-G) puis en plaçant les deux derrière le pot en céramique (clic-droit > Organiser> Envoyer à l'arrière). De plus, n'oubliez pas de sélectionner et de grouper (Contrôle-G) toutes les formes que nous avons jusqu'ici avant de passer à l'étape suivante.
Commencez à travailler sur le premier plan de l'icône en créant un 96 px large 8 px épais Accident vasculaire cérébral ligne (# 3A2E2A) avec un Casquette ronde, que nous alignerons sur le coin inférieur gauche de la zone de dessin active.
Terminez le premier plan et l’icône elle-même en ajoutant le segment de ligne le plus petit à l’aide d’un 4 px large 8 px épais Accident vasculaire cérébral ligne (# 3A2E2A) avec un Casquette ronde, que nous alignerons sur le coin inférieur droit de la zone de dessin active. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes les sections composant la section en cours ensemble, puis la même chose pour toute l'icône ensuite.
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 notre deuxième usine..
Créez le pot en céramique à l'aide d'un 68 x 40 px rectangle arrondi (# E5E5E5) avec un Rayon de coin 8 px Et un 8 px contour épais (# 3A2E2A), que nous regrouperons (Contrôle-G) puis centrer le centre sur le bord inférieur de la zone de dessin active.
Ajouter la ligne de détail horizontale en utilisant un 68 px large 4 px épais Accident vasculaire cérébral ligne (# 3A2E2A), que nous centrerons sur le corps plus grand du pot, en le plaçant à une distance de 4 px de son sommet. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) les trois formes ensemble avant de passer à l'étape suivante.
Commencez à travailler sur le corps principal du cactus en créant sa section extérieure à l'aide d'un 64 x 64 px cercle (# A9D884) avec un 8 px contour épais (# 3A2E2A), que nous regrouperons (Contrôle-G) puis centrer le centre sur le pot en céramique.
Ajouter la section interne de la plante en utilisant un 34 x 64 px ellipse (# 88AF66) avec un 8 px contour épais (# 3A2E2A), que nous regrouperons (Contrôle-G) puis centrer sur son corps plus grand.
Divisez la section centrale en deux en ajoutant un 64 px grand 8 px épais Accident vasculaire cérébral ligne (# 3A2E2A) en son centre, sélection et regroupement (Contrôle-G) toutes les plantes composant la plante avant de passer à l'étape suivante.
Puisque nous voulons que l’usine soit située derrière le pot en céramique, nous devrons la sélectionner et la positionner ensuite en dessous. clic droit> Organiser> Envoyer à l'arrière-plan.
Commencez à travailler sur la petite fleur rouge en créant son pétale central à l'aide d'un 12 x 16 px ellipse (# EF835E) avec un 8 px contour épais (# 3A2E2A), que nous regrouperons (Contrôle-G) et ensuite centrer sur le bord supérieur de la zone de dessin active.
Créez le pétale de gauche en utilisant un 16 x 16 px rectangle (# EF835E) que nous ajusterons en réglant la Rayon de ses coins en bas à gauche et en haut à droite pour 12 px de l'intérieur Transformer du panneau Propriétés du rectangle. Donner à la forme obtenue un 8 px contour épais (# 3A2E2A) avec un Joindre rond, groupement (Contrôle-G) puis en plaçant les deux sur le côté du pétale central.
Créez le bon pétale en utilisant une copie (Contrôle-C> Contrôle-F) de celui sur lequel nous venons de terminer, que nous placerons sur le côté opposé de l’usine. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes les formes composant la fleur ensemble, en veillant à les envoyer ensuite à l'arrière (clic droit> Organiser> Envoyer à l'arrière). De plus, comme nous avons presque fini de travailler sur l’usine, vous pouvez sélectionner et grouper (Contrôle-G) toutes les formes que nous avons jusqu'à présent aussi.
Créez le plus petit rocher en utilisant un 16 x 14 px ellipse (# BAB6B3) avec un 8 px contour épais (# 3A2E2A), que nous regrouperons (Contrôle-G) puis aligner le fond sur le corps principal du pot en céramique, en le positionnant 4 px de son bord droit.
Prenez quelques instants et dessinez le plus gros rocher en utilisant # 9B928E comme couleur de remplissage. Donner à la forme obtenue un 8 px contour épais (# 3A2E2A) avec un Joindre rond, groupement (Contrôle-G) puis en plaçant les deux sous les autres formes (clic droit> Organiser> Envoyer à l'arrière).
Terminez l'icône en ajoutant son premier plan à l'aide d'une copie (Control-C) de celui que nous avons créé pour la première icône, que nous allons coller sur le calque actuel (Contrôle-F), puis centrez le centre sur le bord inférieur de la zone de dessin active. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes ses sections composant avant de passer à la suivante.
Passez à la couche suivante (la quatrième), en verrouillant la précédente, puis zoomez sur sa grille de référence pour pouvoir commencer à travailler sur la troisième installation..
Créez le pot en céramique à l'aide d'un 68 x 32 px rectangle arrondi (# E5E5E5) avec un Rayon de coin 8 px Et un 8 px contour épais (# 3A2E2A), que nous regrouperons (Contrôle-G) puis centrer le centre sur le bord inférieur de la zone de dessin active.
Ajouter la ligne de détail horizontale en utilisant un 68 px large 4 px épais Accident vasculaire cérébral ligne (# 3A2E2A), que nous centrerons sur le corps principal du pot, en le positionnant à une distance de 4 px de son bord supérieur. Une fois que vous avez terminé, sélectionnez les trois formes et regroupez-les à l'aide de la touche Contrôle-G raccourci clavier.
Commencez à travailler sur l’usine réelle en créant sa section inférieure à l’aide d’un 64 x 64 px cercle (# A9D884), que nous centrerons sur le pot en céramique en le plaçant à une distance de 28 px à partir du bord supérieur de la zone de dessin active.
Ajoutez les trois lignes de texture en diagonale en utilisant # 88AF66 comme ton principal Accident vasculaire cérébral la couleur, en veillant à grouper (Contrôle-G) puis les masquer à l'aide d'une copie (Contrôle-C> Contrôle-F) du grand cercle sous-jacent.
Conseil rapide: remarquez que plus vos trajets sont longs, plus les lignes de texture seront fines, alors essayez de les jouer jusqu'à ce que vous obteniez quelque chose de beau.
Donner à la section actuelle un 8 px contour épais (# 3A2E2A), sélection et regroupement (Contrôle-G) toutes ses formes composant ensuite.
Créez la section en haut à gauche de la plante en utilisant un 36 x 36 px cercle (# 88AF66), auxquels s'ajoutent les lignes de texture diagonales habituelles (# 6D894E) et 8 px contour épais (# 3A2E2A). Sélectionner et grouper (Contrôle-G) associez les trois formes en les alignant sur le bord supérieur de la zone de dessin active, en veillant à les positionner sous la plus grande section (clic droit> Organiser> Envoyer à l'arrière).
Ajouter la première des plus petites sections en utilisant un 16 x 16 px cercle (# A9D884) avec un 8 px contour épais (# 3A2E2A), que nous regrouperons (Contrôle-G) puis positionnez-vous sur le côté droit des formes précédemment créées.
Créez la deuxième section plus petite en utilisant un 24 x 24 px cercle (# 88AF66) avec deux lignes de texture diagonales (# 6D894E) Et un 8 px contour épais (# 3A2E2A), que nous regrouperons (Contrôle-G) puis se positionner sur le côté droit du corps plus grand, à une distance de 16 px en haut à droite de la zone de dessin active.
Sélectionner et grouper (Contrôle-G) toutes les quatre sections de la plante, en veillant à les envoyer à l'arrière du pot (clic droit> Organiser> Envoyer à l'arrière) avant de passer à l'étape suivante.
Créez le plus petit rocher en utilisant un 14 x 12 px ellipse (# BAB6B3) avec un 8 px contour épais (# 3A2E2A), que nous regrouperons (Contrôle-G) puis positionnez-vous sur le côté gauche du plus grand pot en céramique, en veillant à les envoyer sous ses formes les plus grandes (clic droit> Organiser> Renvoyer).
Prenez quelques instants pour dessiner la plus grande section de roche, en utilisant # 9B928E comme votre Remplir Couleur. Donner à la forme obtenue un 8 px contour épais (# 3A2E2A) avec un Joindre rond, groupement (Contrôle-G) puis en plaçant les deux sous le pot en céramique (clic droit> Organiser> Envoyer à l'arrière).
Terminez l'icône en ajoutant son premier plan à l'aide d'une copie (Control-C) de celui que nous avons créé pour la deuxième icône, que nous allons coller sur le calque actuel (Contrôle-F), puis centrez le centre sur le bord inférieur de la zone de dessin active. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes les sections qui le composent avant de passer à la quatrième et dernière.
Nous en sommes maintenant à notre quatrième et dernière icône, alors assurez-vous que vous êtes sur le bon calque (ce serait le cinquième) et terminons les choses.!
Comme nous l'avons fait avec toutes les autres icônes, commencez par créer le pot en céramique à l'aide d'un 68 x 24 px rectangle arrondi (# E5E5E5) avec un Rayon de coin 8 px Et un 8 px contour épais (# 3A2E2A), que nous regrouperons (Contrôle-G) puis centrer le centre sur le bord inférieur de la zone de dessin active.
Ajouter la ligne de détail horizontale en utilisant un 68 px large 4 px épais Accident vasculaire cérébral ligne (# 3A2E2A), que nous centrerons sur le corps principal du pot, en le positionnant à une distance de 4 px de son bord supérieur. Une fois que vous avez terminé, sélectionnez les trois formes et regroupez-les à l'aide de la touche Contrôle-G raccourci clavier.
Commencez à travailler sur l’usine en créant un 24 x 24 px cercle (# A9D884), que nous centrerons sur la zone de dessin active sous-jacente, en la positionnant 4 px de son bord supérieur.
Créer un autre légèrement plus grand 44 x 44 px cercle (# A9D884), que nous allons positionner à une distance de 24 px du plus petit.
Ouvrez les chemins des deux cercles en sélectionnant individuellement leurs points d’ancrage intérieurs opposés à l’aide des touches Outil de sélection directe (A) puis en les retirant en appuyant sur Effacer.
Unissez les deux chemins en une seule forme plus grande en les sélectionnant puis en appuyant sur Contrôle-j deux fois.
Ajustez la forme de l’objet obtenu en sélectionnant et en lissant chacun de ses quatre points d’ancrage intérieurs en utilisant les boutons Convertir les points d'ancrage sélectionnés en lissage option, puis repositionnez ses poignées jusqu'à obtenir une transition en douceur entre les deux sections.
Prenez quelques instants et ajoutez les lignes de texture en diagonale en utilisant # 88AF66 comme votre Accident vasculaire cérébral couleur, en veillant à les masquer ensuite (clic droit> Make Clipping Mask) en utilisant une copie (Contrôle-C> Contrôle-F) de la forme sous-jacente.
Donner à la plante un 8 px contour épais (# 3A2E2A), suivi d'un 80 px grand 4 px épais Accident vasculaire cérébral ligne (# 3A2E2A) au centre de son bord inférieur. Une fois que vous avez terminé, sélectionnez et regroupez toutes ses formes en utilisant la touche Contrôle-G raccourci clavier.
Placez la forme que nous venons de regrouper sous le pot en céramique (clic droit> Organiser> Envoyer à l'arrière), en sélectionnant et en regroupant les deux sections à l’aide des touches Contrôle-G raccourci clavier.
Ajouter le plus petit rocher en utilisant un 22 x 16 px ellipse (# BAB6B3) avec un 8 px contour épais (# 3A2E2A), que nous regrouperons (Contrôle-G) puis positionnez-vous sur le côté droit du pot en céramique, à une distance de seulement 4 px de son bord droit.
Prenez quelques instants et dessinez la plus grande section de roche en utilisant # 9B928E comme votre Remplir Couleur. Donner à la forme obtenue un 8 px contour épais (# 3A2E2A) avec un Joindre rond, groupement (Contrôle-G) puis en les plaçant sous le pot en céramique (clic droit> Organiser> Envoyer à l'arrière).
Terminez l'icône en ajoutant son premier plan à l'aide d'une copie (Control-C) de celui que nous avons créé pour la troisième icône, que nous allons coller sur le calque actuel (Contrôle-F), puis centrez le centre sur le bord inférieur de la zone de dessin active. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes ses sections de composition avant de sauvegarder le projet entier.
Voilà, chers amis des cactus, une approche simple, étape par étape, pour créer vos propres icônes de jardin en utilisant uniquement des formes et des outils de base trouvés dans de bons vieux Illustrator..
Accentsconagua