Share
Dans ce didacticiel, vous apprendrez à utiliser une combinaison de la méthode SSR (Scale, Shear, Rotate) et des guides Adobe Illustrator pour créer un robot isométrique. Les images isométriques sont parfaites pour les diagrammes et les sprites de jeux. Voyons maintenant comment fabriquer ce mignon robot isométrique…
Ouvrez un nouveau document Illustrator. La taille et la résolution du document ne sont pas trop importantes, alors choisissez quelque chose avec lequel vous êtes à l'aise..
Avant de commencer, il est important de définir ce que nous voulons dire lorsque nous disons que nous allons tirer un isométrique objet.
La perspective isométrique est une façon de dessiner un objet 3D en 2D. Il est utilisé dans les dessins techniques, les cités de dessins animés et les jeux 2D qui veulent ressembler à la 3D. La perspective isométrique est préférable à la perspective normale car tous les objets auront la même taille, quelle que soit leur distance vis-à-vis du spectateur..
Nous allons commencer par mettre en place une grille isométrique pour nous guider. Les techniques que je vais vous montrer dans cet article reposent sur la méthode SSR, qui signifie échelle, tondre, tourner. En plus de cette méthode, les guides Illustrator seront utiles plus tard pour aligner des formes dans une perspective isométrique..
Créez les guides à l'aide de cette astuce: Comment créer une grille isométrique en moins de 2 minutes. Activez ensuite les guides intelligents sous Afficher> Guides intelligents..
Pour faire un rappel rapide de la méthode SSR, nous allons créer le recto, le côté et le haut d'un cube. Commencez par dessiner un carré à l'aide de l'outil Rectangle (M) et en maintenant la touche Maj enfoncée tout en faisant glisser la souris. Faites trois copies du carré, qui deviendra le haut et les deux côtés d'un cube isométrique.
Nous allons commencer par faire le top. Cliquez avec le bouton droit de la souris sur le cube et sélectionnez Transformer> Echelle et entrez une valeur de 86,062% dans le champ de saisie Non-uniforme> Vertical. Ensuite, cliquez à nouveau avec le bouton droit de la souris et sélectionnez Transformer> Cisaillement, puis entrez un angle de cisaillement de 30 degrés. Pour la dernière étape, cliquez avec le bouton droit de la souris et sélectionnez Transformer> Rotation, puis entrez un angle de -30 degrés..
Vous pouvez également utiliser la fenêtre Transformer avec la même procédure - modifiez simplement la hauteur (notée H) à 86,062%, puis le cisaillement à 30 degrés et enfin la rotation à -30 degrés. Les deux méthodes produiront les mêmes résultats.
Pour créer les côtés gauche et droit du cube, nous pouvons suivre la même procédure, avec différents angles de cisaillement et de rotation. Ces valeurs sont résumées dans l'image ci-dessous.
Avec ces techniques à notre actif, nous pouvons passer à la personnalisation de notre robot. Le robot que je vais créer dans ce tutoriel est le personnage principal d'un jeu d'isométrie sur lequel j'ai travaillé, Robotok.io.
Commencez par activer la grille 2D normale en cliquant sur Affichage> Afficher la grille (Ctrl + "). Le robot étant plutôt rectangulaire, nous pouvons utiliser l'outil Rectangle (M) pour préciser les principales caractéristiques. L'outil Stylo (P) et l'outil de sélection directe (A) sont également utiles et nous permettent de donner au robot un peu de caractère.
En utilisant l'avant du robot comme référence, nous pouvons dessiner le côté du robot. Ici, j'ai utilisé l'outil de segment de ligne (\) pour placer des lignes bleues derrière l'image afin d'aligner les sections du corps du robot. Vous pouvez déplacer les lignes de haut en bas sur la partie du dessin sur laquelle vous travaillez actuellement. Le fait d’aligner correctement les pièces facilitera beaucoup les étapes suivantes, lorsque nous utiliserons ces vues pour rendre le robot isométrique..
Faites une copie de la vue latérale et changez la couleur du trait en gris. Nous pouvons maintenant dessiner les bras au-dessus de la vue latérale, ce qui facilite la visualisation de nos nouvelles lignes. Nous pouvons également ajuster l'emplacement de nos lignes horizontales bleues pour nous aider à aligner la vue latérale du bras avec l'avant.
Le robot a également besoin d'un sac à dos pour tenir toutes ses affaires, alors dessinons-le sur la vue de côté en utilisant la même méthode..
Enfin, dessinez l’arrière du robot en utilisant les côtés avant et latéraux comme référence. Ici, j’ai utilisé des lignes plus claires à l’arrière de la tête pour que ces lignes se démarquent des autres, car elles indiquent le volume de la tête..
Maintenant que les plans sont en place, nous pouvons commencer à construire le robot 3D en utilisant notre méthode de SSR isométrique et les guides que nous avons élaborés précédemment. Commençons par travailler uniquement avec la tête et le corps (laissez les bras et le sac à dos ouverts pour le moment) du robot pour créer une vue de face isométrique..
Faites une copie de la face avant du robot, retirez les bras et faites le SSR à gauche (échelle: 86.062%, cisaillement: -30, rotation: -30). Répétez le processus de SSR avec le dos du robot, en veillant à retirer les bras.
Maintenant, nous ferons la même chose avec le côté du robot (sans bras), mais nous le transformerons en côté droit (Échelle: 86,062%, Cisaillement: 30, Rotation: 30). Faites une copie que nous pouvons utiliser pour l'autre côté du robot.
Pour positionner les deux côtés du robot, sélectionnez tout le côté à l'aide de l'outil de sélection (V), puis passez à l'outil de sélection directe (A)..
Faites glisser le point d'ancrage supérieur gauche pour qu'il chevauche le coin correspondant dans la vue de face. Quand le guide intelligent dit ancre (en texte cyan), relâchez le bouton de la souris.
Faites la même chose avec le côté éloigné du robot. Une fois que le côté éloigné du robot a été placé, maintenez-le sélectionné et appuyez sur Ctrl + Maj + [pour déplacer ces formes derrière les autres..
Aligner l'arrière de la tête du robot est un peu plus délicat. À ce stade, vous devez désactiver la grille (Ctrl + ") et activer nos guides d'isométrie (Ctrl +;). Sélectionnez le robot entier (V) et passez à l'outil Sélection directe (A). Sélectionnez l'un des points sur en haut de la tête du robot et faites-la glisser pour l’aligner avec le guide.Vous pouvez utiliser cette ligne de guidage pour aligner l’arrière du robot avec l’avant.
Sélectionnez le verso (V) et passez à l'outil de sélection directe (A). Faites glisser le robot d'un point situé sur le dessus de sa tête vers la même ligne que celle avec laquelle nous avons aligné l'avant. Maintenant, faites-le glisser le long de cette ligne jusqu'à ce que le contour arrière s'aligne avec les côtés de la tête du robot..
Maintenant, nous pouvons sélectionner les points les plus en avant sur la vue latérale (voir image) avec l'outil de sélection directe (A), en utilisant la touche Maj enfoncée pour obtenir les deux points en même temps. Faites glisser ces points pour les faire correspondre avec le dos de la tête (encore une fois, en attendant que le mot ancre apparaît en texte cyan avant la publication). Une fois que ces points sont en place, nous n’avons plus besoin de l’arrière du robot et pouvons le supprimer en sélectionnant toutes les formes à l’aide de l’outil de sélection (V) et en cliquant sur Supprimer..
Pour terminer la forme de la tête, nous pouvons utiliser l'outil Crayon (P) pour dessiner dans le haut. Cliquez sur chacun des 4 points qui constituent le haut de la tête du robot, chaque fois en attente du mot ancre apparaître. Enfin, connectez le dernier bord. Appuyez plusieurs fois sur Ctrl + [pour déplacer cette nouvelle forme jusqu'à ce que vous puissiez voir toutes les formes d'antenne. Si vous allez trop loin, utilisez Ctrl +] pour le faire avancer de nouveau.
L'antenne du robot est composée de deux pièces: un cône et une sphère.
Pour créer un cône isométrique, nous commençons par deux cercles superposés (étape a), dont l’un est plus grand que l’autre, et nous les forçons à être plats comme le sommet d’un cube (étape b). En maintenant la touche Maj enfoncée, déplacez le petit cercle verticalement vers le haut jusqu'à ce que la forme atteigne la hauteur souhaitée (étape c). A l'aide de l'outil Ajouter un point d'ancrage (+), ajoutez des points sur les côtés du cercle inférieur, comme indiqué (étape d). Utilisez ensuite l'outil de sélection directe (A) pour sélectionner les points intérieurs des deux cercles et supprimez-les à l'aide de la touche Suppr (étape e). Revenez dans l'outil Crayon (P) et connectez les points restants (étape f) pour créer votre cône (étape g)..
Ensuite, nous pouvons faire la sphère isométrique pour le haut de l'antenne. Tracez un cercle, et c'est tout! Une sphère isométrique est simplement un cercle régulier (étape h). Positionnez l'antenne sur la tête du robot.
Ensuite, nous pouvons positionner le corps du robot en utilisant les mêmes techniques que nous avons utilisées pour fabriquer la tête. Supprimez les formes du cou (car nous ne pouvons pas voir le cou de cette vue) et le côté éloigné du corps qui n'est plus visible. Cela aidera à nettoyer notre vision du robot.
Utilisez l'outil de sélection (V) pour sélectionner le côté fermé du robot (jambes et corps). Basculez vers l'outil de sélection directe (A) et faites glisser le côté du corps d'un coin pour l'aligner sur le coin correspondant situé à l'avant..
Créez maintenant une copie du côté (Ctrl + C, Ctrl + V) et faites-la glisser vers le côté éloigné du robot en utilisant la même méthode pour aligner les points (voir le côté gauche de l'image)..
Pour dessiner dans le haut du corps, passez en mode Plan à l’aide de Ctrl + Y et utilisez l’outil Crayon (P) pour relier les quatre points situés sur le dessus du corps (de la même manière que nous avons créé le haut de la tête). Revenez en arrière en appuyant de nouveau sur Ctrl + Y.
Nous allons maintenant nous concentrer sur les jambes. La vue latérale de la jambe est déjà en place, nous pouvons donc l’utiliser comme guide pour la partie avant. Utilisez l'outil de sélection directe (A) pour sélectionner des points par paires. Vous pouvez déplacer les formes pour les aligner avec les côtés. Utilisez la touche Maj enfoncée pour sélectionner deux points à la fois et faites-les glisser pour les aligner avec le côté de la jambe. Les guides intelligents vous aideront à aligner les points exactement.
Lorsque vous avez terminé une étape, utilisez l'outil de sélection (V) pour sélectionner toutes les formes et en faire une copie (Ctrl + C, Ctrl + V). Placez la nouvelle copie comme l'autre jambe du robot. Appuyez maintenant sur Ctrl + Maj + [pour déplacer cette jambe vers la couche la plus basse, de sorte qu'elle se trouve derrière le corps du robot. Supprimer les formes inutilisées pour nettoyer l'image.
À ce stade, le corps du robot devrait être complet et nous pouvons passer aux bras..
Tout d’abord, faites une copie du robot et regroupez la tête et le corps séparément. Changez la couleur du trait en gris. Isolez les différentes formes de bras et SSR dans les vues de face et de côté.
Le bras est composé de quatre parties: l'épaule, le haut du bras, l'avant-bras et la griffe.
Nous allons commencer par travailler sur l'avant-bras, car c'est le plus simple à manipuler. Alignez le devant et les côtés des bras avec le corps gris et les uns avec les autres. Ajustez les points situés sur le côté de l'avant-bras pour les aligner sur le devant, en veillant à sélectionner les points par paires pour conserver la perspective..
Utilisez l'outil Crayon (P) pour remplir le reste de l'avant-bras. Pour cette étape, il est utile de faire des copies de formes à utiliser comme guides (comme nous l'avons fait avec la tête et le corps).
La partie délicate des bras est le cylindre qui relie l’épaule à l’avant-bras du robot. Pour créer cette forme, nous allons commencer par dessiner un cercle et en faire une copie (Ctrl + C, Ctrl + V). Maintenant SSR un cercle pour être ajusté sur le côté du robot, et SSR l'autre pour s'adapter sur le dessus de l'avant-bras. Placez ces cercles sur l’épaule et le haut de l’avant-bras comme indiqué..
Utilisez l'outil Crayon (P) pour créer une nouvelle forme qui semble relier les deux cercles (comme indiqué). Sélectionnez les deux cercles et la forme qui les relie à l'aide de l'outil de sélection (V), puis cliquez sur Pathfinder> Ajouter à la zone de forme, puis sur Agrandir pour les fusionner en une seule forme..
Utilisez Ctrl + [et Ctrl +] pour positionner correctement cette forme derrière la crête sur l'avant-bras.
Pour fabriquer le cylindre creux de l’épaule, il est nécessaire de le scinder en deux parties: la partie située devant le bras et la partie située derrière..
Commencez par créer une copie du cercle d'épaule situé sur le côté du corps du robot (Ctrl + C, Ctrl + F). En utilisant les guides (appuyez sur Ctrl +; pour les activer), faites glisser le second cercle un peu pour donner de la profondeur au cylindre épaulier (voir le schéma ci-dessous)..
Utilisez l'outil Ajouter des points d'ancrage (+) pour ajouter des points sur les bords des deux cercles (voir le diagramme, ajouter des points sur les cercles rouges). Faites maintenant une copie des formes. Une copie de sera utilisée pour faire le devant de l’épaule et l’autre pour faire le dos.
Utilisez l'outil de sélection directe (A) pour supprimer les points inutiles sur les deux copies et obtenir deux lignes dans chaque cas. Utilisez l'outil Crayon (P) pour reconnecter les points. Repositionnez les morceaux ensemble, et voilà: un devant et un dos pour votre épaule.
Nous pouvons maintenant fabriquer la griffe du robot en utilisant une technique similaire à celle utilisée pour la fabrication de l'épaule..
Prenez les formes de griffes du SSR et alignez-les sur les guides. Lorsque vous alignez des formes, choisissez simplement un point sur une forme, alignez-le avec une ligne de guidage, puis assurez-vous de placer le point correspondant sur le deuxième objet au même endroit. Ici, j'ai choisi le coin supérieur gauche du carré de chaque griffe comme point de référence et, comme vous pouvez le constater, elles sont toutes deux positionnées sur la même ligne de repère..
Faites une copie de l'avant de la griffe et utilisez le côté comme référence de largeur (comme indiqué ci-dessous) pour positionner cette copie au dos de l'objet..
Après avoir utilisé la vue latérale de la griffe pour déterminer la largeur, la forme n'est plus nécessaire et nous pouvons la supprimer..
Nous allons commencer à remplir la griffe en faisant la forme verte dans l'objet ci-dessous. Faites une copie des deux moitiés de la griffe et supprimez tous les points qui ne formeront pas le côté de la griffe à l'aide de l'outil de sélection directe (A) et de la touche Suppr. Ensuite, utilisez l'outil Crayon (P) pour connecter les deux moitiés. Maintenant, nous pouvons replacer le côté de la griffe dans notre objet.
En utilisant la même technique, nous pouvons remplir l'intérieur de la griffe (violet) et, pour être complet, nous pouvons également créer le bord inférieur (bleu)..
Avec le bras avant fait, nous pouvons utiliser les mêmes méthodes pour construire l'autre bras du robot.
La majeure partie de ce bras peut être copiée directement du premier bras et modifiée à l’aide de l’outil de sélection directe. La main du robot, par exemple, est complètement identique, nous n'avons donc pas besoin de la redessiner. Rappelez-vous que les objets isométriques ont la même taille, quelle que soit leur distance par rapport au spectateur, contrairement à la perspective réelle, de sorte que la griffe du bras éloigné aura la même taille que celle du proche.
La dernière chose que nous allons ajouter au robot est son sac à dos. J'aime faire une copie de tout, regrouper chaque bras indépendamment (Ctrl + G) et ajuster la couleur de trait pour qu’elle soit plus claire. De cette façon, nous pouvons garder chaque partie du corps séparée pour les éditions futures (comme faire la vue arrière ou si nous voulions animer le robot) et cela vous aide à voir ce sur quoi vous travaillez en ce moment..
Utilisez la méthode SSR sur la vue latérale du sac à dos que nous avons dessiné plus tôt, puis positionnez-le sur le côté du robot. Comme le sac à dos est courbé, il ne nécessite pas beaucoup de travail pour s’adapter à la perspective isométrique. Si cela ne vous convient pas, utilisez l'outil de sélection directe (A) pour ajuster les points individuels..
Utilisez l'outil Crayon (P) pour tirer l'avant de la dragonne sur l'épaule du robot..
Ici, j'ai écarté la tête et le bras avant pour que nous puissions facilement voir où va le sac à dos. Une fois le sac à dos dessiné, nous pouvons rajouter ces formes.
Et le voilà! Pour l'unifier un peu, sélectionnez le robot entier et modifiez la largeur de trait à une valeur. Dans ce cas, j'ai choisi 1 pt, mais cela dépend de la taille de votre sprite..
Ce robot est maintenant prêt pour certaines couleurs!
La première étape consiste à changer la couleur de trait en quelque chose de moins dur que le noir. Ici, j'ai choisi le gris foncé, mais en fonction de votre sprite, vous pouvez mélanger certaines couleurs..
Ensuite, nous pouvons remplir certaines couleurs de base. Utilisez l'outil de sélection (V) pour sélectionner l'ensemble du robot (à l'exception des yeux), puis modifiez la couleur de remplissage en gris..
Sélectionnez les yeux, la bouche, le bouton et l'écran et modifiez-les pour qu'ils aient une couleur de remplissage de blanc. Colorez le sac à dos en orange et rendez le bouton rouge..
L'étape suivante consiste à choisir une direction pour la source de lumière. J'ai décidé de le faire venir de la gauche, donc face au robot.
Les ombres à partir de maintenant peuvent être aussi détaillées ou aussi simples que vous le souhaitez. J'ai choisi de garder l'ombrage relativement simple et d'ignorer le fait que certains objets peuvent créer des ombres sur d'autres. Cela facilitera l'utilisation ultérieure de l'image-objet dans les animations..
Commencez par sélectionner toutes les formes qui seront dans l'ombre et en changeant leur couleur de remplissage en gris foncé. Ensuite, sélectionnez toutes les formes qui seront directement dans la lumière et remplissez-les avec un gris plus clair. Pour les formes plates, cela est facile, mais les ombres sur les surfaces courbes nécessiteront plus de travail.
Pour illustrer la façon dont nous pouvons ombrer les surfaces courbes, considérons le corps du sac à dos..
Copiez cette forme et collez-la à l’avant avec Ctrl + C, Ctrl + F. Maintenant, supprimez le contour et définissez la couleur de remplissage sur orange foncé..
Nous pouvons maintenant utiliser l'outil Supprimer le point d'ancrage (-) pour réduire cette forme, puis l'outil de sélection directe (A) pour l'ajuster à la forme d'une ombre. Pour réparer le trait, nous faisons une autre copie du corps du sac à dos et nous le collons devant. Supprimez le remplissage de cette nouvelle forme et déplacez-le vers l'avant (Ctrl +]) pour le placer devant la forme de l'ombre..
Utilisez cette méthode pour créer des ombres sur le reste du sac à dos, ainsi que sur les autres surfaces courbes telles que les cylindres situés dans les bras et l'antenne..
Pour donner au robot un peu plus de caractère, nous pouvons ajouter des points forts à ses articulations et à ses pieds..
Ici, j'ai rendu les poignets et les pieds gris plus foncés et les coudes et les pieds plus clairs. J'ai également rendu les yeux un peu plus sombres pour les faire ressortir. Gardez à l'esprit la source de lumière lorsque vous ajoutez plus de couleurs, car vous devez garder les ombres cohérentes..
Pour que le robot se démarque un peu plus, on peut lui donner un contour légèrement plus épais..
Sélectionnez l'ensemble du robot, Copier et Coller devant (Ctrl + C, Ctrl + F). Cliquez sur Pathfinder> Ajouter à la zone de forme, puis sur Agrandir pour obtenir une seule forme combinée. Changez la couleur de remplissage en blanc afin que nous puissions clairement la nouvelle forme.
Cette forme sera probablement un peu désordonnée (en raison du fait que certaines formes ne sont pas parfaitement alignées) afin que nous puissions utiliser l'outil Supprimer les points d'ancrage (-) pour le nettoyer un peu en supprimant les points laids. Veillez à ce que les bords les plus extérieurs soient lisses, ce sera tout ce que nous pourrons voir lorsque nous aurons terminé.
Maintenant, utilisez la fenêtre Contour pour modifier le type de coin afin qu’il s’agisse de l’option du milieu, "Round Join". Cela rendra les coins lisses. Augmente la largeur de trait de cette forme à 3 points.
Sélectionnez la forme du contour et appuyez sur Ctrl + Maj + [pour envoyer cette forme à l’envers..
Voici une image des deux robots côte à côte: une avec les contours et une sans. Le contour unifie la forme du robot et l’aidera à se démarquer dans un contexte plus complexe..
Donnons quelque chose au robot. Puisqu'il va être utilisé sur un plateau de jeu isométrique, une tuile de jeu semble être un bon choix. Faites un carré puis faites un SSR pour qu’il soit plat comme le sommet d’un cube. Placez la tuile sous le robot en utilisant Ctrl + Shift + [pour la déplacer très à l’arrière.
Dans la dernière étape, nous allons donner au robot une ombre simple. Faites un cercle et faites-le SSR être à plat comme la tuile. Modifiez la couleur de remplissage en gris foncé, puis définissez son opacité sur environ 15%. Placez l'ombre en dessous de tout sauf de la tuile (Ctrl + Maj + [, puis Ctrl +] pour la déplacer d'un niveau).
Et voilà: un robot isométrique adorable. Utilisez ces techniques pour créer des sprites isométriques pour des jeux, des diagrammes techniques ou pour ajouter une touche 3D à vos conceptions..
Accentsconagua