Share
Ce que vous allez créerVous êtes-vous déjà demandé à quoi cela doit ressembler d'être un scientifique fou qui crée toutes sortes d'inventions mystérieuses? Si tel est le cas, ne vous posez plus de questions, car dans le tutoriel d'aujourd'hui, nous allons nous lancer dans la création d'un petit pack d'icônes rétro sur le thème de la science, utilisant certaines des formes et des outils les plus fondamentaux proposés par Illustrator.
En outre, n'oubliez pas que vous pouvez toujours développer le projet en allant voir GraphicRiver où vous trouverez littéralement des pages sur des pages d'icônes sur le thème de la science..
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 autre 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..
En supposant que vous soyez déjà passé à la couche suivante (ce serait la deuxième) après la création des grilles de référence, démarrons le projet en zoomant sur notre première grille de référence, sur laquelle nous allons commencer à travailler sur le petit support en verre. tubes à essai.
Commencez à travailler sur le premier tube en créant un 12 x 88 px rectangle que nous colorierons avec # 56C1AD puis positionner à une distance de 2 px à partir du bord supérieur de la zone de dessin active et 30 px de sa gauche.
Ajustez la forme que nous venons de créer en réglant la Rayon de ses coins inférieurs à 6 px de l'intérieur Transformer du panneau Propriétés du rectangle.
Donner un contour à la forme obtenue à l’aide du bouton 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 # 5B4032 puis en retournant son Remplir avec son Accident vasculaire cérébral (Shift-X), en prenant soin de régler sa Poids à 4 px.
Ajouter la lèvre du tube en utilisant un 20 x 4 px rectangle (# 5B4032), que nous allons positionner sur la partie supérieure de son contour, en l'alignant au centre sur les formes précédemment créées.
Donner au tube une ombre dure en utilisant un 12 x 6 px rectangle (# 5B4032) que nous centrerons sur le bord supérieur de la plus grande forme de remplissage. Une fois que vous avez terminé, sélectionnez et regroupez les quatre formes à l’aide des touches Contrôle-G raccourci clavier.
Créez deux copies du tube sur lequel nous venons de terminer de travailler (Contrôle-C> Contrôle-F deux fois), puis répartissez-les sur le côté droit en les plaçant à une distance de 4 px l'un de l'autre. Une fois que vous avez terminé, sélectionnez-les et regroupez-les à l'aide de la touche Contrôle-G raccourci clavier.
Commencez à travailler sur le support en bois en créant sa base à l'aide d'un 104 x 16 px rectangle (# C48755) avec un 4 px contour épais (# 5B4032), que nous centrerons sur le bord inférieur de la zone de dessin active.
Ajouter la petite étiquette en utilisant un 20 x 8 px rectangle (# 5B4032) sur les côtés desquels nous ajouterons deux plus petites 8 x 4 px ceux (# 5B4032). Sélectionner et grouper (Contrôle-G) les trois formes ensemble, en les alignant au centre avec la plus grande section en bois, en veillant à créer un autre groupe par la suite.
Créez les sections latérales du rack en utilisant deux 10 x 64 px des rectangles (# AF7245) avec un 4 px contour épais (# 5B4032), que nous regrouperons individuellement (Contrôle-G) puis positionnez-les sur la section précédente en les alignant sur ses bords extérieurs.
Ajoutez la partie supérieure du rack à l'aide d'un 104 x 12 px rectangle (# C48755) avec un 4 px contour épais (# 5B4032), que nous regrouperons (Contrôle-G) puis positionnez-vous sur les formes précédemment créées.
Ajoutez les petites vis avec deux 4 x 4 px cercles (# 5B4032) que nous allons positionner sur le dessus de sorte qu’ils s’alignent avec les sections latérales du rack. Une fois que vous les avez en place, sélectionnez et groupez (Contrôle-G) les à la section sous-jacente.
Ensuite, prenez quelques instants et ajoutez les ombres dures à l’aide de deux 10 x 6 px des rectangles (# 5B4032) pour les sections latérales du présentoir en bois, suivies de trois 12 x 6 px ceux (# 5B4032) pour les tubes de verre suspendus.
Créez la section horizontale contenant les tubes à l'aide d'un 108 px large 4 px épais Accident vasculaire cérébral ligne (# 5B4032), que nous centrerons sur le rack, en le plaçant à une distance de 20 px de sa partie supérieure, en veillant à l'envoyer ensuite à l'arrière (clic droit> Organiser> Envoyer à l'arrière).
Terminez le support et l’icône elle-même en dessinant les petits bras structuraux diagonaux à l’aide d’un 4 px épais Accident vasculaire cérébral avec la couleur définie à # 5B4032. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes ses sections composant ensemble, en faisant ensuite la même chose pour toute l'icône.
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 petit microscope..
Créez la section inférieure de la base en utilisant un 80 x 12 px rectangle (# 6B5B51) avec un 4 px contour épais (# 5B4032), que nous regrouperons (Contrôle-G) puis centrer le centre sur le bord inférieur de la zone de dessin active sous-jacente.
Ajouter la partie supérieure de la base en utilisant un 96 x 12 px rectangle (# C48755) avec un 4 px contour épais (# 5B4032), que nous regrouperons (Contrôle-G) puis positionnez-vous sur les formes précédemment créées.
Créer deux 108 px large 4 px épais Accident vasculaire cérébral lignes (# 5B4032) que nous allons positionner sur les bords supérieur et inférieur du contour, en ajoutant un autre au centre de la forme de remplissage par la suite. Une fois que vous avez terminé, sélectionnez et regroupez toutes les formes de la section supérieure à l’aide des touches Contrôle-G raccourci clavier.
Créez une ombre forte sur la partie inférieure de la base, en utilisant un 80 x 6 px rectangle (# 5B4032), que nous centrerons sur son bord supérieur. Une fois que vous avez terminé, groupez (Contrôle-G) l'ombre à sa section, faisant de même pour toute la base après.
Commencez à travailler sur le bras en créant un 12 x 72 px rectangle que nous colorierons avec # 82756C puis positionnez-vous sur la base à une distance de 30 px de son bord gauche.
Créer un plus petit 12 x 14 px rectangle (# 82756C) et placez-le sur le côté gauche du plus grand de l'étape précédente, en unissant les deux en une seule forme plus grande à l'aide de Éclaireurde Unir le mode forme.
Sélectionnez le point d'ancrage en haut à gauche de la section inférieure à l'aide de la touche Outil de sélection directe (A) puis poussez-le vers le bas à une distance de 6 px en utilisant le Bouge toi outil (clic droit> Transformer> Déplacer> Vertical> 6 px).
Donner à la forme résultante un 4 px contour épais en utilisant le Accident vasculaire cérébral méthode, en veillant à définir sa couleur sur # 5B4032.
Ajouter la petite vis avec un 4 x 4 px cercle (# 5B4032), que nous allons positionner au bas du bras en laissant un 4 px écart autour de lui. 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 la vis de serrage supérieure en créant un 8 x 8 px rectangle (# 5B4032), que nous allons positionner sur le bras du microscope.
Créez la section la plus fine de la vis en utilisant un 4 x 2 px rectangle (# 5B4032) (2), auxquels s'ajoutera un 16 x 4 px rectangle (# 5B4032) (3) suivi d'un légèrement plus étroit 12 x 4 px un (# 5B4032) (4). Placez les trois formes au-dessus du rectangle de l’étape précédente en sélectionnant et en regroupant (Contrôle-G) eux ensemble ensuite.
Créer un 16 x 8 px rectangle (# 5B4032), que nous placerons sur le côté gauche du bras du microscope, à une distance de 12 px de son bord supérieur.
Ajouter la tige de support en utilisant un 4 x 68 px rectangle (# 5B4032), que nous allons également positionner sur le côté gauche du bras, en veillant à l'envoyer ensuite à l'arrière de toutes les autres formes (clic droit> Organiser> Envoyer à l'arrière).
Ajoutez la petite molette de réglage en utilisant un 16 x 16 px cercle (# C48755) avec un 4 px contour épais (# 5B4032), en plus de quoi nous ajouterons un plus petit 4 x 4 px cercle (# 5B4032). Groupe (Contrôle-G) les trois formes ensemble, puis les positionner au centre du bras du microscope, à une distance de 22 px de la plus grande base.
Donner au volant une ombre dure en créant un 14 x 14 px carré (# 5B4032) que nous ajusterons en réglant la Rayon de son coin en bas à droite pour 14 px de l'intérieur Transformer du panneau Propriétés du rectangle. Positionnez la forme obtenue sur la moitié inférieure de la roue en veillant à l'aligner sur le côté droit..
Masquer l'ombre à l'aide d'une copie (Control-C) de la forme de remplissage du bras en tant que Masque d'écrêtage, que nous allons coller devant (Contrôle-F) et alors clic droit> Make Clipping Mask. Une fois que vous avez terminé, envoyez l’ombre à l’arrière de la roue à l’aide du bouton Organiser> Renvoyer, sélection et regroupement (Contrôle-G) toutes les sections composant le bras ensemble.
Commencez à travailler sur le corps principal du microscope en créant un 18 x 40 px rectangle (# 6B5B51) avec un 4 px contour épais (# 5B4032), que nous regrouperons (Contrôle-G) puis se positionner à une distance de 16 px du bras et 36 px de la plus grande base.
Créez le tube d'observation à l'aide d'un 10 x 10 px carré (# 5B4032) en plus de quoi nous ajouterons un plus petit 6 x 4 px rectangle (# 5B4032) suivie d'un peu plus large 14 x 4 px rectangle (# 5B4032). Groupe (Contrôle-G) les trois formes ensemble, en les positionnant sur le corps plus grand du tube.
Donnez une petite insertion au corps le plus large en créant un 6 x 6 px carré (# 5B4032) que nous centrerons sur son bord inférieur.
Créez la partie supérieure de l'objectif à l'aide d'un 10 x 10 px carré (# D8A466) avec un 4 px contour épais (# 5B4032) au fond desquels nous ajouterons un peu plus large 18 x 4 px rectangle (# 5B4032) suivi d'un 10 x 6 px ombre dure sur le dessus (# 5B4032). Groupe (Contrôle-G) les quatre formes ensemble, puis placez-les au bas du corps plus grand du microscope.
Ajouter la section inférieure de l'objectif à l'aide d'un 10 x 2 px rectangle (# 5B4032), en dessous de laquelle nous ajouterons un 22 x 4 px un (# 5B4032). Groupe (Contrôle-G) les deux formes ensemble et ensuite les placer sous la section précédente.
Créer la lentille réelle en utilisant un 10 x 8 px ellipse (# 56C1AD) avec un 4 px contour épais (# 5B4032), que nous regrouperons (Contrôle-G), puis positionnez-la sur la section précédente, de sorte que sa moitié supérieure finisse par la recouvrir. Une fois que vous l'avez en place, assurez-vous de l'envoyer derrière la section plus large en clic droit> Organiser> Envoyer à l'arrière-plan, sélection et regroupement (Contrôle-G) toutes les sections inférieures du microscope ensemble.
Ajoutez la petite molette de réglage en utilisant un 4 x 4 px carré (# 5B4032), à laquelle nous ajouterons un 4 x 8 px rectangle (# 5B4032). Groupe (Contrôle-G) et positionnez les deux formes sur le côté inférieur droit du corps plus grand du microscope, en sélectionnant et en regroupant (Contrôle-G) toutes les sections qui le composent après.
Commencez à travailler sur la bonne section du bras en créant un 32 x 12 px rectangle (# C48755), que nous ajusterons en réglant la Rayon de ses coins droits à 6 px de l'intérieur Transformer du panneau Propriétés du rectangle. Une fois que vous avez terminé, placez la forme obtenue à une distance de 52 px à partir de la base du microscope.
Créer un plus petit 14 x 12 px rectangle (# C48755) et placez-le sous la section précédemment créée, en réunissant les deux en une seule forme plus grande à l'aide de Éclaireurde Unir le mode forme.
Ajustez la forme obtenue en sélectionnant d’abord son coin inférieur droit à l’aide des touches Outil de sélection directe (A) puis en le retirant en appuyant sur Effacer. presse Contrôle-j pour fermer le chemin résultant, puis lui donner un 4 px contour épais (# 5B4032), en veillant à sélectionner et à grouper (Contrôle-G) les deux ensemble ensuite.
Terminez le bras extensible en ajoutant la petite vis en utilisant un 4 x 4 px cercle (# 5B4032), suivi d'un 8 x 4 px insertion rectangulaire (# 5B4032) ensuite. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes ses formes composant ensemble.
Placez l’ombre sur le microscope en utilisant un 14 x 12 px rectangle (# 5B4032) que nous ajusterons en réglant la Rayon de son coin en bas à droite pour 12 px de l'intérieur Transformer du panneau Propriétés du rectangle. Positionnez la forme obtenue sur la moitié inférieure du bras en extension en prenant soin de l’envoyer à l’arrière en la sélectionnant à la fois avec le plus grand microscope, puis clic droit> Organiser> Envoyer à l'arrière.
Terminez le microscope et l’icône elle-même en ajoutant la scène à l’aide d’un 48 x 4 px rectangle (# 5B4032) que nous allons positionner sur le côté droit du bras du microscope, à une distance de 4 px de sa plus grande base. Une fois que vous avez terminé, sélectionnez et groupez (Contrôle-G) toutes les sections de composition de l'icône avant de passer à l'étape suivante.
Nous en sommes maintenant à notre troisième et dernière icône. Supposons que vous passiez au calque suivant, zoomez sur sa grille de référence et terminons les choses.!
Créez la section inférieure de la base de l'appareil à l'aide d'un 88 x 12 px rectangle (# AF7245) avec un 4 px contour épais (# 5B4032), que nous centrerons sur le bord inférieur de la zone de dessin active.
Ajouter les petits segments de côté en utilisant deux 6 x 4 px des rectangles (# 5B4032), que nous alignerons par le bas sur la section visuelle de la forme de remplissage. Une fois que vous avez terminé, sélectionnez et regroupez les quatre formes à l’aide des touches Contrôle-G raccourci clavier.
Créez la section supérieure de la base à l'aide d'un 104 x 28 px rectangle (# C48755) avec un 4 px contour épais (# 5B4032), que nous regrouperons (Contrôle-G) puis positionnez-vous sur les formes précédentes.
Ajouter les petites vis à l'aide de quatre 4 x 4 px cercles (# 5B4032), que nous allons positionner à une distance de 4 px de chacun des coins de la plus grande section.
Ajoutez l'étiquette en utilisant 28 x 16 px rectangle (# 5B4032), aux côtés desquels nous ajouterons deux plus petites 8 x 8 px carrés (# 5B4032). Groupe (Contrôle-G) associez les trois formes ensemble, puis centrez-les sur la plus grande section, en sélectionnant et en regroupant (Contrôle-G) toutes ses formes composant aussi bien.
Ajoutez l’ombre dure à la partie inférieure de la base, en utilisant un 88 x 6 px rectangle (# 5B4032) que nous centrerons sur son bord supérieur. 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.
Commencez à travailler sur le haut du corps de l'appareil en créant un 72 x 12 px rectangle (# 82756C) avec un 4 px contour épais (# 5B4032), que nous regrouperons (Contrôle-G) puis positionnez-vous sur la plus grande base.
Ajoutez les lignes de détail horizontales à l'aide de deux 84 px large 4 px épais Accident vasculaire cérébral lignes (# 5B4032), que nous allons positionner sur les sections supérieure et centrale du contour de la section. Une fois que vous les avez en place, sélectionnez et groupez (Contrôle-G) ensemble avec les grands rectangles avant de passer à l'étape suivante.
Créez le petit bouton en utilisant un 12 x 6 px rectangle (# C48755) avec un 4 px contour épais (# 5B4032), en plus de quoi nous ajouterons un autre légèrement plus étroit 8 x 6 px rectangle (# 5B4032). Groupe (Contrôle-G) les trois formes ensemble, puis placez-les au-dessus de la section précédente, à une distance de 12 px de son bord gauche.
Ajouter la prise de l'appareil en utilisant un 24 x 12 px rectangle (# 6B5B51) avec un 4 px contour épais (# 5B4032), au fond duquel nous ajouterons un plus petit 8 x 6 px rectangle (# 5B4032). Groupe (Contrôle-G) toutes les trois formes ensemble, puis placez-les sur le côté droit du bouton, à une distance de 12 px à partir de cela.
Créez la base de l'ampoule à l'aide d'un 16 x 12 px rectangle (# D8A466) avec un 4 px contour épais (# 5B4032) au centre de laquelle nous ajouterons un autre 16 x 4 px rectangle (# 5B4032). Groupe (Contrôle-G) les trois formes ensemble, puis placez-les sur la section créée précédemment.
Commencez à travailler sur la section de verre de l’ampoule en créant un 16 x 4 px rectangle (# 56C1AD), que nous allons positionner au-dessus de la base à partir de l'étape précédente.
Ensuite, créez un 32 x 32 px cercle (# 56C1AD) que nous allons positionner au-dessus du petit rectangle, à une distance de 4 px de son bord supérieur.
Ouvrez le tracé du cercle en sélectionnant son point d’ancrage inférieur à l’aide des touches Outil de sélection directe (A) puis en appuyant sur Effacer. Faites de même pour le rectangle 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 le retirant en appuyant sur Effacer.
Unissez les deux chemins en une seule forme plus grande en les sélectionnant tous les deux puis en appuyant sur Contrôle-j deux fois.
Lisser les transitions de la forme résultante en ajustant ses courbes à l'aide des poignées de son ancre tout en Aperçu pixel mode (Alt-Control-Y). Prenez votre temps et une fois que vous avez terminé, passez à l'étape suivante..
Donner à la forme résultante un 4 px contour épais (# 5B4032) en utilisant le Accident vasculaire cérébral méthode, sélection et regroupement (Contrôle-G) ensuite, elle et le remplissage sous-jacent forment ensemble.
Commencez à travailler sur le filament en créant deux 8 x 8 px cercles avec un 4 px épais Accident vasculaire cérébral (# 5B4032) à une distance horizontale de 2 px les uns des autres, que nous placerons au centre de l'ampoule, à une distance de 10 px de son bord supérieur.
Ouvrez les sections intérieures inférieures du tracé de chaque cercle en ajoutant un nouveau point d'ancrage à l'aide de la touche Ajouter un outil de poin
Accentsconagua