Share
Peu de projets sont aussi amusants que d’élaborer des concepts de personnages de jeux vidéo. Les couleurs, les vêtements et le design général ont peu de limites pour l'artiste concept. Nous allons dessiner un caractère vectoriel prêt à être animé dans Adobe Illustrator et plus encore dans ce didacticiel en trois parties avec les équipes After Effects et Game Development de Tuts.+.
Notre série Kandi Runner est répartie sur trois tutoriels. Dans cette partie, vous apprendrez à créer le sprite de jeu vectoriel, mais vous devriez également consulter les deux autres tutoriels de la série..
Si vous souhaitez suivre ce tutoriel, vous pouvez télécharger le sketch.
Notre image de jeu sera de profil afin que la composante animation du cross-over puisse contenir un cycle de marche. En tant que tel, j'ai dessiné ma conception dans Adobe Photoshop CC. Commençons par des lignes rapides indiquant le style général du personnage et des proportions, puis se terminent par un motif encré plus foncé, prêt pour le traitement Adobe Illustrator. Notez que les proportions dans cette esquisse changent un peu au cours du tutoriel. La facilité de mise à l'échelle permet des changements rapides dans la taille de la tête et du corps, par rapport à un redessinage complet.
Pour la tête, j'ai commencé avec un cercle dessiné avec le Outil Ellipse (L). La partie inférieure de la face a été tracée à partir du croquis avec le Outil stylo (P). Unir les deux formes dans Éclaireur lorsque vous êtes satisfait du profil que vous avez créé.
Les cheveux sont faits dans de grandes sections colorées. Je voulais qu'elle ait des cheveux absolument massifs (presque comme une poupée de chiffon). Utilisez le Outil stylo dessiner chaque mèche de cheveux. Dix sont dessinés au total ici, et seront éventuellement séparés et soulignés individuellement pour pouvoir être animés. Pendant ce temps, Groupe (Control-G) vos morceaux de cheveux ensemble.
Afficher le visage dans le Couches panneau et assurez-vous que vous êtes satisfait de la façon dont les cheveux pendent autour de la tête, ainsi que cela ne masque pas le visage, qui sera tiré plus tard.
Déplacement sur les jambes et le torse. Commencez par la cuisse et le bas du personnage. Elle porte une sorte d'armure (j'imaginais qu'il s'agissait d'une sorte de jeu de casse-tête. Peut-être courrait-elle dans un véhicule volant et a-t-elle besoin de l'armure pour la protéger) et, par conséquent, sa couleur est violet-gris plutôt que gris uni Pour le moment, le corsage de la tenue est rose vif. Plus tard, je vais faire cette sarcelle. Ces trois pièces forment le torse et la cuisse, en s’arrêtant au genou.
Pour la jambe et le genou, dessinez une pièce pour le genou (comme un demi-cercle coudé) et suivez l'esquisse pour définir le contour du mollet et du bas du pied. J'ai arrêté la partie de la jambe en haut du pied avec l'idée du costume contenant des gueules d'antan (pensez au design de mode des années 1920). La pièce de pied inférieure est une forme séparée.
Pour la partie arrière de la chaussure, tracez une ellipse avec le Outil Ellipse, sélectionnez le morceau de jambe, et en utilisant le Outil de création de forme, sélectionnez la partie de l'ellipse située à l'extérieur du pied. Désélectionner et supprimer cette pièce supplémentaire.
Sur le côté gauche, vous verrez le personnage jusqu'à présent. Elle a un costume, mais a besoin d'un cou, d'une poitrine et d'un bras. Suivez le croquis et dessinez le cou et une partie de la poitrine. Placez-le derrière les morceaux de torse dans le Couches panneau.
Pour le bras, j'ai commencé avec une ellipse (représentant l'épaule) et j'ai ajouté un bras qui s'indente au coude. Si vous animez ce personnage, vous pouvez séparer le biceps de l'avant-bras pour plus de mouvement. Le bras s'arrête un peu au poignet où j'ai dessiné une forme qui indique la paume de la main..
Pour la main, j'ai caché les formes des bras afin que nous puissions nous concentrer sur l'ajout de doigts à la paume. En utilisant le Outil stylo, J'ai dessiné une forme de rectangle arrondi (celle-ci a cependant un côté plat et un côté incurvé) pour le pouce. Utilisez le Outil Rectangle Arrondi pour les autres doigts. J'ai lancé le petit doigt pour que la main ne soit pas trop raide.
Avant d’arriver aux contours et à l’ombrage du personnage, concentrons-nous d’abord sur certaines modifications et ajouts. Sélectionnez les morceaux de torse et de jambe, Groupe ensemble pour le moment et agrandir un peu. Voir ci-dessous pour la comparaison entre le corps élargi et le plus petit. De cette façon, elle a un grand torse et des jambes plus longues pour équilibrer sa grosse tête (et probablement lourde).
Le dos du personnage est un peu petit et peu profond, j'ai donc tiré le point d'ancrage le plus à droite de la forme d'origine. En outre, j’ai ajouté une chemise à col haut pour elle en la dessinant sur la forme de la poitrine avec une forme gris violet foncé, en sélectionnant à la fois la forme de la poitrine et celle de la chemise et, avec le Outil de création de forme sélectionner la partie non croisée de la forme de la chemise. Désélectionnez les deux et supprimez les morceaux de chemise en excès. Placez la chemise au-dessus de la pièce de contrôle dans le Couches panneau.
Au lieu d'un gant complet, j'ai opté pour un gant avec une ligne de poignet inférieure. Pour ce faire, changez la couleur du gant actuel en fonction du teint de votre personnage. ensuite, Copier (Control-C) et Coller (Contrôle-V) la main, alignez-vous sur l’original et tracez un cercle avec le Outil Ellipse. Sélectionnez la nouvelle main et l'ellipse et Minus Front dans Éclaireur.
Construisons des coeurs. Tracez un cercle avec le Outil Ellipse et en utilisant le Outil de sélection directe (A), tirez le point d’ancrage inférieur vers le bas pour obtenir une moitié de coeur. Copie et Coller la moitié du cœur et retournez-le sur un axe vertical. Une fois aligné au centre, Unir dans Éclaireur.
Copie et Coller trois cœurs le long de la cuisse du personnage. Ceux-ci devraient être couleur de peau. Ajoutez également un cœur plus petit et inversé au gant.
Pour l’œil, concentrez-vous sur quatre éléments: les cils supérieurs et inférieurs, une goutte blanche pour les larmes du côté de l’œil et une ellipse mince pour l’iris. Tous ont été dessinés avec le Outil stylo, sauf pour l'iris qui a été fait avec le Outil Ellipse.
Les autres traits nécessaires sont les sourcils, la lèvre supérieure (tous les deux bleu foncé), la narine et le pli nasal (une forme) et une lèvre inférieure (de la même couleur que la narine). Vous pouvez entrer plus de détails sur le visage si vous le souhaitez, mais cela lui donne suffisamment de fonctionnalités pour créer du caractère sans surcharger le design général..
Pour les contours de la tête et des cheveux, si vous animez ce motif, vous voudrez décrire la tête et chaque mèche de cheveux séparément. Pour les besoins de cette partie du didacticiel, j'ai montré le processus ci-dessous comme si vous gardiez la tête et les cheveux ensemble en un seul morceau.
Groupe ensemble la tête et les groupes de cheveux, Copie et Coller, Unir dans Éclaireur, et Aligner tête / groupe de cheveux et placez-le derrière le groupe tête / cheveux dans le Couches panneau. Répétez le processus pour le groupe de cheveux (sans tête). Chaque forme doit avoir un Poids de l'AVC de 1 à 2 points.
Pour l’ombre portée par sa coiffure massive, dessinez une forme qui épouse le contour de son visage et s’étend entre le pont du nez et le côté du visage. Sélectionnez la forme de la tête et de l'ombre, puis utilisez les touches Outil de création de forme, sélectionnez la partie de la forme d'ombre qui ne croise pas la tête. Désélectionnez les deux et supprimez la forme sans intersection. Placez l’ombre au-dessus de la tête mais sous les traits du visage dans le Couches.
Pour l'oreille, c'est une sorte de "D" majuscule arrondi. L'intérieur de l'oreille peut être en forme de "C", de "S" ou d'un gribouillis étrange comme celui que j'ai dessiné.. Groupe ensemble et placez-le sous les cheveux, au-dessus de la tête et du visage.
Avant d'ombrager les cheveux, décrivez chaque section de cheveux. Vous pouvez soit ajouter un trait finement pondéré à chaque section, soit suivre le processus de la section six, étape deux pour chaque section de cheveux..
Pour les ombres sur les cheveux, recolorer chaque section de cheveux comme une version plus sombre de cette teinte. Puis, en utilisant le Outil stylo, dessinez des formes de surbrillance sur les bords extérieurs de chaque mèche de cheveux. Supprimer avec le Outil de création de forme, comme fait précédemment.
Étant donné que la majeure partie de la poitrine n'est plus visible et qu'il y a beaucoup de poils autour du cou, recolorez la pièce de poitrine en fonction de l'ombre mauve utilisée précédemment. Dessinez une forme sur le côté droit de l'épaule. Nous utiliserons cette ombre comme guide pour les autres ombres du corps en termes d’emplacement. Sélectionnez l'épaule et la forme de l'ombre, utilisez les touches Outil de création de forme pour sélectionner la partie de la forme d'ombre ne se croisant pas, désélectionnez et supprimez-la pour obtenir une ombre propre sur l'épaule. Placez la forme d’ombre sous les vêtements dans le Couches panneau.
L'ombre sur le bras suit la même ligne que celle sur l'épaule et s'éloigne du coude. Si votre bras est en deux groupes, vous pouvez séparer les deux pièces en les sélectionnant avec le bouton Outil de création de forme et les pièces du bras principal sélectionnées. Suivez les mêmes étapes pour les ombres sur le gant.
J'ai ajouté des rayures sur le haut de la manche avec le Outil stylo définir comme 0,25 pt de poids. Développer chaque bande dans Objet, et supprimez les parties des rayures qui chevauchent le haut du manchon et la ligne tracée à travers le manchon avec le Outil de création de forme.
L’ombre sur le torse est gris violet foncé avec le Opacité à 40%. Des formes de surbrillance ont également été ajoutées sur les côtés gauche du torse. Étant donné que ce personnage est ombré, aucun dégradé n'est utilisé, mais si vous souhaitez une conception plus complexe, foncez.!
Continuez à dessiner des formes d’ombre sur le bas du corps. Commencez par la cuisse (les autres parties du corps ont été cachées dans la Couches panneau) et suivez la courbe de la jambe. Dessinez des formes d'ombre transparentes pour chaque cœur. Supprimer les parties de l’ombre qui ne se croisent pas avec le Outil de création de forme. Ajoutez des contours pour chaque coeur aussi.
Pour le bas de la jambe, je voulais ajouter des guêtres rose vif. La forme débute à l'arrière et présente un grand arc dramatique jusqu'à l'avant du pied. Supprimez la partie non croisée de l'avant du pied / de la jambe (laissez celle-ci à l'arrière, car elle fait partie du motif). Ajoutez quelques formes de dard rose foncé pour un look plissé sur les guêtres. Dessinez des ombres et des reflets sur la jambe, semblables à ceux de la cuisse et du torse.
Comme cela sera animé, je dois ajouter une jambe et un bras supplémentaires. Copie et Coller le groupe des bras et le groupe des jambes. Supprimer les détails de la manche, les ombres et les rehauts et tout recolorer en couleurs.
Pour une main supplémentaire, celle-ci en boule dans un poing, Copie et Coller la première main et Dissocier les composants. Déplacez la partie gant sur le côté et remodelez le pouce pour qu’il forme une petite bosse sur le côté gauche. Déplacer les doigts dans la paume.
Unir la nouvelle main dans Éclaireur, et créez un nouveau gant de la même manière que le premier a été dessiné. Ajoutez un coeur avec une ombre (j'ai utilisé le même, juste redimensionné pour moins d’espace), une ligne indiquant le bout du gant et une ombre qui se connecte à l’ombre de la main. Ajouter un contour pour correspondre à celui du bras.
Pour la main de l'autre côté, Copie et Coller le poing, effacez les détails du gant et recolorez en sarcelle noire. En utilisant le Outil Rectangle Arrondi dessiner des petits doigts et un pouce avec un 0,75 pt de poids dans la même couleur sombre utilisée pour d'autres contours.
Le sprite est enfin prêt à partir. Chaque groupe qui se déplace (ou peut être déplacé) pendant l’animation est regroupé et étiqueté pour organisation dans le Couches panneau. J'ai ajouté un arrière-plan et un contour supplémentaire sur chaque composant pour l'image finale, mais il ne sera pas présent pour les deux prochains tutoriels. J'espère que vous avez aimé dessiner ce sprite avec ce jeu et continuer avec les deux sections suivantes de ce projet.
Accentsconagua