Créez un vecteur pixel parfait icône dans Illustrator, Bloq Creative

Concevoir une icône de vecteur pixel parfait en utilisant des effets pour obtenir des formes uniques. Jory Raphael fournit les bases et introduit des outils Illustrator de base.

Les symboles et icônes sont des outils incroyablement puissants, et ont été utilisés par l'homme depuis plus de 100.000 ans pour raconter des histoires et communiquer des idées. outils d'illustration informatiques ont apporté la création de ces symboles à un nouveau niveau. Mais parfois, des concepts simples, comme une ligne ondulée, peut être plus difficile, ou du moins pas aussi simple, de reproduire sur un ordinateur qu'ils seraient à la main. Heureusement, Adobe Illustrator est emballé avec des techniques de gagner du temps et des moyens uniques pour mettre en œuvre des idées.

Ce tutoriel va vous montrer comment utiliser les effets intégrés d'Illustrator et d'outils de base pour simplifier le processus d'élaboration des formes complexes. Illustrator a deux types d'effets: Illustrator Effets et effets Photoshop. Les deux sont d'excellents moyens pour afficher un aperçu des styles avant de vous engager pleinement à eux. Mais les effets Photoshop, une fois pleinement appliqué, exigent la conversion des objets et des formes à raster, alors que la plupart des effets Illustrator gardent les données vectorielles.

monde Bitmap

Alors que de nombreuses icônes sont dessinées à l'aide des vecteurs, ils sont le plus souvent vu dans le monde bitmap des écrans d'ordinateur. L'attention portée aux détails au niveau des pixels est toujours important. En adhérant à une grille et précisant l'emplacement exact des éléments que nous les tirons, nous pouvons nous assurer que nos icônes vectorielles sont à la fois croquante et pixel parfait.

En suivant les étapes de ce tutoriel, vous allez créer votre propre icône portrait encadré. Allons-y!

01. Nouveau document

Créez un nouveau document Illustrator. Définissez les champs largeur / hauteur de 28px. Régler les unités de pixels. Cliquez sur OK. Ouvrez le menu Illustrator. Sélectionnez Préférences et guides - Grille ... Set Quadriller tous: et les subdivisions: à 10px. Cliquez sur OK. Ouvrir le menu Affichage. Sélectionnez Afficher la grille.

02. Tracer une ligne

Choisissez l'outil Segment de ligne (\ sur le clavier). Tracer une ligne tout en maintenant la touche maj. Dans la palette Transformation, sélectionner le point de référence de la partie centrale inférieure (petite grille dans la palette) et fixé à X et Y 14px à 15px. Régler la largeur de 22px. Ouvrez la palette Contour. Réglez 1pt.

03. Utilisation des zigzags

Choisir l'outil de sélection (V). Sélectionnez la ligne en cliquant dessus (ou cliquez n'importe où et faites glisser votre curseur sur la ligne). Ouvrez le menu Effets, sélectionnez Déformer - Transformer, puis sélectionnez Zig Zag .... Set 'Taille:' à 1px et Ridges par segment: à 5px. Les points de consigne pour lisser.

04. courbes réelles

Avec l'effet Zig Zag appliqué, nous avons toujours techniquement une ligne de vecteur droite avec un aspect superposé d'être curvy. Aux fins de ce tutoriel, nous voulons cartographier la ligne de vecteur à la courbe que nous avons créé. Ouvrez le menu Objet et sélectionnez Décomposer l'aspect.

05. Tracez un cercle

Choisissez l'outil Ellipse (L sur le clavier). Cliquez partout sur le plan de travail. Dans la fenêtre contextuelle, définissez les champs de largeur et de hauteur à 5px. Sélectionnez le cercle résultant puis choisissez l'outil Ciseaux (C sur le clavier). Cliquez sur les points d'ancrage haut et à gauche sur le cercle.

Aligner les points de terminaison 06.

Choisissez l'outil de sélection (V sur le clavier). Sélectionnez la plus grande partie du cercle. Appuyez sur Supprimer. Sélectionnez l'arc restant et, en utilisant la palette Transformer, choisir le point de référence haut à droite. Réglez X et Y 3PX à 14px pour aligner les points de terminaison dans l'arc.

07. Faire une seule ligne

