Share
Ce que vous allez créerDans le tutoriel d'aujourd'hui, nous allons examiner de près le processus de création d'un pack d'icônes particulièrement intéressant, car nous allons illustrer certains objets traditionnels roumains qui constituent la définition vivante de ce que «la maison» était avant le numérique. âge. Comme toujours, nous allons utiliser et abuser des formes géométriques d'Illustrator, en combinaison avec des outils de base tels que le panneau Align et Pathfinder..
Cela étant dit, prenez un nouveau lot de café et plongeons dans!
De plus, si vous souhaitez développer le projet, vous pouvez le faire en allant sur GraphicRiver et en consultant certaines de leurs icônes sur le thème de la maison..
J'espère que vous avez déjà Illustrator en tâche de fond, apportez-le et configurons-le. 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 option trouvée sous Vue menu qui se transformera en Aligner sur Pixel chaque fois que vous entrez Aperçu pixel mode.
Maintenant, si vous êtes novice dans l'ensemble du «flux de production pixel-perfect», je vous recommande fortement de découvrir comment créer un tutoriel de création de pixel parfait, ce 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 quatre 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. Elles doivent toujours être la première décision que vous prenez lorsque vous démarrez un nouveau projet..
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) qui agira comme notre zone de dessin active, nous donnant ainsi une vue d'ensemble 4 px rembourrage.
Regroupez les deux carrés composant la grille de référence à l'aide du Contrôle-G raccourci clavier, puis créez trois copies à une distance de 40 px les uns des autres, en veillant à les aligner au centre de la Artboard.
Une fois que vous avez terminé, verrouillez le calque actuel et passez au suivant où nous commencerons à travailler sur notre première icône..
La flûte de pan, également connue sous le nom de flûte de pan, est un instrument de musique simple mais intéressant, qui remonte à l’époque des Grecs. Il tire son nom de Pan, dieu de la nature et protecteur des bergers. Le nom lui-même est un dérivé du mot "paein" qui signifie "au pâturage", ce qui est probablement la raison pour laquelle tant de cultures, y compris la mienne, ont associé cet instrument à l'acte de rassemblement.
Pour moi, ce petit objet a une signification particulière, puisqu'il parvient à me ramener à une époque et à un lieu où la vie était plus simple, où la maison ne concernait pas que l'endroit, mais les personnes qui l'avaient rendu à la maison..
Maintenant, sans perdre plus de temps, assurez-vous que vous êtes sur le bon calque (ce serait le deuxième) et démarrons le projet en le recréant..
Commencez à travailler sur la partie supérieure de la flûte de pan en créant un 8 x 6 px rectangle que nous colorierons avec # 899E47 puis alignez-le sur le bord supérieur de la zone de dessin active, en le positionnant à une distance de 4 px de son bord supérieur et 20 px de sa gauche.
Donner un contour à la forme 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 en changeant sa couleur en # 2B3249 puis en retournant son Remplir avec son Accident vasculaire cérébral (Shift-X). Met le Accident vasculaire cérébralde Poids à 4 px, sélectionner et regrouper ensuite les deux formes à l’aide des touches Contrôle-G raccourci clavier.
Créez neuf copies de la forme que nous venons de regrouper (Contrôle-C> Contrôle-F neuf fois), puis distribuez-les horizontalement sur le côté droit de l'original, en utilisant la Aligner panneau de sorte que leurs contours finissent par se chevaucher.
Créez les tuyaux à l’aide de dix rectangles (# A8755A-voir les dimensions ci-dessous) avec un 4 px contour épais (# 2B3249), que nous empilons horizontalement les uns à côté des autres, en regroupant (Contrôle-G) puis en les plaçant sous les petits rectangles.
Ajouter un 8 px large 4 px épais Accident vasculaire cérébral ligne (# 2B3249) à la section inférieure des premier, quatrième et septième tuyaux, en le positionnant à une distance de 2 px de leurs contours. Une fois que vous avez terminé, sélectionnez et regroupez toutes les formes que nous avons jusqu’à présent en utilisant le Contrôle-G raccourci clavier.
Créez la section horizontale qui maintient tous les tuyaux ensemble en utilisant un 92 x 16 px rectangle (# CE9D78) avec un 4 px contour épais (# 2B3249), que nous regrouperons (Contrôle-G) puis centrez-les sur les tuyaux en les plaçant à une distance de 12 px à partir du bord supérieur de la zone de dessin active.
Commencez à ajouter des détails à la section de l'étape précédente en créant la fleur centrale à l'aide de huit 2 x 2 px cercles (# 2B3249), que nous allons positionner autour d'un autre 2 x 2 px un (2B3249). Une fois que vous les avez mis en place, n'oubliez pas de sélectionner et de grouper (Contrôle-G) les ensemble pour qu'ils ne soient pas séparés par accident.
Conseil rapide: pour les étapes en cours et suivantes, je vous recommande d'activer Aperçu pixel mode (Alt-Control-Y) car cela vous donnera la possibilité de bien positionner chaque cercle, comme indiqué dans l’image de référence. Une fois que vous avez terminé, quittez le mode en appuyant sur Alt-Control-Y encore.
Commencez à travailler sur le motif de vague décoratif gauche en utilisant quelques 2 x 2 px cercles (# 2B3249), que nous allons positionner comme dans l’image de référence. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) tous les cercles ensemble avant de passer à l'étape suivante.
Terminez l'icône actuelle en ajoutant le segment de droite du motif décoratif, en utilisant une copie de celle de l'étape précédente (Contrôle-C> Contrôle-F), que nous placerons sur le côté opposé de la fleur, en veillant à la refléter verticalement une fois que nous l’avons mise en place (clic droit> Transformer> Reflect> Vertical). Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) le motif décoratif de la section sous-jacente, en faisant de même pour toutes les formes de composition de l'icône.
Vivre à l'ère numérique peut réellement effacer l'esprit des arts plus anciens, surtout si cette personne ne les a jamais rencontrés dans la vie réelle. La couture, qui remonte probablement à l’âge de pierre, était et reste à certains endroits un élément puissant de la culture et de la tradition roumaines, car elle a été utilisée à la fois comme moyen de décoration de la maison et du vêtement outils utilisés dans la journée.
Pour moi, la couture me rappelle tant de bons souvenirs de mon enfance, quand je restais assise à côté de ma grand-mère et la regardais passer des heures à créer de magnifiques œuvres d'art pour décorer sa maison..
Ceci étant dit, revenons à notre propre art, en s'assurant d'abord que nous sommes sur le bon calque (ce serait le troisième), puis en créant notre deuxième icône..
Commencez à travailler sur le corps principal du cadre en créant un 106 x 106 px cercle (# CE9D78) avec un 4 px contour épais (# 2B3249), que nous regrouperons (Contrôle-G) puis centrer le centre sur le bord supérieur de la zone de dessin active sous-jacente.
Créer un plus petit 90 x 90 px cercle (# A8755A) avec un 4 px contour épais (# 2B3249), que nous regrouperons (Contrôle-G) et ensuite centrer sur celui de l'étape précédente.
Ajouter la toile en utilisant un 78 x 78 px cercle (# EFD4C5) avec un 4 px contour épais (# 2B3249), que nous regrouperons (Contrôle-G) puis centrez le centre sur la section précédente. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) les trois sections ensemble ainsi.
Commencez à travailler sur la partie inférieure du cadre en créant son contour à l'aide d'un 20 x 18 px rectangle (# 2B3249), que nous centrerons sur le bord inférieur de la zone de dessin active, en vous assurant de l’envoyer à l’arrière des grands cercles (clic droit> Transformer> Arranger> Envoyer à l'arrière).
Ajouter la section de remplissage en utilisant un plus petit 12 x 14 px rectangle (# CE9D78) que nous centrerons sur le bord supérieur de la forme précédemment créée.
Créé un 18 px grand 4 px épais Accident vasculaire cérébral ligne (# 2B3249), que nous centrerons sur la forme de l'étape précédente.
Commencez à travailler sur la petite vis de serrage en créant son corps principal à l'aide d'un 44 px large 4 px épais Accident vasculaire cérébral ligne (# 2B3249), que nous allons positionner vers la partie inférieure du cadre en laissant un 2 px écart entre elle et le contour plus grand.
Ajouter le bouchon de la vis avec un 8 x 8 px carré (# 2B3249), que nous centrerons sur le point d’ancrage droit du corps. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) les deux formes ensemble, en les envoyant ensuite à l'arrière de la section inférieure (clic droit> Transformer> Arranger> Envoyer à l'arrière).
Commencez à travailler sur la fleur décorative en créant la section centrale à l'aide de quatre 2 x 2 px carrés (# 2B3249) que nous allons positionner pour qu’ils finissent par former un signe plus. Groupe (Contrôle-G) les formes et ensuite centrez-les sur la toile.
Allume le Aperçu pixel mode (Alt-Control-Y) et créer la partie supérieure du pétale en haut à gauche de la fleur en utilisant trois jeux de quatre 2 x 2 px carrés (# E56F5C) que nous allons positionner les uns à côté des autres, en poussant chaque set 2 px de sorte qu'ils finissent par former un ensemble d'escalier. Groupe (Contrôle-G) les carrés, puis placez-les sur le côté gauche du signe plus, en veillant à laisser un 2 px écart entre eux.
Créez une copie de la section de l'étape précédente (Contrôle-C> Contrôle-F), que nous allons faire tourner (clic droit> Transformer> Rotation> 90º) puis réfléchissent horizontalement (clic droit> Transformer> Refléter> Horizontal), en plaçant la forme obtenue sous l’original.
Donner un contour au pétale en ajoutant quelques 2 x 2 px carrés (# 2B3249) autour de ses deux sections, en veillant à sélectionner et à grouper (Contrôle-G) tous ensemble une fois que vous avez terminé.
Créez les autres pétales avec trois copies (Contrôle-C> Contrôle-F trois fois) de celui sur lequel nous venons de terminer, que nous positionnerons autour du centre avec le signe plus, en les reflétant au besoin.
Continuez à ajouter des détails à la fleur en créant quatre copies (Contrôle-C> Contrôle-F quatre fois) de son centre plus le signe, que nous allons positionner sur le bord extérieur de l’espace situé entre chaque paire de pétales.
Terminez la fleur et l’icône elle-même en ajoutant des lignes diagonales à chacun de ses pétales, en utilisant quatre jeux de 2 x 2 px carrés (# 2B3249). Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes les formes composant la fleur ensemble, en faisant ensuite pour l'icône entière.
Nous en sommes maintenant à notre troisième et dernière icône, qui est composée d’un ensemble de cuillères traditionnelles faites à la main, qui constituent un autre moyen puissant d’expression de l’esprit des Roumains, utilisé non seulement pour décorer mais aussi comme outil au sein de leur foyer..
Je ne vais même pas trop parler de cette forme d'art, car j'espère vraiment qu'en créant cette petite icône, vous obtiendrez une curiosité assez puissante pour rechercher plus d'informations à ce sujet..
Cela étant dit, assurez-vous que vous êtes sur la bonne couche (ce serait la quatrième) et finissons ceci..
Commencez à travailler sur la première cuillère en créant un 8 x 8 px cercle (# D3685E) avec un 4 px contour épais (# 2B3249), que nous regrouperons (Contrôle-G) puis se positionner à une distance de 16 px à partir du bord gauche de la zone de dessin active, en veillant à l'aligner ensuite sur son bord supérieur.
Créer un peu plus grand 12 x 12 px cercle (# CE9D78) avec un 4 px contour épais (# 2B3249) en plus de quoi nous ajouterons un autre 4 x 4 px cercle (# 2B3249). Groupe (Contrôle-G) les trois formes ensemble, puis placez-les sous la section précédente.
Créez le premier jeu de pétales de la cuillère à l'aide de deux 10 x 10 px des rectangles (# CE9D78), que nous ajusterons en réglant la Rayon de leurs coins extérieurs inférieurs à 8 px et leurs supérieurs internes à 4 px de l'intérieur Transformer du panneau Propriétés du rectangle. Donner aux formes résultantes un 4 px contour épais (# 2B3249), regroupant individuellement (Contrôle-G) chaque pétale, puis les positionner sous la section précédente.
Créez les jeux de pétales restants avec trois copies (Control-C > Contrôle-F trois fois) de ceux que nous avons déjà, en les empilant verticalement les uns sous les autres.
Ajustez la couleur de certains pétales en les sélectionnant soigneusement à l’aide des touches Outil de sélection directe (A) puis en changeant la couleur en # A8755A.
Créer une copie (Contrôle-C> Contrôle-F) des deux sections circulaires de la cuillère, que nous placerons sous ses pétales, en veillant à les refléter horizontalement (clic droit> Transformer> Refléter> Horizontal) et changez la couleur de la forme de remplissage du plus grand en # A8755A.
Créez la section reliant le petit bol à la poignée de la cuillère en utilisant un 8 x 16 px rectangle (# A8755A) (1), que nous ajusterons en ajoutant une paire de points d’ancrage latéraux à une distance de 4 px à partir de son bord supérieur en utilisant le Ajouter un outil de point d'ancrage (+) (2).
Ensuite, sélectionnez individuellement et poussez les ancrages supérieurs de la forme vers l’intérieur par une distance de 2 px (clic droit> Transformer> Déplacer> Horizontal> + / - 4 px en fonction de quel côté vous commencez) (3) donnant à la forme résultante un 4 px contour épais (# 2B3249) (4).
Ajouter deux 8 px large 2 px épais Accident vasculaire cérébral lignes (# 2B3249) empilés verticalement 3 px les uns des autres, groupant (Contrôle-G) puis positionner la section actuelle sous le petit cercle.
Terminez la cuillère en créant son bol en utilisant un 16 x 16 px cercle (# CE9D78), que nous ajusterons en sélectionnant et en poussant son point d’ancrage inférieur vers le bas d’une distance de 6 px (clic-droit > Transformer> Déplacer> Vertical> 6 px). Donner à la forme résultante un 4 px contour épais (# 2B3249), regroupement (Contrôle-G) puis positionnez les deux formes sur la section précédente. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes les formes composant la cuillère ensemble, avant de passer à la suivante.
Commencez à travailler sur la deuxième cuillère de l'icône en créant un 8 x 20 px rectangle (# A8755A) que nous ajusterons en réglant la Rayon de ses coins supérieurs à 4 px de l'intérieur Transformer du panneau Propriétés du rectangle. Donner à la forme résultante un 4 px contour épais (# 2B3249) suivi de trois 2 x 2 px cercles (# 2B3249) empilés verticalement à 2 px les uns des autres, groupant (Contrôle-G) puis positionner les formes sur le côté droit de la première cuillère, à une distance de 24 px.
Ajouter la section circulaire en utilisant un 12 x 12 px cercle (# A8755A) avec un 4 px contour (# 2B3249) en plus de quoi nous ajouterons un plus petit 4 x 4 px cercle (# 2B3249), regroupement (Contrôle-G), puis positionnez les formes sous la section créée précédemment, de manière à ce qu'elles se chevauchent légèrement.
Créer un 12 x 16 px rectangle (# CE9D78) que nous allons transformer en diamant en ajoutant un nouveau point d’ancrage au centre de chacun de ses bords en utilisant le Ajouter un outil de point d'ancrage (+), enlever les coins après en utilisant le Supprimer l'outil de point d'ancrage (-). Donner à la forme résultante un 4 px contour épais (# 2B3249), regroupement (Contrôle-G) et les positionner ensuite à l’arrière de la section circulaire (clic droit> Transformer> Arranger> Envoyer à l'arrière).
Créer deux 8 x 8 px cercles (# 899E47) avec un 4 px contour épais (# 2B3249), regroupant individuellement (Contrôle-G) puis en les plaçant de chaque côté de la partie supérieure du losange.
Commencez à travailler sur le corps principal de la cuillère en créant un 8 x 10 px rectangle (# A8755A), suivi d'un plus grand 12 x 34 px un (# A8755A), que nous allons unir et positionner ensuite sous les sections précédentes.
Ajustez la forme en réglant la Rayon de ses coins supérieurs à 4 px, ajouter une paire de points d’ancrage latéraux à une distance de 14 px de son bord inférieur. Ensuite, sélectionnez et poussez individuellement les points d’ancrage inférieurs vers l’intérieur d’une distance de 4 px (clic droit> Transformer> Déplacer> Horizontal> + / - 4 px en fonction de quel côté vous commencez).
Créez la section la plus claire du corps en utilisant un 12 x 12 px carré (# CE9D78) que nous centrerons sur la forme la plus large, en la plaçant à une distance de 15 px de son bord supérieur.
Donner au corps plus grand un 4 px contour épais (# 2B3249), suivi de cinq 12 px large 2 px épais Accident vasculaire cérébral lignes (# 2B3249) empilés verticalement 3 px les uns des autres, que nous regrouperons (Contrôle-G) puis centrer le centre sur le rectangle le plus clair de la section.
Ajouter deux paires de deux 2 x 2 px cercles (# 2B3249) empilés verticalement 2 px les uns des autres, en positionnant l’un sur la partie supérieure du corps et l’autre sur le bas. Une fois que vous avez terminé, sélectionnez et regroupez toutes les formes composant la section actuelle à l’aide des touches Contrôle-G raccourci clavier.
Ajouter un 8 x 8 px cercle (# 899E47) avec un 4 px contour épais (# 2B3249), que nous regrouperons (Contrôle-G), puis positionnez-vous au-dessus de la section précédente, à une distance de 22 px à partir du bord inférieur de la zone de dessin active.
Terminez la cuillère en ajoutant le bol à l'aide d'un 16 x 22 px ellipse (# A8755A) avec un 4 px contour épais (# 2B3249), que nous regrouperons (Contrôle-G) puis positionnez-vous sous le petit cercle. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes les sections qui le composent également avant de passer à la troisième et dernière cuillère.
Commencez à travailler sur la troisième cuillère en créant un 12 x 16 px ellipse (# CE9D78) avec un 4 px contour épais (# 2B3249) en plus de quoi nous ajouterons un 4 x 4 px cercle (# 2B3249), regroupement (Contrôle-G) puis positionner les trois formes à une distance de 20 px à partir du bord droit de la deuxième cuillère.
Créé un 8 x 8 px cercle (# CE9D78) avec un 4 px contour épais (# 2B3249) que nous regrouperons (Contrôle-G) puis positionnez-vous sous la section précédente, à une distance de seulement 3 px.
Créer deux autres 8 x 8 px cercles (# D3685E) avec un 4 px contour épais (# 2B3249), que nous regrouperons individuellement (Contrôle-G) puis positionnez-vous sur les côtés des deux sections que nous avons jusqu'à présent.
Créer un peu plus grand 12 x 12 px cercle (# A8755A) avec un 4 px contour épais (# 2B3249) en plus de quoi nous ajouterons un 4 x 4 px cercle (# 2B3249). Groupe (Contrôle-G) les trois formes ensemble, puis placez-les sous la plus petite section circulaire.
Commencez à travailler sur la fleur de la cuillère en créant ses pétales à l'aide de quatre 10 x 10 px carrés (# CE9D78), que nous ajusterons en réglant la Rayon de deux de ses coins pour 6 px de l'intérieur Transformer du panneau Propriétés du rectangle. Donner aux formes résultantes un 4 px contour épais (# 2B3249), puis positionnez-les légèrement par-dessus la section précédente en sélectionnant et en regroupant (Contrôle-G) tous les quatre ensemble.
Changez la couleur des pétales en bas à gauche et en haut à droite en # A8755A, puis ajoutez un 8 x 8 px cercle (# D3685E) avec un 4 px contour épais (# 2B3249) en leur centre, en les regroupant ensuite en utilisant le Contrôle-G raccourci clavier.
Créer une copie (Contrôle-C> Contrôle-F) de la section circulaire située au-dessus de la fleur de la cuillère et positionnez-la en dessous, en veillant à modifier la couleur de sa # CE9D78.
Créez le bas du corps de la cuillère à l'aide d'un 20 x 32 px rectangle (# A8755A), à partir desquels nous allons supprimer deux 14 x 24 px ellipses (surlignés en rouge) en utilisant Éclaireurde Mode Minus Avant. Une fois que vous avez terminé, positionnez la forme obtenue sous la section précédente..
Met le Rayon des coins supérieurs de la forme résulta
Accentsconagua