Avec l'outil de sélection, sélectionnez l'arc et la ligne (cliquez n'importe où et faites glisser le curseur sur les deux pièces, ou maintenez la touche Maj enfoncée tout en cliquant sur les deux pièces). Ouvrez le menu Objet, sélectionnez Chemin d'accès, puis sélectionnez Rejoindre. Cela fait tourner les deux chemins séparés en une seule ligne.

08. lignes en double

Sélectionnez la nouvelle ligne que vous venez de créer. Puis, en utilisant la palette Transformer, sélectionnez le point de référence en haut à gauche et réglez X et Y à 0.5px. Avec la ligne étant toujours sélectionnée, maintenez l'option de votre clavier et déplacer la ligne de le dupliquer.

09. Faire pivoter la ligne

Sélectionnez la nouvelle ligne que vous venez de créer et appuyez sur R pour appeler Faire pivoter, puis cliquez sur Entrée. Dans la fenêtre contextuelle, réglez l'angle à 180 # 730 ;. Utilisation de la palette Transformation, sélectionnez le point de référence en bas à droite et définir à la fois X et Y à 27.5px.

10. Joignez-vous aux lignes

Pour créer le plein cadre, sélectionnez les deux lignes, les copier (Edition> Copier), puis les coller en place (Edition> Coller sur place). Appuyez sur R pour appeler Rotation et entrée 90 # 730 ;. Sélectionnez les quatre lignes, ouvrez le menu Objet, sélectionnez Chemin, puis sélectionnez Rejoindre.

11. Remplir la couleur

Nous avons maintenant fait les grandes lignes de l'icône de cadre. Sélectionnez la nouvelle forme, ouvrez le menu Objet et choisissez Expand. Laissez les paramètres par défaut dans le menu contextuel et cliquez sur OK. Choisissez l'outil de sélection directe (A sur le clavier), cliquez sur le bord intérieur du contour et appuyez sur supprimer.

12. Construire un cadre carré

Sélectionnez l'outil Rectangle (M sur le clavier), puis cliquez partout sur le plan de travail. Dans la fenêtre contextuelle, largeur et hauteur fixé à 18px. Cliquez sur OK. Dans la palette Transformation, sélectionner le point de référence du centre et de définir à la fois X et Y à 14px.

13. Faire unique

Sélectionnez le cadre extérieur et le carré. Dans la palette Pathfinder (Fenêtre> Pathfinder), sous Modes de la forme, sélectionnez le moins avant. Cela soustrait l'objet le plus avant (la place) de l'objet derrière (le cadre) pour créer une nouvelle forme unique.

14. Dessiner une tête

Pour dessiner la tête d'une figure dans notre cadre d'image, dessiner un rectangle 6px par 8px (M sur le clavier, puis cliquez partout) dans le centre de l'ouverture du cadre. Dans la palette Transformation, sélectionner le point de référence de la partie centrale supérieure et fixé à X et Y 14px à 7PX.

15. Lui donner forme

Pour le rendre plus comme une tête, sélectionnez le nouveau rectangle et ouvrez le menu Effets. Ensuite, sélectionnez Esthétiques et choisissez Coins arrondis. Dans le menu contextuel, choisissez un rayon de 3px, puis choisissez Décomposer l'aspect dans le menu des objets pour en faire un seul objet.

16. Construire les épaules

Dessiner un ovale avec l'outil Ellipse (appuyez sur L, puis cliquez sur partout). Dans le menu contextuel, définissez la largeur de 12px et la hauteur à 6px. Sélectionnez le point de référence central haut dans la palette Transformer et réglez X et Y 14px à 16px.

17. Créer le corps

Qu'est-ce qu'un ensemble d'épaules sans corps? Utilisez l'outil de rectangle (Appuyez sur M, puis cliquez sur n'importe où) et dessinez un rectangle 12px par 3px. Dans la palette Transformation, sélectionner le point de référence de la partie centrale supérieure et fixé à X et Y 14px à 19px.

18. Fusionner les formes

Sélectionnez tous les objets sur le plan de travail (cliquez n'importe où et faites glisser votre curseur sur toutes les pièces, ou maintenez la touche Maj enfoncée tout en cliquant sur chacun), et, dans la palette Pathfinder, sélectionnez Unite (le premier mode de forme). Ce qui était autrefois quatre formes est maintenant une seule forme.